diff --git a/.editorconfig b/.editorconfig index 6585b4a..519f7c6 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,2 +1,5 @@ [*.js] -indent_size = 2 \ No newline at end of file +indent_size = 2 + +[*.css] +indent_size = 2 diff --git a/.eleventy.js b/.eleventy.js index 47698e8..89c9245 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -2,6 +2,7 @@ const { mkdirSync } = require('fs') const cagovBuildSystem = require('@cagov/11ty-build-system') const svgContents = require('eleventy-plugin-svg-contents') const faviconPlugin = require('eleventy-favicon') +const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight') module.exports = (eleventyConfig) => { eleventyConfig.setUseGitIgnore(false) @@ -29,6 +30,8 @@ module.exports = (eleventyConfig) => { destination: './dist' }) + eleventyConfig.addPlugin(syntaxHighlight) + eleventyConfig.addCollection('notes', function (collectionApi) { return collectionApi.getFilteredByGlob('src/notes/**/*.md') }) diff --git a/package-lock.json b/package-lock.json index ecd5b3e..7a8713f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,6 +48,36 @@ "recursive-copy": "^2.0.14", "semver": "^7.3.7", "slugify": "^1.6.5" + }, + "dependencies": { + "argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true + }, + "linkify-it": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz", + "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==", + "dev": true, + "requires": { + "uc.micro": "^1.0.1" + } + }, + "markdown-it": { + "version": "12.3.2", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz", + "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==", + "dev": true, + "requires": { + "argparse": "^2.0.1", + "entities": "~2.1.0", + "linkify-it": "^3.0.1", + "mdurl": "^1.0.1", + "uc.micro": "^1.0.5" + } + } } }, "@11ty/eleventy-fetch": { @@ -75,6 +105,49 @@ "sharp": "^0.30.3" } }, + "@11ty/eleventy-plugin-syntaxhighlight": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-4.0.0.tgz", + "integrity": "sha512-t95DIZQ7MnaspgpmXyKIgz2TpyN7EshMt9+SFfqVUYKTISU3+T3FTXFscoLownyNWb/5EC0od69BnCZwEcMzCg==", + "dev": true, + "requires": { + "linkedom": "^0.13.2", + "prismjs": "^1.26.0" + }, + "dependencies": { + "entities": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz", + "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==", + "dev": true + }, + "htmlparser2": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz", + "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==", + "dev": true, + "requires": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.2", + "domutils": "^2.8.0", + "entities": "^3.0.1" + } + }, + "linkedom": { + "version": "0.13.7", + "resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.13.7.tgz", + "integrity": "sha512-We9cyPHV/exsrC43KXtItjqSTxwrK9pLpOnG6TLzqXrmqwe/wqd3Gi6eAAU4YCqfTgy79R8g75hY2fS7723XUg==", + "dev": true, + "requires": { + "css-select": "^4.2.1", + "cssom": "^0.5.0", + "html-escaper": "^3.0.3", + "htmlparser2": "^7.2.0", + "uhyphen": "^0.1.0" + } + } + } + }, "@11ty/eleventy-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz", @@ -1491,6 +1564,12 @@ "css-tree": "^1.1.2" } }, + "cssom": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", + "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==", + "dev": true + }, "dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", @@ -3151,6 +3230,12 @@ } } }, + "html-escaper": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz", + "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==", + "dev": true + }, "html-minifier": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz", @@ -3890,15 +3975,6 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, - "linkify-it": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz", - "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==", - "dev": true, - "requires": { - "uc.micro": "^1.0.1" - } - }, "liquidjs": { "version": "9.37.0", "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-9.37.0.tgz", @@ -4045,27 +4121,6 @@ "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==", "dev": true }, - "markdown-it": { - "version": "12.3.2", - "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz", - "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==", - "dev": true, - "requires": { - "argparse": "^2.0.1", - "entities": "~2.1.0", - "linkify-it": "^3.0.1", - "mdurl": "^1.0.1", - "uc.micro": "^1.0.5" - }, - "dependencies": { - "argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true - } - } - }, "mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", @@ -5185,6 +5240,12 @@ "js-beautify": "^1.6.12" } }, + "prismjs": { + "version": "1.28.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz", + "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==", + "dev": true + }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -6989,6 +7050,12 @@ "integrity": "sha512-hNM5q5GbBRB5xB+PMqVRcgYe4c8jbyZ1pzZhS6jbq54/4F2gFK869ZheiE5A8/t+W5jtTNpWef/5Q9zk639FNQ==", "dev": true }, + "uhyphen": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/uhyphen/-/uhyphen-0.1.0.tgz", + "integrity": "sha512-o0QVGuFg24FK765Qdd5kk0zU/U4dEsCtN/GSiwNI9i8xsSVtjIAOdTaVhLwZ1nrbWxFVMxNDDl+9fednsOMsBw==", + "dev": true + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/package.json b/package.json index 2ea5eb1..411e271 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "devDependencies": { "@11ty/eleventy": "^1.0.1", "@11ty/eleventy-img": "^2.0.0", + "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0", "@cagov/11ty-build-system": "^0.3.0", "@rollup/plugin-node-resolve": "^13.3.0", "autoprefixer": "^10.4.7", @@ -26,11 +27,13 @@ "nano-staged": "^0.8.0", "postcss": "^8.4.13", "postcss-import": "^14.1.0", + "prismjs": "^1.28.0", "rollup": "^2.72.1", "rollup-plugin-terser": "^7.0.2", "simple-git-hooks": "^2.7.0", "stylelint": "^14.8.2", "stylelint-config-standard": "^25.0.0", "tailwindcss": "^3.0.24" - } + }, + "dependencies": {} } diff --git a/src/css/components/article-content.css b/src/css/components/article-content.css new file mode 100644 index 0000000..1db3116 --- /dev/null +++ b/src/css/components/article-content.css @@ -0,0 +1,19 @@ +.article-content { + @apply px-12; +} + +.article-content h1 { + @apply text-5xl font-semibold py-4; +} + +.article-content h2 { + @apply text-3xl py-4; +} + +.article-content p { + @apply py-1; +} + +.article-content code { + @apply font-mono; +} diff --git a/src/css/components/index.css b/src/css/components/index.css new file mode 100644 index 0000000..2df9bc5 --- /dev/null +++ b/src/css/components/index.css @@ -0,0 +1 @@ +@import "article-content.css"; diff --git a/src/css/index.css b/src/css/index.css index 8279bc4..33fd6e7 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -1,4 +1,6 @@ @import "fonts.css"; +@import "prismjs/themes/prism-okaidia.css"; @import "tailwindcss/base"; @import "tailwindcss/components"; +@import "components"; @import "tailwindcss/utilities"; diff --git a/src/pages/note.njk b/src/pages/note.njk index 4a53070..6d56ee1 100644 --- a/src/pages/note.njk +++ b/src/pages/note.njk @@ -1 +1,6 @@ -{{ note.templateContent | safe }} \ No newline at end of file +
+
+

{{ note.data.title | safe }}

+ {{ note.templateContent | safe }} +
+
\ No newline at end of file