fix: show collapsed code previews on landing

Author: aleksnick

app.js

@@ -26,6 +26,24 @@ function setupCopyButtons() {
   }
 }
 
+function setupExpandableCodeExamples() {
+  const buttons = document.querySelectorAll("[data-expandable-code] .code-example-summary");
+
+  for (const button of buttons) {
+    button.addEventListener("click", () => {
+      const container = button.closest("[data-expandable-code]");
+
+      if (!container) {
+        return;
+      }
+
+      const isOpen = container.classList.toggle("is-open");
+      button.setAttribute("aria-expanded", isOpen ? "true" : "false");
+    });
+  }
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   setupCopyButtons();
+  setupExpandableCodeExamples();
 });

index.html

@@ -543,12 +543,12 @@ <h3>Add the site map file</h3>
               </div>
             </article>
 
-            <details class="code-example">
-              <summary class="code-example-summary">
+            <article class="code-example" data-expandable-code>
+              <button class="code-example-summary" type="button" aria-expanded="false">
                 <span class="code-example-label">File</span>
                 <code>.github/preview-sites.json</code>
                 <span class="code-example-hint">Click to expand</span>
-              </summary>
+              </button>
               <div class="code-block">
                 <button class="copy-button" type="button" data-copy-target="github-preview-sites">
                   Copy
@@ -574,7 +574,7 @@ <h3>Add the site map file</h3>
   ]
 }</code></pre>
               </div>
-            </details>
+            </article>
 
             <article class="timeline-step">
               <div class="timeline-index">2</div>
@@ -588,12 +588,12 @@ <h3>Add the preview workflow</h3>
               </div>
             </article>
 
-            <details class="code-example">
-              <summary class="code-example-summary">
+            <article class="code-example" data-expandable-code>
+              <button class="code-example-summary" type="button" aria-expanded="false">
                 <span class="code-example-label">File</span>
                 <code>.github/workflows/preview.yml</code>
                 <span class="code-example-hint">Click to expand</span>
-              </summary>
+              </button>
               <div class="code-block">
                 <button class="copy-button" type="button" data-copy-target="github-preview-workflow">
                   Copy
@@ -686,7 +686,7 @@ <h3>Add the preview workflow</h3>
           preview-base-domain: ${{ secrets.PREVIEW_BASE_DOMAIN }}
           metadata-dir: preview-metadata</code></pre>
               </div>
-            </details>
+            </article>
 
             <article class="timeline-step">
               <div class="timeline-index">3</div>
@@ -700,12 +700,12 @@ <h3>Feed the preview URL into e2e</h3>
               </div>
             </article>
 
-            <details class="code-example">
-              <summary class="code-example-summary">
+            <article class="code-example" data-expandable-code>
+              <button class="code-example-summary" type="button" aria-expanded="false">
                 <span class="code-example-label">Append to</span>
                 <code>.github/workflows/preview.yml</code>
                 <span class="code-example-hint">Click to expand</span>
-              </summary>
+              </button>
               <div class="code-block">
                 <button class="copy-button" type="button" data-copy-target="github-preview-e2e">
                   Copy
@@ -733,7 +733,7 @@ <h3>Feed the preview URL into e2e</h3>
           PLAYWRIGHT_BASE_URL: ${{ steps.preview.outputs.link }}
         run: yarn playwright test</code></pre>
               </div>
-            </details>
+            </article>
 
             <article class="timeline-step">
               <div class="timeline-index">4</div>
@@ -748,12 +748,12 @@ <h3>Use plain CLI + rsync instead of actions</h3>
               </div>
             </article>
 
-            <details class="code-example">
-              <summary class="code-example-summary">
+            <article class="code-example" data-expandable-code>
+              <button class="code-example-summary" type="button" aria-expanded="false">
                 <span class="code-example-label">Shell snippet</span>
                 <code>rsync preview upload</code>
                 <span class="code-example-hint">Click to expand</span>
-              </summary>
+              </button>
               <div class="code-block">
                 <button class="copy-button" type="button" data-copy-target="github-preview-rsync">
                   Copy
@@ -774,7 +774,7 @@ <h3>Use plain CLI + rsync instead of actions</h3>
 
 echo "Preview URL: https://${DEPLOY_NAME}.${SITE}.${PREVIEW_BASE_DOMAIN}"</code></pre>
               </div>
-            </details>
+            </article>
           </div>
         </section>
       </main>

styles.css

@@ -498,13 +498,14 @@ img {
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
+  width: 100%;
+  border: 0;
+  background: transparent;
   padding: 1rem 1.2rem 0;
   cursor: pointer;
   list-style: none;
-}
-
-.code-example-summary::-webkit-details-marker {
-  display: none;
+  color: inherit;
+  text-align: left;
 }
 
 .code-example-label,
@@ -530,11 +531,11 @@ img {
   backdrop-filter: none;
 }
 
-.code-example:not([open]) .code-block {
+.code-example:not(.is-open) .code-block {
   max-height: 15rem;
 }
 
-.code-example:not([open]) .code-block::after {
+.code-example:not(.is-open) .code-block::after {
   content: "";
   position: absolute;
   inset: auto 0 0;
@@ -549,19 +550,19 @@ img {
   pointer-events: none;
 }
 
-.code-example[open] .code-example-hint::before {
+.code-example.is-open .code-example-hint::before {
   content: "Expanded";
 }
 
-.code-example[open] .code-example-hint {
+.code-example.is-open .code-example-hint {
   font-size: 0;
 }
 
-.code-example:not([open]) .code-example-hint::before {
+.code-example:not(.is-open) .code-example-hint::before {
   content: "Click to expand";
 }
 
-.code-example:not([open]) .code-example-hint {
+.code-example:not(.is-open) .code-example-hint {
   font-size: 0;
 }