Add keywords to all pages

Rikthepixel · Rikthepixel · commit fb1e74daaa10 · 2023-04-03T17:07:26.000+02:00
diff --git a/src/components/head/KeywordsMeta.tsx b/src/components/head/KeywordsMeta.tsx
@@ -1,11 +1,20 @@
 export interface KeywordTagsProps {
-  tags: readonly string[];
+  tags?: readonly string[];
 }
 
-const KeywordsMeta = ({ tags }: KeywordTagsProps) => (
+const DEFAULT_TAGS = [
+  "Git",
+  "Commit Rocket",
+  "Git Client",
+  "Git Gui",
+  "New Git Client"
+] as const;
+
+const KeywordsMeta = ({ tags = [] }: KeywordTagsProps) => (
   <meta
+    key="meta:keywords"
     name="keywords"
-    content={tags.map((tag) => tag.replace(",", "")).join(", ")}
+    content={[...DEFAULT_TAGS, ...tags].map((tag) => tag.replace(",", "")).join(", ")}
   />
 );
 
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -10,6 +10,7 @@ import Heading from "@/components/layout/Heading";
 
 import { makeOgMeta } from "@/utils/meta/opengraph";
 import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import KeywordsMeta from "@/components/head/KeywordsMeta";
 
 const NotFound: Page = ({ pathname }) => {
   const router = useRouter();
@@ -19,6 +20,10 @@ const NotFound: Page = ({ pathname }) => {
       <Head>
         {makeOgMeta({ title: "404", pathname })}
         {makeSitemapMeta({ priority: 0.1 })}
+        <KeywordsMeta tags={[
+          "Not Found",
+          "404"
+        ]} />
       </Head>
       <main className="flex items-center justify-center flex-1 w-full pb-8" aria-labelledby="not-found">
         <div className="flex flex-col gap-2 p-8 text-center border-2 rounded-md border-primary">
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -13,6 +13,7 @@ import BannerImage from "@/assets/images/brand/commit-rocket-logo.webp";
 
 import { makeOgMeta } from "@/utils/meta/opengraph";
 import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import KeywordsMeta from "@/components/head/KeywordsMeta";
 
 
 const pageTransition = {
@@ -75,6 +76,7 @@ export default function App({ Component, pageProps, router }: AppProps) {
           changeFreq: "monthly",
           priority: 0.5
         })}
+        <KeywordsMeta />
       </Head>
       <GoogleAnalytics />
       <div className="flex flex-col font-sans">
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -7,13 +7,19 @@ import projects from "@/assets/state/projects";
 
 import Heading from "@/components/layout/Heading";
 import Project from "@/components/pages/about/Project";
+import KeywordsMeta from "@/components/head/KeywordsMeta";
+
 import { makeOgMeta } from "@/utils/meta/opengraph";
 
 const AboutPage: Page = ({ pathname }) => {
   return (
     <>
       <Head>
         {makeOgMeta({ title: "About", pathname })}
+        <KeywordsMeta tags={[
+          "About Us",
+          "Team"
+        ]} />
       </Head>
       <main aria-labelledby="about" className="flex flex-col flex-1 w-full gap-8 pb-8 max-w-7xl">
         <Heading.H1 id="about" className="text-center text-secondary">
diff --git a/src/pages/blog/[pid]/[slug].tsx b/src/pages/blog/[pid]/[slug].tsx
@@ -57,7 +57,12 @@ const BlogPostPage: Page<BlogPostPageProps> = ({ article: { author, tags, thumbn
         {makeSitemapMeta({
           lastMod: new Date(article.updated ? article.updated : article.created),
         })}
-        <KeywordsMeta tags={tags} />
+        <KeywordsMeta tags={[
+          "Blog",
+          "Post",
+          "Article",
+          ...tags
+        ]} />
       </Head>
       <main>
         <article aria-describedby="article-title" className="flex flex-col gap-4 max-w-4xl w-full items-center">
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
@@ -21,6 +21,7 @@ import Heading from "@/components/layout/Heading";
 import { makeOgMeta } from "@/utils/meta/opengraph";
 import Label from "@/components/controls/Label";
 import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import KeywordsMeta from "@/components/head/KeywordsMeta";
 
 interface BlogPageProps {
   articles: IArticleBrief[];
@@ -92,6 +93,9 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
       <Head>
         {makeOgMeta({ title: "Blog", pathname })}
         {makeSitemapMeta({ changeFreq: "weekly", priority: 0.8 })}
+        <KeywordsMeta tags={[
+          "Blog"
+        ]} />
       </Head>
       <main aria-labelledby="blog" className="flex flex-col flex-1 w-full gap-8 max-w-7xl">
         <Heading.H1 id="blog" className="text-center text-secondary">
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
@@ -5,12 +5,21 @@ import contactMethods from "@/assets/state/contactMethods";
 import Link, { style } from "@/components/navigation/Link";
 import Heading from "@/components/layout/Heading";
 import { makeOgMeta } from "@/utils/meta/opengraph";
+import KeywordsMeta from "@/components/head/KeywordsMeta";
+
 
 const ContactPage: Page = ({ pathname }) => {
   return (
     <>
       <Head>
         {makeOgMeta({ title: "Contact", pathname })}
+        <KeywordsMeta tags={[
+          "Contact Us",
+          "Email",
+          "Discord",
+          "NewsLetter",
+          "Feedback"
+        ]} />
       </Head>
       <main aria-labelledby="contact" className="flex flex-col flex-1 w-full gap-8 max-w-7xl">
         <Heading.H1 id="contact" className="text-center text-secondary">
diff --git a/src/pages/contribute.tsx b/src/pages/contribute.tsx
@@ -6,13 +6,19 @@ import FeedbackSection from "@/components/pages/contribute/FeedbackSection";
 import { Page } from "@/types/page";
 import { makeOgMeta } from "@/utils/meta/opengraph";
 import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import KeywordsMeta from "@/components/head/KeywordsMeta";
+
 
 const ContributePage: Page = ({ pathname }) => {
   return (
     <>
       <Head>
         {makeOgMeta({ title: "Contribute", pathname })}
         {makeSitemapMeta({ priority: 0.6 })}
+        <KeywordsMeta tags={[
+          "Contribute",
+          "Feedback"
+        ]} />
       </Head>
       <main aria-labelledby="contribute" className="flex flex-col flex-1 w-full gap-8 max-w-7xl">
         <Heading.H1 id="contribute" className="text-center text-secondary">
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -18,6 +18,7 @@ import { makeSitemapMeta } from "@/utils/meta/sitemap";
 
 import { sendCTAEvent } from "@/api/analytics";
 import { makeOgMeta } from "@/utils/meta/opengraph";
+import KeywordsMeta from "@/components/head/KeywordsMeta";
 
 const logoAnim = {
   initial: {
@@ -39,6 +40,12 @@ const FrontPage: Page = ({ pathname }) => {
       <Head>
         {makeOgMeta({ title: "Building a Better Git", reverseTitle: true, pathname })}
         {makeSitemapMeta({ priority: 1 })}
+        <KeywordsMeta tags={[
+          "Introduction",
+          "Roadmap",
+          "Missions",
+          "Newsletter Signup"
+        ]} />
       </Head>
       <main aria-labelledby="hero-title" className="flex flex-col flex-1 w-full gap-32 pb-8 max-w-7xl">
         <section aria-label="hero" className="flex flex-col-reverse items-center h-fit min-h-0 xl:flex-row xl:min-h-[30rem] xl:h-[75dvh] xl:h-[75vh] mx-auto">
diff --git a/src/pages/mail/unsubscribe.tsx b/src/pages/mail/unsubscribe.tsx
@@ -18,6 +18,7 @@ import Form from "@/components/controls/Form";
 import Heading from "@/components/layout/Heading";
 import Button from "@/components/controls/Button";
 import Label from "@/components/controls/Label";
+import KeywordsMeta from "@/components/head/KeywordsMeta";
 
 
 const unsubscribeSchema = z.object({
@@ -47,6 +48,9 @@ const UnsubscribePage: Page = ({ pathname }) => {
       <Head>
         {makeOgMeta({ title: "Unsubscribe", pathname })}
         {makeSitemapMeta({ priority: 0.2 })}
+        <KeywordsMeta tags={[
+          "Unsubscribe"
+        ]} />
       </Head>
       <main className="flex items-center justify-center flex-1 w-full pb-8" aria-labelledby="unsubscribe">
         <Form
