Add topics page

scripts/migrate-content.sh

@@ -0,0 +1,2 @@
+#!/usr/bin/env bash
+

src/components/TopicOverlay.astro

@@ -24,7 +24,7 @@ import Loader from "./Loader.astro";
         </button>
       </div>
   
-      <div id='topic-content' class='-mt-2'></div>
+      <div id='topic-content' class='prose prose-h1:mt-7 prose-h1:mb-1.5 prose-p:mt-0'></div>
     </div>
     <div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30"></div>
   </div>

src/lib/roadmap.ts

@@ -1,38 +1,71 @@
 export interface RoadmapFrontmatter {
-    id: string;
+  id: string;
-    jsonUrl: string;
+  jsonUrl: string;
-    pdfUrl: string;
+  pdfUrl: string;
-    order: number;
+  order: number;
-    featuredTitle: string;
+  featuredTitle: string;
-    featuredDescription: string;
+  featuredDescription: string;
+  title: string;
+  description: string;
+  hasTopics: boolean;
+  dimensions: {
+    width: number;
+    height: number;
+  };
+  seo: {
     title: string;
     description: string;
-    hasTopics: boolean;
+    keywords: string[];
-    dimensions: {
+  };
-        width: number;
+  relatedRoadmaps: string[];
-        height: number;
+  sitemap: {
-    };
+    priority: number;
-    seo: {
+    changefreq: string;
-        title: string;
+  };
-        description: string;
+  tags: string[];
-        keywords: string[];
+}
-    };
-    relatedRoadmaps: string[];
-    sitemap: {
-        priority: number;
-        changefreq: string;
-    };
-    tags: string[];
-};
 
 export async function getRoadmapIds() {
-    const roadmapFiles = await import.meta.glob<string>('/src/roadmaps/*/*.md', {
+  const roadmapFiles = await import.meta.glob<string>("/src/roadmaps/*/*.md", {
-        eager: true,
+    eager: true,
-    });
+  });
+
+  return Object.keys(roadmapFiles).map((filePath) => {
+    const fileName = filePath.split("/").pop() || "";
+
+    return fileName.replace(".md", "");
+  });
+}
+
+export interface TopicFileType {
+    frontMatter: Record<string, string>;
+    file: string;
+    url: string;
+    Content: any;
+};
+
+export async function getTopicPathMapping() {
+  const contentFiles = await import.meta.glob<string>(
+    "/src/roadmaps/*/content/**/*.md", {
+        eager: true
+    }
+);
+
+  const mapping: Record<string, TopicFileType> = {};
+
+  Object.keys(contentFiles).forEach((filePath) => {
+    // => Sample Paths
+    // /src/roadmaps/vue/content/102-ecosystem/102-ssr/101-nuxt-js.md
+    // /src/roadmaps/vue/content/102-ecosystem/102-ssr/index.md
+    const url = filePath
+      .replace("/src/roadmaps/", "") // Remove the base `/src/roadmaps` from path
+      .replace("/content", "") // Remove the `/[roadmapName]/content`
+      .replace(/\/\d+-/g, "/") // Remove ordering info `/101-ecosystem`
+      .replace(/\/index\.md$/, "") // Make the `/index.md` to become the parent folder only
+      .replace(/\.md$/, ""); // Remove `.md` from the end of file
 
-    return Object.keys(roadmapFiles).map(filePath => {
+    mapping[url] = contentFiles[filePath] as any;
-        const fileName = filePath.split('/').pop() || '';
+  });
 
-        return fileName.replace('.md', '');
+  return mapping;
-    });
 }

src/pages/[...topicId].astro

@@ -0,0 +1,27 @@
+---
+import MarkdownContent from "../components/MarkdownContent/MarkdownContent.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { getTopicPathMapping, TopicFileType } from "../lib/roadmap";
+
+export async function getStaticPaths() {
+  const topicPathMapping = await getTopicPathMapping();
+
+  console.log(topicPathMapping);
+
+  return Object.keys(topicPathMapping).map((topicSlug) => ({
+    params: { topicId: topicSlug },
+    props: topicPathMapping[topicSlug],
+  }));
+}
+
+const { topicId } = Astro.params;
+const props: TopicFileType = Astro.props as any;
+---
+
+<BaseLayout title="What is this">
+  <MarkdownContent>
+    <main id="main-content">
+      <props.Content />
+    </main>
+  </MarkdownContent>
+</BaseLayout>

src/pages/[roadmapId].astro

@@ -1,6 +1,6 @@
 ---
 import InteractiveRoadamp from "../components/InteractiveRoadmap/InteractiveRoadmap.astro";
-import MarkdownRoadmap from "../components/MarkdownRoadmap/MarkdownRoadmap.astro";
+import MarkdownContent from "../components/MarkdownContent/MarkdownContent.astro";
 import RoadmapHeader from "../components/RoadmapHeader.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { getRoadmapIds, RoadmapFrontmatter } from "../lib/roadmap";
@@ -41,7 +41,7 @@ const frontmatter = file.frontmatter as RoadmapFrontmatter;
     )
   }
 
-  <MarkdownRoadmap>
+  <MarkdownContent>
     <file.Content />
-  </MarkdownRoadmap>
+  </MarkdownContent>
 </BaseLayout>