From 1ae018bedd38c0394edb6c1172e4a632f47bc9cf Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 23 Jun 2023 12:03:51 -0400
Subject: [PATCH] fix broken source buttons in docs (#1401)

---
 docs/assets/scripts/code-previews.js | 46 ++++++++++++++--------------
 docs/pages/resources/changelog.md    |  4 +++
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/docs/assets/scripts/code-previews.js b/docs/assets/scripts/code-previews.js
index ff1e76cd..135580c6 100644
--- a/docs/assets/scripts/code-previews.js
+++ b/docs/assets/scripts/code-previews.js
@@ -1,4 +1,4 @@
-function run() {
+(() => {
   function convertModuleLinks(html) {
     html = html
       .replace(/@shoelace-style\/shoelace/g, `https://cdn.skypack.dev/@shoelace-style/shoelace@${shoelaceVersion}`)
@@ -48,6 +48,22 @@ function run() {
     document.documentElement.classList.toggle('flavor-react', flavor === 'react');
   }
 
+  function syncFlavor() {
+    setFlavor(getFlavor());
+
+    document.querySelectorAll('.code-preview__button--html').forEach(preview => {
+      if (flavor === 'html') {
+        preview.classList.add('code-preview__button--selected');
+      }
+    });
+
+    document.querySelectorAll('.code-preview__button--react').forEach(preview => {
+      if (flavor === 'react') {
+        preview.classList.add('code-preview__button--selected');
+      }
+    });
+  }
+
   const shoelaceVersion = document.documentElement.getAttribute('data-shoelace-version');
   const reactVersion = '18.2.0';
   const cdndir = 'cdn';
@@ -61,19 +77,7 @@ function run() {
   }
 
   // Sync flavor UI on page load
-  setFlavor(getFlavor());
-
-  document.querySelectorAll('.code-preview__button--html').forEach(preview => {
-    if (flavor === 'html') {
-      preview.classList.add('code-preview__button--selected');
-    }
-  });
-
-  document.querySelectorAll('.code-preview__button--react').forEach(preview => {
-    if (flavor === 'react') {
-      preview.classList.add('code-preview__button--selected');
-    }
-  });
+  syncFlavor();
 
   //
   // Resizing previews
@@ -147,12 +151,8 @@ function run() {
   });
 
   function toggleSource(codeBlock, force) {
-    const toggle = codeBlock.querySelector('.code-preview__toggle');
-
-    if (toggle) {
-      codeBlock.classList.toggle('code-preview--expanded', force === undefined ? undefined : force);
-      event.target.setAttribute('aria-expanded', codeBlock.classList.contains('code-preview--expanded'));
-    }
+    codeBlock.classList.toggle('code-preview--expanded', force);
+    event.target.setAttribute('aria-expanded', codeBlock.classList.contains('code-preview--expanded'));
   }
 
   //
@@ -243,7 +243,7 @@ function run() {
       form.remove();
     }
   });
-}
 
-run();
-document.addEventListener('turbo:load', run);
+  // Set the initial flavor
+  window.addEventListener('turbo:load', syncFlavor);
+})();
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 5aefa1de..3a549569 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -12,6 +12,10 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
+## Next
+
+- Fixed broken source buttons in the docs [#1401]
+
 ## 2.5.1
 
 - Fixed missing extensions from imports that broke with TypeScript 5 [#1391]