up: metadata seo

khumam · Oct 17, 2023 · 71c4ddd · 71c4ddd
1 parent 4a29313
commit 71c4ddd
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "react": "18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.2.0",
+    "react-helmet": "^6.1.0",
     "react-markdown": "^9.0.0",
     "react-responsive-carousel": "^3.2.23",
     "react-syntax-highlighter": "^15.5.0",
@@ -38,6 +39,7 @@
     "@types/react": "^18.2.20",
     "@types/react-copy-to-clipboard": "^5.0.5",
     "@types/react-dom": "^18.2.7",
+    "@types/react-helmet": "^6.1.7",
     "@types/react-syntax-highlighter": "^15.5.7",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",

diff --git a/src/components/base/index.tsx b/src/components/base/index.tsx
@@ -1,5 +1,5 @@
 import { type NextPage } from "next";
-import Head from "next/head";
+import { Helmet } from "react-helmet";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
@@ -8,14 +8,10 @@ import { Menu, X } from 'lucide-react';
 
 interface Props {
   children: React.ReactNode[] | React.ReactNode
-  title: string | undefined
-  description: string | undefined
 }
 
 const Base: NextPage<Props> = ({
-  children,
-  title = null,
-  description = null
+  children
 }) => {
   const [isNavbarHidden, setIsNavbarHidden] = useState(true);
   const handleNavbar = () => {
@@ -24,22 +20,22 @@ const Base: NextPage<Props> = ({
 
   return (
     <>
-      <Head>
+      <Helmet>
         <title>Fastcard | Developer Guide</title>
         <link rel="icon" type="image/png" href="/favicon.png" />
-        <meta name="description" content={description ?? "Fastcard.dev helps you understand the basic knowledge about everything in the developer world."}/>
+        <meta name="description" content="Fastcard.dev helps you understand the basic knowledge about everything in the developer world."/>
         <meta property="og:url" content="https://fastcard.dev"/>
-        <meta property="og:title" content={title ?? "Developer Fastcard"} />
-        <meta property="og:description" content={description ?? "Fastcard.dev helps you understand the basic knowledge about everything in the developer world."}/>
+        <meta property="og:title" content="Fastcard | Developer Guide" />
+        <meta property="og:description" content="Fastcard.dev helps you understand the basic knowledge about everything in the developer world."/>
         <meta property="og:image" content="https://fastcard.dev/favicon.png"/>
         <meta name="twitter:card" content="summary_large_image"/>
-        <meta property="twitter:domain" content="fastcard.dev"/>
+        <meta property="twitter:domain" content="https://fastcard.dev"/>
         <meta property="twitter:url" content="https://fastcard.dev"/>
-        <meta name="twitter:title" content={title ?? "Developer Fastcard"}/>
-        <meta name="twitter:description" content={description ?? "Fastcard.dev helps you understand the basic knowledge about everything in the developer world."}/>
+        <meta name="twitter:title" content="Fastcard | Developer Guide"/>
+        <meta name="twitter:description" content="Fastcard.dev helps you understand the basic knowledge about everything in the developer world."/>
         <meta name="twitter:image" content="https://fastcard.dev/favicon.png"></meta>
         <script async src="https://analytics.eu.umami.is/script.js" data-website-id="c2fb6441-988f-401a-aa65-a77c9ab0977e"></script>
-      </Head>
+      </Helmet>
       <main>
         <div className="bg-bg-slate-900">
           <div className="md:container md:mx-auto">

diff --git a/src/pages/card/[id].tsx b/src/pages/card/[id].tsx
@@ -8,6 +8,7 @@ import Loading from "u/components/loading";
 import { api } from "u/utils/api";
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { MessageSquare, Upload, CheckCircle, ArrowLeft } from 'lucide-react';
+import { Helmet } from "react-helmet";
 
 
 const Card: NextPage = () => {
@@ -36,7 +37,22 @@ const Card: NextPage = () => {
   }
 
   return card?.isLoading ? (<Loading />) :  (
-    <Base title={card?.data?.title} description={card?.data?.description}>
+    <Base>
+       <Helmet>
+        <title>{ card?.data?.title } | Fastcard Developer Guide</title>
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <meta name="description" content={ card?.data?.description }/>
+        <meta property="og:url" content="https://fastcard.dev"/>
+        <meta property="og:title" content={ card?.data?.title  + " | Fastcard Developer Guide" } />
+        <meta property="og:description" content={ card?.data?.description }/>
+        <meta property="og:image" content="https://fastcard.dev/favicon.png"/>
+        <meta name="twitter:card" content="summary_large_image"/>
+        <meta property="twitter:domain" content="https://fastcard.dev"/>
+        <meta property="twitter:url" content="https://fastcard.dev"/>
+        <meta name="twitter:title" content={ card?.data?.title  + " | Fastcard Developer Guide" }/>
+        <meta name="twitter:description" content={ card?.data?.description }/>
+        <meta name="twitter:image" content="https://fastcard.dev/favicon.png"></meta>
+      </Helmet>
       <div className="bg-slate-50 border-b border-slate-300">
         <div className="px-6 md:px-unset md:container md:mx-auto py-8">
           <button className="mb-6 text-slate-600 text-lg rounded flex items-center gap-3" onClick={handleBack}>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -19,7 +19,7 @@ const Home: NextPage = () => {
   const { categories, isCategoryLoading } = CategoryView();
 
   return isCategoryLoading ? (<Loading />) : (
-    <Base title="Developer Fastcard" description="Fastcard.dev helps you understand the basic knowledge about everything in the developer world.">
+    <Base>
       <div className="min-h-screen">
         <div className="relative bg-bg-slate-900 px-6 md:px-0">
           <div>