From 886cbb7617ca799ed049cab6fd2f01a1655b11e9 Mon Sep 17 00:00:00 2001 From: madrilene Date: Tue, 30 Jan 2024 18:29:33 +0100 Subject: [PATCH] updated posts --- src/posts/2022-08-17-post-with-fetched.md | 1 + .../2022-08-28-post-with301-redirects.md | 1 + src/posts/2022-09-01-post-with-code.md | 11 +++---- src/posts/2022-10-12-post-with-image.md | 33 ++++++++----------- src/posts/2022-10-31-post-with-youtube.md | 3 ++ src/posts/2022-11-02-markdown.md | 1 + src/posts/2023-01-25-opengraph-images.md | 5 +++ src/posts/2023-10-30-demos.md | 24 +++++++------- src/posts/2023-11-30-tailwind.md | 4 +-- src/posts/2024-01-30-gallery.md | 33 +++++++++++++++++++ 10 files changed, 76 insertions(+), 40 deletions(-) create mode 100644 src/posts/2024-01-30-gallery.md diff --git a/src/posts/2022-08-17-post-with-fetched.md b/src/posts/2022-08-17-post-with-fetched.md index 3cf6459..2bbbfb8 100644 --- a/src/posts/2022-08-17-post-with-fetched.md +++ b/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. diff --git a/src/posts/2022-08-28-post-with301-redirects.md b/src/posts/2022-08-28-post-with301-redirects.md index 8d28928..7060791 100644 --- a/src/posts/2022-08-28-post-with301-redirects.md +++ b/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. diff --git a/src/posts/2022-09-01-post-with-code.md b/src/posts/2022-09-01-post-with-code.md index e595800..a9346e7 100644 --- a/src/posts/2022-09-01-post-with-code.md +++ b/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 { - display: flex; - align-items: flex-end; - flex-wrap: wrap; - gap: 16px; +.smol-container { + width: min(100% - 3rem, var(--container-max, 60ch)); + margin-inline: auto; } -/* © Josh Comeau */ +/* © Stephanie Exkles, https://smolcss.dev/ */ ``` Edit styles in `css/blocks/code.css` diff --git a/src/posts/2022-10-12-post-with-image.md b/src/posts/2022-10-12-post-with-image.md index e8d4fa1..954a0bb 100644 --- a/src/posts/2022-10-12-post-with-image.md +++ b/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 `` or `
` 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`: - -```css -.page img { - max-inline-size: 100%; - block-size: auto; -} - -.blog img { - max-inline-size: 100%; - block-size: auto; -} -``` +{% eleventyImage "./src/assets/images/gallery/asturias-3.jpg", "alt text", null, "lazy", "popout", "(min-width:30em) 50vw, 100vw", [200, 400] %} diff --git a/src/posts/2022-10-31-post-with-youtube.md b/src/posts/2022-10-31-post-with-youtube.md index 183288b..880d873 100644 --- a/src/posts/2022-10-31-post-with-youtube.md +++ b/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. diff --git a/src/posts/2022-11-02-markdown.md b/src/posts/2022-11-02-markdown.md index d03dbf3..7221dc4 100644 --- a/src/posts/2022-11-02-markdown.md +++ b/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`. diff --git a/src/posts/2023-01-25-opengraph-images.md b/src/posts/2023-01-25-opengraph-images.md index fb3cf96..fc75df4 100644 --- a/src/posts/2023-01-25-opengraph-images.md +++ b/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/). diff --git a/src/posts/2023-10-30-demos.md b/src/posts/2023-10-30-demos.md index d47b1b3..224d805 100644 --- a/src/posts/2023-10-30-demos.md +++ b/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/' - branch: 'https://github.com/madrilene/eleventy-excellent/tree/demo-gallery' + preview: '/blog/post-with-a-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.' - preview: 'https://eleventy-excellent-pagination.netlify.app/blog/page-1/' - branch: 'https://github.com/madrilene/eleventy-excellent/tree/demo-pagination' + description: 'The blog collection with a pagination. To work with visual current page indication, :has() pseudo-class support is required.' + preview: '/blog/page-0/' - 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.' - preview: 'https://eleventy-excellent-tags.netlify.app/tags/' - branch: 'https://github.com/madrilene/eleventy-excellent/tree/demo-tags' + description: 'The blog has a basic tag system. Tags can be stored in front matter, as a YAML list or as an array.' + preview: '/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. -Work in progress. +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". +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.

{{ item.description }}

Demo - Branch
{% endfor %} diff --git a/src/posts/2023-11-30-tailwind.md b/src/posts/2023-11-30-tailwind.md index 2a862cb..b209799 100644 --- a/src/posts/2023-11-30-tailwind.md +++ b/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/ diff --git a/src/posts/2024-01-30-gallery.md b/src/posts/2024-01-30-gallery.md new file mode 100644 index 0000000..faaae50 --- /dev/null +++ b/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 `` element: + +{% include "components/gallery.njk" %} + +Loop through images without additional interactivity: + +
    +{%- for item in gallery -%} +
  • + {% eleventyImage item.image, item.alt %} +
    • +{%- endfor -%} +