From 0858c664c9b8f54abe83ee043786ff5bbdaf8e82 Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Wed, 17 Dec 2025 12:45:15 +0000
Subject: [PATCH] Use <dialog> to show co-op info when JS available

This commit progressively enhances the co-op grid to show the contents
of the `/co-op/<id>` page in a HTML `<dialog>` element. This improves
the existing experience by retaining the scroll position and returning
the user to the correct page when the dialog is closed.

In case JS isn't available, and for SEO purposes we link to the co-op
pages as previously (but with the disadvantage that the "close" button
always returns to the homepage irrespective of where the co-op grid is
used).
---
 _includes/our_members.html | 42 ++++++++++++++++++++++++++++++++++++++
 assets/css/app.css         | 19 +++++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/_includes/our_members.html b/_includes/our_members.html
index 7a8f81b..1fdc48d 100644
--- a/_includes/our_members.html
+++ b/_includes/our_members.html
@@ -11,8 +11,50 @@
     </a>
     {% endfor %}
   </div>
+
+  <dialog id="coop-dialog">
+    <div class="coop-dialog-container">
+      <div id="coop-dialog-container__body"></div>
+    </div>
+  </dialog>
 </section>
 
 <section>
   <a class="btn" href="/hire">Hire our co-ops</a>
 </section>
+
+<script>
+  const dialog = document.getElementById('coop-dialog');
+  const dialogBody = document.getElementById('coop-dialog-container__body');
+
+  dialog.addEventListener('click', (e) => {
+    if (e.target === dialog) dialog.close();
+  });
+
+  document.querySelectorAll('#members .grid__link').forEach(link => {
+    link.addEventListener('click', async (e) => {
+      e.preventDefault();
+      const url = link.getAttribute('href');
+
+      try {
+        const response = await fetch(url);
+        const html = await response.text();
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+
+        const content = doc.querySelector('body');
+        dialogBody.innerHTML = content ? content.innerHTML : html;
+
+        dialog.showModal();
+
+        const closeBtn = dialog.querySelector('.coop-info-box__close');
+        closeBtn.addEventListener('click', (e) => { e.preventDefault(); dialog.close() });
+
+      } catch (error) {
+        console.error('Failed to load coop page:', error);
+      }
+    });
+  });
+
+
+</script>
diff --git a/assets/css/app.css b/assets/css/app.css
index 95c809d..9aacbf4 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -487,3 +487,22 @@ footer {
   overflow: hidden;
   background: var(--cotech-black);
 }
+
+#coop-dialog {
+  max-width: 800px;
+  max-height: 90vh;
+  margin-left: auto;
+  margin-right: auto;
+  border: none;
+  border-radius: var(--space-sm);
+  padding: 0;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+#coop-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.coop-dialog-container {
+  overflow-y: auto;
+}