info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-24 09:55:57 +02:00
Code Issues Releases Wiki Activity

Add markdown roadmap support

Browse Source
This commit is contained in:
Kamran Ahmed
2022-12-31 20:37:14 +04:00
parent 358c1440d8
commit 274eeece7a
6 changed files with 320 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
package-lock.json generated
View File

@@ -15,6 +15,7 @@
"tailwindcss": "^3.2.4"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.8",
"prettier": "^2.8.1",
"prettier-plugin-astro": "^0.7.0"
}
@@ -678,6 +679,34 @@
"@proload/core": "^0.3.2"
}
},
"node_modules/@tailwindcss/typography": {
"version": "0.5.8",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz",
"integrity": "sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==",
"dev": true,
"dependencies": {
"lodash.castarray": "^4.4.0",
"lodash.isplainobject": "^4.0.6",
"lodash.merge": "^4.6.2",
"postcss-selector-parser": "6.0.10"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || insiders"
}
},
"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
"dev": true,
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@types/acorn": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@@ -3075,6 +3104,24 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/lodash.castarray": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
"dev": true
},
"node_modules/lodash.isplainobject": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
"dev": true
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true
},
"node_modules/log-symbols": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
@@ -6687,6 +6734,30 @@
"tsm": "^2.1.4"
}
},
"@tailwindcss/typography": {
"version": "0.5.8",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz",
"integrity": "sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==",
"dev": true,
"requires": {
"lodash.castarray": "^4.4.0",
"lodash.isplainobject": "^4.0.6",
"lodash.merge": "^4.6.2",
"postcss-selector-parser": "6.0.10"
},
"dependencies": {
"postcss-selector-parser": {
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
"dev": true,
"requires": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
}
}
}
},
"@types/acorn": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@@ -8258,6 +8329,24 @@
"p-locate": "^5.0.0"
}
},
"lodash.castarray": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
"dev": true
},
"lodash.isplainobject": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
"dev": true
},
"lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true
},
"log-symbols": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",

1
package.json
View File

@@ -18,6 +18,7 @@
"tailwindcss": "^3.2.4"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.8",
"prettier": "^2.8.1",
"prettier-plugin-astro": "^0.7.0"
}

9
src/components/MarkdownRoadmap/MarkdownRoadmap.astro Normal file
View File

@@ -0,0 +1,9 @@
---
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 prose-ul:mt-0">
<slot />
</div>
</div>

208
src/components/MarkdownRoadmap/Prism.css Normal file
View File

@@ -0,0 +1,208 @@
div[class*="language-"],
code[class*='language-'],
pre[class*='language-'] {
color: #9efeff;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-weight: 400;
font-size: .95rem;
line-height: 1.3;
letter-spacing: 0.5px;
text-shadow: 0 1px #222245;
margin-bottom: 25px !important;
}
pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection,
pre[class*='language-']::selection,
pre[class*='language-'] ::selection,
code[class*='language-']::selection,
code[class*='language-'] ::selection {
color: inherit;
background: #a599e9;
}
code:not([class]) {
padding: 2px 4px;
font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: .875rem;
background-color: #FAFAFA;
border: 1px solid #EAEAEA;
border-radius: 4px;
}
/* Code blocks. */
pre[class*='language-'] {
padding: 1em;
border-radius: 4px;
margin: 0.5em 0;
overflow: auto;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: #1e1e3f;
}
/* Inline code */
:not(pre) > code[class*='language-'] {
padding: 0.1em;
border-radius: 0.3em;
}
.token {
font-weight: 400;
}
.token.comment,
.token.prolog,
.token.cdata {
color: #b362ff;
}
.token.delimiter,
.token.keyword,
.token.selector,
.token.important,
.token.atrule {
color: #ff9d00;
}
.token.operator,
.token.attr-name {
color: rgb(255, 180, 84);
}
.token.punctuation {
color: #ffffff;
}
.token.boolean {
color: rgb(255, 98, 140);
}
.token.tag,
.token.tag .punctuation,
.token.doctype,
.token.builtin {
color: rgb(255, 157, 0);
}
.token.entity,
.token.symbol {
color: #6897bb;
}
.token.number {
color: #ff628c;
}
.token.property,
.token.constant,
.token.variable {
color: #ff628c;
}
.token.string,
.token.char {
color: #a5ff90;
}
.token.attr-value,
.token.attr-value .punctuation {
color: #a5c261;
}
.token.attr-value .punctuation:first-child {
color: #a9b7c6;
}
.token.url {
color: #287bde;
text-decoration: underline;
}
.token.function {
color: rgb(250, 208, 0);
}
.token.regex {
background: #364135;
}
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.inserted {
background: #00ff00;
}
.token.deleted {
background: #ff000d;
}
code.language-css .token.property,
code.language-css .token.property + .token.punctuation {
color: #a9b7c6;
}
code.language-css .token.id {
color: #ffc66d;
}
code.language-css .token.selector > .token.class,
code.language-css .token.selector > .token.attribute,
code.language-css .token.selector > .token.pseudo-class,
code.language-css .token.selector > .token.pseudo-element {
color: #ffc66d;
}
.token.class-name {
color: #fb94ff;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
background: none;
}
pre .line-highlight,
pre .line-highlight.line-highlight,
pre > code.line-highlight {
margin-top: 36px;
background: linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent);
}
pre .line-highlight:before,
pre > code.line-highlight:before,
pre .line-highlight[data-end]:after,
pre > code.line-highlight[data-end]:after {
content: '';
}

3
src/pages/[roadmapId].astro
View File

@@ -1,5 +1,6 @@
---
import InteractiveRoadamp from "../components/InteractiveRoadmap/InteractiveRoadmap.astro";
import MarkdownRoadmap from "../components/MarkdownRoadmap/MarkdownRoadmap.astro";
import RoadmapHeader from "../components/RoadmapHeader.astro";
import BaseLayout from "../layouts/BaseLayout.astro";
import { getRoadmapIds, RoadmapFrontmatter } from "../lib/roadmap";
@@ -40,5 +41,7 @@ const frontmatter = file.frontmatter as RoadmapFrontmatter;
)
}
<MarkdownRoadmap>
<file.Content />
</MarkdownRoadmap>
</BaseLayout>

6
tailwind.config.cjs
View File

@@ -1,11 +1,11 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,svg}'],
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,svg}"],
theme: {
extend: {},
container: {
center: true,
},
},
plugins: [],
}
plugins: [require("@tailwindcss/typography")],
};