From 6a8ca85c48d5420cbe1c66e9987964587670053b Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Fri, 9 Feb 2024 09:40:53 +0100
Subject: [PATCH] details as component

---
 src/_data/meta.js                    |  3 ++
 src/_includes/components/details.njk | 29 +++++++++++++++++
 src/assets/css/blocks/details.css    |  2 +-
 src/pages/get-started.md             | 42 ++++++++++++++++++++++++
 src/pages/get-started.njk            | 48 ----------------------------
 5 files changed, 75 insertions(+), 49 deletions(-)
 create mode 100644 src/_includes/components/details.njk
 create mode 100644 src/pages/get-started.md
 delete mode 100644 src/pages/get-started.njk

diff --git a/src/_data/meta.js b/src/_data/meta.js
index 9d9b361..87507a5 100644
--- a/src/_data/meta.js
+++ b/src/_data/meta.js
@@ -39,6 +39,9 @@ module.exports = {
     paginationPrevious: 'Previous',
     paginationNext: 'Next'
   },
+  details: {
+    toggle: 'Toggle all'
+  },
   navigation: {
     ariaTop: 'Main',
     ariaBottom: 'Complementary',
diff --git a/src/_includes/components/details.njk b/src/_includes/components/details.njk
new file mode 100644
index 0000000..c5dc402
--- /dev/null
+++ b/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>
diff --git a/src/assets/css/blocks/details.css b/src/assets/css/blocks/details.css
index 0f9a2c9..a329830 100644
--- a/src/assets/css/blocks/details.css
+++ b/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 {
diff --git a/src/pages/get-started.md b/src/pages/get-started.md
new file mode 100644
index 0000000..2eed27b
--- /dev/null
+++ b/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' %}
diff --git a/src/pages/get-started.njk b/src/pages/get-started.njk
deleted file mode 100644
index 4455af6..0000000
--- a/src/pages/get-started.njk
+++ /dev/null
@@ -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 -%}