reorganise stylewith style / mkdn and the rest inline

.eleventy.js

@@ -182,12 +182,9 @@ const postcssFilter = (cssCode, done) => {
     require('postcss-import'),
     tailwind(require('./tailwind.config')),
     autoprefixer(),
-    // TODO use purgecss for each layout
-    // minify css
-    cssnano({ preset: 'default' })
+    cssnano({ preset: 'default' }) // minify css
   ])
     .process(cssCode, {
-      // path to our CSS file
       from: './src/_assets/css/styles.css'
     })
     .then(

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
+*/
+

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
-*/
 

src/_layouts/includes/head.njk

@@ -34,17 +34,23 @@
 
 <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ "feed.xml" }}" />
 
-<link rel="stylesheet" href="{{ '/css/styles.css' }}" preload>
-<!--
-/*
-highlightjs theme from https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css
-other examples here: https://highlightjs.org/examples
-*/ -->
 {% if ismarkdown %}
-<style>
-	{% set css %}
-	{% include "src/_assets/public/css/highlightjs.css" %}
-	{% endset %}
-	{{css | postcss | safe}}
-</style>
+  <link rel="stylesheet" href="{{ '/css/mkdn.css' }}" preload>
+{% else %}
+  <link rel="stylesheet" href="{{ '/css/styles.css' }}" preload>
+{% 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 <link rel="stylesheet" as the stylesheets above.
+  In that case, you will need to create a new file in /src/pages/css/ 
+  #}
+  <style>
+    {% set css %}
+      {% include "src/_assets/css/highlightjs.css" %}
+    {% endset %}
+    {{css | postcss | safe}}
+  </style>
 {% endif %}

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}}

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}}

src/pages/documentation/styles.md

@@ -4,6 +4,7 @@ title: Styles
 subtitle: How to style your site with Tailwind css
 description: Styles in huwindty with tailwind
 ismarkdown: true
+templateEngineOverride: md
 ---
 ## Tailwind CSS
 
@@ -15,11 +16,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 +85,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.

src/pages/index.html

@@ -13,6 +13,7 @@
     <div
       class="text-sm text-gray-500 text-center">photo: <a href="https://unsplash.com/photos/green-grass-field-during-daytime-J_CutWQnT78">Vera Davidova</a></div>
   </div>
+  <h2>titre de niveau 2</h2>
   <div class="my-8 w-full">
     <a href="https://github.com/aloxe/huwindty">
       <svg class="h-12 mx-auto" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">