From e002e3c478a7a895485e7301141d3fffcf7226bc Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 1 Jan 2023 21:12:08 +0400
Subject: [PATCH] Add breadcrumbs and roadmap banner

---
 src/components/Breadcrumbs.astro              | 39 +++++++++++++++++++
 .../MarkdownContent/MarkdownContent.astro     |  2 +-
 src/components/RoadmapBanner.astro            | 26 +++++++++++++
 src/lib/topic.ts                              |  2 +-
 src/pages/[...topicId].astro                  |  9 +++--
 5 files changed, 73 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Breadcrumbs.astro
 create mode 100644 src/components/RoadmapBanner.astro

diff --git a/src/components/Breadcrumbs.astro b/src/components/Breadcrumbs.astro
new file mode 100644
index 000000000..74594cdef
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/MarkdownContent/MarkdownContent.astro b/src/components/MarkdownContent/MarkdownContent.astro
index 7dae2a1ce..4447ea8dd 100644
--- a/src/components/MarkdownContent/MarkdownContent.astro
+++ b/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>
diff --git a/src/components/RoadmapBanner.astro b/src/components/RoadmapBanner.astro
new file mode 100644
index 000000000..ff3e78c80
--- /dev/null
+++ b/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>
diff --git a/src/lib/topic.ts b/src/lib/topic.ts
index 893c1bece..cc6969b0b 100644
--- a/src/lib/topic.ts
+++ b/src/lib/topic.ts
@@ -59,7 +59,7 @@ function generateBreadcrumbs(
   return breadcrumbs;
 }
 
-type BreadcrumbItem = {
+export type BreadcrumbItem = {
   title: string;
   url: string;
 };
diff --git a/src/pages/[...topicId].astro b/src/pages/[...topicId].astro
index 81d7d7187..6c4a334e9 100644
--- a/src/pages/[...topicId].astro
+++ b/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 />