updated posts

src/posts/2022-08-17-post-with-fetched.md

@@ -2,6 +2,7 @@
 title: 'Post with fetched content'
 description: 'Eleventy Fetch fetches and caches resources - at configurable intervals. In this example I am fetching my public repositories with a cache duration of 1 day.'
 date: 2022-08-28
+tags: ['fetch', 'feature']
 ---
 
 [Eleventy Fetch](https://www.11ty.dev/docs/plugins/fetch/) fetches and caches resources - at configurable intervals.

src/posts/2022-08-28-post-with301-redirects.md

@@ -2,6 +2,7 @@
 title: 'Post with 301 redirects'
 description: 'A 301 is used when a page has permanently changed location. Informing about this change is indispensable if you want to keep a positioning. Aleksandr Hovhannisyan came up with an elegant solution for Eleventy and Netlify.'
 date: 2022-08-28
+tags: ['redirects', 'feature']
 ---
 
 URLs usually change over time, as you use another CMS or optimize your file structure.

src/posts/2022-09-01-post-with-code.md

@@ -2,6 +2,7 @@
 title: 'Post with some code'
 description: 'Syntax Highlighting is achieved by a pack of Eleventy plugins. No browser/client JavaScript, highlight transformations are all done at build-time.'
 date: 2022-09-01
+tags: ['sytnax highlighting', 'feature']
 ---
 
 This theme uses 11ty's [Syntax Highlighting Plugin](https://www.11ty.dev/docs/plugins/syntaxhighlight/), a pack of Eleventy plugins for PrismJS syntax highlighting. No browser/client JavaScript, highlight transformations are all done at build-time.
@@ -26,14 +27,12 @@ cards.forEach(card => {
 ```
 
 ```css
-form {
+.smol-container {
-  display: flex;
+  width: min(100% - 3rem, var(--container-max, 60ch));
-  align-items: flex-end;
+  margin-inline: auto;
-  flex-wrap: wrap;
-  gap: 16px;
 }
 
-/* © Josh Comeau */
+/* © Stephanie Exkles, https://smolcss.dev/ */
 ```
 
 Edit styles in `css/blocks/code.css`

src/posts/2022-10-12-post-with-image.md

@@ -2,9 +2,12 @@
 title: 'Post with an image '
 description: "Eleventy's own build-time image transformations. Find more info on11ty.dev/docs/plugins/image/ and edit settings in config-folder."
 date: 2022-10-12
+tags: ['image', 'feature']
+image: './src/assets/images/gallery/asturias-1.jpg'
+credit: Lene took this photo.
 ---
 
-This starter uses Eleventy's build-time image transformations. Find more info on https://www.11ty.dev/docs/plugins/image/ and edit settings in `config/shortcodes/imagePlaceholder`.
+This starter uses Eleventy's build-time image transformations. Find more info on https://www.11ty.dev/docs/plugins/image/ and edit settings in `config/shortcodes/eleventyImage`.
 
 For now there are three image sizes: 320px, 570px and 820px.
 820px is the maximum size, equivalent to the width set for our content wrapper in `prose.css`: `--wrapper-width: clamp(16rem, 93vw, 55rem);`.
@@ -15,40 +18,32 @@ If you want to adjust the wrapper width you should also adjust the image size in
 
 ## Syntax
 
+This is the most basic version: it contains the path to the image, alt text (can be an empty string if the image is decorative), and optionally hold a caption. It defaults to `loading = 'lazy'`, and holds no class name. The picture element gets its set of images from `widths = [320, 570, 880, 1024, 1248]` and compares to a condition of `90vw`.
+
 {% raw %}
 
 ```
-{% imagePlaceholder "path to image", "alt text", "caption - optional!" %}
+{% eleventyImage "path to image", "alt text", "caption - optional!" %}
 ```
 
 {% endraw %}
 
-Add your own `sizes` attribute (note how I set an empty string for the caption):
+If you want to be very specific you can pass in manually all the conditions, add `null` to skip.
+The class names are passed in the outer container, the `<picture>` or `<figure>` element.
 
 {% raw %}
 
 ```
-{% imagePlaceholder "path to image", "alt text", "", "(min-width:30em)  50vw, 100vw" %}
+{% eleventyImage "path to image", "alt text", "caption text", "eager", "class names", "(min-width:30em) 50vw, 100vw", [200, 400] %}
+{% eleventyImage "path to image", "alt text", null, "eager" %}
 ```
 
 {% endraw %}
 
 ### Example image with a caption
 
-{% imagePlaceholder "./src/assets/images/opengraph-default.jpg", "The preview for social media", "An interesting caption text." %}
+{% eleventyImage "./src/assets/images/gallery/asturias-2.jpg", "The preview for social media", "An interesting caption text." %}
 
-## CSS
+### Example image with all the arguments
 
-You can change the CSS for the page and blog post images in `./src/assets/css/blocks/page.css` and `./src/assets/css/blocks/blog.css`:
+{% eleventyImage "./src/assets/images/gallery/asturias-3.jpg", "alt text", null, "lazy", "popout", "(min-width:30em) 50vw, 100vw", [200, 400] %}
-
-```css
-.page img {
-  max-inline-size: 100%;
-  block-size: auto;
-}
-
-.blog img {
-  max-inline-size: 100%;
-  block-size: auto;
-}
-```

src/posts/2022-10-31-post-with-youtube.md

@@ -3,6 +3,9 @@ title: 'Post with a video '
 description: "This starter uses Justin Ribeiro's lite-youtube web component. Add `youtube: true` to frontmatter to activate."
 date: 2022-10-31
 youtube: true
+tags:
+  - youtube
+  - feature
 ---
 
 This starter uses Justin Ribeiro's lite-youtube web component. Add `youtube: true` to frontmatter to activate.

src/posts/2022-11-02-markdown.md

@@ -2,6 +2,7 @@
 title: 'Post with all the markdown'
 description: 'A lot of markdown packages are installed to help you write your posts. All presets are personal preference.'
 date: 2022-11-02
+tags: ['markdown', 'feature']
 ---
 
 A lot of markdown packages are installed to help you write your posts. You can configure them in `config/plugins/markdown.js`.

src/posts/2023-01-25-opengraph-images.md

@@ -2,6 +2,9 @@
 title: 'Open Graph images'
 description: 'When you share your blog posts, a thumbnail image might appear. This starter generates these images for your blog posts automatically.'
 date: 2023-01-25
+tags:
+  - image
+  - feature
 ---
 
 When you share your blog posts, a thumbnail image may appear - the image we define in our meta data as an Open Graph Image (`og:image`).
@@ -11,6 +14,7 @@ This starter generates these images for your blog posts automatically.
 The fallback and default image for all other pages is the image set as `opengraph_default` in the `meta.js` global data file.
 
 `meta-info.njk`
+
 {% raw %}
 
 ```html
@@ -24,4 +28,5 @@ The fallback and default image for all other pages is the image set as `opengrap
 ```
 
 {% endraw %}
+
 To change the look and behaviour of those images and replace the SVG background edit `src/social-preview.njk`. The implementation is based on [Bernard Nijenhuis article](https://bnijenhuis.nl/notes/automatically-generate-open-graph-images-in-eleventy/).

src/posts/2023-10-30-demos.md

@@ -1,26 +1,25 @@
 ---
 title: 'Demo pages'
-description: 'To avoid overloading this base with too many subtleties, I store special features in separate branches that (usually) keep up with the main branch.'
+description: 'As of version 2.0, the demos featured here are all directly built in the starter.'
 date: 2023-10-30
 demos:
   - title: Gallery
     description: 'A gallery with good old "popup" functionality inside a dialog element, a new image shortcode that links directly to the image with its original dimensions, and a regular loop over images.'
-    preview: 'https://eleventy-excellent-gallery.netlify.app/gallery/'
+    preview: '/blog/post-with-a-gallery/'
-    branch: 'https://github.com/madrilene/eleventy-excellent/tree/demo-gallery'
   - title: Pagination
-    description: 'The blog collection with a pagination of 2 posts per page. To work with visual current page indication, :has() pseudo-class support is required.'
+    description: 'The blog collection with a pagination. To work with visual current page indication, :has() pseudo-class support is required.'
-    preview: 'https://eleventy-excellent-pagination.netlify.app/blog/page-1/'
+    preview: '/blog/page-0/'
-    branch: 'https://github.com/madrilene/eleventy-excellent/tree/demo-pagination'
   - title: Tags
-    description: 'The blog now features a basic tag system. Tags can be stored in front matter, as a YAML list or as an array.'
+    description: 'The blog has a basic tag system. Tags can be stored in front matter, as a YAML list or as an array.'
-    preview: 'https://eleventy-excellent-tags.netlify.app/tags/'
+    preview: '/tags/'
-    branch: 'https://github.com/madrilene/eleventy-excellent/tree/demo-tags'
 ---
 
-This is a very opinionated starter, but it can be further developed in many directions. In its current form, it can already be used as a simple blog.
+**Important**: As of version 2.0, the demos featured here are all directly built in the starter.
 
-To avoid overloading this base with too many subtleties, I put special features such as image gallery, tags, or pagination in separate branches that (usually... hopefully! 🫣 ) keep up with the main branch.
+I did not want to clutter the starter with too many features, that you might not need, but I find myself using them frequently for my own projects, so now they are "baked in".
-Work in progress.
+I will keep the old demo repos for the moment, but they are not maintained and are deprecated.
+
+If you never saw version 1, nevermind.
 
 ## Demos
 
@@ -31,7 +30,6 @@ Work in progress.
    <p>{{ item.description }}
    <div class="cluster">
    <a class="button no-indicator" href="{{ item.preview }}">Demo</a>
-   <a class="button no-indicator" href="{{ item.branch }}">Branch</a>
    </div>
 </article>
 {% endfor %}

src/posts/2023-11-30-tailwind.md

@@ -62,7 +62,7 @@ const groups = [
 In your dev tools you can see all the generated custom properties + your custom ones from `css/global/variables.css`.
 They are generated by default.
 
-{% imagePlaceholder "./src/assets/images/blog/custom-properties.png", "Screenshot of the Firefox dev tools, CSS tab, showing the generated custom properties" %}
+{% eleventyImage "./src/assets/images/blog/custom-properties.png", "Screenshot of the Firefox dev tools, CSS tab, showing the generated custom properties" %}
 
 You can also create custom utility classes on line 104:
 
@@ -77,6 +77,6 @@ For example: `{key: 'spacing', prefix: 'gutter', property: '--gutter'}`
 
 If you install the Tailwind CSS IntelliSense addon, you can actually see the classes available to you, including the color preview.
 
-{% imagePlaceholder "./src/assets/images/blog/intellisense.png", "Screenshot in VS Code showing the available flow-space-classes we created, using the Tailwind CSS IntelliSense addon" %}
+{% eleventyImage "./src/assets/images/blog/intellisense.png", "Screenshot in VS Code showing the available flow-space-classes we created, using the Tailwind CSS IntelliSense addon" %}
 
 Read some thoughts that lead Andy Bell to come up with that approach: https://andy-bell.co.uk/i-used-tailwind-for-the-u-in-cube-css-and-i-liked-it/

src/posts/2024-01-30-gallery.md

@@ -0,0 +1,33 @@
+---
+title: 'Post with a gallery'
+description: 'A gallery with good old "popup" functionality inside a dialog element, a new image shortcode that links directly to the image with its original dimensions, and a regular loop over images.'
+date: 2024-01-30
+gallery:
+  - image: ./src/assets/images/gallery/asturias-1.jpg
+    alt: 'A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape'
+    caption: 'Inside the Somiedo Natural Park, Asturias'
+  - image: ./src/assets/images/gallery/asturias-2.jpg
+    alt: 'Close-up of a delicate white flower with a yellow center, surrounded by green leaves'
+    caption: 'Jasmine nightshades blooming in July'
+  - image: ./src/assets/images/gallery/asturias-3.jpg
+    alt: "A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains"
+    caption: 'Traditional houses in Santullano, Somiedo Natural Park, Asturias'
+  - image: ./src/assets/images/gallery/asturias-4.jpg
+    alt: 'Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green grass'
+    caption: 'A large blue (Phengaris arion)'
+---
+
+Gallery popups usting the `<dialog>` element:
+
+{% include "components/gallery.njk" %}
+
+Loop through images without additional interactivity:
+
+<ul class="gallery"
+  role="list" style="padding: 0;">
+{%- for item in gallery -%}
+  <li>
+    {% eleventyImage item.image, item.alt %}
+  </li>
+{%- endfor -%}
+</ul>