feat: css toggles; drop js

_redirects

@@ -38,6 +38,7 @@
 /posts/2024/handling-images-with-b2-netlify-image-cdn-hazel-mountain-duck/ /posts/2024/handling-images-with-b2-netlifys-image-cdn-hazel-and-mountain-duck/ 301
 /posts/2023/my-default-apps-2023-edition/ /uses 301
 /posts/2024/link-blogging-using-readwise/ /posts/2024/link-blogging-using-readwise-reader/ 301
+/2022/12/automating-email-cleanup-in-gmail /posts/2022/automating-email-cleanup-in-gmail/ 301
 
 # music
 /music/artists/hyperdontia-denmark-turkiye /music/artists/hyperdontia-denmark-tuerkiye 301

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "19.3.23",
+  "version": "19.4.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/assets/scripts/text-toggle.js

@@ -1,24 +0,0 @@
-window.onload = () => {
-  const button = document.querySelector('[data-toggle-button]')
-  const content = document.querySelector('[data-toggle-content]')
-  const text = document.querySelectorAll('[data-toggle-content] p')
-  const minHeight = 500 // this needs to match the height set on [data-toggle-content].text-toggle-hidden in text-toggle.css
-  let interiorHeight = 0
-
-  text.forEach(node => interiorHeight += node.scrollHeight)
-
-  if (interiorHeight < minHeight) {
-    content.classList.remove('text-toggle-hidden')
-    button.style.display = 'none'
-  }
-
-  button.addEventListener('click', () => {
-    if (content.classList.contains('text-toggle-hidden')) {
-      content.classList.remove('text-toggle-hidden')
-      button.textContent = 'Show less'
-    } else {
-      content.classList.add('text-toggle-hidden')
-      button.textContent = 'Show more'
-    }
-  });
-}

src/assets/styles/components/buttons.css

@@ -1,4 +1,5 @@
-button {
+button,
+[aria-role="button"] {
   &:not(.theme-toggle) {
     border-radius: var(--rounded-full);
     padding: var(--sizing-sm) var(--sizing-lg);

src/assets/styles/components/text-toggle.css

@@ -1,21 +1,62 @@
-[data-toggle-content].text-toggle-hidden {
+.toggle-wrapper {
   position: relative;
-  height: 500px;
+  margin-bottom: calc(var(--sizing-base) + 52px);
-  overflow: hidden;
-  margin-bottom: var(--sizing-base);
-}
 
-[data-toggle-content].text-toggle-hidden::after {
+  & p:first-of-type {
-  position: absolute;
+    margin-top: 0;
-  z-index: 1;
+  }
-  content: '';
-  top: 0;
-  left: 0;
-  box-shadow: inset 0 -120px 50px -60px var(--background-color);
-  width: 100%;
-  height: 100%;
-}
 
-[data-toggle-button] {
+  & .toggle-checkbox {
-  margin-bottom: var(--sizing-base) !important;
+    display: none;
-}
+  }
+
+  & .toggle-label {
+    display: inline-block;
+  }
+
+  & [data-toggle-content] {
+    &.text-toggle-hidden {
+      position: relative;
+      height: 500px;
+      overflow: hidden;
+      margin-bottom: var(--sizing-base);
+      transition: height 0.5s ease-out;
+    }
+
+    &.text-toggle-hidden::after {
+      position: absolute;
+      z-index: 1;
+      content: '';
+      top: 0;
+      left: 0;
+      box-shadow: inset 0 -120px 50px -60px var(--background-color);
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  & .toggle-checkbox:checked ~ [data-toggle-content] {
+    height: auto;
+    transition: height 0.5s ease-in;
+  }
+
+  & .toggle-checkbox:checked ~ [data-toggle-content]::after {
+    box-shadow: none;
+  }
+
+  & .toggle-checkbox:checked + .toggle-label [aria-role="button"]::after {
+    content: 'Show less';
+  }
+
+  & .toggle-label [aria-role="button"] {
+    position: absolute;
+    z-index: 2;
+    bottom: -52px;
+    left: 0;
+    margin-bottom: 0;
+  }
+
+  & .toggle-label [aria-role="button"]::after {
+    content: 'Show more';
+  }
+}

src/pages/main/music/artists/artist.html

@@ -11,11 +11,6 @@ schema: artist
 {%- capture alt -%}
   {{ artist.name_string }} / {{ artist.country }}
 {%- endcapture -%}
-{% capture js %}
-  {% render "../../../../assets/scripts/text-toggle.js" %}
-{% endcapture %}
-<script>{{ js }}</script>
-<noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
 <a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 <article class="artist-focus">
   <div class="artist-display">
@@ -56,8 +51,13 @@ schema: artist
     </div>
   </div>
   {%- if artist.description -%}
-  <div data-toggle-content class="text-toggle-hidden">{{ artist.description | markdown }}</div>
+  <div class="toggle-wrapper">
-  <button data-toggle-button>Show more</button>
+    <input id="toggle-checkbox" class="toggle-checkbox" type="checkbox">
+    <label class="toggle-label" for="toggle-checkbox">
+      <div aria-role="button"></div>
+    </label>
+    <div data-toggle-content class="text-toggle-hidden">{{ artist.description | markdown }}</div>
+  </div>
   {%- endif -%}
   <table>
     <tr>

src/pages/main/music/genre.html

@@ -16,22 +16,22 @@ schema: genre
     is
   {% endif %}
 {%- endcapture -%}
-{% capture js %}
-  {% render "../../../assets/scripts/text-toggle.js" %}
-{% endcapture %}
-<script>{{ js }}</script>
-<noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
 <a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 <h2 class="page-header">{{ genre.name }}</h2>
 <article class="genre-focus">
   <p>My top <strong class="highlight-text">{{ genre.name }}</strong> artists {{ connectingWord }} {{ genre.artists | sortByPlaysDescending: "total_plays" | mediaLinks: "artist", 5 }}. I've listened to <strong class="highlight-text">{{ genre.total_plays | formatNumber }}</strong> tracks form this genre.</p>
   <hr />
   {%- if genre.description -%}
-  <div data-toggle-content class="text-toggle-hidden">
+  <div class="toggle-wrapper">
-    {{ genre.description | markdown }}
+    <input id="toggle-checkbox" class="toggle-checkbox" type="checkbox">
-    <p><a href="{{ genre.wiki_link }}">Continue reading at Wikipedia.</a></p>
+    <label class="toggle-label" for="toggle-checkbox">
-    <p class="text-small"><em>Wikipedia content provided under the terms of the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a></em></p>
+      <div aria-role="button"></div>
+    </label>
+    <div data-toggle-content class="text-toggle-hidden">
+      {{ genre.description | markdown }}
+      <p><a href="{{ genre.wiki_link }}">Continue reading at Wikipedia.</a></p>
+      <p class="text-small"><em>Wikipedia content provided under the terms of the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a></em></p>
+    </div>
   </div>
-  <button data-toggle-button>Show more</button>
   {%- endif -%}
 </article>