feat: shortDescription

.idea/workspace.xml

@@ -6,8 +6,23 @@
   <component name="ChangeListManager">
     <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: create transparent png">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolLayout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolLayout.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/examples/ExampleCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ExampleCard.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/examples/Examples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/Examples.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/image/png/create-transparent/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/create-transparent/service.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/number/sum/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/join/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/split/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/to-morse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/to-morse/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/tools/defineTool.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/defineTool.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/tools/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/index.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -17,6 +32,9 @@
   <component name="FormatOnSaveOptions">
     <option name="myRunOnSave" value="true" />
   </component>
+  <component name="Git.Merge.Settings">
+    <option name="BRANCH" value="origin/main" />
+  </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
     <option name="RESET_MODE" value="HARD" />
@@ -36,39 +54,39 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
+  <component name="PropertiesComponent"><![CDATA[{
-  &quot;keyToString&quot;: {
+  "keyToString": {
-    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
+    "ASKED_ADD_EXTERNAL_FILES": "true",
-    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    "RunOnceActivity.ShowReadmeOnStart": "true",
-    &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
+    "Vitest.compute function (1).executor": "Run",
-    &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
+    "Vitest.compute function.executor": "Run",
-    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
+    "Vitest.mergeText.executor": "Run",
-    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
+    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
-    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
+    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
-    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
+    "git-widget-placeholder": "string-join",
-    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    "ignore.virus.scanning.warn.message": "true",
-    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
+    "kotlin-language-version-configured": "true",
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/HP/IdeaProjects/omni-tools/src/assets&quot;,
+    "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/assets",
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    "node.js.detected.package.eslint": "true",
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    "node.js.detected.package.tslint": "true",
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    "node.js.selected.package.eslint": "(autodetect)",
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    "node.js.selected.package.tslint": "(autodetect)",
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    "nodejs_package_manager_path": "npm",
-    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    "npm.dev.executor": "Run",
-    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
+    "npm.prebuild.executor": "Run",
-    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
+    "npm.script:create:tool.executor": "Run",
-    &quot;npm.test.executor&quot;: &quot;Run&quot;,
+    "npm.test.executor": "Run",
-    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
+    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
-    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
+    "project.structure.last.edited": "Problems",
-    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
+    "project.structure.proportion": "0.0",
-    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
+    "project.structure.side.proportion": "0.2",
-    &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
+    "settings.editor.selected.configurable": "settings.typescriptcompiler",
-    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
+    "ts.external.directory.path": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>

scripts/create-tool.mjs

@@ -83,6 +83,7 @@ export const tool = defineTool('${type}', {
   path: '${toolName}',
   // image,
   description: '',
+  shortDescription: '',
   keywords: ['${toolName.split('-').join('\', \'')}'],
   component: lazy(() => import('./index'))
 });

src/components/ToolInputAndResult.tsx

@@ -9,7 +9,7 @@ export default function ToolInputAndResult({
   result: ReactNode;
 }) {
   return (
-    <Grid container spacing={2}>
+    <Grid id="tool" container spacing={2}>
       <Grid item xs={6}>
         {input}
       </Grid>

src/components/ToolLayout.tsx

@@ -2,18 +2,33 @@ import { Box } from '@mui/material';
 import React, { ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 import ToolHeader from './ToolHeader';
+import Separator from '@tools/Separator';
+import AllTools from './allTools/AllTools';
+import { getToolsByCategory } from '@tools/index';
 
 export default function ToolLayout({
   children,
   title,
   description,
-  image
+  image,
+  type
 }: {
   title: string;
   description: string;
   image?: string;
   children: ReactNode;
+  type: string;
 }) {
+  const otherCategoryTools =
+    getToolsByCategory()
+      .find((category) => category.type === type)
+      ?.tools.filter((tool) => tool.name !== title)
+      .map((tool) => ({
+        title: tool.name,
+        description: tool.shortDescription,
+        link: '/' + tool.path
+      })) ?? [];
+
   return (
     <Box
       width={'100%'}
@@ -27,6 +42,8 @@ export default function ToolLayout({
       <Box width={'85%'}>
         <ToolHeader title={title} description={description} image={image} />
         {children}
+        <Separator backgroundColor="#5581b5" margin="50px" />
+        <AllTools title="All Text Tools" toolCards={otherCategoryTools} />
       </Box>
     </Box>
   );

src/components/allTools/ToolCard.tsx

@@ -1,17 +1,21 @@
 import { Box, Link, Card, CardContent, Typography } from '@mui/material';
 import { ToolCardProps } from './AllTools';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { useNavigate } from 'react-router-dom';
 
 export default function ToolCard({ title, description, link }: ToolCardProps) {
+  const navigate = useNavigate();
   return (
     <Card
+      onClick={() => navigate(link)}
       raised
       sx={{
         borderRadius: 2,
         bgcolor: '#5581b5',
         borderColor: '#5581b5',
         color: '#fff',
-        boxShadow: '6px 6px 12px #b8b9be, -6px -6px 12px #fff'
+        boxShadow: '6px 6px 12px #b8b9be, -6px -6px 12px #fff',
+        cursor: 'pointer'
       }}
     >
       <CardContent>

src/components/examples/ExampleCard.tsx

@@ -5,7 +5,8 @@ import {
   Card,
   CardContent,
   Typography,
-  TextField
+  TextField,
+  useTheme
 } from '@mui/material';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import RequiredOptions from './RequiredOptions';
@@ -18,11 +19,12 @@ export default function ExampleCard({
   requiredOptions,
   changeInputResult
 }: ExampleCardProps) {
+  const theme = useTheme();
   return (
     <Card
       raised
       sx={{
-        bgcolor: '#d1d9e6',
+        bgcolor: theme.palette.background.default,
         height: '100%',
         overflow: 'hidden',
         borderRadius: 2,

src/components/examples/Examples.tsx

@@ -28,7 +28,7 @@ export default function Examples({
   exampleCards
 }: ExampleProps) {
   return (
-    <Box mt={4}>
+    <Box id={'examples'} mt={4}>
       <Box mt={4} display="flex" gap={1} alignItems="center">
         <Typography mb={2} fontSize={30} color={'primary'}>
           {title}

src/components/input/ToolTextInput.tsx

@@ -46,7 +46,7 @@ export default function ToolTextInput({
     fileInputRef.current?.click();
   };
   return (
-    <Box id="tool">
+    <Box>
       <InputHeader title={title} />
       <TextField
         value={value}

src/pages/home/index.tsx

@@ -89,7 +89,7 @@ export default function Home() {
             >
               <Box>
                 <Typography fontWeight={'bold'}>{option.name}</Typography>
-                <Typography fontSize={12}>{option.description}</Typography>
+                <Typography fontSize={12}>{option.shortDescription}</Typography>
               </Box>
             </Box>
           )}

src/pages/image/png/change-colors-in-png/meta.ts

@@ -8,6 +8,7 @@ export const tool = defineTool('png', {
   image,
   description:
     "World's simplest online Portable Network Graphics (PNG) color changer. Just import your PNG image in the editor on the left, select which colors to change, and you'll instantly get a new PNG with the new colors on the right. Free, quick, and very powerful. Import a PNG – replace its colors.",
+  shortDescription: 'Quickly swap colors in a PNG image',
   keywords: ['change', 'colors', 'in', 'png'],
   component: lazy(() => import('./index'))
 });

src/pages/image/png/create-transparent/meta.ts

@@ -6,6 +6,7 @@ export const tool = defineTool('png', {
   name: 'Create transparent PNG',
   path: 'create-transparent',
   image,
+  shortDescription: 'Quickly make a PNG image transparent',
   description:
     "World's simplest online Portable Network Graphics transparency maker. Just import your PNG image in the editor on the left and you will instantly get a transparent PNG on the right. Free, quick, and very powerful. Import a PNG – get a transparent PNG.",
   keywords: ['create', 'transparent'],

src/pages/number/sum/meta.ts

@@ -8,6 +8,7 @@ export const tool = defineTool('number', {
   // image,
   description:
     'Quickly calculate the sum of numbers in your browser. To get your sum, just enter your list of numbers in the input field, adjust the separator between the numbers in the options below, and this utility will add up all these numbers.',
+  shortDescription: 'Quickly sum numbers',
   keywords: ['sum'],
   component: lazy(() => import('./index'))
 });

src/pages/string/join/index.tsx

@@ -113,39 +113,6 @@ s
   }
 ];
 
-const toolCards = [
-  {
-    title: 'Split Text',
-    description: 'Quickly split text into chunks.',
-    link: '/string/split'
-  },
-  {
-    title: 'Join Text',
-    description: 'Quickly merge lines of text together via a delimiter.',
-    link: '/string/join'
-  },
-  {
-    title: 'Join Text',
-    description: 'Quickly merge lines of text together via a delimiter.',
-    link: '/string/join'
-  },
-  {
-    title: 'Join Text',
-    description: 'Quickly merge lines of text together via a delimiter.',
-    link: '/string/join'
-  },
-  {
-    title: 'Join Text',
-    description: 'Quickly merge lines of text together via a delimiter.',
-    link: '/string/join'
-  },
-  {
-    title: 'Join Text',
-    description: 'Quickly merge lines of text together via a delimiter.',
-    link: '/string/join'
-  }
-];
-
 export default function JoinText() {
   const [input, setInput] = useState<string>('');
   const { showSnackBar } = useContext(CustomSnackBarContext);
@@ -246,8 +213,6 @@ export default function JoinText() {
           changeInputResult
         }))}
       />
-      <Separator backgroundColor="#5581b5" margin="50px" />
-      <AllTools title="All Text Tools" toolCards={toolCards} />
     </Box>
   );
 }

src/pages/string/join/meta.ts

@@ -8,6 +8,7 @@ export const tool = defineTool('string', {
   image,
   description:
     "World's Simplest Text Tool World's simplest browser-based utility for joining text. Load your text in the input form on the left and you'll automatically get merged text on the right. Powerful, free, and fast. Load text – get joined lines",
+  shortDescription: 'Quickly merge texts',
   keywords: ['text', 'join'],
   component: lazy(() => import('./index'))
 });

src/pages/string/split/meta.ts

@@ -8,6 +8,7 @@ export const tool = defineTool('string', {
   image,
   description:
     "World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks.",
+  shortDescription: 'Quickly split a text',
   keywords: ['text', 'split'],
   component: lazy(() => import('./index'))
 });

src/pages/string/to-morse/meta.ts

@@ -8,6 +8,7 @@ export const tool = defineTool('string', {
   // image,
   description:
     "World's simplest browser-based utility for converting text to Morse code. Load your text in the input form on the left and you'll instantly get Morse code in the output area. Powerful, free, and fast. Load text – get Morse code.",
+  shortDescription: 'Quickly encode text to morse',
   keywords: ['to', 'morse'],
   component: lazy(() => import('./index'))
 });

src/tools/defineTool.tsx

@@ -8,6 +8,7 @@ interface ToolOptions {
   image?: string;
   name: string;
   description: string;
+  shortDescription: string;
 }
 
 export interface DefinedTool {
@@ -15,6 +16,7 @@ export interface DefinedTool {
   path: string;
   name: string;
   description: string;
+  shortDescription: string;
   image?: string;
   keywords: string[];
   component: () => JSX.Element;
@@ -24,7 +26,15 @@ export const defineTool = (
   basePath: string,
   options: ToolOptions
 ): DefinedTool => {
-  const { image, path, name, description, keywords, component } = options;
+  const {
+    image,
+    path,
+    name,
+    description,
+    keywords,
+    component,
+    shortDescription
+  } = options;
   const Component = component;
   return {
     type: basePath,
@@ -32,10 +42,16 @@ export const defineTool = (
     name,
     image,
     description,
+    shortDescription,
     keywords,
     component: () => {
       return (
-        <ToolLayout title={name} description={description} image={image}>
+        <ToolLayout
+          type={basePath}
+          title={name}
+          description={description}
+          image={image}
+        >
           <Component />
         </ToolLayout>
       );

src/tools/index.ts

@@ -38,6 +38,7 @@ export const filterTools = (
     (tool) =>
       tool.name.toLowerCase().includes(lowerCaseQuery) ||
       tool.description.toLowerCase().includes(lowerCaseQuery) ||
+      tool.shortDescription.toLowerCase().includes(lowerCaseQuery) ||
       tool.keywords.some((keyword) =>
         keyword.toLowerCase().includes(lowerCaseQuery)
       )
@@ -49,6 +50,7 @@ export const getToolsByCategory = (): {
   description: string;
   type: string;
   example: { title: string; path: string };
+  tools: DefinedTool[];
 }[] => {
   const grouped: Partial<Record<string, DefinedTool[]>> = Object.groupBy(
     tools,
@@ -60,6 +62,7 @@ export const getToolsByCategory = (): {
       description:
         categoriesDescriptions.find((desc) => desc.type === type)?.value ?? '',
       type,
+      tools: tls ?? [],
       example: tls
         ? { title: tls[0].name, path: tls[0].path }
         : { title: '', path: '' }