-
This blog has a pagination of {{ pagination.size }} posts per page.
+
This sectionas a pagination of {{ pagination.size }} posts per page.
The pagination is only shown if there are more posts ({{ collections.posts.length }}) than items per
page ({{ pagination.size }}).
diff --git a/src/pages/built-with.njk b/src/pages/built-with.njk
deleted file mode 100644
index ba929d6..0000000
--- a/src/pages/built-with.njk
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: Built with
-permalink: /built-with/index.html
-description: 'A list of sites based on / built with Eleventy Excellent. Add yours by submitting a pull request!'
-layout: page
-sizes: '(max-width: 615px) 50vw, 100vw'
-widths: [400, 520]
----
-
-
- Honestly, I made this starter for myself, based on how I want to start a project and how I like to organize
- everything. I am delighted that so many of you find it useful too! This is a list of sites based on / built
- with Eleventy Excellent. This uses Eleventy's
- screenshot API . New screenshots are fetched
- in development only.
-
-
-
- Have you built a site with this starter? Please let me know or create a
- pull request
- and add it to the list! Add your data in src/_data/builtwith.json, then run
- npm run screenshots to add or update the screenshots.
-
-
-
- {% svg "divider/soft-top", null, "divider" %}
-
-
- Based on, or built with Eleventy Excellent:
-
-
- {% for site in builtwith | shuffle %}
-
- {% image "./src/assets/images/screenshots/" + site.filename + ".jpg", site.name, null, "lazy", null, null, widths, sizes %}
- {{ site.name }}
-
- {{ site.description }}
-
-
- {% endfor %}
-
-
-{% css "local" %}
- {% include "css/custom-card.css" %}
-{% endcss %}
diff --git a/src/pages/get-started.md b/src/pages/get-started.md
deleted file mode 100644
index fd21aa9..0000000
--- a/src/pages/get-started.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Get started
-permalink: /get-started/index.html
-description: 'You can use this starter as a template for your blog and you are ready to go! But there are some adjustments you have to make.'
-layout: page
----
-
-You can use this starter as a template for your blog and you are ready to go! But there are some **adjustments you have to make**.
-
-- `src/_data/meta.js` - sets different "hard coded" text values all over the template, you can change the language, etc.
-- edit your personal details and social media in `src/_data/personal.yaml`.
-- Open `src/assets/css/global/blocks/external-link.css`. Replace "eleventy-excellent.netlify.app" with your own domain. This is about the external link indicators, they are matched with your domain. If you don't want to use external link indicators, feel free to delete the whole style rule. You can also add the class `no-indicator` to any anchor element you want to except from this rule.
-
-The [blog posts](/blog/) also explain / show some features that aren't covered here.
-
-## "Docs" lol
-
-
-{% set itemList = collections.docs %}
-{% set headingLevel = "h2" %}
-{% include 'partials/details.njk' %}
-
-{% css "local" %}
- {% include "css/custom-card.css" %}
-{% endcss %}
diff --git a/src/pages/index.njk b/src/pages/index.njk
index b96c45a..7bb7bfb 100644
--- a/src/pages/index.njk
+++ b/src/pages/index.njk
@@ -1,8 +1,8 @@
---
layout: base
permalink: /index.html
-title: 'Eleventy Excellent'
-description: 'Eleventy starter using modern CSS, fluid type, fluid spacing, flexible layout and progressive enhancement.'
+title: 'Hypnagaga'
+description: 'The front page of a web site, very much under construction.'
blog:
title: 'Blog'
intro: "I'm showing the last 4 blog posts, but there might be more!"
@@ -13,24 +13,18 @@ blog:
{{ title }}
- {% svg "divider/waves", null, "divider" %}
+ {% svg "divider/spikes", null, "divider" %}
-
An Eleventy starter
+
Surprise, it’s filler text!
- Built around a CSS workflow that emphasizes guiding browser styling rather than micromanaging it. It
- incorporates progressive enhancement, fluid type and spacing, and utilizes modern CSS features for
- layout. The goal is to develop frontends that provide a great experience across all devices,
- connection speeds, and usage contexts.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada enim turpis, vel rhoncus lectus pretium et. Ut porttitor, justo semper ultricies blandit, felis sapien congue leo, ac maximus magna felis id risus. Aenean consequat, leo sed feugiat consectetur, metus velit consectetur purus, sed feugiat ipsum nisi finibus eros. Fusce eu placerat ex, sit amet rutrum metus. Integer volutpat diam est, a tempus velit faucibus vel. Vestibulum ullamcorper, leo sed bibendum laoreet, mi orci maximus ante, nec malesuada enim arcu eu nisl. Nam scelerisque felis augue, non tempus enim tincidunt eget.
- This is version {{ pkg.version }}. I keep a
- branch of v1,
- v2 and v3. I tried to document most features and methodologies.
+ Morbi maximus, purus non faucibus condimentum, turpis nunc scelerisque arcu, at condimentum quam eros eget nibh. Curabitur eu nibh egestas, tempor ante sit amet, elementum sem.
-
Have fun and let me know if you find any issues or have ideas for improvements!
diff --git a/src/posts/2022/2022-08-17-post-with-fetched.md b/src/posts/2022/2022-08-17-post-with-fetched.md
deleted file mode 100644
index 1e13ffb..0000000
--- a/src/posts/2022/2022-08-17-post-with-fetched.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-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.
-
-This is an example of fetching external data.
-In this case, my public repositories (with more than 20 stargazer) and a cache duration of 1 day.
-
-Endpoint editable in `_data/github.js.`
-
-{% for repository in github %}
-{% if repository.stargazers_count > 20 %}
-
-
{{ repository.name }}
-
-{{ repository.html_url }}
-
-**{{ repository.stargazers_count }} GitHub stars**
-{{ repository.description }}
-
-{% endif %}
-{% endfor %}
\ No newline at end of file
diff --git a/src/posts/2022/2022-08-28-post-with301-redirects.md b/src/posts/2022/2022-08-28-post-with301-redirects.md
deleted file mode 100644
index 2ff93e1..0000000
--- a/src/posts/2022/2022-08-28-post-with301-redirects.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-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']
-redirectFrom: ['/old-route/', '/optionally-another-old-route/']
----
-
-URLs usually change over time, as you use another CMS or optimize your file structure.
-
-A 301 is used when a page has permanently changed location.
-Informing about this change is indispensable if you want to keep your incoming links working, be it from organic Google search or other pages that have linked to your content.
-
-Aleksandr Hovhannisyan came up with an [elegant solution for Eleventy and Netlify](https://www.aleksandrhovhannisyan.com/blog/eleventy-netlify-redirects/). To directly cover several possible previous routes it is created as an array. You can find the loop in `_redirects.njk`.
-
-## Usage
-
-```yaml
-Frontmatter:
----
-redirectFrom: ['/old-route/', '/optionally-another-old-route/']
----
-```
diff --git a/src/posts/2022/2022-09-01-post-with-code.md b/src/posts/2022/2022-09-01-post-with-code.md
deleted file mode 100644
index a6d1dc1..0000000
--- a/src/posts/2022/2022-09-01-post-with-code.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-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: ['syntax 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.
-
-```js
-const cards = [...document.querySelectorAll('.card')];
-cards.forEach(card => {
- card.style.cursor = 'pointer';
- let down,
- up,
- link = card.querySelector('a');
- card.onmousedown = () => (down = +new Date());
- card.onmouseup = () => {
- up = +new Date();
- if (up - down < 200) {
- link.click();
- }
- };
-});
-
-// © Heydon Pickering
-```
-
-```css
-.smol-container {
- width: min(100% - 3rem, var(--container-max, 60ch));
- margin-inline: auto;
-}
-
-/* © Stephanie Eckles, https://smolcss.dev/ */
-```
-
-Edit styles in `css/blocks/code.css`
diff --git a/src/posts/2022/2022-10-31-post-with-video.md b/src/posts/2022/2022-10-31-post-with-video.md
deleted file mode 100644
index e772cfc..0000000
--- a/src/posts/2022/2022-10-31-post-with-video.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: 'Post with a video'
-description: "This starter uses Paul Irish's lite-youtube-embed web component. You can also use a modified version to display PeerTube videos."
-date: 2022-10-31
-tags:
- - youtube
- - peertube
- - feature
----
-
-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).
-
-
-
-
-
-
-A modified version to display [PeerTube](https://joinpeertube.org/) videos is also included (Thank you [camperotactico](https://github.com/camperotactico)). It works similarly, but takes two extra arguments:
-- `@instance`: The instance hosting the video.
-- `@embed-slug` The slug used for video embedding.
-
-
-
-
-
-[Learn more in the video docs. ](http://localhost:8082/get-started/#video)
\ No newline at end of file
diff --git a/src/posts/2022/2022-11-02-markdown.md b/src/posts/2022/2022-11-02-markdown.md
deleted file mode 100644
index bace3dd..0000000
--- a/src/posts/2022/2022-11-02-markdown.md
+++ /dev/null
@@ -1,143 +0,0 @@
----
-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`.
-
-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. To link internally, use this pattern:
-
-```markdown
-An internal link to the [about page](/about/)
-```
-
-## h2 Heading
-
-### h3 Heading
-
-#### h4 Heading
-
-Muffin bonbon jujubes cheesecake chupa chups shortbread ice cream cotton candy cake. Jelly-o biscuit dessert danish dessert pastry tootsie roll lemon drops gingerbread. Cheesecake donut marzipan sweet roll icing muffin halvah. Dragée donut cake biscuit pie carrot cake sesame snaps jelly-o gummi bears.
-
-Soufflé topping shortbread lemon.
-
-## hr
-
----
-
-## Typographic replacements
-
-**The replacement converts this input:**
-
-```markdown
-(c) (C) (r) (R) (tm) (TM) +-
-and so on.. and so on... and so on..... AND SO ON???????.....
-WTF!!!!!! How many exclamation marks are you going to use????????????
-,, -- ---
-"double quotes" and 'single quotes'
-```
-
-**To this:**
-
-(c) (C) (r) (R) (tm) (TM) +-
-and so on.. and so on... and so on..... AND SO ON???????.....
-WTF!!!!!! How many exclamation marks are you going to use????????????
-,, -- ---
-"double quotes" and 'single quotes'
-
-## Emphasis
-
-**This is bold text**
-_This is italic text_
-~~Strikethrough~~
-
-## Blockquote
-
-> Cheesecake donut marzipan sweet roll icing muffin halvah. Dragée donut cake biscuit pie carrot cake sesame snaps jelly-o gummi bears. Cotton candy cookie croissant fruitcake.
-
-## Lists
-
-### Unordered lists
-
-- Create a list by starting a line with `+`, `-`, or `*`
-- Another item
-
-### Ordered lists
-
-1. Lorem ipsum dolor sit amet
-2. Consectetur adipiscing elit
-3. Integer molestie lorem at massa
-
-## Code
-
-Syntax highlighting
-
-```css
-.back-top-top {
- padding: 10px;
- background: white;
- margin-top: 110vh;
- position: sticky;
- bottom: 0;
-}
-
-/* by David Darnes */
-```
-
-## Tables
-
-| Technology | Fun fact |
-| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| HTML | HTML (Hypertext Markup Language) was created by Sir Tim Berners-Lee in 1991 as a way to structure and link documents on the World Wide Web. |
-| CSS | It's called "cascading" because styles can cascade down from parent elements to their children, allowing for inheritance and overriding. |
-| JavaScript | TypeError: null is not an object |
-
-## Links
-
-[Read all those articles](https://moderncss.dev/)
-Autoconverted link https://every-layout.dev/ (enabled via linkify)
-
-## Emojis
-
-**Literal:**
-🤩 💯 💚 👻 👾
-
-**Classic markup:**
-:cry: :poop: :fire: :laughing: :christmas_tree:
-([A reference for emoji markup](https://gist.github.com/rxaviers/7360908))
-
-**Shortcuts (emoticons)**:
-:-) :-( 8-) ;) :-P
-
-## mark
-
-==Marked text==
-
-## Footnotes
-
-Footnote 1 link[^first].
-Footnote 2 link[^second].
-
-[^first]:
- Footnote **can have markup**
- and multiple paragraphs.
-
-[^second]: Footnote text.
-
-\*[HTML]: Hyper Text Markup Language
-
-## Images
-
-Consider that `src` is already prepended in the settings.
-
-
-
-{%- css "local" -%}
- {%- include 'css/table.css' -%}
-{%- endcss -%}
\ No newline at end of file
diff --git a/src/posts/2023/2023-01-25-opengraph-images.md b/src/posts/2023/2023-01-25-opengraph-images.md
deleted file mode 100644
index b9a7a10..0000000
--- a/src/posts/2023/2023-01-25-opengraph-images.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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`).
-
-This starter generates these images for your blog posts automatically. They take in the title and date of the post.
-
-
-
-The fallback and default image for all other pages is the image set as `opengraph_default` in the `meta.js` global data file.
-
-{% 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).
diff --git a/src/posts/2023/2023-10-30-demos.md b/src/posts/2023/2023-10-30-demos.md
deleted file mode 100644
index 068a13c..0000000
--- a/src/posts/2023/2023-10-30-demos.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: 'Demo pages'
-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 and a regular loop over images.'
- 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/'
- - 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/'
----
-
-**Important**: As of version 2.0, the demos featured here are all directly built in the starter.
-
-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
-
-{% for item in demos %}
-
-
- {{ item.title }}
- {{ item.description }}
-
-
-{% endfor %}
diff --git a/src/posts/2023/2023-11-30-tailwind.md b/src/posts/2023/2023-11-30-tailwind.md
deleted file mode 100644
index 6e18b0e..0000000
--- a/src/posts/2023/2023-11-30-tailwind.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: 'What is Tailwind CSS doing here?'
-description: 'We are using Tailwinds "engine" to generate utility classes on demand, based on our design tokens. '
-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 [better and more detailed explanation](https://piccalil.li/blog/a-css-project-boilerplate/).
-
----
-
-We are using Tailwinds "engine" to generate utility classes on demand, based on our design tokens.
-
-If you have a look at the [tailwind.config.js](https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js), you can see how that is done. For example, we are [deactivating Tailwinds default reset](https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js#L72C1-L72C22).
-
-We are hooking into the components layer, to make Tailwind output classes based on our tokens, instead of their default design system.
-
-That is, you are able to use `mt-xs-s` instead of a class like `mt-20` for example. Same goes for colors, depending on the namesin your `colors.json`, you get custom classes like `text-pink`. These use the usual Tailwind prefixes ([see docs to learn how to generate colors](/get-started/#design-tokens)).
-
-You get a custom property mapped to the color name `--color-my-custom-color-name` _and_ the classes `bg-my-custom-color-name` as well as `text-my-custom-color-name`.
-
-Consider that we limit those utilities in the theme section:
-
-```js
-backgroundColor: ({theme}) => theme('colors'),
-textColor: ({theme}) => theme('colors'),
-margin: ({theme}) => ({ auto: 'auto', ...theme('spacing')}),
-padding: ({theme}) => theme('spacing')
-```
-
-If you want to add the generation for `border-color` classes for example, you'd have to add that right there:
-
-`borderColor: ({theme}) => theme('colors')`
-
-Also. you _do_ have something like `md:text-right` available because we define the screens (`src/_data/designTokens/viewports.json`):
-
-```js
-screens: {
- ltsm: {max: `${viewportTokens.sm}px`},
- sm: `${viewportTokens.sm}px`,
- md: `${viewportTokens.md}px`,
- navigation: `${viewportTokens.navigation}px`
-},
-```
-
-Additionally, you get custom properties based on the naming of your design token files:
-
-```js
-const groups = [
- {key: 'colors', prefix: 'color'},
- {key: 'borderRadius', prefix: 'border-radius'},
- {key: 'spacing', prefix: 'space'},
- {key: 'fontSize', prefix: 'size'},
- {key: 'lineHeight', prefix: 'leading'},
- {key: 'fontFamily', prefix: 'font'},
- {key: 'fontWeight', prefix: 'font'}
-];
-```
-
-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.
-
-
-
-You can also create custom utility classes:
-
-```js
-const customUtilities = [
- {key: 'spacing', prefix: 'flow-space', property: '--flow-space'},
- {key: 'spacing', prefix: 'region-space', property: '--region-space'},
- {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.
-
-
-
-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/2024-01-30-gallery.md b/src/posts/2024/2024-01-30-gallery.md
deleted file mode 100644
index c6f5bb6..0000000
--- a/src/posts/2024/2024-01-30-gallery.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-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)'
----
-
-This post has a gallery set in its front matter as a list of objects, each with an `image`, `alt`, and `caption` property.
-
-When you import the gallery component, the images are listed in a grid as buttons, each linked to the respective image in a `