Add roadmap header and components

2026-10-25 09:34:00 +08:00 · 2022-12-31 18:54:22 +04:00
parent a5874bd057
commit 45a7aad669
9 changed files with 422 additions and 5 deletions
@@ -8,4 +8,10 @@ export interface Props {
 const { jsonUrl } = Astro.props;
 ---

-<link rel="preload" href="/fonts/balsamiq.woff2" as="font" type="font/woff2" crossorigin slot="after-header" />
+<link rel="preload" href="/fonts/balsamiq.woff2" as="font" type="font/woff2" crossorigin slot="after-header" />
+
+<script>
+    import { wireframeJSONToSVG } from 'roadmap-renderer';
+
+    
+</script>
@@ -0,0 +1,41 @@
+---
+import Icon from "./Icon.astro";
+
+export interface Props {
+  roadmapUrl: string;
+}
+
+const { roadmapUrl } = Astro.props;
+---
+
+<!-- Desktop: Roadmap Resources - Alert -->
+<div
+  class="hidden sm:flex justify-between mb-0 sm:-mb-16 mt-7 px-2 bg-white border rounded-md items-center"
+>
+  <p class="text-sm">
+    <span
+      class="text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5"
+      >New</span
+    >
+    Resources are here, try clicking nodes
+  </p>
+
+  <a
+    href={`${roadmapUrl}/topics`}
+    class="inline-flex items-center justify-center py-1.5 text-sm font-medium rounded-md hover:text-black text-gray-500 px-1"
+  >
+    <Icon icon="search" />
+    <span class="ml-2">Search Topics</span>
+  </a>
+</div>
+
+<!-- Mobile - Roadmap resources alert -->
+<p
+  class="block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white mt-5 relative"
+>
+  We have added resources. Try clicking roadmap nodes or visit{" "}
+  <a href={`${roadmapUrl}/topics`} class="text-blue-700 underline">
+    resources list
+  </a>
+  .
+</p>
@@ -0,0 +1,106 @@
+---
+import Icon from "./Icon.astro";
+import ResourcesAlert from "./ResourcesAlert.astro";
+import TopicSearch from "./TopicSearch.astro";
+import YouTubeAlert from "./YouTubeAlert.astro";
+
+export interface Props {
+  title: string;
+  description: string;
+  roadmapUrl: string;
+  isUpcoming?: boolean;
+  hasSearch?: boolean;
+  hasTopics?: boolean;
+}
+
+const {
+  title,
+  description,
+  roadmapUrl,
+  isUpcoming = false,
+  hasSearch = false,
+  hasTopics = true,
+} = Astro.props;
+
+const isRoadmapReady = !isUpcoming;
+---
+
+<div class="border-b">
+  <div class="py-5 sm:py-12 container relative">
+    <YouTubeAlert />
+
+    <div class="mt-0 mb-3 sm:mb-6 sm:mt-4">
+      <h1 class="text-2xl sm:text-4xl mb-0.5 sm:mb-2 font-bold">
+        {title}
+      </h1>
+      <p class="text-gray-500 text-sm sm:text-lg">{description}</p>
+    </div>
+
+    <div class="flex justify-between">
+      <div class="flex gap-1 sm:gap-2">
+        {
+          !hasSearch && (
+            <>
+            <a href='/roadmaps' class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600' aria-label="Back to All Roadmaps">
+              &larr;<span class='hidden sm:inline'>&nbsp;All Roadmaps</span>
+            </a>
+
+              {isRoadmapReady && (
+                <button
+                  data-modal="download-popup"
+                  class="inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500"
+                  aria-label="Download Roadmap"
+                >
+                  <Icon icon="download" />
+                  <span class="hidden sm:inline ml-2">Download</span>
+                </button>
+              )}
+
+              <button
+                data-modal="subscribe-popup"
+                class="inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500"
+                aria-label="Subscribe for Updates"
+              >
+                <Icon icon="email" />
+                <span class="ml-2">Subscribe</span>
+              </button>
+            </>
+          )
+        }
+
+        {
+          hasSearch && (
+            <a
+              href={roadmapUrl}
+              class="bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600"
+              aria-label="Back to Visual Roadmap"
+            >
+              &larr;
+              <span class="inline">&nbsp;Visual Roadmap</span>
+            </a>
+          )
+        }
+      </div>
+
+      {
+        isRoadmapReady && (
+          <a
+            href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
+            target="_blank"
+            class="inline-flex items-center justify-center bg-gray-500 text-white py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-gray-600"
+            aria-label="Suggest Changes"
+          >
+            <Icon icon="comment" />
+            <span class="ml-2 hidden sm:inline">Suggest Changes</span>
+            <span class="ml-2 inline sm:hidden">Suggest</span>
+          </a>
+        )
+      }
+    </div>
+
+    <!-- Desktop: Roadmap Resources - Alert -->
+    {hasTopics && <ResourcesAlert roadmapUrl={roadmapUrl} />}
+
+    {hasSearch && <TopicSearch />}
+  </div>
+</div>
@@ -0,0 +1,19 @@
+---
+import Icon from "./Icon.astro";
+---
+
+<div class="sm:-mb-[68px] mt-5 sm:mt-6 relative">
+  <input
+    autofocus
+    type="text"
+    id="search-topic-input"
+    class="border border-gray-300 text-gray-900 text-sm sm:text-md rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 sm:px-3 py-2"
+    placeholder="Search for a topic"
+  />
+
+  <span
+    class="absolute top-1/2 -translate-y-1/2 right-4 flex items-center text-sm text-gray-500"
+  >
+    <Icon icon="search" />
+  </span>
+</div>
@@ -0,0 +1,12 @@
+<a
+    href="https://youtube.com/theroadmap?sub_confirmation=1"
+    target="_blank"
+    class="text-md hidden sm:flex items-center text-red-600 group hover:text-red-900"
+>
+    <span
+        class="bg-red-600 group-hover:bg-red-800 group-hover: px-1.5 py-0.5 rounded-sm text-white text-xs uppercase font-medium mr-2"
+        >New</span
+    >
+    <span class="underline mr-1">Roadmap topics to be covered on YouTube</span>
+    <span>&raquo;</span>
+</a>
@@ -1,13 +1,14 @@
 ---
 import InteractiveRoadamp from "../components/InteractiveRoadmap/InteractiveRoadmap.astro";
+import RoadmapHeader from "../components/RoadmapHeader.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { getRoadmapIds, RoadmapFrontmatter } from "../lib/roadmap";

 export async function getStaticPaths() {
  const roadmapIds = await getRoadmapIds();

-  return roadmapIds.map(roadmapId => ({
-    params: { roadmapId }
+  return roadmapIds.map((roadmapId) => ({
+    params: { roadmapId },
  }));
 }

@@ -17,5 +18,13 @@ const frontmatter = file.frontmatter as RoadmapFrontmatter;
 ---

 <BaseLayout title="">
+  <RoadmapHeader
+    description={frontmatter.description}
+    title={frontmatter.title}
+    roadmapUrl={`/${roadmapId}`}
+  />
+
  {frontmatter.jsonUrl && <InteractiveRoadamp jsonUrl={frontmatter.jsonUrl} />}
-</BaseLayout>
+
+  <file.Content />
+</BaseLayout>
@@ -53,4 +53,4 @@ tags:
  - "roadmap"
  - "main-sitemap"
  - "role-roadmap"
---
+---