добавляет страницу /notes/*

- добавляет базовые стили для h1,h2, p, code - добавляет подстветку синтаксиса
2022-05-16 17:42:36 +03:00 · 2022-05-16 17:42:36 +03:00 · c847c611f4
commit c847c611f4
parent 18852b9ce9
8 changed files with 136 additions and 33 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -1,2 +1,5 @@
 [*.js]
 indent_size = 2
+
+[*.css]
+indent_size = 2
--- 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')
  })
--- 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",
--- a/package.json
+++ b/package.json
@ -10,6 +10,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",
@ -25,11 +26,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": {}
 }
--- a/src/css/components/article-content.css
+++ 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;
+}
--- a/src/css/components/index.css
+++ b/src/css/components/index.css
@ -0,0 +1 @@
+@import "article-content.css";
--- 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";
--- a/src/pages/note.njk
+++ b/src/pages/note.njk
@ -1 +1,6 @@
-{{ note.templateContent | safe }}
+<main>
+    <article class="article-content">
+        <h1>{{ note.data.title | safe }}</h1>
+        {{ note.templateContent | safe }}
+    </article>
+</main>