add styles and markdown in the documentation

package.json

@@ -1,15 +1,15 @@
 {
-  "name": "windty",
-  "version": "1.0.0",
-  "description": "Simple 11ty template with tailwind",
+  "name": "huwindty",
+  "version": "0.1.0",
+  "description": "humbly upgraded 11ty template with tailwind",
   "scripts": {
     "start": "eleventy --serve",
     "build": "cross-env ELEVENTY_PRODUCTION=true eleventy",
     "clean": "rimraf _site"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/distantcam/windty.git"
+    "url": "https://github.com/aloxe/huwindty.git"
   },
   "keywords": [
     "eleventy",

src/_assets/css/styles.css

@@ -19,6 +19,10 @@
   .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 

src/pages/documentation/markdown.md

@@ -0,0 +1,70 @@
+---
+title: Markdown
+subtitle: Using Markdown in 11ty
+layout: base.njk
+ismarkdown: true
+---
+
+## Markdown
+
+Markdown is a lightweight markup language that allows you to create formatted text using plain text syntax. It is easy to read and write and is often used with 11ty.
+
+pages using markdown are the same as html pages, they use the same front mattter but the content is written in markdown. the file extention is `.md`.
+
+## Markdown configuration
+
+In this starter, 11ty isparsing markdown with `markdown-it` to generate the html pages. The configuration for `markdown-it` is in `eleventy.js`.
+
+```js
+const mdit = require('markdown-it')
+const mditAttrs = require('markdown-it-attrs');
+const mditHighlight = require('markdown-it-highlightjs');
+
+module.exports = function(eleventyConfig) {
+  const mditOptions = {
+    html: true,
+    breaks: true,
+    linkify: true,
+    typographer: true,
+  }
+  const mdLib = mdit(mditOptions).use(mditAttrs).use(mditHighlight, { inline: true }).disable('code')
+  eleventyConfig.setLibrary('md', mdLib)
+}
+```
+
+## Plugins
+
+`markdown-it` accepts additional plugins. The following plugins are included in the default configuration.
+
+### [markdown-it-attrs](https://www.npmjs.com/package/markdown-it-attrs)
+
+  This plugin allows you to use attributes in markdown syntax. For example, `![image](image.png){.logo}` will output `image.png`, `alt="image"` and `class="logo"` in the html.
+
+  Some examples are available in [Add HTML classes to 11ty markdown content](https://giuliachiola.dev/posts/add-html-classes-to-11ty-markdown-content/).
+
+  ### [markdown-it-highlight](https://www.npmjs.com/package/markdown-it-highlight)
+
+    This plugin allows you to highlight code in markdown syntax. For example, ````javascript` will output `<pre><code class="language-javascript"></code></pre>` in the html.
+
+  The highlights uses a theme which is added in a css in the `src/_assets/public/css/highlightjs.css`
+
+  Other themes are available in the [highlight.js example page](https://highlightjs.org/examples)
+
+  ## Pitfalls
+
+  ### nunjucks code in Markdown
+
+Combining nunjucks code in markdown can be very powerfull, a few examples are given in [Custom Markdown Components in 11ty](https://www.aleksandrhovhannisyan.com/blog/custom-markdown-components-in-11ty/).
+
+On the other end, this is not possible to directly add nunjucks code in markdown code blocks. To make this possible you need to change the template engine from nunjucks to markdown for the page you want to add the nunjucks code. 
+
+```bash
+templateEngineOverride: md # for when you have njk in code blocks
+```
+
+This is explained in detail in [Eleventy: Escaping Nunjucks Statements in Markdown Code Blocks](https://markllobrera.com/posts/eleventy-escaping-nunjucks-statements-in-markdown-code-blocks/)
+
+### Images
+
+There is a extensive blog post about the matter in [How to Style Images With Markdown](https://dzone.com/articles/how-to-style-images-with-markdown)
+

src/pages/documentation/styles.md

@@ -0,0 +1,85 @@
+---
+title: Styles
+subtitle: How to style your site with Tailwind css
+layout: base.njk
+ismarkdown: true
+---
+
+## Tailwind CSS
+Tailwind CSS is a utility-first CSS framework that allows you to write more concise and maintainable CSS code. Tailwind focuses on providing low-level utility classes that can be combined to create custom components.
+
+Tailwind CSS generates CSS code using a combination of configuration files, JavaScript, and PostCSS plugins.
+
+## CSS generation
+
+For this starter project, CSS generation is managed by eleventy.js.
+
+In the previous 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.{.note}
+
+The css generation was moved to the `eleventy.js` script. It still uses the tailwind configuration in `tailwind.config.js` but the postcss configuration is now part of `eleventy.js`.
+
+```js
+const postcssFilter = (cssCode, done) => {
+  postCss([
+    require('postcss-import'),
+    tailwind(require('./tailwind.config')),
+    autoprefixer(),
+  ])
+    .process(cssCode, {
+      from: './src/_assets/css/styles.css'
+    })
+    .then(
+      (r) => done(null, r.css),
+      (e) => done(e, null)
+    );
+}
+```
+This configuration was inspired by the blog post [How to Integrate PostCSS and Tailwind CSS](https://zenzes.me/eleventy-integrate-postcss-and-tailwind-css/).
+
+## Tailwind and Markdown
+
+Tailwind CSS is ideal to use in html files but markdown doesn't support tailwind snippets. For this, the blog post [Eleventy, Markdown, and Tailwind CSS](https://dev.to/matthewtole/eleventy-markdown-and-tailwind-css-14f8) proposes two solutions: _Create custom Tailwind components_ and _Add classes to the Markdown output_. The first solution was chosen:
+
+```css
+@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 {
+    @apply my-4 text-xl font-light leading-6 text-slate-900
+  }
+  …
+}
+```
+### Additional markdown styles
+
+In addition, the markdown-it-attrs plugins allows for additional classes to be added to the markdown output. This allows to style the note above within the same layer component.
+
+```css
+  .mkdn .note {
+    @apply text-cyan-900 bg-sky-200 border p-4 border-cyan-900 border-l-8
+    before:content-['ⓘ_Note:_'] before:font-bold
+  }
+```
+
+The `markdown-it-attrs` plugin is simply added to the call for the markdown parser `markdown-it` that is loaded in `eleventy.js`.
+
+```js
+const mdit = require('markdown-it')
+const mditAttrs = require('markdown-it-attrs');
+const mditHighlight = require('markdown-it-highlightjs');
+
+module.exports = function(eleventyConfig) {
+  const mditOptions = {
+    html: true,
+    breaks: true,
+    linkify: true,
+    typographer: true,
+  }
+  const mdLib = mdit(mditOptions).use(mditAttrs).use(mditHighlight, { inline: true }).disable('code')
+  eleventyConfig.setLibrary('md', mdLib)
+}
+```