From f7c6faadc6656cba5c06dc58390d37b17c9e5d71 Mon Sep 17 00:00:00 2001 From: aloxe Date: Sat, 21 Dec 2024 23:46:37 +0100 Subject: [PATCH] reorganise stylewith style / mkdn and the rest inline --- .eleventy.js | 4 +- src/_assets/{public => }/css/highlightjs.css | 6 +++ src/_assets/css/mkdn.css | 41 ++++++++++++++++++++ src/_assets/css/styles.css | 34 ---------------- src/_layouts/includes/head.njk | 30 ++++++++------ src/pages/css/mkdn.css.njk | 9 +++++ src/pages/css/styles.css.njk | 2 +- src/pages/documentation/styles.md | 32 +++++++++++++-- src/pages/index.html | 1 + 9 files changed, 107 insertions(+), 52 deletions(-) rename src/_assets/{public => }/css/highlightjs.css (80%) create mode 100644 src/_assets/css/mkdn.css create mode 100644 src/pages/css/mkdn.css.njk diff --git a/.eleventy.js b/.eleventy.js index 37c9c1a..d731a79 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -178,16 +178,16 @@ function htmlminTransform(content, outputPath) { } const postcssFilter = (cssCode, done) => { + console.log("postcssFilter", cssCode); + postCss([ require('postcss-import'), tailwind(require('./tailwind.config')), autoprefixer(), - // TODO use purgecss for each layout // minify css cssnano({ preset: 'default' }) ]) .process(cssCode, { - // path to our CSS file from: './src/_assets/css/styles.css' }) .then( diff --git a/src/_assets/public/css/highlightjs.css b/src/_assets/css/highlightjs.css similarity index 80% rename from src/_assets/public/css/highlightjs.css rename to src/_assets/css/highlightjs.css index b26a9da..a47476a 100644 --- a/src/_assets/public/css/highlightjs.css +++ b/src/_assets/css/highlightjs.css @@ -1 +1,7 @@ +/* +highlightjs theme from https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css +slightly modified to be more readable +other themes here: https://highlightjs.org/examples +*/ + pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#1d212c}.hljs-comment,.hljs-quote{color:#9fa985;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#f8969e}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline} diff --git a/src/_assets/css/mkdn.css b/src/_assets/css/mkdn.css new file mode 100644 index 0000000..facd430 --- /dev/null +++ b/src/_assets/css/mkdn.css @@ -0,0 +1,41 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + .mkdn h2 { + @apply mt-8 mb-6 text-left text-2xl font-bold leading-tight text-indigo-800 + } + .mkdn h3 { + @apply my-4 text-left text-xl font-bold leading-normal text-blue-950 + } + .mkdn p, .mkdn ul, .mkdn ol { + @apply my-4 text-xl font-light leading-6 text-slate-900 + } + .mkdn ul { + @apply list-disc + } + .mkdn ol { + @apply list-decimal + } + .mkdn li { + @apply ml-8 mb-2 + } + .mkdn code { + @apply text-xl + } + .mkdn a { + @apply text-blue-900 underline underline-offset-2 hover:no-underline + } + .mkdn .note { + @apply text-cyan-900 bg-sky-200 border p-4 border-cyan-900 border-l-8 + before:content-['ⓘ_Note:_'] before:font-bold + } +} + +/* Markdown style +see: https://aloxe.github.io/huwindty/documentation/styles/ +other solution for markdown styling +read: https://dev.to/matthewtole/eleventy-markdown-and-tailwind-css-14f8 +*/ + diff --git a/src/_assets/css/styles.css b/src/_assets/css/styles.css index e2e49fa..bcf21eb 100644 --- a/src/_assets/css/styles.css +++ b/src/_assets/css/styles.css @@ -2,38 +2,4 @@ @tailwind components; @tailwind utilities; -@layer components { - .mkdn h2 { - @apply mt-8 mb-6 text-left text-2xl font-bold leading-tight text-indigo-800 - } - .mkdn h3 { - @apply my-4 text-left text-xl font-bold leading-normal text-blue-950 - } - .mkdn p, .mkdn ul, .mkdn ol { - @apply my-4 text-xl font-light leading-6 text-slate-900 - } - .mkdn ul { - @apply list-disc - } - .mkdn ol { - @apply list-decimal - } - .mkdn li { - @apply ml-8 mb-2 - } - .mkdn code { - @apply text-xl - } - .mkdn a { - @apply text-blue-900 underline underline-offset-2 hover:no-underline - } - .mkdn .note { - @apply text-cyan-900 bg-sky-200 border p-4 border-cyan-900 border-l-8 - before:content-['ⓘ_Note:_'] before:font-bold - } -} - -/* other solution for styling -read: https://dev.to/matthewtole/eleventy-markdown-and-tailwind-css-14f8 -*/ diff --git a/src/_layouts/includes/head.njk b/src/_layouts/includes/head.njk index 445dd39..675ba2c 100644 --- a/src/_layouts/includes/head.njk +++ b/src/_layouts/includes/head.njk @@ -34,17 +34,23 @@ - - {% if ismarkdown %} - + +{% else %} + +{% endif %} + +{% if ismarkdown %} + {# the markdown styles are included online to avoid render-blocking styles + https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/ + If you have more big styles on many pages, it may be a better idea + to load them via a + {% set css %} + {% include "src/_assets/css/highlightjs.css" %} + {% endset %} + {{css | postcss | safe}} + {% endif %} \ No newline at end of file diff --git a/src/pages/css/mkdn.css.njk b/src/pages/css/mkdn.css.njk new file mode 100644 index 0000000..351f648 --- /dev/null +++ b/src/pages/css/mkdn.css.njk @@ -0,0 +1,9 @@ +--- +eleventyExcludeFromCollections: true +permalink: /css/mkdn.css +--- + +{% set css %} + {% include "../../_assets/css/mkdn.css" %} +{% endset %} +{{css | postcss | safe}} \ No newline at end of file diff --git a/src/pages/css/styles.css.njk b/src/pages/css/styles.css.njk index 2e15ac7..e7b8c9a 100644 --- a/src/pages/css/styles.css.njk +++ b/src/pages/css/styles.css.njk @@ -4,6 +4,6 @@ permalink: /css/styles.css --- {% set css %} -{% include "../../_assets/css/styles.css" %} + {% include "../../_assets/css/styles.css" %} {% endset %} {{css | postcss | safe}} \ No newline at end of file diff --git a/src/pages/documentation/styles.md b/src/pages/documentation/styles.md index 192d89a..3958caa 100644 --- a/src/pages/documentation/styles.md +++ b/src/pages/documentation/styles.md @@ -15,11 +15,32 @@ Tailwind CSS generates CSS code using a combination of configuration files, Java For this starter project, CSS generation is managed by eleventy.js. -In [windty](https://github.com/distantcam/windty), the previous starter, css was generated with a separate run script in packages.json. The default `npm start` was triggering both 11ty and tailwind generation. The Postcss configuration was in a separate file. +In the origin starter [windty](https://github.com/distantcam/windty), css was generated with a separate run script in packages.json. The default `npm start` was triggering both 11ty and tailwind generation. The Postcss configuration was in a separate file. -I moved the css generation directly to the `eleventy.js` config file. It still uses Postcss. +Now the css is generated from a specific css template that is processed by eleventy. +```js +--- +eleventyExcludeFromCollections: true +permalink: /css/styles.css +--- -Here is what processes the styles in `eleventy.js`: +{% set css %} + {% include "../../_assets/css/styles.css" %} +{% endset %} +{{css | postcss | safe}} +``` + +Thanks to the `permalink: /css/styles.css`, the file is created in the `_site` folder, and because the include file is in the watch target, the tailwind css is processed. + +```js + // Watch targets + eleventyConfig.addWatchTarget("./src/_assets/css/"); + + // process css + eleventyConfig.addNunjucksAsyncFilter('postcss', postcssFilter); +``` + +The css generation still uses Postcss which is set directly in the `eleventy.js` config file: ```js const postcssFilter = (cssCode, done) => { @@ -63,6 +84,11 @@ In order to keep markdown files to focus on content I chose to implement the fir } ``` +### The mkdn.css stylesheet + +For better performence the stylesheet loaded for markdown is only loaded for pages generated from markdown. This allows pages generated from html to load the basic styles.css stylesheet without the markdown styles. + + ### Additional markdown styles In addition, the markdown-it-attrs plugins allows for additional classes to be added to the markdown output. This allows to specific styles to markdown components. As an example you can look at the note above within the same layer component. diff --git a/src/pages/index.html b/src/pages/index.html index 2713a54..8bc1a3f 100644 --- a/src/pages/index.html +++ b/src/pages/index.html @@ -13,6 +13,7 @@
photo: Vera Davidova
+

titre de niveau 2