Use static embed markup for mobile preview

_config.yml

@@ -11,6 +11,9 @@ collections:
   components:
     output: true
     permalink: /:name/
+  embeds:
+    output: true
+    permalink: /:collection/:path/
 
 defaults:
   - scope:

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" %}

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>

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 {

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