feat: react helmet

.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

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
 

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",

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>
+  );
 }

src/pages/string/split/index.tsx

@@ -186,14 +186,12 @@ export default function SplitText() {
   });
 
   return (
-    <ToolLayout>
-      <ToolHeader
-        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."
-        }
-      />
-
+    <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} />