feat: implement chart toggles without jss

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "22.0.0",
+  "version": "22.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "22.0.0",
+      "version": "22.1.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "22.0.0",
+  "version": "22.1.0",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {

src/assets/scripts/media-toggles.js

@@ -1,27 +0,0 @@
-window.addEventListener('load', () => {
-    const buttonSets = document.querySelectorAll('.section-header-buttons')
-    const initializeButtonSet = (buttonSet) => {
-      const buttons = buttonSet.querySelectorAll('button')
-      const buttonIds = Array.from(buttons).map((button) => button.getAttribute('data-toggle'))
-
-      buttons.forEach(button => {
-        button.addEventListener('click', function () {
-          const targetId = this.getAttribute('data-toggle')
-          const targetContent = document.getElementById(targetId)
-
-          buttons.forEach(btn => {
-            btn.classList.toggle('active', btn === this)
-            btn.classList.toggle('secondary', btn !== this)
-          })
-
-          buttonIds.forEach(id => {
-            document.getElementById(id).classList.toggle('hidden', id !== targetId)
-          })
-
-          targetContent.classList.remove('hidden')
-        })
-      })
-    }
-
-    buttonSets.forEach(initializeButtonSet)
-})

src/assets/styles/components/buttons.css

@@ -1,4 +1,52 @@
-button {
+/* music - chart toggle styles */
+#tracks-recent ~ .tracks-recent,
+#tracks-window ~ .tracks-window {
+  display: none;
+}
+
+#tracks-recent:checked ~ .tracks-recent,
+#tracks-window:checked ~ .tracks-window {
+  display: block;
+}
+
+input[id="tracks-recent"] ~ [for="tracks-recent"],
+input[id="tracks-window"] ~ [for="tracks-window"] {
+  margin-bottom: var(--sizing-lg);
+}
+
+#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
+#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active,
+#tracks-window:not(:checked) ~ [for="tracks-window"]:hover,
+#tracks-window:not(:checked) ~ [for="tracks-window"]:active {
+  color: var(--accent-color-hover);
+  background: transparent;
+}
+
+#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus,
+#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus-within,
+#tracks-window:not(:checked) ~ [for="tracks-window"]:focus,
+#tracks-window:not(:checked) ~ [for="tracks-window"]:focus-within {
+  transition-property: none;
+  outline: 2px dashed var(--accent-color);
+  border: 0;
+}
+
+#tracks-recent:checked ~ [for="tracks-recent"],
+#tracks-window:checked ~ [for="tracks-window"] {
+  cursor: not-allowed;
+  border-color: var(--accent-color);
+  background-color: var(--accent-color);
+}
+
+#tracks-recent:not(:checked) ~ [for="tracks-recent"],
+#tracks-window:not(:checked) ~ [for="tracks-window"] {
+  color: var(--accent-color);
+  background: transparent;
+}
+
+/* generic button styles */
+button,
+.button {
   appearance: none;
   border: none;
 

src/pages/dynamic/music/index.html

@@ -6,10 +6,6 @@ permalink: "/music/index.html"
 updated: "now"
 schema: music-index
 ---
-{%- capture js -%}
-  {% render "../../../assets/scripts/media-toggles.js" %}
-{%- endcapture -%}
-<script>{{ js }}</script>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-week/">artists</a>, <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
@@ -37,16 +33,18 @@ schema: music-index
       Tracks
     </a>
   </h3>
-  <div class="section-header-buttons client-side">
-    <button class="small active" data-toggle="tracks-recent">Recent</button>
-    <button class="small secondary" data-toggle="tracks-window">This week</button>
-  </div>
 </div>
-<div id="tracks-recent">
+<div class="track-display">
+  <input id="tracks-recent" name="track-options" class="hidden" type="radio" aria-hidden="true" checked />
+  <input id="tracks-window" name="track-options" class="hidden" type="radio" aria-hidden="true" />
+  <label for="tracks-recent" class="button small" data-toggle="tracks-recent">Recent</label>
+  <label for="tracks-window" class="button small" data-toggle="tracks-window">This week</label>
+  <div class="tracks-recent">
     {% render "partials/media/music/recent", data:music.recent %}
-</div>
-<div class="hidden" id="tracks-window">
+  </div>
+  <div class="tracks-window">
     {% render "partials/media/music/chart.liquid", data:music.week.tracks, mostPlayed:music.week.tracks[0].plays, count: 10 %}
+  </div>
 </div>
 {% if albumReleases.size > 0 %}
 <h3 id="album-releases" class="section-header flex-centered">