From 4b12bb6e832fe18ece41b6e500699acb23350b3d Mon Sep 17 00:00:00 2001 From: Apple Date: Wed, 9 Oct 2024 00:38:01 +0530 Subject: [PATCH] refactor: + new title : JavaScript is Killing We... fix: tab --- app/explora/[...slug]/page.tsx | 115 +++++++++++------- .../overview.mdx | 2 +- 2 files changed, 72 insertions(+), 45 deletions(-) diff --git a/app/explora/[...slug]/page.tsx b/app/explora/[...slug]/page.tsx index 4565941..2c545d4 100644 --- a/app/explora/[...slug]/page.tsx +++ b/app/explora/[...slug]/page.tsx @@ -1,16 +1,62 @@ 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]); @@ -18,14 +64,13 @@ export default function Page({ params }) { return
Exploration not found
; } - 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 (
- - - {isOverview - ? exploration.metadata.title || "Overview" - : chapter?.metadata.title || `Chapter ${chapter?.slug}`} - - -
- -
{isOverview ? ( <> -

+

{exploration.metadata.title || "Overview Title"}

-
- {/*

- {exploration.overviewContent || "Overview Content"} -

*/} -
- -
-
+
+ +
) : chapter ? ( <> -

+

{chapter.metadata.title || `Chapter ${chapter.slug}`}

- + ) : (
Chapter not found
@@ -98,12 +121,16 @@ export default function Page({ params }) { ) : ( - + )} {nextChapter ? ( - + ) : ( 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 index d97dc42..521226d 100644 --- 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"