feat(tags): this adds support for post, link, book, show and movie tags with a tag list view and per tag pages

src/assets/scripts/components/select-pagination.js

@@ -8,7 +8,7 @@ class SelectPagination extends HTMLElement {
   }
 
   get baseIndex() {
-    return this.getAttribute('data-base-index') || 0
+    return parseInt(this.getAttribute('data-base-index') || '0', 10)
   }
 
   connectedCallback() {
@@ -17,10 +17,11 @@ class SelectPagination extends HTMLElement {
     this.attachShadow({ mode: 'open' }).appendChild(document.createElement('slot'))
 
     const uriSegments = window.location.pathname.split('/').filter(Boolean)
-    let pageNumber = this.extractPageNumber(uriSegments) || 0
+    let pageNumber = this.extractPageNumber(uriSegments)
+    if (pageNumber === null) pageNumber = this.baseIndex
 
     this.control = this.querySelector('select')
-    this.control.value = pageNumber
+    this.control.value = pageNumber.toString()
     this.control.addEventListener('change', (event) => {
       pageNumber = parseInt(event.target.value)
       const updatedUrlSegments = this.updateUrlSegments(uriSegments, pageNumber)
@@ -34,13 +35,16 @@ class SelectPagination extends HTMLElement {
   }
 
   updateUrlSegments(segments, pageNumber) {
-    if (!isNaN(segments[segments.length - 1])) {
+    const lastIsPage = !isNaN(segments[segments.length - 1])
+
+    if (lastIsPage) {
       segments[segments.length - 1] = pageNumber.toString()
     } else {
       segments.push(pageNumber.toString())
     }
 
-    if (pageNumber === parseInt(this.baseIndex)) segments.pop()
+    if (pageNumber === this.baseIndex) segments.pop()
+
     return segments
   }
 }

src/assets/styles/base/index.css

@@ -257,10 +257,7 @@ a {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-xs);
-
-    &:not(:has(+ h1, + h2, + h3)) {
-      margin-bottom: var(--spacing-base);
-    }
+    margin-bottom: var(--spacing-base);
 
     &:is(:hover, :focus, :active) svg {
       transform: var(--transform-icon-default);
@@ -350,7 +347,13 @@ hr {
 time {
   color: var(--gray-dark);
   font-size: var(--font-size-sm);
-  line-height: var(--sizing-sm);
+}
+
+.tags {
+  font-size: var(--font-size-sm);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
 }
 
 article {
@@ -366,6 +369,10 @@ article {
 
   h3 {
     margin-top: 0;
+
+    &:has(+ .tags) {
+      margin-bottom: 0;
+    }
   }
 
   aside {

src/assets/styles/base/vars.css

@@ -158,7 +158,7 @@
 
   /* transforms */
   --transform-icon-default: rotate(0);
-  --transform-icon-tilt: rotate(7.5deg);
+  --transform-icon-tilt: rotate(10deg);
 
   @media (prefers-reduced-motion) {
     --transform-icon-tilt: var(--transform-icon-default);

src/assets/styles/components/dialog.css

@@ -22,11 +22,6 @@ dialog {
   transition: color var(--transition-duration-default) var(--transition-ease-in-out),
     transform var(--transition-duration-default) var(--transition-ease-in-out);
 
-  svg {
-    --sizing-svg: var(--sizing-svg-base);
-  }
-
-
   &:is(:hover, :focus, :active) {
     color: var(--link-color-hover);
 
@@ -77,6 +72,10 @@ dialog {
     left: var(--sizing-full);
     background: var(--background-color);
     border-radius: var(--border-radius-full);
+
+    svg {
+      --sizing-svg: var(--sizing-svg-base);
+    }
   }
 }
 

src/assets/styles/components/forms.css

@@ -44,10 +44,6 @@ button svg,
 label svg {
   stroke: var(--section-color, var(--accent-color));
   cursor: pointer;
-
-  &:is(:hover, :focus, :active) {
-    stroke: var(--accent-color-hover);
-  }
 }
 
 summary {