feat: progressively enhance select pagination

package.json

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

src/_includes/partials/paginator.liquid

@@ -2,6 +2,10 @@
   {% render "../../assets/styles/components/paginator.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
+{% capture js %}
+  {% render "../../assets/scripts/paginator.js" %}
+{% endcapture %}
+<script>{{ js }}</script>
 <nav aria-label="Blog pagination" class="pagination flex--centered">
   {% if pagination.href.previous %}
     <a href="{{ pagination.href.previous }}" aria-label="Previous page">
@@ -15,8 +19,17 @@
       {% tablericon "arrow-left" "Prevous" %}
     </span>
   {% endif %}
-  <div class="text--centered">
+  <noscript>
-    <span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
+    <div class="text--centered">
+      <span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
+    </div>
+  </noscript>
+  <div class="select client-side">
+    <select id="pagination">
+      {% for pageEntry in pagination.pages %}
+      <option value="{{ forloop.index | minus: 1 }}">{{ forloop.index }} of {{ pagination.links.size }}</option>
+      {% endfor %}
+    </select>
   </div>
   {% if pagination.href.next %}
     <a href="{{ pagination.href.next }}" aria-label="Next page">

src/assets/scripts/paginator.js

@@ -0,0 +1,25 @@
+window.onload = () => {
+  const pagination = document.getElementById('pagination')
+  const uri = window.location.pathname
+  const urlSegments = uri.split('/').filter(segment => segment !== '')
+  let pageNumber = parseInt(urlSegments[urlSegments.length - 1]) || 0
+  pagination.querySelector(`option[value="${pageNumber.toString()}"]`).setAttribute('selected', 'selected')
+
+  if (pagination) {
+    pagination.addEventListener('change', (event) => {
+      pageNumber = event.target.value
+
+      if (urlSegments.length === 0 || isNaN(urlSegments[urlSegments.length - 1])) {
+        urlSegments.push(pageNumber.toString())
+      } else {
+        urlSegments[urlSegments.length - 1] = pageNumber.toString()
+      }
+
+      if (pageNumber === 0) {
+        window.location.href = `${window.location.protocol}//${window.location.host}/`
+      } else {
+        window.location = `${window.location.protocol}//${window.location.host}/${urlSegments.join('/')}`
+      }
+    })
+  }
+}

src/assets/styles/components/paginator.css

@@ -8,6 +8,10 @@
   padding-right: 0;
 }
 
+.pagination a {
+  display: flex;
+}
+
 .pagination a > svg {
   stroke: var(--accent-color);
   cursor: pointer;

src/assets/styles/index.css

@@ -396,6 +396,56 @@ li {
   margin-top: 0;
 }
 
+/* selects */
+select {
+  appearance: none;
+  background-color: transparent;
+  margin: 0;
+  width: 100%;
+  z-index: 1;
+  outline: none;
+  appearance: none;
+  border: none;
+  color: var(--color-lightest);
+  cursor: pointer;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-base);
+}
+
+.select {
+  border-radius: var(--rounded-full);
+  background-color: var(--accent-color);
+  padding: 0 var(--sizing-lg);
+  display: grid;
+  align-items: center;
+  position: relative;
+  text-align: center;
+  text-align-last: center;
+  -moz-text-align-last: center;
+}
+
+.select,
+.select select {
+  min-height: calc(var(--sizing-3xl) * 1.25);
+  min-width:  calc(var(--sizing-3xl) * 4);;
+}
+
+.select select,
+.select::after {
+  grid-area: select;
+}
+
+.select::after {
+  content: '';
+  width: var(--sizing-md);
+  height: var(--sizing-sm);
+  display: inline-block;
+  background-color: var(--color-lightest);
+  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+  justify-self: end;
+}
+
 /* utilities */
 .hidden {
   display: none !important;