refactor: + new title : JavaScript is Killing We...

fix: tab
sosumit001 · Oct 23, 2024 · 4b12bb6 · 4b12bb6
1 parent 638e635
commit 4b12bb6
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 45 deletions.
diff --git a/app/explora/[...slug]/page.tsx b/app/explora/[...slug]/page.tsx
@@ -1,31 +1,76 @@
 import React from "react";
-import Head from "next/head";
-import Link from "next/link";
 import { getExplorations } from "../utils";
 import { canela_regu, canela, canela_th } from "@/lib/fonts";
 import Header from "@/components/header";
-// import SidebarIcon from "@/components/@ui/sidebar-icon";
 import { CustomMDX } from "@/components/mdx";
 import Sidebar from "@/components/explora-sidebar";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { baseUrl } from "@/sitemap";
 
-export default function Page({ params }) {
-  const { slug } = params; // 'slug' is an array
+// Dynamically generate metadata for SEO
+export function generateMetadata({ params }: { params: { slug: string[] } }) {
+  const explorations = getExplorations();
+  const exploration = explorations.find(
+    (ex) => ex.exploration === params.slug[0]
+  );
+
+  if (!exploration) {
+    notFound(); // Handle 404 if exploration is not found
+    return {};
+  }
+
+  const isOverview = params.slug.length === 1;
+  const chapterSlug = params.slug[1];
+  const chapter = exploration.chapters.find((ch) => ch.slug === chapterSlug);
+
+  const title = isOverview
+    ? exploration.metadata.title || "Overview"
+    : chapter?.metadata.title || `Chapter ${chapter?.slug}`;
+  const description = isOverview
+    ? exploration.metadata.summary || "Overview summary"
+    : chapter?.metadata.summary || "Chapter description";
+
+  const ogImage = exploration.metadata.image
+    ? `${baseUrl}${exploration.metadata.image}`
+    : `/og?title=${encodeURIComponent(title)}`;
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: "article",
+      url: `${baseUrl}/explora/${params.slug.join("/")}`,
+      images: [{ url: ogImage }],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [ogImage],
+    },
+  };
+}
 
+// Page component for individual exploration or chapter
+export default function Page({ params }: { params: { slug: string[] } }) {
+  const { slug } = params; // 'slug' is an array
   const explorations = getExplorations();
   const exploration = explorations.find((ex) => ex.exploration === slug[0]);
 
   if (!exploration) {
     return <div>Exploration not found</div>;
   }
 
-  const isOverview = slug.length === 1; // Check if we're on the overview page
+  const isOverview = slug.length === 1;
   const chapterSlug = slug[1];
   const chapter = exploration.chapters.find((ch) => ch.slug === chapterSlug);
 
-  // Find the current chapter index
-  const currentChapterIndex = exploration.chapters.findIndex((ch) => ch.slug === chapterSlug);
-
-  // Determine the previous and next chapters
+  const currentChapterIndex = exploration.chapters.findIndex(
+    (ch) => ch.slug === chapterSlug
+  );
   const prevChapter = isOverview
     ? null
     : currentChapterIndex > 0
@@ -41,53 +86,31 @@ export default function Page({ params }) {
 
   return (
     <div className="flex flex-col">
-      <Head>
-        <title>
-          {isOverview
-            ? exploration.metadata.title || "Overview"
-            : chapter?.metadata.title || `Chapter ${chapter?.slug}`}
-        </title>
-        <meta
-          name="description"
-          content={
-            isOverview
-              ? exploration.metadata.summary || "Overview summary"
-              : chapter?.metadata.summary || "Chapter description"
-          }
-        />
-      </Head>
       <Header />
       <div className="flex relative">
-
         <Sidebar exploration={exploration} chapterSlug={chapterSlug} />
-
         <main className="sm:p-2 w-[100%] sm:w-[80%] h-full mx-auto text-left">
           <div className="flex flex-col min-h-full">
             <div className="flex-grow px-8 py-6">
               {isOverview ? (
                 <>
-                  <h2 className={`${canela.className} text-5xl mb-10 text-grey leading-[54px]`}>
+                  <h2
+                    className={`${canela.className} text-5xl mb-10 text-grey leading-[54px]`}
+                  >
                     {exploration.metadata.title || "Overview Title"}
                   </h2>
-                  <div className="flex flex-col text-black">
-                    {/* <p className={`${canela_regu.className} text-grey text-xl leading-[38px]`}>
-                      {exploration.overviewContent || "Overview Content"}
-                    </p> */}
-                    <article className={`${canela_th.className}`}>
-                      <CustomMDX 
-                      source = {exploration.overviewContent} 
-                      />
-                    </article>
-                  </div>
+                  <article className={`${canela_th.className}`}>
+                    <CustomMDX source={exploration.overviewContent} />
+                  </article>
                 </>
               ) : chapter ? (
                 <>
-                  <h2 className={`${canela.className} text-5xl mb-10 text-grey leading-[54px]`}>
+                  <h2
+                    className={`${canela.className} text-5xl mb-10 text-grey leading-[54px]`}
+                  >
                     {chapter.metadata.title || `Chapter ${chapter.slug}`}
                   </h2>
-                  <CustomMDX
-                    source={chapter.content || "Chapter Content"}
-                  />
+                  <CustomMDX source={chapter.content} />
                 </>
               ) : (
                 <div>Chapter not found</div>
@@ -98,12 +121,16 @@ export default function Page({ params }) {
                     <button className="text-tealBright">Previous</button>
                   </Link>
                 ) : (
-                  <Link href={`/explora/${exploration.exploration}/${prevChapter.slug}`}>
+                  <Link
+                    href={`/explora/${exploration.exploration}/${prevChapter.slug}`}
+                  >
                     <button className="text-tealBright">Previous</button>
                   </Link>
                 )}
                 {nextChapter ? (
-                  <Link href={`/explora/${exploration.exploration}/${nextChapter.slug}`}>
+                  <Link
+                    href={`/explora/${exploration.exploration}/${nextChapter.slug}`}
+                  >
                     <button className="text-tealBright">Next</button>
                   </Link>
                 ) : (

diff --git a/app/explora/exploras/methods-for-js-free-web-development/overview.mdx b/app/explora/exploras/methods-for-js-free-web-development/overview.mdx
@@ -1,5 +1,5 @@
 ---
-title: "Not 100%, but More Than 99% JavaScript-Free Web"
+title: "JavaScript is Killing Web Browsers: We Need Better Alternatives"
 publishedAt: "2024-09-01"
 summary: "A comprehensive exploration of modern JavaScript frameworks including React, Vue, and Angular."
 image: "/images/javascript-frameworks.png"