Refactor markdown content

src/components/InteractiveRoadmap/InteractiveRoadmap.astro

@@ -1,8 +1,6 @@
 ---
-import DownloadPopup from '../DownloadPopup.astro';
 import Loader from '../Loader.astro';
 import ShareIcons from '../ShareIcons.astro';
-import SubscribePopup from '../SubscribePopup.astro';
 import TopicOverlay from '../TopicOverlay.astro';
 import './InteractiveRoadmap.css';
 
@@ -34,8 +32,6 @@ const { roadmapId, jsonUrl, dimensions = null, description } = Astro.props;
       description={description}
       pageUrl={`https://roadmap.sh/${roadmapId}`}
     />
-    <DownloadPopup />
-    <SubscribePopup />
     <TopicOverlay roadmapId={roadmapId} />
     <div
       id='roadmap-svg'

src/components/MarkdownFile.astro

@@ -0,0 +1,7 @@
+<div class='bg-gray-50 py-2'>
+  <div
+    class='container prose-blockquote:font-normal prose prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-4 prose-h2:mb-2 prose-h3:mt-2 prose-img:mt-1'
+  >
+    <slot />
+  </div>
+</div>

src/components/MarkdownRoadmap.astro

@@ -1,22 +0,0 @@
----
-import DownloadPopup from './DownloadPopup.astro';
-import SubscribePopup from './SubscribePopup.astro';
-
-export interface Props {
-  roadmapId: string;
-  description: string;
-}
-
-const { roadmapId, description } = Astro.props;
----
-
-<div class='bg-gray-50 py-2'>
-  <div
-    class='container prose prose-headings:mt-4 prose-headings:mb-2 prose-p:mb-0.5 relative prose-code:text-white'
-  >
-    <DownloadPopup />
-    <SubscribePopup />
-
-    <slot />
-  </div>
-</div>

src/components/RoadmapHeader.astro

@@ -1,7 +1,9 @@
 ---
+import DownloadPopup from './DownloadPopup.astro';
 import Icon from './Icon.astro';
 import ResourcesAlert from './ResourcesAlert.astro';
 import RoadmapNote from './RoadmapNote.astro';
+import SubscribePopup from './SubscribePopup.astro';
 import TopicSearch from './TopicSearch/TopicSearch.astro';
 import YouTubeAlert from './YouTubeAlert.astro';
 
