diff --git a/.eleventy.js b/.eleventy.js index 9e4a2d1..8fff436 100644 --- a/.eleventy.js +++ b/.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', diff --git a/package.json b/package.json index 75e9210..b44f3ac 100644 --- a/package.json +++ b/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", diff --git a/src/_assets/css/styles.css b/src/_assets/css/styles.css index eb49af9..d95565c 100644 --- a/src/_assets/css/styles.css +++ b/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 { diff --git a/src/_assets/public/admin/config.yml b/src/_assets/public/admin/config.yml index 9ca6622..58b651c 100644 --- a/src/_assets/public/admin/config.yml +++ b/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" \ No newline at end of file + widget: "markdown" diff --git a/src/_data/meta.json b/src/_data/meta.json index 9ecac83..e7bc1e5 100644 --- a/src/_data/meta.json +++ b/src/_data/meta.json @@ -5,5 +5,7 @@ "language": "en", "author": { "name": "Alix Guillard" - } + }, +"media_folder": "src/static/img", +"public_folder": "/img" } diff --git a/src/_layouts/macros/renderNavItem.njk b/src/_layouts/macros/renderNavItem.njk index ea29069..8606d9e 100644 --- a/src/_layouts/macros/renderNavItem.njk +++ b/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 @@
  • + {{ entry.data.title }}
  • diff --git a/src/pages/documentation/cms.md b/src/pages/documentation/cms.md index 85e1924..a3241bc 100644 --- a/src/pages/documentation/cms.md +++ b/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. ), 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. diff --git a/src/pages/documentation/images.md b/src/pages/documentation/images.md index c0d9ca8..8ae00f3 100644 --- a/src/pages/documentation/images.md +++ b/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. \ No newline at end of file diff --git a/src/pages/documentation/index.md b/src/pages/documentation/index.md index cb3430a..b9de623 100644 --- a/src/pages/documentation/index.md +++ b/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) diff --git a/src/pages/documentation/markdown.md b/src/pages/documentation/markdown.md index 87e702b..8a1daa7 100644 --- a/src/pages/documentation/markdown.md +++ b/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/). diff --git a/src/pages/examples/images/global/cows.md b/src/pages/examples/images/global/cows.md new file mode 100644 index 0000000..b33cd79 --- /dev/null +++ b/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) + diff --git a/src/pages/examples/images/global/grasshoper.md b/src/pages/examples/images/global/grasshoper.md new file mode 100644 index 0000000..ac60f02 --- /dev/null +++ b/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) diff --git a/src/pages/examples/images/global/heron.md b/src/pages/examples/images/global/heron.md new file mode 100644 index 0000000..86ce4e3 --- /dev/null +++ b/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) diff --git a/src/pages/examples/images/global/index.md b/src/pages/examples/images/global/index.md new file mode 100644 index 0000000..2da0c69 --- /dev/null +++ b/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 + diff --git a/src/pages/examples/images/index.md b/src/pages/examples/images/index.md new file mode 100644 index 0000000..e28159c --- /dev/null +++ b/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. \ No newline at end of file diff --git a/src/pages/examples/part-1/section-a/index.md b/src/pages/examples/images/local/index.md similarity index 70% rename from src/pages/examples/part-1/section-a/index.md rename to src/pages/examples/images/local/index.md index fbf4321..282d209 100644 --- a/src/pages/examples/part-1/section-a/index.md +++ b/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 diff --git a/src/pages/examples/part-1/section-a/sheep.jpg b/src/pages/examples/images/local/sheep.jpg similarity index 100% rename from src/pages/examples/part-1/section-a/sheep.jpg rename to src/pages/examples/images/local/sheep.jpg diff --git a/src/pages/examples/images/local/sheep.md b/src/pages/examples/images/local/sheep.md new file mode 100644 index 0000000..f9ba6d9 --- /dev/null +++ b/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) + diff --git a/src/pages/examples/part-1/section-a/wasps.jpg b/src/pages/examples/images/local/wasps.jpg similarity index 100% rename from src/pages/examples/part-1/section-a/wasps.jpg rename to src/pages/examples/images/local/wasps.jpg diff --git a/src/pages/examples/images/local/wasps.md b/src/pages/examples/images/local/wasps.md new file mode 100644 index 0000000..36ee09e --- /dev/null +++ b/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) + diff --git a/src/pages/examples/index.html b/src/pages/examples/index.html index bc274cd..73afac8 100644 --- a/src/pages/examples/index.html +++ b/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 --- diff --git a/src/pages/examples/part-2/1st-page.md b/src/pages/examples/pages/1st-page.md similarity index 84% rename from src/pages/examples/part-2/1st-page.md rename to src/pages/examples/pages/1st-page.md index 9dda280..b711f6a 100644 --- a/src/pages/examples/part-2/1st-page.md +++ b/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 diff --git a/src/pages/examples/part-2/2nd-page.md b/src/pages/examples/pages/2nd-page.md similarity index 85% rename from src/pages/examples/part-2/2nd-page.md rename to src/pages/examples/pages/2nd-page.md index 9a3e265..a8bda84 100644 --- a/src/pages/examples/part-2/2nd-page.md +++ b/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 diff --git a/src/pages/examples/part-2/3rd-page.md b/src/pages/examples/pages/3rd-page.md similarity index 84% rename from src/pages/examples/part-2/3rd-page.md rename to src/pages/examples/pages/3rd-page.md index a21c2d8..768c9e3 100644 --- a/src/pages/examples/part-2/3rd-page.md +++ b/src/pages/examples/pages/3rd-page.md @@ -2,6 +2,7 @@ layout: base title: Third page subtitle: Finally I am not single +ismarkdown: true --- Third Page in Part 2 diff --git a/src/pages/examples/part-2/index.md b/src/pages/examples/pages/index.md similarity index 100% rename from src/pages/examples/part-2/index.md rename to src/pages/examples/pages/index.md diff --git a/src/pages/examples/part-1/index.md b/src/pages/examples/part-1/index.md deleted file mode 100644 index e3e639e..0000000 --- a/src/pages/examples/part-1/index.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: base -title: Part 1 -subtitle: Yet another example page ---- - -This is the page Part 1 \ No newline at end of file diff --git a/src/pages/examples/part-1/section-a/cows.md b/src/pages/examples/part-1/section-a/cows.md deleted file mode 100644 index 0e62e82..0000000 --- a/src/pages/examples/part-1/section-a/cows.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: base -title: Cows -subtitle: Yet another example page ---- -## A picture of cows - -![drooderfiets and cows](/examples/cows.jpg) - diff --git a/src/pages/examples/part-1/section-a/sheep.md b/src/pages/examples/part-1/section-a/sheep.md deleted file mode 100644 index 9df0c04..0000000 --- a/src/pages/examples/part-1/section-a/sheep.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: base -title: Sheep -subtitle: Yet another example page ---- -## A picture of sheep - -![drooderfiets and sheep](/examples/part-1/section-a/sheep.jpg) - diff --git a/src/pages/examples/part-1/section-a/wasps.md b/src/pages/examples/part-1/section-a/wasps.md deleted file mode 100644 index bc7c448..0000000 --- a/src/pages/examples/part-1/section-a/wasps.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: base -title: Wasps -subtitle: Yet another example page ---- -## A picture of wasps - -![drooderfiets and wasps](/examples/part-1/section-a/wasps.jpg) - diff --git a/src/pages/examples/part-1/section-b/index.md b/src/pages/examples/part-1/section-b/index.md deleted file mode 100644 index f197669..0000000 --- a/src/pages/examples/part-1/section-b/index.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: base -title: Section B -subtitle: Yet another example page ---- -This is section B of Part 1 - diff --git a/src/pages/examples/part-1/section-b/onepage.md b/src/pages/examples/part-1/section-b/onepage.md deleted file mode 100644 index ceb380e..0000000 --- a/src/pages/examples/part-1/section-b/onepage.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: base -title: RAI -subtitle: Yet another example page ---- -## A picture of a bike path - -![drooderfiets at RAI](/examples/rai.jpg) - diff --git a/src/pages/examples/part-1/section-b/secondpage.md b/src/pages/examples/part-1/section-b/secondpage.md deleted file mode 100644 index 9b8a2fb..0000000 --- a/src/pages/examples/part-1/section-b/secondpage.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: base -title: Radar -subtitle: Yet another example page ---- -## A picture of a former slaughterhouse - -![drooderfiets and radar house](/examples/radar.jpg) - diff --git a/src/pages/examples/radar.jpg b/src/pages/examples/radar.jpg deleted file mode 100644 index 85a25ff..0000000 Binary files a/src/pages/examples/radar.jpg and /dev/null differ diff --git a/src/pages/examples/rai.jpg b/src/pages/examples/rai.jpg deleted file mode 100644 index 344e8ce..0000000 Binary files a/src/pages/examples/rai.jpg and /dev/null differ diff --git a/src/pages/index.html b/src/pages/index.html index 4505575..f1fce4b 100644 --- a/src/pages/index.html +++ b/src/pages/index.html @@ -1,7 +1,7 @@ --- title: Huwindty 🌬️ -subtitle: A basic template using 11ty with Tailwind. -description: The basic 11ty template windty with a few upgrades. +subtitle: A basic 11ty starter with CMS and more. +description: The basic 11ty template windty with a few upgrades. CMS, Markdown, responsive images are among them. All documented. layout: base.njk ---
    diff --git a/src/static/img/animals/heron.jpg b/src/static/img/animals/heron.jpg new file mode 100644 index 0000000..5b85212 Binary files /dev/null and b/src/static/img/animals/heron.jpg differ diff --git a/src/static/img/documentation/airport.jpg b/src/static/img/documentation/airport.jpg deleted file mode 100644 index 6a88438..0000000 Binary files a/src/static/img/documentation/airport.jpg and /dev/null differ diff --git a/src/static/img/documentation/dekas.jpg b/src/static/img/documentation/dekas.jpg deleted file mode 100644 index 0a1b2cd..0000000 Binary files a/src/static/img/documentation/dekas.jpg and /dev/null differ diff --git a/src/static/img/documentation/regata.jpg b/src/static/img/documentation/regata.jpg deleted file mode 100644 index 0d5bc89..0000000 Binary files a/src/static/img/documentation/regata.jpg and /dev/null differ diff --git a/src/static/img/grasshopper.jpg b/src/static/img/grasshopper.jpg new file mode 100644 index 0000000..cc74b40 Binary files /dev/null and b/src/static/img/grasshopper.jpg differ diff --git a/src/pages/documentation/vera.jpg b/src/static/img/vera.jpg similarity index 100% rename from src/pages/documentation/vera.jpg rename to src/static/img/vera.jpg