diff --git a/package-lock.json b/package-lock.json index 2176df068..1859f98c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 7c6fdbe49..ccb7f997f 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "tailwindcss": "^3.2.4" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.8", "prettier": "^2.8.1", "prettier-plugin-astro": "^0.7.0" } diff --git a/src/components/MarkdownRoadmap/MarkdownRoadmap.astro b/src/components/MarkdownRoadmap/MarkdownRoadmap.astro new file mode 100644 index 000000000..1a0ec20d2 --- /dev/null +++ b/src/components/MarkdownRoadmap/MarkdownRoadmap.astro @@ -0,0 +1,9 @@ +--- +import "./Prism.css"; +--- + +
+
+ +
+
diff --git a/src/components/MarkdownRoadmap/Prism.css b/src/components/MarkdownRoadmap/Prism.css new file mode 100644 index 000000000..699c9741b --- /dev/null +++ b/src/components/MarkdownRoadmap/Prism.css @@ -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: ''; +} diff --git a/src/pages/[roadmapId].astro b/src/pages/[roadmapId].astro index 6d21997ee..1b02a4a08 100644 --- a/src/pages/[roadmapId].astro +++ b/src/pages/[roadmapId].astro @@ -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; ) } - + + + diff --git a/tailwind.config.cjs b/tailwind.config.cjs index b145b309f..cd7e90fbd 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,11 +1,11 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,svg}'], - theme: { - extend: {}, - container: { - center: true, - }, - }, - plugins: [], -} + content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,svg}"], + theme: { + extend: {}, + container: { + center: true, + }, + }, + plugins: [require("@tailwindcss/typography")], +};