details as component

src/_data/meta.js

@@ -39,6 +39,9 @@ module.exports = {
     paginationPrevious: 'Previous',
     paginationNext: 'Next'
   },
+  details: {
+    toggle: 'Toggle all'
+  },
   navigation: {
     ariaTop: 'Main',
     ariaBottom: 'Complementary',

src/_includes/components/details.njk

@@ -0,0 +1,29 @@
+<button id="toggleAll" class="button">{{ meta.details.toggle }}</button>
+
+{% for item in itemList %}
+<details id="{{ item.data.title | slugify }}">
+  <summary>{{ item.data.title }}</summary>
+  {{ item.templateContent | safe }}
+</details>
+{% endfor %}
+
+<script>
+  const toggleAll = document.querySelector('#toggleAll');
+  const details = document.querySelectorAll('details');
+
+  toggleAll.addEventListener('click', () => {
+    const allOpen = [...details].every(detail => detail.open);
+    details.forEach(detail => (detail.open = !allOpen));
+  });
+
+  details.forEach(detail => {
+    detail.addEventListener('toggle', () => {
+      const hash = detail.open ? `#${detail.id}` : '#';
+      history.pushState(null, null, hash);
+    });
+  });
+
+  const id = window.location.hash.slice(1);
+  const detail = document.getElementById(id);
+  if (detail) detail.open = true;
+</script>

src/assets/css/blocks/details.css

@@ -3,7 +3,7 @@ details > * + * {
 }
 
 details > p:last-child {
-  margin-block-end: var(--space-l-xl);
+  margin-block-end: var(--space-l);
 }
 
 summary {

src/pages/get-started.md

@@ -0,0 +1,42 @@
+---
+title: Get started
+permalink: /get-started/index.html
+description: Websites built with this starter
+layout: page
+preloads:
+  href: '/assets/fonts/robotomono/robotomono-regular.woff2'
+  as: 'font'
+  type: 'font/woff2'
+  crossorigin: true
+---
+
+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/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.
+- Edit your navigation items in `src/_data/navigation.js`.
+
+If you are working with **VS Code** I recommend installing the "Tailwind
+CSS IntelliSense" addon, as it works also for our custom utility classes. That said, you
+will find that Tailwind CSS does not work as you might expect. I explain this in
+[one of the blog posts](/blog/what-is-tailwind-css-doing-here/).
+
+The [blog posts](/blog/page-0/) also explain / show some basic features that
+aren't covered here.
+
+## "Docs" lol
+
+<!-- loop docs -->
+
+{% set itemList = collections.docs %}
+
+<!-- details -->
+
+{% include 'components/details.njk' %}

src/pages/get-started.njk

@@ -1,48 +0,0 @@
----
-title: Get started
-permalink: /get-started/index.html
-description: Websites built with this starter
-layout: page
-preloads:
-  href: '/assets/fonts/robotomono/robotomono-regular.woff2'
-  as: 'font'
-  type: 'font/woff2'
-  crossorigin: true
----
-
-<p>
-  You can use this starter as a template for your blog and you are ready to go! But there
-  are some <strong>adjustments you have to make</strong>.
-</p>
-
-<ul>
-  <li>
-    <code>src/_data/meta.js</code> - sets different "hard coded" text values all over the
-    template, you can change the language, etc.
-  </li>
-  <li>
-    edit your personal details and social media in <code>src/_data/personal.yaml</code>.
-  </li>
-  <li>
-    Open <code>src/assets/css/blocks/external-link.css</code>. 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
-    <code>no-indicator</code> to any anchor element you want to except from this rule.
-  </li>
-  <li>Edit your navigation items in <code>src/_data/navigation.js</code>.</li>
-</ul>
-
-
-<p>If you are working with <strong>VS Code</strong> I recommend installing the "Tailwind CSS IntelliSense" addon, as it works also for our custom utility classes. That said, you will find that Tailwind CSS does not work as you might expect. I explain this in <a href="/blog/what-is-tailwind-css-doing-here/">one of the blog posts</a>.</p>
-
-<p>The <a href="/blog/page-0/">blog posts</a> also explain / show some basic features that aren't covered here.</p>
-
-<h2 id="docs">"Docs" lol</h2>
-
-{%- for entry in collections.docs -%}
-<details id="{{ entry.data.title | slugify }}">
-  <summary>{{ entry.data.title }}</summary>
-  {{ entry.templateContent | safe }}
-</details>
-{%- endfor -%}