chore(dialogs): remove excessive duplicate markup for fallback modal hack

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "1.7.10",
+  "version": "1.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "1.7.10",
+      "version": "1.8.0",
       "license": "MIT",
       "dependencies": {
         "html-minifier-terser": "7.2.0",

package.json

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

src/assets/scripts/index.js

@@ -1,14 +1,14 @@
 window.addEventListener("load", () => {
   // dialog controls
   (() => {
-    if (document.querySelectorAll(".modal-open").length) {
+    if (document.querySelectorAll(".dialog-open").length) {
-      document.querySelectorAll(".modal-open").forEach((button) => {
+      document.querySelectorAll(".dialog-open").forEach((button) => {
-        const modalId = button.getAttribute("data-modal-trigger");
+        const dialogId = button.getAttribute("data-dialog-trigger");
-        const dialog = document.getElementById(`dialog-${modalId}`);
+        const dialog = document.getElementById(`dialog-${dialogId}`);
 
         if (!dialog) return;
 
-        const closeButton = dialog.querySelector(".modal-close");
+        const closeButton = dialog.querySelector(".dialog-close");
 
         button.addEventListener("click", () => {
           dialog.showModal();

src/assets/styles/base/vars.css

@@ -178,8 +178,8 @@
   /* shadows */
   --box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
 
-  /* modals */
+  /* dialogs */
-  --modal-overlay-background: light-dark(#ffffffbf, #000000bf);
+  --dialog-overlay-background: light-dark(#ffffffbf, #000000bf);
 
   /* input accent color */
   accent-color: var(--accent-color);

src/assets/styles/components/buttons.css

@@ -1,6 +1,6 @@
 @import url("./text-toggle.css");
 
-button:not([data-modal-button]),
+button:not([data-dialog-button]),
 .button {
   appearance: none;
   border: 2px solid var(--section-color, var(--accent-color));

src/assets/styles/components/dialog.css

@@ -8,38 +8,13 @@
   to { opacity: 0; transform: scale(0.95); }
 }
 
-.modal-wrapper {
-  background: var(--modal-overlay-background);
-  z-index: 5;
-}
-
-.modal-wrapper,
-.modal-body {
-  inset: 0;
-  position: fixed;
-}
-
-.modal-wrapper,
-.modal-body,
 dialog {
   width: var(--sizing-full);
   height: var(--sizing-full);
 }
 
-.modal-input {
+.dialog-open,
-  display: none;
+.dialog-close {
-
-  &:checked ~ .modal-wrapper {
-    display: block;
-  }
-
-  &:not(:checked) ~ .modal-wrapper {
-    display: none;
-  }
-}
-
-.modal-open,
-.modal-close {
   display: inline-flex;
   vertical-align: middle;
   color: var(--section-color, var(--accent-color));
@@ -61,8 +36,7 @@ dialog {
   }
 }
 
-dialog,
+dialog {
-.modal-body {
   background: var(--background-color);
   padding: var(--spacing-lg) var(--spacing-base);
   overflow-y: auto;
@@ -96,7 +70,7 @@ dialog,
     border: var(--border-gray);
   }
 
-  .modal-close {
+  .dialog-close {
     position: sticky;
     z-index: 6;
     top: 0;
@@ -111,5 +85,5 @@ dialog {
 }
 
 dialog::backdrop {
-  background: var(--modal-overlay-background);
+  background: var(--dialog-overlay-background);
 }

src/assets/styles/index.css

@@ -30,7 +30,7 @@
 @import url("./components/header.css") layer(components);
 @import url("./components/media-grid.css") layer(components);
 @import url("./components/nav.css") layer(components);
-@import url("./components/modal.css") layer(components);
+@import url("./components/dialog.css") layer(components);
 @import url("./components/music-chart.css") layer(components);
 @import url("./components/paginator.css") layer(components);
 @import url("./components/progress-bar.css") layer(components);

src/includes/blocks/dialog.liquid

@@ -0,0 +1,17 @@
+{%- capture labelContent -%}
+  {%- if icon -%}
+    {% tablericon icon %}
+  {%- elsif label -%}
+    {{ label }}
+  {%- endif -%}
+{%- endcapture -%}
+{% assign dialogId = id | default:"dialog-controls" %}
+<button class="dialog-open client-side" data-dialog-trigger="{{ dialogId }}" data-dialog-button>
+  {{ labelContent }}
+</button>
+<dialog id="dialog-{{ dialogId }}" class="client-side">
+  <button class="dialog-close" data-dialog-button>
+    {% tablericon "circle-x" %}
+  </button>
+  {{ content }}
+</dialog>

src/includes/blocks/modal.liquid

@@ -1,29 +0,0 @@
-{%- capture labelContent -%}
-  {%- if icon -%}
-    {% tablericon icon %}
-  {%- elsif label -%}
-    {{ label }}
-  {%- endif -%}
-{%- endcapture -%}
-{% assign modalId = id | default:"modal-controls" %}
-<noscript>
-  <input class="modal-input" id="{{ modalId }}" type="checkbox" tabindex="0" />
-  <label class="modal-open" for="{{ modalId }}">{{ labelContent }}</label>
-  <div class="modal-wrapper">
-    <div class="modal-body">
-      <label class="modal-close" for="{{ modalId }}">
-        {% tablericon "circle-x" %}
-      </label>
-      {{ content }}
-    </div>
-  </div>
-</noscript>
-<button class="modal-open client-side" data-modal-trigger="{{ modalId }}" data-modal-button>
-  {{ labelContent }}
-</button>
-<dialog id="dialog-{{ modalId }}" class="client-side">
-  <button class="modal-close" data-modal-button>
-    {% tablericon "circle-x" %}
-  </button>
-  {{ content }}
-</dialog>

src/includes/home/recent-activity.liquid

@@ -13,14 +13,16 @@
           {{ item.content_date | date:"%B %e, %Y" }}
         </time>
          • {{ item.label }}
-        {%- if item.notes -%}
+        <span class="client-side">
-          {% assign notes = item.notes | prepend: "### Notes\n" | markdown %}
+          {%- if item.notes -%}
-           • {% render "blocks/modal.liquid",
+            {% assign notes = item.notes | prepend: "### Notes\n" | markdown %}
-            label:"Notes",
+             • {% render "blocks/dialog.liquid",
-            content:notes,
+              label:"Notes",
-            id:item.content_date
+              content:notes,
-          %}
+              id:item.content_date
-        {%- endif -%}
+            %}
+          {%- endif -%}
+        </span>
       </aside>
       <h3>
         {%- if item.type == "concerts" -%}

src/pages/dynamic/artist.php.liquid

@@ -81,7 +81,7 @@ schema: artist
             $venue = htmlspecialchars($concert["venue_name_short"]);
           }
         }
-        $modalId = "modal-" . htmlspecialchars($concert["id"]);
+        $dialogId = "dialog-" . htmlspecialchars($concert["id"]);
       ?>
       <li class="concerts">
         On <mark><?php echo date("F j, Y", strtotime($concert["date"])); ?></mark>
@@ -90,25 +90,11 @@ schema: artist
         <?php endif; ?>
         <?php if (!empty($concert["notes"])): ?>
           <?php $notes = "### Notes\n" . htmlspecialchars($concert["notes"]); ?>
-          <noscript>
+          <button class="dialog-open client-side" data-dialog-trigger="<?php echo $dialogId; ?>" data-dialog-button>
-            <input class="modal-input" id="<?php echo $modalId; ?>" type="checkbox" tabindex="0" />
-            <label class="modal-open" for="<?php echo $modalId; ?>">
-              {% tablericon "info-circle" %}
-            </label>
-            <div class="modal-wrapper">
-              <div class="modal-body">
-                <label class="modal-close" for="<?php echo $modalId; ?>">
-                  {% tablericon "circle-x" %}
-                </label>
-                <?php echo parseMarkdown($notes); ?>
-              </div>
-            </div>
-          </noscript>
-          <button class="modal-open client-side" data-modal-trigger="<?php echo $modalId; ?>" data-modal-button>
             {% tablericon "info-circle" %}
           </button>
-          <dialog id="dialog-<?php echo $modalId; ?>" class="client-side">
+          <dialog id="dialog-<?php echo $dialogId; ?>" class="client-side">
-            <button class="modal-close" data-modal-button>
+            <button class="dialog-close" data-dialog-button>
               {% tablericon "circle-x" %}
             </button>
             <?php echo parseMarkdown($notes); ?>

src/pages/media/music/concerts.html

@@ -32,14 +32,16 @@ permalink: "/music/concerts/{% if pagination.pageNumber > 0 %}{{ pagination.page
     <li>
       <strong>{{ artistName }}</strong> on {{ concert.date | date: "%B %e, %Y" }}
       {% if venue %} at {{ venue }}{% endif %}
-      {%- if concert.notes -%}
+      <span class="client-side" style="display:inline">
-        {% assign notes = concert.notes | prepend: "### Notes\n" | markdown %}
+        {%- if concert.notes -%}
-        {% render "blocks/modal.liquid",
+          {% assign notes = concert.notes | prepend: "### Notes\n" | markdown %}
-          icon:"info-circle",
+          {% render "blocks/dialog.liquid",
-          content:notes,
+            icon:"info-circle",
-          id:concert.id
+            content:notes,
-        %}
+            id:concert.id
-      {%- endif -%}
+          %}
+        {%- endif -%}
+      <span class="client-side">
     </li>
   {%- endfor -%}
 </ul>