add meta

lifeparticle · Sep 23, 2023 · b1fd882 · b1fd882
1 parent 15c3880
commit b1fd882
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 11 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -3,13 +3,9 @@
 	<head>
 		<!-- Basic Meta Tags -->
 		<meta charset="UTF-8" />
-		<title>BinaryTree: Developer Productivity Tools</title>
 
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta
-			name="description"
-			content="At binarytree.dev, we offer an array of developer productivity tools to help you save time. With 16 ever-growing features, our platform evolves to meet your needs."
-		/>
+
 		<meta
 			name="keywords"
 			content="Developer Tools, Productivity, BinaryTree.dev, Coding, Software Development"

diff --git a/ui/package.json b/ui/package.json
@@ -34,6 +34,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-error-boundary": "^4.0.10",
+		"react-head": "^3.4.2",
 		"react-markdown": "6",
 		"react-router-dom": "^6.11.1",
 		"react-syntax-highlighter": "^15.5.0",

diff --git a/ui/src/components/Hoc/withPageTitle/utils/hooks.ts b/ui/src/components/Hoc/withPageTitle/utils/hooks.ts
@@ -11,7 +11,12 @@ const usePageTitle = () => {
 	};
 
 	const { title, description, id } = page;
-	return [title, description, HELP[id] || ""];
+	return [
+		title,
+		description,
+		HELP[id] || "",
+		`https://binarytree.dev${pathname}`,
+	];
 };
 
 export default usePageTitle;
diff --git a/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx b/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx
@@ -3,16 +3,30 @@ import style from "./withPageTitle.module.scss";
 import HelpIcon from "components/General/HelpIcon";
 import { Space } from "antd";
 import usePageTitle from "./utils/hooks";
+import { HeadProvider, Title, Link, Meta } from "react-head";
 
 const withPageTitle = <T extends object>(
 	WrappedComponent: React.ComponentType<T>
 ) => {
 	const WithPageTitle = (props: T) => {
-		const [title, description, helpText] = usePageTitle();
+		const [title, description, helpText, url] = usePageTitle();
 
 		return (
-			<div className={title === "Home" ? "" : style.withpagetitle}>
-				{title !== "Home" && (
+			<div
+				className={
+					title === "BinaryTree: Developer Productivity Tools"
+						? ""
+						: style.withpagetitle
+				}
+			>
+				<HeadProvider>
+					<div className="Home">
+						<Title>{title}</Title>
+						<Link rel="canonical" href={url} />
+						<Meta name="description" content={description} />
+					</div>
+				</HeadProvider>
+				{title !== "BinaryTree: Developer Productivity Tools" && (
 					<>
 						<Space align="center">
 							<Text text={title} level={3} />

diff --git a/ui/src/pages/Routes/utils/constant.tsx b/ui/src/pages/Routes/utils/constant.tsx
@@ -285,8 +285,9 @@ export const routes: Route[] = [
 	{
 		id: "/",
 		path: "/",
-		title: "Home",
-		description: "",
+		title: "BinaryTree: Developer Productivity Tools",
+		description:
+			"At binarytree.dev, we offer an array of developer productivity tools to help you save time. With 16 ever-growing features, our platform evolves to meet your needs.",
 		component: Home,
 	},
 	{

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -3130,6 +3130,7 @@ __metadata:
     react: ^18.2.0
     react-dom: ^18.2.0
     react-error-boundary: ^4.0.10
+    react-head: ^3.4.2
     react-markdown: 6
     react-router-dom: ^6.11.1
     react-syntax-highlighter: ^15.5.0
@@ -8229,6 +8230,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-head@npm:^3.4.2":
+  version: 3.4.2
+  resolution: "react-head@npm:3.4.2"
+  dependencies:
+    "@babel/runtime": ^7.11.2
+  peerDependencies:
+    react: ">=16.3"
+    react-dom: ">=16.3"
+  checksum: f752014d41f65029e2e759625fd07dbaedd24f96e267f35e41e0f707d47ebfe2854b4409a483e89797f3edb9e8ac42571701ee7aec12c18d4e5aa77766bddc27
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"