From 45a7aad669402bc6f616ab037c982e938e14d791 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sat, 31 Dec 2022 18:54:22 +0400 Subject: [PATCH] Add roadmap header and components --- package-lock.json | 219 ++++++++++++++++++ package.json | 5 + .../InteractiveRoadmap.astro | 8 +- src/components/ResourcesAlert.astro | 41 ++++ src/components/RoadmapHeader.astro | 106 +++++++++ src/components/TopicSearch.astro | 19 ++ src/components/YouTubeAlert.astro | 12 + src/pages/[roadmapId].astro | 15 +- src/roadmaps/frontend/frontend.md | 2 +- 9 files changed, 422 insertions(+), 5 deletions(-) create mode 100644 src/components/ResourcesAlert.astro create mode 100644 src/components/RoadmapHeader.astro create mode 100644 src/components/TopicSearch.astro create mode 100644 src/components/YouTubeAlert.astro diff --git a/package-lock.json b/package-lock.json index d45dcc4ec..2176df068 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index c70444a24..7c6fdbe49 100644 --- a/package.json +++ b/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" } } diff --git a/src/components/InteractiveRoadmap/InteractiveRoadmap.astro b/src/components/InteractiveRoadmap/InteractiveRoadmap.astro index bfb661dde..b88c67dff 100644 --- a/src/components/InteractiveRoadmap/InteractiveRoadmap.astro +++ b/src/components/InteractiveRoadmap/InteractiveRoadmap.astro @@ -8,4 +8,10 @@ export interface Props { const { jsonUrl } = Astro.props; --- - \ No newline at end of file + + + \ No newline at end of file diff --git a/src/components/ResourcesAlert.astro b/src/components/ResourcesAlert.astro new file mode 100644 index 000000000..01149aaa2 --- /dev/null +++ b/src/components/ResourcesAlert.astro @@ -0,0 +1,41 @@ +--- +import Icon from "./Icon.astro"; + +export interface Props { + roadmapUrl: string; +} + +const { roadmapUrl } = Astro.props; +--- + + + + + +

+ We have added resources. Try clicking roadmap nodes or visit{" "} + + resources list + + . +

diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro new file mode 100644 index 000000000..8cc813543 --- /dev/null +++ b/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; +--- + +
+
+ + +
+

+ {title} +

+

{description}

+
+ +
+
+ { + !hasSearch && ( + <> + + ← + + + {isRoadmapReady && ( + + )} + + + + ) + } + + { + hasSearch && ( + + ← +  Visual Roadmap + + ) + } +
+ + { + isRoadmapReady && ( + + + + Suggest + + ) + } +
+ + + {hasTopics && } + + {hasSearch && } +
+
diff --git a/src/components/TopicSearch.astro b/src/components/TopicSearch.astro new file mode 100644 index 000000000..2320161bc --- /dev/null +++ b/src/components/TopicSearch.astro @@ -0,0 +1,19 @@ +--- +import Icon from "./Icon.astro"; +--- + +
+ + + + + +
diff --git a/src/components/YouTubeAlert.astro b/src/components/YouTubeAlert.astro new file mode 100644 index 000000000..7a89a78da --- /dev/null +++ b/src/components/YouTubeAlert.astro @@ -0,0 +1,12 @@ + diff --git a/src/pages/[roadmapId].astro b/src/pages/[roadmapId].astro index abb7f85a7..9c9e3c917 100644 --- a/src/pages/[roadmapId].astro +++ b/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 => ({ - params: { roadmapId } + return roadmapIds.map((roadmapId) => ({ + params: { roadmapId }, })); } @@ -17,5 +18,13 @@ const frontmatter = file.frontmatter as RoadmapFrontmatter; --- + + {frontmatter.jsonUrl && } - \ No newline at end of file + + + diff --git a/src/roadmaps/frontend/frontend.md b/src/roadmaps/frontend/frontend.md index 489d962eb..8fe17be7d 100644 --- a/src/roadmaps/frontend/frontend.md +++ b/src/roadmaps/frontend/frontend.md @@ -53,4 +53,4 @@ tags: - "roadmap" - "main-sitemap" - "role-roadmap" ---- +--- \ No newline at end of file