From ace14d0fb7ef97fd7c75b92f1cbb0be4b873ab34 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@gsa.gov>
Date: Thu, 7 Mar 2024 08:31:50 -0500
Subject: [PATCH] Use static embed markup for mobile preview

---
 _config.yml                                  |   3 +
 docs/_components/header.md                   |  19 +--
 docs/_embeds/header/mobile.md                | 116 +++++++++++++++++++
 docs/_includes/helpers/mobile-embed.html     |  22 +---
 docs/_plugins/generate_nav_for_components.rb |   8 +-
 docs/mobile-embed-frame.md                   |  38 ------
 6 files changed, 126 insertions(+), 80 deletions(-)
 create mode 100644 docs/_embeds/header/mobile.md
 delete mode 100644 docs/mobile-embed-frame.md

diff --git a/_config.yml b/_config.yml
index ade8f6f2..13b2fc16 100644
--- a/_config.yml
+++ b/_config.yml
@@ -11,6 +11,9 @@ collections:
   components:
     output: true
     permalink: /:name/
+  embeds:
+    output: true
+    permalink: /:collection/:path/
 
 defaults:
   - scope:
diff --git a/docs/_components/header.md b/docs/_components/header.md
index f1d04190..42c94a56 100644
--- a/docs/_components/header.md
+++ b/docs/_components/header.md
@@ -8,7 +8,7 @@ lead: >
 
 ## Default
 
-{% capture default_markup %}
+{% capture example %}
 <div class="usa-overlay"></div>
 <div class="usa-header usa-header--extended">
   <div class="usa-nav-container">
@@ -106,21 +106,8 @@ lead: >
   </div>
 </div>
 {% endcapture %}
-{% include helpers/code-example.html code=default_markup %}
+{% include helpers/code-example.html code=example %}
 
 ## Mobile
 
-{% capture mobile_markup %}
-<style>
-.usa-nav.is-visible {
-  animation: none !important;
-}
-</style>
-<script>
-window.addEventListener('preview-load', () => {
-  document.querySelector('.usa-menu-btn').click();
-});
-</script>
-{% endcapture %}
-{% assign mobile_markup = mobile_markup | prepend: default_markup %}
-{% include helpers/mobile-embed.html markup=mobile_markup %}
+{% include helpers/mobile-embed.html embed="header/mobile" %}
diff --git a/docs/_embeds/header/mobile.md b/docs/_embeds/header/mobile.md
new file mode 100644
index 00000000..0035053b
--- /dev/null
+++ b/docs/_embeds/header/mobile.md
@@ -0,0 +1,116 @@
+---
+title: Mobile Embed
+layout: base
+---
+
+<div class="usa-overlay"></div>
+<div class="usa-header usa-header--extended">
+  <div class="usa-nav-container">
+    <div class="usa-navbar">
+      <div class="usa-logo">
+        <a href="{{ site.baseurl }}">
+          <img
+            src="{{ site.baseurl }}/assets/img/login-gov-logo.svg"
+            class="usa-logo__img"
+            alt="Login.gov Homepage"
+            width="179"
+            height="24"
+          />
+        </a>
+      </div>
+
+      <button class="usa-menu-btn">Menu</button>
+    </div>
+
+    <nav class="usa-nav" aria-label="Primary links">
+      <div class="usa-nav__inner">
+        <button class="usa-nav__close" aria-label="Close">
+          <svg class="usa-icon usa-icon--size-3" aria-hidden="true" role="img">
+            <use xlink:href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
+          </svg>
+        </button>
+        <ul class="usa-nav__primary usa-accordion">
+          <li class="usa-nav__primary-item">
+            <a class="usa-nav__link" href="{{ site.baseurl }}">
+              Navigation Link
+            </a>
+          </li>
+          <li class="usa-nav__primary-item">
+            <a class="usa-nav__link usa-current" href="{{ site.baseurl }}">
+              Current Navigation Link
+            </a>
+          </li>
+          <li class="usa-nav__primary-item">
+            <button
+              type="button"
+              class="usa-accordion__button usa-nav__link"
+              aria-expanded="false"
+              aria-controls="nav-section"
+            >
+              <span>Section</span>
+            </button>
+            <ul id="nav-section" class="usa-nav__submenu" hidden>
+              <li class="usa-nav__submenu-item">
+                <a href="{{ site.baseurl }}">
+                  <span>Navigation Link</span>
+                </a>
+              </li>
+              <li class="usa-nav__submenu-item">
+                <a href="{{ site.baseurl }}">
+                  <span>Navigation Link</span>
+                </a>
+              </li>
+              <li class="usa-nav__submenu-item">
+                <a href="{{ site.baseurl }}">
+                  <span>Navigation Link</span>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="usa-nav__primary-item">
+            <button
+              type="button"
+              class="usa-accordion__button usa-nav__link usa-current"
+              aria-expanded="false"
+              aria-controls="current-nav-section"
+            >
+              <span>Current Section</span>
+            </button>
+            <ul id="current-nav-section" class="usa-nav__submenu" hidden>
+              <li class="usa-nav__submenu-item">
+                <a href="{{ site.baseurl }}">
+                  <span>Navigation Link</span>
+                </a>
+              </li>
+              <li class="usa-nav__submenu-item">
+                <a href="{{ site.baseurl }}">
+                  <span>Navigation Link</span>
+                </a>
+              </li>
+              <li class="usa-nav__submenu-item">
+                <a href="{{ site.baseurl }}">
+                  <span>Navigation Link</span>
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </div>
+</div>
+
+<style>
+.usa-nav.is-visible {
+  animation: none !important;
+}
+
+.usa-overlay {
+  transition: none !important;
+}
+</style>
+<script>
+window.addEventListener('load', () => {
+  document.querySelector('.usa-menu-btn').click();
+});
+</script>
diff --git a/docs/_includes/helpers/mobile-embed.html b/docs/_includes/helpers/mobile-embed.html
index acfa8bd0..2307f288 100644
--- a/docs/_includes/helpers/mobile-embed.html
+++ b/docs/_includes/helpers/mobile-embed.html
@@ -1,32 +1,12 @@
 <div class="mobile-embed">
