updated posts
This commit is contained in:
madrilene
parent
6b1513ba9b
commit
886cbb7617
10 changed files with 76 additions and 40 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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`:
|
||||
|
||||
```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] %}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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`.
|
||||
|
|
|
|||
|
|
@ -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/).
|
||||
|
|
|
|||
|
|
@ -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.
|
|||
<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 %}
|
||||
|
|
|
|||
|
|
@ -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/
|
||||
|
|
|
|||
33
src/posts/2024-01-30-gallery.md
Normal file
33
src/posts/2024-01-30-gallery.md
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue