Page demo draft

docs/_includes/page-demo.njk

@@ -0,0 +1,22 @@
+<div id="page_slots_demo">
+<link rel="stylesheet" href="/assets/examples/page-demo/demo.css">
+{% set slots = components.page.slots %}
+
+<fieldset id="page_slots_fieldset">
+  <legend>Slots</legend>
+  <div class="options">
+  {% for slot in slots %}
+	{% if slot.name != "skip-to-content" %}
+  <wa-checkbox name="slot" value="{{ slot.name }}" {{ 'checked' if slot.name != "menu" | safe}} class="{{ 'default' if not slot.name }}"
+  data-description="{{ slot.description | inlineMarkdown }}" title="{{ slot.description | inlineMarkdown | striptags | safe }}">
+    {{ slot.name or "(default)" }}
+  </wa-checkbox>
+	{% endif %}
+  {% endfor %}
+  </div>
+</fieldset>
+<wa-viewport-demo viewport="1000">
+<iframe srcdoc="" id="page_slots_iframe"></iframe>
+</wa-viewport-demo>
+</div>
+<script type=module src="/assets/examples/page-demo/demo.js"></script>

docs/assets/examples/page-demo/demo.css

@@ -0,0 +1,23 @@
+#page_slots_demo {
+  display: flex;
+  flex-flow: column;
+  gap: 1em;
+  margin-bottom: var(--wa-space-xl);
+
+  fieldset .options {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
+    gap: 0.2em 1em;
+
+    wa-checkbox {
+      white-space: nowrap;
+    }
+
+    p {
+      display: contents;
+    }
+  }
+
+  wa-viewport-demo {
+  }
+}

docs/assets/examples/page-demo/demo.js

@@ -0,0 +1,42 @@
+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">`;
+
+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();

docs/assets/examples/page-demo/page.css

@@ -0,0 +1,62 @@
+body {
+  padding: 0;
+  margin: 0;
+}
+
+wa-page {
+  margin: var(--wa-space-xs);
+  &::part(base),
+  &::part(main),
+  &::part(navigation),
+  &::part(body) {
+    gap: var(--wa-space-xs);
+  }
+}
+
+.slot-content[slot='banner'],
+.slot-content[slot='header'],
+.slot-content[slot='subheader'],
+.slot-content[slot='footer'] {
+  xmargin-inline: var(--wa-space-m);
+}
+
+.slot-content {
+  padding: var(--wa-space-m);
+  border-radius: var(--wa-border-radius-m);
+  align-content: center;
+  justify-content: center;
+  text-align: center;
+  height: 100%;
+  box-sizing: border-box;
+  background: var(--wa-color-blue-80);
+  color: var(--wa-color-blue-20);
+
+  &[slot='banner'] {
+    background: var(--wa-color-blue-50);
+    color: white;
+  }
+
+  &[slot='header'] {
+    background: var(--wa-color-blue-60);
+    color: var(--wa-color-blue-10);
+  }
+
+  &[slot^='main'],
+  &[slot=''] {
+    background: var(--wa-color-gray-80);
+    color: var(--wa-color-gray-20);
+  }
+
+  &[slot^='navigation'] {
+    background: var(--wa-color-violet-80);
+    color: var(--wa-color-violet-20);
+  }
+
+  strong {
+    display: block;
+  }
+
+  &:not([slot='']) p {
+    display: none;
+  }
+}

docs/docs/components/page.md

@@ -31,7 +31,9 @@ This image depicts a page's anatomy, including the default positions of each sec
 
 Most slots are optional. Slots that have no content will not be shown, allowing you to opt-in to just the sections you actually need.
 
-![Screenshot of Layout Anatomy showing various slots](/assets/images/layout-anatomy.svg)
+{% include "page-demo.njk" %}
+
+<!-- ![Screenshot of Layout Anatomy showing various slots](/assets/images/layout-anatomy.svg) -->
 
 :::info
 If you're not familiar with how slots work in HTML, you might want to [learn more about slots](/docs/usage/#slots) before using this component.
@@ -125,7 +127,7 @@ wa-page[view='desktop'] [data-toggle-nav] {
 
 ### Widths and Heights
 
-There are a number of [CSS custom properties](#css-custom-properties) you can use to set specific widths and heights for many slots on your page. 
+There are a number of [CSS custom properties](#css-custom-properties) you can use to set specific widths and heights for many slots on your page.
 
 If you specify `--menu-width` to apply a specific width to your `navigation` slot, space will still be reserved on the page even below the `mobile-breakpoint`. To collapse this space on smaller screens, add the following code to your styles:
 ```css
@@ -793,4 +795,4 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
     padding: 1.5rem;
   }
 </style>
-```
+```