@@ -20,6 +22,9 @@ const { title, description, roadmapId, isUpcoming = false, hasSearch = false, no
 const isRoadmapReady = !isUpcoming;
 ---
 
+<DownloadPopup />
+<SubscribePopup />
+
 <div class='border-b'>
   <div class='py-5 sm:py-12 container relative'>
     <YouTubeAlert />

src/pages/[roadmapId]/index.astro

@@ -2,6 +2,7 @@
 import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
 import FAQs from '../../components/FAQs/FAQs.astro';
 import InteractiveRoadmap from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
+import MarkdownFile from '../../components/MarkdownFile.astro';
 import MarkdownRoadmap from '../../components/MarkdownRoadmap.astro';
 import RoadmapHeader from '../../components/RoadmapHeader.astro';
 import UpcomingRoadmap from '../../components/UpcomingRoadmap.astro';
@@ -78,9 +79,11 @@ if (roadmapFAQs.length) {
 
   {
     !roadmapData.isUpcoming && !roadmapData.jsonUrl && (
-      <MarkdownRoadmap roadmapId={roadmapId} description={roadmapData.description}>
-        <roadmapFile.Content />
-      </MarkdownRoadmap>
+      <div class='pt-5 bg-gray-50'>
+        <MarkdownFile>
+          <roadmapFile.Content />
+        </MarkdownFile>
+      </div>
     )
   }
 

src/pages/best-practices/[bestPracticeId].astro

@@ -0,0 +1,86 @@
+---
+import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
+import FAQs from '../../components/FAQs/FAQs.astro';
+import InteractiveRoadmap from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
+import MarkdownFile from '../../components/MarkdownFile.astro';
+import RoadmapHeader from '../../components/RoadmapHeader.astro';
+import UpcomingRoadmap from '../../components/UpcomingRoadmap.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { BestPracticeFrontmatter,getBestPracticeIds } from '../../lib/best-pratice';
+import { generateArticleSchema } from '../../lib/jsonld-schema';
+
+export async function getStaticPaths() {
+  const bestPracticeIds = await getBestPracticeIds();
+
+  return bestPracticeIds.map((bestPracticeId) => ({
+    params: { bestPracticeId },
+  }));
+}
+
+interface Params extends Record<string, string | undefined> {
+  bestPracticeId: string;
+}
+
+const { bestPracticeId } = Astro.params as Params;
+const bestPracticeFile = await import(`../../best-practices/${bestPracticeId}/${bestPracticeId}.md`);
+const { faqs: roadmapFAQs = [] } = await import(`../../roadmaps/${bestPracticeId}/faqs.astro`);
+const bestPracticeData = bestPracticeFile.frontmatter as BestPracticeFrontmatter;
+
+let jsonLdSchema = [];
+
+if (bestPracticeData.schema) {
+  const bestPracticeSchema = bestPracticeData.schema;
+  jsonLdSchema.push(
+    generateArticleSchema({
+      url: `https://roadmap.sh/best-practices/${bestPracticeId}`,
+      headline: bestPracticeSchema.headline,
+      description: bestPracticeSchema.description,
+      datePublished: bestPracticeSchema.datePublished,
+      dateModified: bestPracticeSchema.dateModified,
+      imageUrl: bestPracticeSchema.imageUrl,
+    })
+  );
+}
+---
+
+<BaseLayout
+  permalink={`/best-practices/${bestPracticeId}`}
+  title={bestPracticeData?.seo?.title}
+  description={bestPracticeData.seo.description}
+  keywords={bestPracticeData.seo.keywords}
+  sponsor={bestPracticeData.sponsor}
+  noIndex={bestPracticeData.isUpcoming}
+  jsonLd={jsonLdSchema}
+>
+  <RoadmapHeader
+    title={bestPracticeData.title}
+    description={bestPracticeData.description}
+    roadmapId={bestPracticeId}
+    isUpcoming={bestPracticeData.isUpcoming}
+  />
+
+  {
+    !bestPracticeData.isUpcoming && bestPracticeData.jsonUrl && (
+      <InteractiveRoadmap
+        roadmapId={bestPracticeId}
+        description={bestPracticeData.description}
+        jsonUrl={bestPracticeData.jsonUrl}
+        dimensions={bestPracticeData.dimensions}
+      />
+    )
+  }
+
+  {
+    !bestPracticeData.isUpcoming && !bestPracticeData.jsonUrl && (
+      <MarkdownFile>
+        <bestPracticeFile.Content />
+      </MarkdownFile>
+    )
+  }
+
+  {bestPracticeData.isUpcoming && <UpcomingRoadmap />}
+
+  <FAQs faqs={roadmapFAQs} />
+
+  <CaptchaScripts slot='after-footer' />
+</BaseLayout>

src/pages/guides/[guideId].astro

@@ -1,5 +1,6 @@
 ---
 import GuideHeader from '../../components/GuideHeader.astro';
+import MarkdownFile from '../../components/MarkdownFile.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getAllGuides, GuideFileType } from '../../lib/guide';
 
@@ -30,10 +31,8 @@ const { frontmatter: guideData } = guide;
   <GuideHeader guide={guide} />
 
   <div class='bg-gray-50 py-5 sm:py-10'>
-    <div
-      class='container prose-blockquote:font-normal prose prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-4 prose-h2:mb-2 prose-h3:mt-2 prose-img:mt-1'
-    >
+    <MarkdownFile>
       <guide.Content />
-    </div>
+    </MarkdownFile>
   </div>
 </BaseLayout>