From 68f693cbc0c0986ae87ef09be45cc141ee7cbc0f Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Tue, 10 Dec 2024 18:49:56 -0500
Subject: [PATCH 1/4] fix turbo caching stuff

---
 docs/_includes/base.njk                |  1 +
 docs/_includes/page-demo.njk           |  4 +-
 docs/assets/examples/page-demo/demo.js | 89 +++++++++++++-------------
 3 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index 733b36dfa..f988a0cc3 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -6,6 +6,7 @@
     <meta name="description" content="{{ description }}">
     <meta name="theme-color" content="#f36944">
     {% if noindex %}<meta name="robots" content="noindex">{% endif %}
+    <meta name="turbo-cache-control" content="no-preview">
 
     <title>{{ title }}</title>
 
diff --git a/docs/_includes/page-demo.njk b/docs/_includes/page-demo.njk
index db32f58b5..f9ea52ae1 100644
--- a/docs/_includes/page-demo.njk
+++ b/docs/_includes/page-demo.njk
@@ -16,7 +16,7 @@
   </div>
 </fieldset>
 <wa-viewport-demo viewport="1000">
-<iframe srcdoc="" id="page_slots_iframe" data-turbo="false" data-turbo-temporary></iframe>
+<iframe srcdoc="" id="page_slots_iframe"></iframe>
 </wa-viewport-demo>
 </div>
-<script type=module src="/assets/examples/page-demo/demo.js"></script>
+<script type="module" src="/assets/examples/page-demo/demo.js"></script>
diff --git a/docs/assets/examples/page-demo/demo.js b/docs/assets/examples/page-demo/demo.js
index 3e9801f44..80018d353 100644
--- a/docs/assets/examples/page-demo/demo.js
+++ b/docs/assets/examples/page-demo/demo.js
@@ -1,50 +1,53 @@
-await customElements.whenDefined('wa-checkbox');
-let container = document.getElementById('page_slots_demo');
-let fieldset = container.querySelector('fieldset');
-let iframe = container.querySelector('iframe');
-let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][href^='/dist/']"))
-  .map(i => i.outerHTML)
-  .join('\n');
-let includes = `${stylesheets}
-  <script src="/dist/webawesome.loader.js" type="module"></script>
-  <link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
+async function run () {
+  await customElements.whenDefined('wa-checkbox');
+  let container = document.getElementById('page_slots_demo');
 
-function render() {
-  let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:is([data-wa-checked])'));
-  let slotsHTML = slots
-    .map(slot => {
-      let name = slot.getAttribute('value');
-      let description = slot.getAttribute('data-description');
+  if (!container) { return }
 
-      let tag = 'div';
-      if (name.endsWith('header')) {
-        tag = 'header';
-      }
-      if (name.endsWith('footer')) {
-        tag = 'footer';
-      }
-
-      return `<${tag} class="slot-content" slot="${name}">
-		<strong>${name || 'main <em>(default)</em>'}</strong>
-		<p>${description}</p>
-	</${tag}>`;
-    })
+  let fieldset = container.querySelector('fieldset');
+  let iframe = container.querySelector('iframe');
+  let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][href^='/dist/']"))
+    .map(i => i.outerHTML)
     .join('\n');
-  let page = iframe.contentDocument?.querySelector('wa-page');
+  let includes = `${stylesheets}
+    <script src="/dist/webawesome.loader.js" type="module"></script>
+    <link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
 
-  if (page) {
-    page.innerHTML = slotsHTML;
-  } else {
-    iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
+  function render() {
+    let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:is([data-wa-checked])'));
+    let slotsHTML = slots
+      .map(slot => {
+        let name = slot.getAttribute('value');
+        let description = slot.getAttribute('data-description');
+
+        let tag = 'div';
+        if (name.endsWith('header')) {
+          tag = 'header';
+        }
+        if (name.endsWith('footer')) {
+          tag = 'footer';
+        }
+
+        return `<${tag} class="slot-content" slot="${name}">
+		  <strong>${name || 'main <em>(default)</em>'}</strong>
+		  <p>${description}</p>
+	  </${tag}>`;
+      })
+      .join('\n');
+    let page = iframe.contentDocument?.querySelector('wa-page');
+
+    if (page) {
+      page.innerHTML = slotsHTML;
+    } else {
+      iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
+    }
   }
+  fieldset?.addEventListener('input', render);
+  render();
 }
-fieldset?.addEventListener('input', render);
-render();
 
-//
-// TODO - fix Turbo caching. When this is removed, visiting the <wa-page> docs via Turbo will cause the <iframe srcdoc>
-// to not render. Even with this, there are console errors when leaving the page.
-//
-// NOTE - the iframe already has `data-turbo="false"` and `data-turbo-temporary` on it.
-//
-document.body.setAttribute('data-turbo', 'false');
+;(async () => {
+  await run()
+  document.addEventListener("turbo:load", run)
+})()
+

From f22e598ad6281b6c1dc9dac5d41b8c158c291d10 Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Tue, 10 Dec 2024 18:52:12 -0500
Subject: [PATCH 2/4] prettier

---
 docs/assets/examples/page-demo/demo.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/docs/assets/examples/page-demo/demo.js b/docs/assets/examples/page-demo/demo.js
