feat: add custom head tags for each page

MaeWolff · Aug 15, 2023 · 430062f · 430062f · vercel · Aug 15, 2023
1 parent 331ad79
commit 430062f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 18 deletions.
diff --git a/src/components/seo/SEOTags.astro b/src/components/seo/SEOTags.astro
@@ -1,19 +1,9 @@
 ---
 import { SEO } from "astro-seo";
 import { SITE_URL } from "@/data/config";
+import type { HeadTags } from "@/utils/types/HeadTags";
 
-type Props = {
-  title?: string;
-  description?: string;
-  noindex?: boolean;
-  og?: {
-    title: string;
-    type: string;
-    description: string;
-    image: string;
-    alt: string;
-  };
-};
+type Props = HeadTags;
 
 const { title, description, noindex, og } = Astro.props;
 

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -3,21 +3,20 @@ import Header from "../components/Header.astro";
 import BlurCircle from "@/components/shared/BlurCircle.astro";
 import theme from "@/data/theme";
 import SEOTags from "@/components/seo/SEOTags.astro";
+import type { HeadTags } from "@/utils/types/HeadTags";
 
 import "@fontsource/open-sans";
 import "@/styles/tailwind.css";
 import "@/styles/post.css";
 
-export interface Props {
-  title?: string;
-}
+export type Props = HeadTags;
 
-const { title } = Astro.props;
+const headTags = Astro.props;
 ---
 
 <!DOCTYPE html>
 <html lang="en">
-  <SEOTags title={title} />
+  <SEOTags {...headTags} />
 
   <body
     class="mx-auto flex min-h-screen max-w-[872px] flex-col gap-9 bg-neutral-950 px-10 py-8 text-sm text-neutral-400 md:gap-20 md:py-16"

diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro
@@ -20,7 +20,7 @@ const { post } = Astro.props;
 const { Content } = await post.render();
 ---
 
-<Layout title={post.data.title}>
+<Layout title={post.data.title} description={post.data.description}>
   <main class="post mx-auto flex w-full max-w-prose flex-col gap-4">
     <header role="presentation">
       <h1 class="text-md">

diff --git a/src/utils/types/HeadTags.ts b/src/utils/types/HeadTags.ts
@@ -0,0 +1,12 @@
+export type HeadTags = {
+  title?: string;
+  description?: string;
+  noindex?: boolean;
+  og?: {
+    title: string;
+    type: string;
+    description: string;
+    image: string;
+    alt: string;
+  };
+};