chore: customizable tabs

- added the option to change the meta tags of the layout in all pages: blog and individual posts

Author: Friedrich482

apps/web/src/layouts/main.astro

@@ -10,8 +10,27 @@ import MovingDotsBackground from "@/components/motion/MovingBackground";
 type Props = {
   title: string;
   isBackgroundDots?: boolean;
+  twitterTitle?: string;
+  twitterImage?: string;
+  twitterImageAlt?: string;
+  twitterDescription?: string;
+  ogTitle?: string;
+  ogImage?: string;
+  ogDescription?: string;
+  ogImageAlt?: string;
 };
-const { title, isBackgroundDots = true } = Astro.props;
+const {
+  title,
+  isBackgroundDots = true,
+  twitterTitle = "Friedrich WT",
+  twitterImage = "https://friedrichwt.dev/og.png",
+  twitterImageAlt = "Friedrich Wekenon Tokponto's Portfolio",
+  twitterDescription = "Friedrich Wekenon Tokponto's Portfolio",
+  ogTitle = "Friedrich WT",
+  ogImage = "https://friedrichwt.dev/og.png",
+  ogDescription = "Friedrich Wekenon Tokponto's Portfolio",
+  ogImageAlt = "Friedrich Wekenon Tokponto's Portfolio",
+} = Astro.props;
 ---
 
 <script is:inline>
@@ -57,40 +76,29 @@ const { title, isBackgroundDots = true } = Astro.props;
   <meta name="description" content="Friedrich Wekenon Tokponto" />
   <meta name="author" content="Friedrich Wekenon Tokponto" />
   <meta
-    http-equiv="Content-Security-Policy"
+    http-equiv="content-Security-Policy"
     content="upgrade-insecure-requests"
   />
   <link rel="icon" href="/favicon.svg" type="image/x-icon" sizes="48x48" />
   <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site).href} />
   <link rel="sitemap" href="/sitemap-index.xml" />
 
   <!--Open Graph tags-->
-  <meta property="og:title" content="Friedrich WT" />
+  <meta property="og:title" content={ogTitle} />
   <meta property="og:type" content="website" />
   <meta property="og:url" content="https://friedrichwt.dev" />
-  <meta
-    property="og:description"
-    content="Friedrich Wekenon Tokponto's Portfolio"
-  />
-  <meta property="og:image" content="https://friedrichwt.dev/og.png" />
+  <meta property="og:description" content={ogDescription} />
+  <meta property="og:image" content={ogImage} />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
-  <meta
-    property="og:image:alt"
-    content="Friedrich Wekenon Tokponto's Portfolio"
-  />
-  <meta name="twitter:title" content="Friedrich WT" />
-  <meta name="twitter:image" content="https://friedrichwt.dev/og.png" />
-  <meta
-    name="twitter:image:alt"
-    content="Friedrich Wekenon Tokponto's Portfolio"
-  />
-  <meta name="twitter:creator" content="@FriedrichC109" />
+  <meta property="og:image:alt" content={ogImageAlt} />
 
-  <meta
-    name="twitter:description"
-    content="Friedrich Wekenon Tokponto's Portfolio"
-  />
+  <!-- twitter tags -->
+  <meta name="twitter:title" content={twitterTitle} />
+  <meta name="twitter:image" content={twitterImage} />
+  <meta name="twitter:image:alt" content={twitterImageAlt} />
+  <meta name="twitter:creator" content="@FriedrichC109" />
+  <meta name="twitter:description" content={twitterDescription} />
   <meta name="twitter:card" content="summary_large_image" />
 
   <title>{title}</title>

apps/web/src/pages/blog/[slug].astro

@@ -22,7 +22,14 @@ const postTags = await trpc.tags.findAllTagsForPublishedPost.query({
 });
 ---
 
-<Layout title={post.title} isBackgroundDots={false}>
+<Layout
+  title={post.title}
+  ogTitle={post.title}
+  ogImageAlt={post.title}
+  twitterTitle={post.title}
+  twitterImageAlt={post.title}
+  isBackgroundDots={false}
+>
   <main
     class="flex flex-1 flex-col items-center justify-start py-2"
     transition:animate="slide"

apps/web/src/pages/blog/index.astro

@@ -8,7 +8,12 @@ import TextFade from "@/components/motion/TextFade";
 const posts = await trpc.posts.findAllPublished.query();
 ---
 
-<Layout title="Blog | Friedrich WT" isBackgroundDots={false}>
+<Layout
+  title="Blog | Friedrich WT"
+  ogTitle="Blog | Friedrich WT"
+  twitterTitle="Blog | Friedrich WT"
+  isBackgroundDots={false}
+>
   <main class="flex flex-1 items-start justify-center py-2">
     <section
       class="flex w-1/2 flex-col items-center justify-center gap-12 pt-8 max-xl:w-2/3 max-sm:w-[90%]"