Add roadmap header and components

package-lock.json

@@ -10,7 +10,13 @@
       "dependencies": {
         "@astrojs/tailwind": "^2.1.3",
         "astro": "^1.8.0",
+        "node-html-parser": "^6.1.4",
+        "roadmap-renderer": "^1.0.1",
         "tailwindcss": "^3.2.4"
+      },
+      "devDependencies": {
+        "prettier": "^2.8.1",
+        "prettier-plugin-astro": "^0.7.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1134,6 +1140,11 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
     "node_modules/boolean": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
@@ -1508,6 +1519,32 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1665,6 +1702,57 @@
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dset": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/dset/-/dset-3.1.2.tgz",
@@ -1697,6 +1785,17 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
+    "node_modules/entities": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.1.0.tgz",
@@ -2579,6 +2678,14 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
     "node_modules/html-entities": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
@@ -4049,6 +4156,15 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/node-html-parser": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-6.1.4.tgz",
+      "integrity": "sha512-3muP9Uy/Pz7bQa9TNYVQzWJhNZMqyCx7xJle8kz2/y1UgzAUyXXShc1IcPaJy6u07CE3K5rQcRwlvHzmlySRjg==",
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "he": "1.2.0"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz",
@@ -4095,6 +4211,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/object-hash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
@@ -4909,6 +5036,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/roadmap-renderer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/roadmap-renderer/-/roadmap-renderer-1.0.1.tgz",
+      "integrity": "sha512-f71DLNMfBNtwNwa5ffkXVRBL24loYJ7YMcyyeAUhbJMzEQYp9vWaArVGualylBIw95APy/UIgBZ9KuqiW1Y4UA=="
+    },
     "node_modules/roarr": {
       "version": "2.15.4",
       "resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.4.tgz",
@@ -6931,6 +7063,11 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
     "boolean": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
@@ -7160,6 +7297,23 @@
         "which": "^2.0.1"
       }
     },
+    "css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      }
+    },
+    "css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -7263,6 +7417,39 @@
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
+    "dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "requires": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+    },
+    "domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "requires": {
+        "domelementtype": "^2.3.0"
+      }
+    },
+    "domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "requires": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      }
+    },
     "dset": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/dset/-/dset-3.1.2.tgz",
@@ -7292,6 +7479,11 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
+    "entities": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA=="
+    },
     "es-module-lexer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.1.0.tgz",
@@ -7828,6 +8020,11 @@
         "space-separated-tokens": "^2.0.0"
       }
     },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+    },
     "html-entities": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
@@ -8727,6 +8924,15 @@
         "formdata-polyfill": "^4.0.10"
       }
     },
+    "node-html-parser": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-6.1.4.tgz",
+      "integrity": "sha512-3muP9Uy/Pz7bQa9TNYVQzWJhNZMqyCx7xJle8kz2/y1UgzAUyXXShc1IcPaJy6u07CE3K5rQcRwlvHzmlySRjg==",
+      "requires": {
+        "css-select": "^5.1.0",
+        "he": "1.2.0"
+      }
+    },
     "node-releases": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz",
@@ -8757,6 +8963,14 @@
         }
       }
     },
+    "nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "requires": {
+        "boolbase": "^1.0.0"
+      }
+    },
     "object-hash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
@@ -9295,6 +9509,11 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "roadmap-renderer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/roadmap-renderer/-/roadmap-renderer-1.0.1.tgz",
+      "integrity": "sha512-f71DLNMfBNtwNwa5ffkXVRBL24loYJ7YMcyyeAUhbJMzEQYp9vWaArVGualylBIw95APy/UIgBZ9KuqiW1Y4UA=="
+    },
     "roarr": {
       "version": "2.15.4",
       "resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.4.tgz",

package.json

@@ -14,6 +14,11 @@
     "@astrojs/tailwind": "^2.1.3",
     "astro": "^1.8.0",
     "node-html-parser": "^6.1.4",
+    "roadmap-renderer": "^1.0.1",
     "tailwindcss": "^3.2.4"
+  },
+  "devDependencies": {
+    "prettier": "^2.8.1",
+    "prettier-plugin-astro": "^0.7.0"
   }
 }

src/components/InteractiveRoadmap/InteractiveRoadmap.astro

@@ -9,3 +9,9 @@ const { jsonUrl } = Astro.props;
 ---
 
 <link rel="preload" href="/fonts/balsamiq.woff2" as="font" type="font/woff2" crossorigin slot="after-header" />
+
+<script>
+    import { wireframeJSONToSVG } from 'roadmap-renderer';
+
+    
+</script>

src/components/ResourcesAlert.astro

@@ -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>

src/components/RoadmapHeader.astro

@@ -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>

src/components/TopicSearch.astro

@@ -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>

src/components/YouTubeAlert.astro

@@ -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>

src/pages/[roadmapId].astro

@@ -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 => ({
+  return roadmapIds.map((roadmapId) => ({
-    params: { 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} />}
+
+  <file.Content />
 </BaseLayout>