Add breadcrumbs and roadmap banner

src/components/Breadcrumbs.astro

@@ -0,0 +1,39 @@
+---
+import type { BreadcrumbItem } from '../lib/topic';
+
+export interface Props {
+  breadcrumbs: BreadcrumbItem[];
+  roadmapId: string;
+}
+
+const { breadcrumbs, roadmapId } = Astro.props;
+---
+
+<div class='py-7 pb-6 -mb-7'>
+    <!-- Desktop breadcrums -->
+    <p class='text-gray-500 container hidden sm:block'>
+      <a href='/roadmaps' class='hover:text-gray-800'>Roadmaps</a>
+      <span>&middot;</span>
+      { breadcrumbs.map((breadcrumb, counter) => {
+        const isLast = counter === breadcrumbs.length - 1;
+        
+        if (!isLast) {
+          return (
+            <>
+              <a class='hover:text-gray-800' href={breadcrumb.url}>{ breadcrumb.title }</a>
+              <span>&nbsp;&middot;&nbsp;</span>
+            </>
+          );
+        }
+        
+        return <span class='text-gray-400'>{ breadcrumb.title }</span>
+      })}
+    </p>
+
+    <!-- Mobile breadcrums -->
+    <p class='container block sm:hidden'>
+      <a class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600' href={`/${roadmapId}`}>
+        &larr; Back to Topics List
+      </a>
+    </p>
+  </div>

src/components/MarkdownContent/MarkdownContent.astro

@@ -3,7 +3,7 @@ import "./Prism.css";
 ---
 
 <div class="bg-gray-50 py-4 sm:py-10">
-  <div class="container prose prose-headings:mt-4 prose-headings:mb-2 prose-p:mb-0.5">
+  <div class="container prose prose-headings:mt-4 prose-headings:mb-2 prose-p:mb-0.5 ">
     <slot />
   </div>
 </div>

src/components/RoadmapBanner.astro

@@ -0,0 +1,26 @@
+---
+import type { RoadmapFrontmatter } from '../lib/roadmap';
+
+export interface Props {
+  roadmapId: string;
+  roadmap: RoadmapFrontmatter;
+}
+
+const { roadmap, roadmapId } = Astro.props;
+---
+
+<a
+  href={`/${roadmapId}`}
+  class="flex items-center justify-center bg-yellow-100 text-yellow-900 border-b py-2 sm:py-3 text-sm sm:text-md hover:bg-yellow-200"
+>
+  <span class="container">
+    <span class="hidden sm:inline"
+      >Click to visit the interactive version of</span
+    >
+    <span class="inline sm:hidden">Visit complete</span>
+
+    <span class="sm:lowercase ml-0.5 font-medium underline underline-offset-1"
+      >{roadmap.featuredTitle} roadmap</span
+    >
+  </span>
+</a>

src/lib/topic.ts

@@ -59,7 +59,7 @@ function generateBreadcrumbs(
   return breadcrumbs;
 }
 
-type BreadcrumbItem = {
+export type BreadcrumbItem = {
   title: string;
   url: string;
 };

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

@@ -1,13 +1,13 @@
 ---
+import Breadcrumbs from '../components/Breadcrumbs.astro';
 import MarkdownContent from '../components/MarkdownContent/MarkdownContent.astro';
+import RoadmapBanner from '../components/RoadmapBanner.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { getTopicFiles, TopicFileType } from '../lib/topic';
 
 export async function getStaticPaths() {
   const topicPathMapping = await getTopicFiles();
 
-  // console.log(topicPathMapping);
-
   return Object.keys(topicPathMapping).map((topicSlug) => ({
     params: { topicId: topicSlug.replace(/^\//, '') },
     props: topicPathMapping[topicSlug],
@@ -15,10 +15,13 @@ export async function getStaticPaths() {
 }
 
 const { topicId } = Astro.params;
-const { file } = Astro.props as TopicFileType;
+const { file, breadcrumbs, roadmapId, roadmap } = Astro.props as TopicFileType;
 ---
 
 <BaseLayout title="What is this">
+  <RoadmapBanner roadmapId={roadmapId} roadmap={roadmap} />
+  <Breadcrumbs breadcrumbs={breadcrumbs} roadmapId={roadmapId} />
+
   <MarkdownContent>
     <main id="main-content">
       <file.Content />