-  <noscript>
-    {{ include.markup }}
-  </noscript>
   <iframe
     title="Mobile Preview"
-    src="{{ site.baseurl }}/mobile-embed-frame.html"
+    src="{{ site.baseurl }}/embeds/{{ include.embed }}"
     width="100%"
     height="100%"
     frameborder="0"
     class="border-y border-base-lightest"
   ></iframe>
-  <script>
-    (() => {
-      const wrapper = document.currentScript.closest('.mobile-embed');
-      const markup = wrapper.querySelector('noscript').innerHTML;
-      const iframe = wrapper.querySelector('iframe');
-
-      function sendMessage() {
-        iframe.contentWindow.postMessage(JSON.stringify({ markup }), window.location.origin);
-      }
-
-      if (iframe.readyState === 'complete') {
-        sendMessage();
-      } else {
-        iframe.addEventListener('load', sendMessage);
-      }
-    })();
-  </script>
 </div>
 <style>
 .mobile-embed {
diff --git a/docs/_plugins/generate_nav_for_components.rb b/docs/_plugins/generate_nav_for_components.rb
index 12f37ae4..76a9585a 100644
--- a/docs/_plugins/generate_nav_for_components.rb
+++ b/docs/_plugins/generate_nav_for_components.rb
@@ -1,9 +1,7 @@
 require 'json'
 
 Jekyll::Hooks.register :site, :post_read do |site|
-  site.collections.each do |name, collection|
-    site.data['nav'] = collection.docs.
-      filter { |doc| doc.basename != 'index.md'}.
-      map { |doc| { 'href' => doc.url } }
-  end
+  site.data['nav'] = site.collections['components'].docs.
+    filter { |doc| doc.basename != 'index.md'}.
+    map { |doc| { 'href' => doc.url } }
 end
diff --git a/docs/mobile-embed-frame.md b/docs/mobile-embed-frame.md
deleted file mode 100644
index 333d0cab..00000000
--- a/docs/mobile-embed-frame.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: Mobile Embed
-layout: base
-load_script: false
----
-
-<div id="preview"></div>
-<script>
-window.addEventListener('message', (event) => {
-  if (event.origin !== window.location.origin) {
-    return;
-  }
-
-  let markup;
-  try {
-    markup = JSON.parse(event.data).markup;
-  } catch {
-    return;
-  }
-
-  const preview = document.getElementById('preview');
-  preview.innerHTML = markup;
-  preview.querySelectorAll('script').forEach((script) => {
-    const replacement = document.createElement('script');
-    replacement.innerHTML = script.innerHTML;
-    script.parentNode.replaceChild(replacement, script);
-  });
-
-  const { scriptSrc } = document.querySelector('[data-script-src]').dataset;
-  const script = document.createElement('script');
-  script.src = scriptSrc;
-  document.body.appendChild(script);
-
-  script.addEventListener('load', () => {
-    window.dispatchEvent(new CustomEvent('preview-load'));
-  });
-});
-</script>