Merge pull request #45 from aloxe/cms-update

update CMS doc and presentation

.eleventy.js

@@ -39,7 +39,15 @@ module.exports = async function(eleventyConfig) {
   // generate responsive images from Markdown
   mdLib.renderer.rules.image = (tokens, idx, options, env, self) => {
     const token = tokens[idx]
-    const imgSrc = env.eleventy.directories.input.slice(0, -1) + token.attrGet('src')
+    const imgPath = token.attrGet('src')
+    const isGlobal = imgPath.slice(0, env.meta.public_folder.length) === env.meta.public_folder
+
+    const imgSrc = isGlobal 
+      ? "./" + env.meta.media_folder + imgPath.slice(env.meta.public_folder.length)
+      : imgPath.slice(0,1) === "/" 
+        ? env.eleventy.directories.input.slice(0, -1) + imgPath
+        : env.page.inputPath.substring(0, env.page.inputPath.lastIndexOf('/')) + "/" + imgPath
+
     const imgAlt = token.content
     const imgTitle = token.attrGet('title') ?? ''
     const className = token.attrGet('class')
@@ -146,6 +154,7 @@ module.exports = async function(eleventyConfig) {
   return {
     dir: {
       input: "src/pages",
+      media: "src/static/img",
       layouts: '../_layouts',
       includes: '../_layouts/includes',
       data: '../_data',

package.json

@@ -16,11 +16,11 @@
     "11ty",
     "tailwind"
   ],
-  "author": "Cam MacFarland",
-  "license": "Unlicense",
-  "homepage": "https://github.com/distantcam/windty#readme",
+  "author": "Alix Guillard",
+  "license": "Art Libre",
+  "homepage": "https://github.com/distantcam/huwindty#readme",
   "bugs": {
-    "url": "https://github.com/distantcam/windty/issues"
+    "url": "https://github.com/distantcam/huwindty/issues"
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",

src/_assets/css/styles.css

@@ -9,10 +9,19 @@
   .mkdn h3 {
     @apply my-4 text-left text-xl font-bold leading-normal text-blue-950
   }
-  .mkdn p {
+  .mkdn p, .mkdn ul, .mkdn ol {
     @apply my-4 text-xl font-light leading-6 text-slate-900
   }
-  .mkdn code, .mkdn ul, .mkdn ol {
+  .mkdn ul {
+    @apply list-disc list-inside
+  }
+  .mkdn ol {
+    @apply list-decimal list-inside
+  }
+  .mkdn li {
+    @apply ml-8 mb-2
+  }
+  .mkdn code {
     @apply text-xl
   }
   .mkdn a {

src/_assets/public/admin/config.yml

@@ -15,8 +15,10 @@ backend:
 
 publish_mode: editorial_workflow # simple, editorial_workflow
 
+# both values bellow must be copied in _data/meta.json
+# to allow responsive formating of images from the right source
 media_folder: "src/static/img"
-public_folder: "/img"
+public_folder: "/img" 
 
 collections:
   - name: "documentation" # Used in routes, e.g., /admin/collections/blog
@@ -30,12 +32,17 @@ collections:
         name: "layout"
         widget: "hidden"
         default: "base"
+      - label: "isMarkdown"
+        name: "isMarkdown"
+        widget: "hidden"
+        default: true
       - label: "Title"
         name: "title"
         widget: "string"
       - label: "subtitle"
         name: "subtitle"
         widget: "string"
+        required: false
       - label: "Body"
         name: "body"
         widget: "markdown"
@@ -51,39 +58,21 @@ collections:
         name: "layout"
         widget: "hidden"
         default: "base"
-      - label: "Title"
-        name: "title"
-        widget: "string"
-      - label: "subtitle"
-        name: "subtitle"
-        widget: "string"
-      - label: "description"
-        name: "description"
-        widget: "string"
-      - label: "Body"
-        name: "body"
-        widget: "markdown"
-  - name: "part-1" # Used in routes, e.g., /admin/collections/blog
-    label: "Part 1" # Used in the UI
-    folder: "src/pages/examples/part-1" # The path to the folder where the documents are stored
-    # about media and public folder https://decapcms.org/docs/collection-folder/#media-and-public-folder
-    media_folder: '' 
-    public_folder: '/{{dirname}}/{{filename}}'
-    create: true # Allow users to create new documents in this collection
-    fields: # All the fields for each document, usually in front matter + body
-      - label: "Layout"
-        name: "layout"
+      - label: "isMarkdown"
+        name: "isMarkdown"
         widget: "hidden"
-        default: "base"
+        default: true
       - label: "Title"
         name: "title"
         widget: "string"
       - label: "subtitle"
         name: "subtitle"
         widget: "string"
+        required: false
       - label: "description"
         name: "description"
         widget: "string"
+        required: false
       - label: "Body"
         name: "body"
-        widget: "markdown"
+        widget: "markdown"

src/_data/meta.json

@@ -5,5 +5,7 @@
   "language": "en",
   "author": {
     "name": "Alix Guillard"
-  }
+  },
+"media_folder": "src/static/img",
+"public_folder": "/img"
 }

src/_layouts/macros/renderNavItem.njk

@@ -24,7 +24,9 @@
   {% for menuEntry in Allentries %}
     {% if menuEntry.url.split("/").length === level + 1 %}
       {%  if menuEntry.url.split("/")[level-2] === entry.url.split("/")[level-2] %}
-        {% set children = (children.push(menuEntry), children) %}
+        {%  if menuEntry.url.split("/")[level-3] === entry.url.split("/")[level-3] %} {# check parent too in case of duplicates #}
+          {% set children = (children.push(menuEntry), children) %}
+       {% endif %}
       {% endif %}
     {% endif %}
   {% endfor %}
@@ -33,14 +35,17 @@
     <li class="relative group {% if entry.url.split("/").length === 4 %}hover:bg-gray-100{% endif %}">
       <div>
         <summary>
+
           <a href="{{ entry.url }}" {% if entry.url == page.url %} aria-current="page"{% endif %} 
-          class="{{aClass(entry)}} 
+          class="{{aClass(entry)}}
           {% if entry.url.split("/").length === 4 %}-mb-4{% endif %}">
             {{ entry.data.title }}</a>
         </summary>
         <ul role="list" class="{{ulClass(entry)}}
           {% if entry.url.split("/").length >= 4 %}ml-2{% endif %}">
-          {%- for child in children %}{{ renderNavItem(child) }}{% endfor -%}
+          {%- for child in children %}
+            {{ renderNavItem(child) }}
+          {% endfor -%}
         </ul>
       </div>
     </li>

src/pages/documentation/cms.md

@@ -6,12 +6,14 @@ ismarkdown: true
 ---
 ## Foreword
 
-I tried a few CMS for eleventy but the only that do not require an extra account other that the git repository system (Forgejo, gitlab or github) are [Decap CMS](https://decapcms.org/) and its recent fork [Sveltia CMS](https://github.com/sveltia/sveltia-cms). This last CMS is my choice because it looks promising with a general better UX. 
+I tried a few CMS for eleventy but the only that do not require an extra account other that the git repository system (Forgejo, gitlab or github) are [Decap CMS](https://decapcms.org/) and its recent fork [Sveltia CMS](https://github.com/sveltia/sveltia-cms). This last CMS is my choice because it looks promising with a better UX a a clear roadmap. 
 
-Nevertheless, Decap CMS still offers more functionality that might be useful, like the workflow or image integration in the editor. For this reason, I chose to live both CMS in this temple. This may help you to choose the one you keep.
+Nevertheless, Decap CMS still offers more functionalities that can also be useful, like an editorial workflow or image integration in the editor. For this reason, I chose to leave both CMS in this starter for now. This may help you to choose the one you keep.
 
 Sveltia CMS is available under `https://aloxe.github.io/huwindty/svetlia` and Decap CMS is available under `https://aloxe.github.io/huwindty/decap/`. both use the same config that is maintained in `_assets/public/admin/config.yml`.
 
+The documentation bellow will detail how to install Sveltia CMS in `_assets/public/admin`, but the same steps apply to Decap CMS and you may rename the admin folder in your site.
+
 ## Sveltia CMS
 
 [Sveltia CMS](https://github.com/sveltia/sveltia-cms) is a content management system (CMS) designed to provide a user-friendly interface to manage content for static site generators. It is firstly created to be hosted by Netifly. It offers a clean interface to create and edit pages that are still saved with git.
@@ -72,8 +74,10 @@ base_url: https://oauth.example.com # Path to ext auth provider
 
 You may also change the `media_folder` where all images and media will be uploaded to. The last part, with the `collections` defines what folders and pages are editable by the CMS as well as the fields that will be available in the CMS. Usually you will set here all variables that are present in the Front Matter of your pages.
 
+In the current setup, I used `media_folder: ''` and `public_folder: '/{{dirname}}/{{filename}}'` to allowimages to be saved in the same folder as the page.
+
 Once the CMS installed, you can go to your website admin section. (i.e. <https://aloxe.github.io/huwindty/admin/>), and once you are authenticated with your github account, you can start edit the pages that are in your config file.
 
 ### User management with github
 
-In your repository settings on Github, go to settings > collaborators and click on the button \[Add people]. Only people that you added will be able to edit your pages.
+In your repository settings on Github, go to settings > collaborators and click on the button \[Add people]. You will be able to add any github user are collaborator. Only people that you added will be able to edit your pages and you can revoque them at any time by removing them from the list.

src/pages/documentation/images.md

@@ -7,7 +7,7 @@ ismarkdown: true
 ---
 ## Image location
 
-With the huwindty template, images are stored within the content (after all, images are content too). They can be added in any folder and their url will always relative the `pages` folder which is the root folder.
+With the huwindty starter, images are stored within the content (after all, images are content too). They can be added in any folder and their url will always relative the `pages` folder which is the root folder.
 
 For example, the image below (`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 use an absolute url for the image source (starting with a `/`).
 
@@ -90,3 +90,13 @@ It is not recommanded to lazy load images that are visible on screen when the pa
 Because of that, all images can't be lazy loaded by default. Instead, content editors can intentionally request lazy loading by adding `"lazy"` as a css class. The responsive image script will add `loading="lazy"` in the output code.
 
 The makrdown example above shows you how to add this class to an image in markdown.
+
+## Images in CMS
+
+This starter comes with a [simple CMS](../cms/) that allows you to add, remove and update pages and media. Images in Svetlia CMS can be added in two ways:
+ - in a dedicated media folder  
+ *(All images are available for all pages)*
+ - in the folder of the current page  
+ *(Images are not reusable in other pages)*
+
+Because the CMS uses Markdown and that images in Markdown are automaticaly converted in responsive pictures, there is nothing else to do other than organise well your images and never forget the alt text.

src/pages/documentation/index.md

@@ -16,4 +16,4 @@ ismarkdown: true
 
 ## wind 🌬️
 
-![Wind is playing with the grass and they are dancing and enjoying the magical moment in their lives. Tinos, Greece](/documentation/vera.jpg)
+![Wind is playing with the grass and they are dancing and enjoying the magical moment in their lives. Tinos, Greece](/img/vera.jpg)

src/pages/documentation/markdown.md

@@ -65,10 +65,12 @@ 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/)
 
+Note that this option is not added in the default pages when they are created by the [CMS](/documentation/cms/).
+
 ### Images
 
 Markdown is not known to be flexible with styling images, but you find a workaround for most of your wishes. There is an extensive blog post about the matter in [How to Style Images With Markdown](https://dzone.com/articles/how-to-style-images-with-markdown).
 
 ### Responsive images
 
-A specific chapter on responsive images explains how this template manages [responsive images](/documentation/images/).
+A specific chapter on responsive images explains how this 11ty starter manages [responsive images](/documentation/images/).

src/pages/examples/images/global/cows.md

@@ -0,0 +1,22 @@
+---
+layout: base
+title: Cows
+subtitle: Yet another example page
+ismarkdown: true
+---
+
+## Picture of cows
+
+This is an example page with an image of cows. The image file is not a global file but it is located higher in the section of the current page.
+
+It can be used with the path from the root of pages but will not be able to be used on other sections.
+
+```markdown
+![drooderfiets and cows](/examples/cows.jpg)
+```
+
+Also it will not be visible in the CMS when editing the current page.
+
+
+![drooderfiets and cows](/examples/cows.jpg)
+

src/pages/examples/images/global/grasshoper.md

@@ -0,0 +1,16 @@
+---
+layout: base
+title: Grasshoper
+subtitle: drooderfiets and grasshopper
+description: An example page with a grasshopper from general folder
+ismarkdown: true
+---
+## Picture with a grasshopper
+
+This is an example page with the image of a grasshopper (made of steel) that was uploaded in the global media folder (Uncategorized). The resulting Markdown code is:
+
+```markdown
+![drooderfiets and grasshopper](/img/grasshopper.jpg)
+```
+
+![drooderfiets and grasshopper](/img/grasshopper.jpg)

src/pages/examples/images/global/heron.md

@@ -0,0 +1,15 @@
+---
+layout: base
+title: Heron
+subtitle: drooderfiets and heron
+description: An example page with a heron from general folder
+ismarkdown: true
+---
+## Picture of a heron
+This is an example page with the image of a heron that was uploaded in a subfolder of the global media folder (Uncategorized). It is accessible from any page. The resulting Markdown code is:
+
+```markdown
+![drooderfiets and grasshopper](/img/animals/heron.jpg)
+```
+
+![drooderfiets and grasshopper](/img/animals/heron.jpg)

src/pages/examples/images/global/index.md

@@ -0,0 +1,8 @@
+---
+layout: base
+title: Global images
+subtitle: Yet another example page
+ismarkdown: true
+---
+This is the head of section global
+

src/pages/examples/images/index.md

@@ -0,0 +1,7 @@
+---
+layout: base
+title: Images
+subtitle: Yet another example page
+---
+
+This is the page at the head of image section.

src/pages/examples/part-1/section-a/index.md → src/pages/examples/images/local/index.md

@@ -1,7 +1,8 @@
 ---
 layout: base
-title: Section A
+title: Local images
 subtitle: Yet another example page
+ismarkdown: true
 ---
 ## This is section A of Part 1
 

src/pages/examples/images/local/sheep.md

@@ -0,0 +1,20 @@
+---
+layout: base
+title: Sheep
+subtitle: Yet another example page
+ismarkdown: true
+---
+## A picture of sheep
+
+This is an example page with photo of sheep that sits in the same folder as the current page.
+
+It is possible to display the image giving the entire path to the file as bellow.
+
+```markdown
+![drooderfiets and sheep](/examples/images/local/sheep.jpg)
+```
+
+While this may help you understand where the file is, it is less practical in the CMS as the image will not be visible in the editor. Though it will still display in the page.
+
+![drooderfiets and sheep](/examples/images/local/sheep.jpg)
+

src/pages/examples/images/local/wasps.md

@@ -0,0 +1,16 @@
+---
+layout: base
+title: Wasps
+subtitle: Yet another example page
+ismarkdown: true
+---
+## A picture with wasps
+
+This is an example page with a photo of wasps that sits in the same folder as the current page. The resulting Markdown code is:
+
+```markdown
+![drooderfiets and wasps](wasps.jpg)
+```
+
+![drooderfiets and wasps](wasps.jpg)
+

src/pages/examples/index.html

@@ -1,6 +1,6 @@
 ---
-title: examples
-subtitle: A few pages to show.
+title: Examples
+subtitle: A few showcase pages.
 description: Page with huwindty.
 layout: base.njk
 ---

src/pages/examples/part-2/1st-page.md → src/pages/examples/pages/1st-page.md

@@ -2,6 +2,7 @@
 layout: base
 title: First page
 subtitle: Finally I am not single
+ismarkdown: true
 ---
 First Page in Part 2
 

src/pages/examples/part-2/2nd-page.md → src/pages/examples/pages/2nd-page.md

@@ -2,6 +2,7 @@
 layout: base
 title: Second page
 subtitle: Finally I am not single
+ismarkdown: true
 ---
 Second Page in Part 2