index 80018d353..3f5588e63 100644
--- a/docs/assets/examples/page-demo/demo.js
+++ b/docs/assets/examples/page-demo/demo.js
@@ -1,8 +1,10 @@
-async function run () {
+async function run() {
   await customElements.whenDefined('wa-checkbox');
   let container = document.getElementById('page_slots_demo');
 
-  if (!container) { return }
+  if (!container) {
+    return;
+  }
 
   let fieldset = container.querySelector('fieldset');
   let iframe = container.querySelector('iframe');
@@ -46,8 +48,7 @@ async function run () {
   render();
 }
 
-;(async () => {
-  await run()
-  document.addEventListener("turbo:load", run)
-})()
-
+(async () => {
+  await run();
+  document.addEventListener('turbo:load', run);
+})();

From 19340adcfb0515f0f224c14c981913f61e05b6a4 Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Tue, 10 Dec 2024 19:07:45 -0500
Subject: [PATCH 3/4] fix turbo

---
 docs/_includes/page-demo.njk           |  6 +-
 docs/assets/examples/page-demo/demo.js | 85 +++++++++++---------------
 2 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/docs/_includes/page-demo.njk b/docs/_includes/page-demo.njk
index f9ea52ae1..5e40c2b26 100644
--- a/docs/_includes/page-demo.njk
+++ b/docs/_includes/page-demo.njk
@@ -19,4 +19,8 @@
 <iframe srcdoc="" id="page_slots_iframe"></iframe>
 </wa-viewport-demo>
 </div>
-<script type="module" src="/assets/examples/page-demo/demo.js"></script>
+
+<script type="module">
+  const cacheBust = new Date().toString()
+  import(`/assets/examples/page-demo/demo.js?${cacheBust}`)
+</script>
diff --git a/docs/assets/examples/page-demo/demo.js b/docs/assets/examples/page-demo/demo.js
index 3f5588e63..2da84b29a 100644
--- a/docs/assets/examples/page-demo/demo.js
+++ b/docs/assets/examples/page-demo/demo.js
@@ -1,54 +1,43 @@
-async function run() {
-  await customElements.whenDefined('wa-checkbox');
-  let container = document.getElementById('page_slots_demo');
+await customElements.whenDefined('wa-checkbox');
+let container = document.getElementById('page_slots_demo');
 
-  if (!container) {
-    return;
-  }
+let fieldset = container.querySelector('fieldset');
+let iframe = container.querySelector('iframe');
+let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][href^='/dist/']"))
+  .map(i => i.outerHTML)
+  .join('\n');
+let includes = `${stylesheets}
+  <script src="/dist/webawesome.loader.js" type="module"></script>
+  <link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
 
-  let fieldset = container.querySelector('fieldset');
-  let iframe = container.querySelector('iframe');
-  let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][href^='/dist/']"))
-    .map(i => i.outerHTML)
+function render() {
+  let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:is([data-wa-checked])'));
+  let slotsHTML = slots
+    .map(slot => {
+      let name = slot.getAttribute('value');
+      let description = slot.getAttribute('data-description');
+
+      let tag = 'div';
+      if (name.endsWith('header')) {
+        tag = 'header';
+      }
+      if (name.endsWith('footer')) {
+        tag = 'footer';
+      }
+
+      return `<${tag} class="slot-content" slot="${name}">
+		<strong>${name || 'main <em>(default)</em>'}</strong>
+		<p>${description}</p>
+	</${tag}>`;
+    })
     .join('\n');
-  let includes = `${stylesheets}
-    <script src="/dist/webawesome.loader.js" type="module"></script>
-    <link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
+  let page = iframe.contentDocument?.querySelector('wa-page');
 
-  function render() {
-    let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:is([data-wa-checked])'));
-    let slotsHTML = slots
-      .map(slot => {
-        let name = slot.getAttribute('value');
-        let description = slot.getAttribute('data-description');
-
-        let tag = 'div';
-        if (name.endsWith('header')) {
-          tag = 'header';
-        }
-        if (name.endsWith('footer')) {
-          tag = 'footer';
-        }
-
-        return `<${tag} class="slot-content" slot="${name}">
-		  <strong>${name || 'main <em>(default)</em>'}</strong>
-		  <p>${description}</p>
-	  </${tag}>`;
-      })
-      .join('\n');
-    let page = iframe.contentDocument?.querySelector('wa-page');
-
-    if (page) {
-      page.innerHTML = slotsHTML;
-    } else {
-      iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
-    }
+  if (page) {
+    page.innerHTML = slotsHTML;
+  } else {
+    iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
   }
-  fieldset?.addEventListener('input', render);
-  render();
 }
-
-(async () => {
-  await run();
-  document.addEventListener('turbo:load', run);
-})();
+fieldset?.addEventListener('input', render);
+render();

From f27c982962a47fee7431210c129263ecd5a38f0f Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Tue, 10 Dec 2024 22:47:26 -0500
Subject: [PATCH 4/4] keep previews

---
 docs/_includes/base.njk | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index f988a0cc3..733b36dfa 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -6,7 +6,6 @@
     <meta name="description" content="{{ description }}">
     <meta name="theme-color" content="#f36944">
     {% if noindex %}<meta name="robots" content="noindex">{% endif %}
-    <meta name="turbo-cache-control" content="no-preview">
 
     <title>{{ title }}</title>