update posts
This commit is contained in:
madrilene
parent
6484fb868f
commit
a7a338db03
9 changed files with 55 additions and 22 deletions
|
|
@ -19,7 +19,7 @@ In the most basic version it contains the path to the image, alt text (can be an
|
|||
{% raw %}
|
||||
|
||||
```jinja2
|
||||
{% eleventyImage "path to image", "alt text", "caption text" %}
|
||||
{% image "path to image", "alt text", "caption text" %}
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
|
@ -33,8 +33,8 @@ The class names are passed in the outer container, the `<picture>` or `<figure>`
|
|||
{% raw %}
|
||||
|
||||
```jinja2
|
||||
{% 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" %}
|
||||
{% image "path to image", "alt text", "caption text", "eager", "class names", "(min-width:30em) 50vw, 100vw", [200, 400] %}
|
||||
{% image "path to image", "alt text", null, "eager" %}
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
|
@ -44,24 +44,24 @@ The class names are passed in the outer container, the `<picture>` or `<figure>`
|
|||
{% raw %}
|
||||
|
||||
```jinja2
|
||||
{% eleventyImage "./src/assets/images/gallery/asturias-2.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves", "Jasmine nightshades blooming in July" %}
|
||||
{% image "./src/assets/images/gallery/asturias-2.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves", "Jasmine nightshades blooming in July" %}
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
||||
{% eleventyImage "./src/assets/images/gallery/asturias-2.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves", "Jasmine nightshades blooming in July" %}
|
||||
{% image "./src/assets/images/gallery/asturias-2.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves", "Jasmine nightshades blooming in July" %}
|
||||
|
||||
### Example image with all the arguments
|
||||
|
||||
{% raw %}
|
||||
|
||||
```jinja2
|
||||
{% eleventyImage "./src/assets/images/gallery/asturias-3.jpg", "A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains", null, "lazy", "class-that-does-nothing", "(min-width:30em) 50vw, 100vw", [200, 400] %}
|
||||
{% image "./src/assets/images/gallery/asturias-3.jpg", "A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains", null, "lazy", "class-that-does-nothing", "(min-width:30em) 50vw, 100vw", [200, 400] %}
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
||||
{% eleventyImage "./src/assets/images/gallery/asturias-3.jpg", "A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains", null, "lazy", "class-that-does-nothing", "(min-width:30em) 50vw, 100vw", [200, 400] %}
|
||||
{% image "./src/assets/images/gallery/asturias-3.jpg", "A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains", null, "lazy", "class-that-does-nothing", "(min-width:30em) 50vw, 100vw", [200, 400] %}
|
||||
|
||||
## Markdown sytnax
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,14 @@
|
|||
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.
|
||||
This starter uses a [webC version](https://github.com/zachleat/zachleat.com/blob/main/_components/youtube-lite-player.webc) of Paul Irish's [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed).
|
||||
|
||||
<div>
|
||||
<custom-youtube @slug="Ah6je_bBSH8" @label="Alberto Ballesteros - Artista Sin Obra"></custom-youtube>
|
||||
</div>
|
||||
|
||||
{% youtube 'Ah6je_bBSH8', 'Alberto Ballesteros - Artista Sin Obra' %}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ You can configure them in `config/plugins/markdown.js`.
|
|||
As of my personal preference, there are some presets. For example the conversion of web pages to links (www.lenesaile.com) and the addition of `rel="noopener"` for external links (all links with the pattern `/^https?:/`).
|
||||
|
||||
**This is a tiny pitfall!**
|
||||
Take care to not prefix your internal links with your domain, or else they will be treated as external as well. To link internally use this pattern:
|
||||
Take care to not prefix your internal links with your domain, or else they will be treated ad external as well. To link internally use this pattern:
|
||||
|
||||
```markdown
|
||||
An internal link to the [about page](/about/)
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@ When you share your blog posts, a thumbnail image may appear - the image we defi
|
|||
|
||||
This starter generates these images for your blog posts automatically. They take in the title and date of the post.
|
||||
|
||||
{% eleventyImage "./src/assets/images/blog/og-preview.jpeg", "Open Graph image preview of a blog Post. 'Eleventy Excellent 2.0' is written as a large title in the center, the date is shown above and the name and URL of the website is seen on the bottom. The backgrpund consists of layered pink color areas resembling a city skyline", "This is what an OG image for a blog posts looks right now" %}
|
||||
{% image "./src/assets/images/blog/og-preview.jpeg", "Open Graph image preview of a blog Post. 'Eleventy Excellent 2.0' is written as a large title in the center, the date is shown above and the name and URL of the website is seen on the bottom. The backgrpund consists of layered pink color areas resembling a city skyline", "This is what an OG image for a blog posts looks right now" %}
|
||||
|
||||
The fallback and default image for all other pages is the image set as `opengraph_default` in the `meta.js` global data file.
|
||||
|
||||
{% eleventyImage "./src/" + meta.opengraph_default, meta.opengraph_default_alt, "This is what the general OG image for non-blog posts looks like" %}
|
||||
{% image "./src/" + meta.opengraph_default, meta.opengraph_default_alt, "This is what the general OG image for non-blog posts looks like" %}
|
||||
|
||||
A more detailed explanation can be found in the [docs](/get-started/#open-graph-images).
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ demos:
|
|||
preview: '/blog/post-with-a-gallery/'
|
||||
- title: 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/'
|
||||
preview: '/blog/'
|
||||
- title: 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/'
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ date: 2023-11-30
|
|||
|
||||
**Update February 2024:**
|
||||
The CSS system of this starter was invented by Andy Bell.
|
||||
I wrote the following explanation quite quickly after hearing several times that people are confused about normal Tailwind CSS classes not working. In the meantime, Andy has published a [much better and much more detailed explanation](https://piccalil.li/blog/a-css-project-boilerplate/).
|
||||
I wrote the following explanation quite quickly after hearing several times that people are confused about normal Tailwind CSS classes not working. In the meantime, Andy has published a [better and more detailed explanation](https://piccalil.li/blog/a-css-project-boilerplate/).
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -68,7 +68,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.
|
||||
|
||||
{% eleventyImage "./src/assets/images/blog/custom-properties.png", "Screenshot of the Firefox dev tools, CSS tab, showing the generated custom properties" %}
|
||||
{% image "./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:
|
||||
|
||||
|
|
@ -83,6 +83,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.
|
||||
|
||||
{% 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" %}
|
||||
{% image "./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/
|
||||
|
|
|
|||
|
|
@ -17,14 +17,16 @@ gallery:
|
|||
caption: 'A large blue (Phengaris arion)'
|
||||
---
|
||||
|
||||
<p>Gallery popups using the <code>dialog</code> element:</p>
|
||||
This post has a gallery set in its front matter as a list of objects, each with an `image`, `alt`, and `caption` property.
|
||||
|
||||
{% include "components/gallery.njk" %}
|
||||
When you import the gallery component, the images are listed in a grid as buttons, each linked to the respective image in a `<dialog>` HTML element. A close button within each dialog allows the image to be hidden again. Includes `gallery.css` for styling the modal dialogs and backdrop, `gallery.js` manages modal dialog interactions.
|
||||
|
||||
<p>Loop through images without additional interactivity:</p>
|
||||
{% include "partials/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>
|
||||
<li>{% image item.image, item.alt %}</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
---
|
||||
title: 'Eleventy Excellent 2.0'
|
||||
description: I created this starter after I saw Andy’s talk and studied the source code for buildexcellentwebsit.es. I quickly came to the conclusion that this is the way I want to build all my websites from now on! It's so great. I know many of you feel the same way.'
|
||||
description: I created this starter after I saw Andy’s talk and studied the source code for **buildexcellentwebsit.es.** I quickly came to the conclusion that this is the way I want to build all my websites from now on! It's so great. I know many of you feel the same way.'
|
||||
discover:
|
||||
description: "I used markdown Syntax in the description, this is why I set this other description to be used in the meta description and the blog schema."
|
||||
date: 2024-02-01
|
||||
---
|
||||
|
||||
27
src/posts/2024/2024-06-03-v-3.md
Normal file
27
src/posts/2024/2024-06-03-v-3.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: 'Eleventy Excellent 3.0'
|
||||
description: "It's been a few months, and I have decided to change some things again, which probably makes the starter even more opinionated. 🤷 Eleventy Excellent 3.0 changed to ESM, has a new config structure and uses web components."
|
||||
date: 2024-06-03
|
||||
---
|
||||
|
||||
It's been a few months, and I have decided to change some things again, which probably makes the starter even more opinionated 🤷. For those who prefer the previous version, Version 2 will remain accessible in its own branch.
|
||||
|
||||
**Core changes:**
|
||||
|
||||
- ESM! I originally wanted to wait for the beta version of Eleventy 3.0, but the alpha version works absolutely fine, so I decided to go for it.
|
||||
- a new font for the body (base) text: Inclusive Sans. Only has Regular 400 and Regular 400 italic for now, so bold uses the display font.
|
||||
- A new config structure (turns out I am the [Eleventy config person!](https://front-end.social/@lene/112530901535448479)). I also decided to keep everything inside the `src` folder. `src/_config`. [More about that in the docs](/get-started/#config).
|
||||
- some new filters TODO:
|
||||
- there is now a "setup" directory insude of the config folder, for automatic favion creation and to add the screenshots to the "built with" section. They are triggered by new scripts in `package.json`. See also ["Favicons" in the docs](/get-started/#favicons).
|
||||
- SVGs are now in `src/assets/svg`, and there is a new SVG shortcode to include them. I also explain this [in the SVG section](/get-started/#svg).
|
||||
- I now actively use Eleventy's plugins `[WebC](https://www.11ty.dev/docs/languages/webc/)` (for components), the [bundle plugineleventy](https://github.com/11ty/eleventy-plugin-bundle) and `[<is-land>](https://github.com/11ty/is-land)`.
|
||||
- I made small CSS changes everywhere - and introduce a new structure, [also explained in the docs](/get-started/#css).
|
||||
- JavaScript handling [also got some changes](/get-started/#javascript).
|
||||
- Also: improvements in terms of organization and naming
|
||||
|
||||
I don't consider myself a JavaSCript person, and I still struggle to fully grasp WebC. So, if you have any suggestions or improvements, in particular to the WebC and web components code, please don't hesitate to reach out or send a PR.
|
||||
|
||||
**Plans for the future:**
|
||||
This starter still defaults to being hosted on Netlify, I'd like to change that.
|
||||
|
||||
I hope you enjoy the new version! 🌟 And, should you decide to upgrade, that you don't face too many difficulties.
|
||||
Loading…
Reference in a new issue