update README and general info

README.md

@@ -1,20 +1,33 @@
 # huwindty 🌬️
 
-I wanted to use [Windty](https://github.com/distantcam/windty/) for my next [eleventy](https://www.11ty.dev/) project before I realised I need more than just a single page with [Tailwindcss](https://tailwindcss.com/). So I kept the good work and am adding more.
+I wanted to use [Windty](https://github.com/distantcam/windty/) for my next [eleventy](https://www.11ty.dev/) project before I realised I need more than just a single page with [Tailwindcss](https://tailwindcss.com/). So I kept the good work and added more.
 
-## What has been added
-- CI to deploy via FTP to any server
+## What was added
+### Continuous Integration
+- Publication to github pages
+- Deployment to stand alone server via ssh (manual action)
+- Lighthouse checks on key pages for each PR to keep the triple 💯
+### Styles
 - Tailwind css are processed directly by 11ty
-- adding navigation menu generated from pages
+### Navigation
+- Navigation menu is directly generated from page structure
+### Site output
 - Handle markdown with style
+- Process images to make them responsive
+### Content Managment System
+- Installed Decap CMS with content flow
+- Possibility to use Sveltia CMS with the same config
+### Documentation
+- Documentation comes with the package as an example
+- Explains how features are developped
 
-## What I plan to add
-- responsive image processor
+
+## What is still missing
 - better SEO metadata
-- decap CMS
-- in depth doc so I don't get lost when I get back here in 2 years
+- documentation on the CMS
+- maybe a nicer design
 
-## How to use
+## Install
 1. [windty’s template](https://github.com/distantcam/windty/generate), or [clone this one](https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/cloning-a-repository)
 2. Install dependencies: `npm install`
 3. Start development: `npm start`

src/_data/meta.json

@@ -1,8 +1,8 @@
 {
   "title": "Huwindty 🌬️",
   "url": "https://aloxe.github.io/huwindty",
-  "description": "Huwindty is a basic template using 11ty with Tailwind.",
-  "language": "fr",
+  "description": "Huwindty enhanced template using 11ty.",
+  "language": "en",
   "author": {
     "name": "Alix Guillard"
   }

src/pages/documentation/images.md

@@ -5,13 +5,26 @@ subtitle: Edit and manage images
 templateEngineOverride: md
 ismarkdown: true
 ---
+## Image location
+
+With the huwindity template, images are stored within the content (after all, they are part of the content too). They can be added in any folder and their url will always relative the the `pages` folder which is the root folder.
+
+For example, the image bellow (`boat.jpg`) is located in the `/src/pages/documentation/` folder and is used by a page in the same folder. The url used to show it on the page will be `/documentation/boat.jpg`. Always mark the url as an absolute url (starting with a `/`).
+
+```markdown
+![drooderfiets and yellow boat](/documentation/boat.jpg)
+```
+
+### example image
+![drooderfiets and yellow boat](/documentation/boat.jpg)
+
 
 ## Responsive images
 
 Web pages can display on a small phone screen of to a large high definition monitor. Displaying a 3000px wide image on a phone is a waste of ressources that slows down display and showning a 150px picture on a wide monitor might miss some details. Making images responsive is the way to provide the apripriate picture to each screen.
 The article [Responsive images 101](https://cloudfour.com/thinks/responsive-images-101-definitions/) covers everything you need to know about this topic when managing a web site.
 
-## Huwindty choice
+## Default choice
 
 In this template, the eleventy config provides a way to generate responsive images and store them at the right place as well as generating the right responsive code to use them (see .eleventy.js). Image sizes and format can be adjusted accourding to your layout and needs by changing the Images enum at the begining of .eleventy.js:
 
@@ -22,8 +35,6 @@ const Images = {
   SIZES: '(max-width: 1200px) 70vw, 1200px' // size of image rendered
 }
 ```
-### example image
-![drooderfiets and yellow boat](/documentation/boat.jpg)
 
 On markdown pages it will be done directly while parsing the markdown code thanks to the `mdLib.renderer.rules.image` rule.
 
@@ -42,13 +53,13 @@ An example is available on the Huwindty home page
     -->
 ```
 The atributes are the following:
- - ''page'': will provide the current path to generate the right output path. Just leave `page` after the `Picture` and this will be fine
- - ''file name'': On this example there is no path to the current image file since they are in the same folder.
- - ''alt text'' is made compulsory for various reason, I also encourage you to write nice descriptive text that realy help blind people undertand your page.
-  - ''class'': will add a css class to the image so you can change its position and dimension. The specific class `lazy` will also make the image lazy load.
- - ''widths'': will override the default withs in with the output images will be generated. this is particularly useful if you change the size of the image using a css class, you will want to generate images with the same size.
- - ''formats'': will override the default formats
- - ''sizes'': will override the default sizes that are the size that you tell the browser the image will take ahead of downloading and rendering The default is 100vw but if you know your image will display on half of the page you may want to change this to 50vw.
+- **page** will provide the current path to generate the right output path. Just leave `page` after the `Picture` and this will be fine
+- **file name**: On this example there is no path to the current image file since they are in the same folder.
+- **alt text'' is made compulsory for various reason, I also encourage you to write nice descriptive text that realy help blind people undertand your page.
+- **class** will add a css class to the image so you can change its position and dimension. The specific class `lazy` will also make the image lazy load.
+- **widths** will override the default withs in with the output images will be generated. this is particularly useful if you change the size of the image using a css class, you will want to generate images with the same size.
+- **formats** will override the default formats
+- **sizes** will override the default sizes that are the size that you tell the browser the image will take ahead of downloading and rendering The default is 100vw but if you know your image will display on half of the page you may want to change this to 50vw.
 
 ## Responsive Images in Markdown
 

src/pages/documentation/index.md

@@ -9,9 +9,9 @@ ismarkdown: true
 ## Table of content
 
 {% for post in collections.documentation | reverse %}
-{% if post.data.title != 'documentation' %}
-- [{{post.data.title}}]({{post.url}})
-{% endif %}
+  {% if post.data.title != 'documentation' %}
+  - [{{post.data.title}}]({{post.url}})
+  {% endif %}
 {% endfor %}
 
 ## wind 🌬️

src/pages/index.html

@@ -1,7 +1,7 @@
 ---
 title: Huwindty 🌬️
 subtitle: A basic template using 11ty with Tailwind.
-description: A basic template using 11ty with Tailwind.
+description: The basic 11ty template windty with a few upgrades.
 layout: base.njk
 ---
   <div class="w-full sm:w-2/3 sm:p-4 md:border sm:border-black mx-auto">
@@ -14,12 +14,14 @@
       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>
   <div class="my-8 w-full">
-    <svg class="h-12 mx-auto" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <title>GitHub</title>
-      <path
-        d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-      />
-    </svg>
+    <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">
+        <title>GitHub</title>
+        <path
+          d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+        />
+      </svg>
+    </a>
   </div>