feat: react helmet

2025-09-19 22:19:36 +02:00 · 2024-06-22 20:38:03 +01:00
parent e2a5165b19
commit 17ba68be34
7 changed files with 126 additions and 47 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -35,7 +35,6 @@ jobs:
        with:
          publish-dir: ./dist
          production-branch: main
-          deploy-message: Deploy from GitHub Actions
          enable-pull-request-comment: true
          enable-commit-comment: true
          overwrites-pull-request-comment: true
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,7 +4,16 @@
    <option name="autoReloadType" value="SELECTIVE" />
  </component>
  <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: remove prebuild" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: idea config">
+      <change beforePath="$PROJECT_DIR$/.github/workflows/ci.yml" beforeDir="false" afterPath="$PROJECT_DIR$/.github/workflows/ci.yml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/omni-tools.iml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/omni-tools.iml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/Readme.md" beforeDir="false" afterPath="$PROJECT_DIR$/Readme.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" 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/pages/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/index.tsx" afterDir="false" />
+    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -32,32 +41,32 @@
    <option name="hideEmptyMiddlePackages" value="true" />
    <option name="showLibraryContents" value="true" />
  </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "ASKED_ADD_EXTERNAL_FILES": "true",
-    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "git-widget-placeholder": "main",
-    "ignore.virus.scanning.warn.message": "true",
-    "kotlin-language-version-configured": "true",
-    "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/public",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "npm.dev.executor": "Run",
-    "npm.prebuild.executor": "Run",
-    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
-    "project.structure.last.edited": "Problems",
-    "project.structure.proportion": "0.0",
-    "project.structure.side.proportion": "0.2",
-    "settings.editor.selected.configurable": "settings.typescriptcompiler",
-    "ts.external.directory.path": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
+    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/HP/IdeaProjects/omni-tools/public&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
+    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
+    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
+    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
  }
-}]]></component>
+}</component>
  <component name="ReactDesignerToolWindowState">
    <option name="myId2Visible">
      <map>
@@ -76,7 +85,7 @@
      <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\images" />
    </key>
  </component>
-  <component name="RunManager" selected="npm.prebuild">
+  <component name="RunManager" selected="npm.dev">
    <configuration name="dev" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
      <package-json value="$PROJECT_DIR$/package.json" />
      <command value="run" />
@@ -99,8 +108,8 @@
    </configuration>
    <recent_temporary>
      <list>
-        <item itemvalue="npm.prebuild" />
        <item itemvalue="npm.dev" />
+        <item itemvalue="npm.prebuild" />
      </list>
    </recent_temporary>
  </component>
@@ -119,7 +128,8 @@
      <workItem from="1718998317252" duration="8533000" />
      <workItem from="1719006887776" duration="7000" />
      <workItem from="1719006951159" duration="2377000" />
-      <workItem from="1719021128819" duration="3041000" />
+      <workItem from="1719021128819" duration="3239000" />
+      <workItem from="1719083989394" duration="1047000" />
    </task>
    <task id="LOCAL-00001" summary="feat: use vite and ts">
      <option name="closed" value="true" />
@@ -281,7 +291,15 @@
      <option name="project" value="LOCAL" />
      <updated>1719023691491</updated>
    </task>
-    <option name="localTasksCounter" value="21" />
+    <task id="LOCAL-00021" summary="chore: idea config">
+      <option name="closed" value="true" />
+      <created>1719024346455</created>
+      <option name="number" value="00021" />
+      <option name="presentableId" value="LOCAL-00021" />
+      <option name="project" value="LOCAL" />
+      <updated>1719024346455</updated>
+    </task>
+    <option name="localTasksCounter" value="22" />
    <servers />
  </component>
  <component name="TypeScriptGeneratedFilesManager">
@@ -319,7 +337,8 @@
    <MESSAGE value="feat: conventional commit" />
    <MESSAGE value="test: init" />
    <MESSAGE value="chore: remove prebuild" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: remove prebuild" />
+    <MESSAGE value="chore: idea config" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: idea config" />
  </component>
  <component name="XSLT-Support.FileAssociations.UIState">
    <expand />
--- a/Readme.md
+++ b/Readme.md
@@ -2,8 +2,7 @@

 Welcome to **OmniTools**, an open-source alternative to OnlineTools.com.
 This project offers a variety of online tools to help with everyday tasks,
-all available for free and open for community contributions. Our goal is to provide reliable and
-efficient online tools while fostering a community-driven development process.
+all available for free and open for community contributions. Please don't forget to star the repo if you find it useful.

 ## Table of Contents

--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
        "notistack": "^3.0.1",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
+        "react-helmet": "^6.1.0",
        "react-router-dom": "^6.23.1",
        "yup": "^1.4.0"
      },
@@ -29,6 +30,7 @@
        "@types/node": "^20.12.12",
        "@types/react": "^18.3.3",
        "@types/react-dom": "^18.3.0",
+        "@types/react-helmet": "^6.1.11",
        "@typescript-eslint/eslint-plugin": "^6.21.0",
        "@typescript-eslint/parser": "^6.21.0",
        "@vitejs/plugin-react-swc": "^3.7.0",
@@ -2478,6 +2480,15 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/react-helmet": {
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
+      "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/react-transition-group": {
      "version": "4.4.10",
      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
@@ -6931,6 +6942,25 @@
      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/react-helmet/node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -6967,6 +6997,14 @@
        "react-dom": ">=16.8"
      }
    },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-transition-group": {
      "version": "4.4.5",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
    "notistack": "^3.0.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
    "react-router-dom": "^6.23.1",
    "yup": "^1.4.0"
  },
@@ -44,6 +45,7 @@
    "@types/node": "^20.12.12",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
+    "@types/react-helmet": "^6.1.11",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
    "@vitejs/plugin-react-swc": "^3.7.0",
--- a/src/components/ToolLayout.tsx
+++ b/src/components/ToolLayout.tsx
@@ -1,7 +1,31 @@
-import {Box} from "@mui/material";
-import {ReactNode} from "react";
+import { Box } from '@mui/material';
+import React, { ReactNode } from 'react';
+import { Helmet } from 'react-helmet';
+import ToolHeader from './ToolHeader';

-export default function ToolLayout({children}: { children: ReactNode }) {
-  return (<Box width={'100%'} display={'flex'} flexDirection={'column'} alignItems={'center'}><Box
-    width={'85%'}>{children}</Box></Box>)
+export default function ToolLayout({
+  children,
+  title,
+  description
+}: {
+  title: string;
+  description: string;
+  children: ReactNode;
+}) {
+  return (
+    <Box
+      width={'100%'}
+      display={'flex'}
+      flexDirection={'column'}
+      alignItems={'center'}
+    >
+      <Helmet>
+        <title>{`${title} - Omni Tools`}</title>
+      </Helmet>
+      <Box width={'85%'}>
+        <ToolHeader title={title} description={description} />
+        {children}
+      </Box>
+    </Box>
+  );
 }
--- a/src/pages/string/split/index.tsx
+++ b/src/pages/string/split/index.tsx
@@ -186,14 +186,12 @@ export default function SplitText() {
  });

  return (
-    <ToolLayout>
-      <ToolHeader
+    <ToolLayout
      title={'Text Splitter'}
      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."
      }
-      />
-
+    >
      <Grid container spacing={2}>
        <Grid item xs={6}>
          <ToolTextInput value={input} onChange={setInput} />