feat: modal + concert notes

package-lock.json

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

package.json

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

src/assets/styles/components/modal.css

@@ -0,0 +1,71 @@
+.modal-wrapper {
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  z-index: 1;
+
+  & .modal-body {
+    position: fixed;
+    background: var(--background-color);
+    border: 1px solid var(--gray-light);
+    max-height: 75%;
+    max-width: 75%;
+    inset: 12.5%;
+    overflow: scroll;
+    padding: var(--sizing-lg) var(--sizing-2xl);
+
+    & .modal-close {
+      position: absolute;
+      top: var(--sizing-lg);
+      right: var(--sizing-lg);
+      cursor: pointer;
+
+      & svg {
+        stroke: var(--accent-color);
+        transform: rotate(0deg);
+        transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
+
+        &:hover,
+        &:focus,
+        &:active {
+          stroke: var(--accent-color-hover);
+          transform: rotate(8deg);
+        }
+      }
+    }
+  }
+}
+
+.modal-input {
+  display: none;
+
+  &:checked ~ .modal-wrapper {
+    display: block;
+  }
+
+  &:not(:checked) ~ .modal-wrapper {
+    display: none;
+  }
+}
+
+.modal-toggle {
+  cursor: pointer;
+  display: inline-flex;
+  vertical-align: middle;
+
+  & svg {
+    cursor: pointer;
+    stroke: var(--accent-color);
+    transform: rotate(0deg);
+    transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
+
+    &:hover,
+    &:focus,
+    &:active {
+      stroke: var(--accent-color-hover);
+      transform: rotate(8deg);
+    }
+  }
+}

src/assets/styles/index.css

@@ -32,6 +32,7 @@
 @import url('./components/forms.css') layer(components);
 @import url('./components/media-grid.css') layer(components);
 @import url('./components/menu.css') layer(components);
+@import url('./components/modal.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/assets/styles/pages/music.css

@@ -85,6 +85,10 @@
 .concert-list {
   margin-top: 0;
   padding-left: 0;
+
+  & li .modal-toggle {
+    height: calc(var(--sizing-lg) * 1.6);
+  }
 }
 
 @media screen and (min-width: 768px) {

src/data/concerts.js

@@ -46,6 +46,7 @@ const fetchAllConcerts = async () => {
 
 const processConcerts = (concerts) => {
   return concerts.map(concert => ({
+    id: concert['id'],
     date: concert['date'],
     artistNameString: concert['artist_name_string'],
     venue: {

src/includes/partials/blocks/modal.liquid

@@ -0,0 +1,18 @@
+{%- capture labelContent -%}
+  {% if icon %}
+    {% tablericon icon label %}
+  {% elsif label %}
+    {{ label }}
+  {% endif %}
+{%- endcapture -%}
+{% assign modalId = id | default: "modal-controls" %}
+<input class="modal-input" id="{{ id }}" type="checkbox" tabindex="0" />
+<label class="modal-toggle" for="{{ id }}">{{ labelContent }}</label>
+<div class="modal-wrapper">
+  <div class="modal-body">
+    <label class="modal-close" for="{{ id }}">
+      {% tablericon "x" "Close modal" %}
+    </label>
+    {{ content }}
+  </div>
+</div>

src/pages/dynamic/concerts.html

@@ -33,6 +33,10 @@ permalink: "/music/concerts/{% if pagination.pageNumber > 0 %}{{ pagination.page
     <li>
       {{ artistName }} on <strong class="highlight-text">{{ concert.date | date: "%B %e, %Y" }}</strong>
       {% if venue %} at {{ venue }}{% endif %}
+      {% if concert.notes %}
+        {% assign notes = concert.notes | prepend: "### Notes\n" | markdown %}
+        {% render "partials/blocks/modal.liquid", label:"Concert info", icon:"info-circle", content:notes, id:concert.id %}
+      {% endif %}
     </li>
   {% endfor %}
 </ul>