Style extensions page

bzeero · Feb 24, 2024 · 352d9bf · 352d9bf
1 parent 1330ccb
commit 352d9bf
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 56 deletions.
diff --git a/docs/extensions/index.html b/docs/extensions/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>htmz / Extensions</title>
+    <title>htmz/extensions</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../style.css" />
-    <link rel="icon" href="../favicon.png" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍱</text></svg>">
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
@@ -15,11 +15,11 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
-        align-items: center;
+        align-items: end;
       }
       h1 {
         margin: 0;
-        font-size: 1.6rem;
+        font-size: 1.3rem;
       }
       h2 {
         padding: 0;
@@ -32,13 +32,15 @@
       .extensions-explorer {
         display: flex;
         gap: 1rem;
+        margin: 2rem 0;
       }
 
       .extension-list {
-        flex: 1 1 20%;
-        list-style: none;
+        flex: 0 0 20%;
+        min-width: 10ch;
         margin: 0;
         padding: 0;
+        list-style: none;
         overflow: hidden;
       }
 
@@ -145,11 +147,18 @@
   </head>
   <body>
     <div class="header-row">
-      <h1>htmz / Extensions 🍱</h1>
+      <h1>
+        <span class="title-decor" aria-hidden>=</span>htmz<span
+          class="title-decor"
+          aria-hidden
+          >></span
+        ><br>
+        &ensp;<span class="title-decor">&lt;</span>extensions<span class="title-decor">></span> 🍱
+      </h1>
       <a href="..">back to main page</a>
     </div>
 
-    <section class="extensions-explorer">
+    <main class="extensions-explorer">
       <ul class="extension-list panel">
         <li class="extension-item">
           <a href="multitarget/" target="extension-demo-frame">multitarget</a>
@@ -193,7 +202,7 @@ <h2 class="demo-header">Code</h2>
           or copy the snippet above.
         </div> -->
       </div>
-    </section>
+    </main>
 
     <!-- <aside id="basket" class="panel">
       <label id="toggle-basket" class="panel">

diff --git a/docs/extensions/unwrap-template/index.html b/docs/extensions/unwrap-template/index.html
@@ -7,10 +7,10 @@
         // ----------------------------------------------------------------------
         // This extension unwraps standalone top-level <template> tags
         frame.contentDocument
-          .querySelectorAll("head > template") // solo template tags default to head
-          .forEach((template) => {
-            frame.contentDocument.body.append(template.content);
-          });
+          .querySelectorAll("head>template") // solo root template tags default to head
+          .forEach((template) =>
+            frame.contentDocument.body.append(template.content)
+          );
         // --------------------------------->8-----------------------------------
 
         document
@@ -31,7 +31,7 @@ <h2>unwrap-template</h2>
     sending tr on its own is illegal.
   </p>
   <p>
-    The native way to hold HTML fragments is the
+    The native solution to represent HTML fragments is the
     <a
       href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template"
       target="_blank"
@@ -41,8 +41,8 @@ <h2>unwrap-template</h2>
     legally inside a template tag.
   </p>
   <p>
-    This extension facilitates the above approach by unwrapping top-level
-    template elements in the response.
+    This extension facilitates the above approach by unwrapping a top-level
+    template element in the response.
   </p>
 </div>
 

diff --git a/docs/hero.js → docs/footer.js b/docs/hero.js → docs/footer.js
@@ -1,4 +1,4 @@
-// Hero animation generates fake URLs and fake containers
+// Footer animation generates fake URLs and fake containers
 
 // prettier-ignore
 const resources =
@@ -11,17 +11,17 @@ const listUINames = "list,grid,table".split(",");
 const singleUINames =
   ",container,row,item,box,overlay,preview,form,tooltip,toast,chip,tooltip,tabview,dropdown,card,modal,pane,panel,tabpanel,dataview,view".split(",");
 
-const hero = document.querySelector(".hero");
-const heroSupports = hero.querySelectorAll("& > .support");
+const footer = document.querySelector(".footer");
+const footerSupports = footer.querySelectorAll("& > .support");
 
 const animate = async () => {
-  heroSupports[0].textContent = "";
-  heroSupports[0].classList.remove("entering");
-  heroSupports[0].classList.add("exiting");
-  hero.classList.add("idle");
-  heroSupports[1].textContent = "";
-  heroSupports[1].classList.remove("entering");
-  heroSupports[1].classList.add("exiting");
+  footerSupports[0].textContent = "";
+  footerSupports[0].classList.remove("entering");
+  footerSupports[0].classList.add("exiting");
+  footer.classList.add("idle");
+  footerSupports[1].textContent = "";
+  footerSupports[1].classList.remove("entering");
+  footerSupports[1].classList.add("exiting");
   await wait(200);
 
   const plural = Math.random() < 0.5;
@@ -59,15 +59,15 @@ const animate = async () => {
   const resourceText = `${method} /${resourcePath}${pathExt}${pathSuffix}`;
   const containerText = `#${resource}${uiName && separator}${formattedUIName}`;
 
-  heroSupports[0].textContent = resourceText;
-  heroSupports[0].classList.add("entering");
-  heroSupports[0].classList.remove("exiting");
+  footerSupports[0].textContent = resourceText;
+  footerSupports[0].classList.add("entering");
+  footerSupports[0].classList.remove("exiting");
   await wait(400);
-  hero.classList.remove("idle");
+  footer.classList.remove("idle");
   await wait(100);
-  heroSupports[1].textContent = containerText;
-  heroSupports[1].classList.add("entering");
-  heroSupports[1].classList.remove("exiting");
+  footerSupports[1].textContent = containerText;
+  footerSupports[1].classList.add("entering");
+  footerSupports[1].classList.remove("exiting");
   await wait(1600);
   animate();
 };

diff --git a/docs/index.html b/docs/index.html
@@ -10,8 +10,8 @@
   </head>
   <body>
     <h1 class="title">
-      <span class="decor title-arrow" aria-hidden>=></span>htmz<span
-        class="decor title-arrowhead"
+      <span class="title-decor title-arrow" aria-hidden>=></span>htmz<span
+        class="title-decor title-arrowhead"
         aria-hidden
         >></span
       >
@@ -108,6 +108,10 @@ <h2>Demos</h2>
       <div id="demos-tab-panel" class="panel" role="tabpanel">
         <div class="demos-empty">🐙 Select an example above!</div>
       </div>
+      <p>
+        See also:
+        <a href="extensions/" target="_self">Extensions 🍱</a>
+      </p>
     </section>
 
     <section>
@@ -408,7 +412,7 @@ <h2>Extensibility</h2>
 --></code></pre>
       <p>
         <strong>
-          Pre-written extensions are available in the
+          Pre-written extensions are now available in the
           <a href="extensions/" target="_self">Extensions 🍱 page</a>.
         </strong>
       </p>
@@ -526,15 +530,15 @@ <h3>What are the limitations?</h3>
       </section>
     </section>
 
-    <div class="hero">
+    <div class="footer">
       <span class="support" aria-hidden="true"></span>
-      <h1><span class="decor">=</span>htmz<span class="decor">></span></h1>
+      <h1><span class="title-decor">=</span>htmz<span class="title-decor">></span></h1>
       <span class="support" aria-hidden="true"></span>
     </div>
 
     <!-- prettier-ignore -->
     <iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>
 
-    <script defer src="hero.js"></script>
+    <script defer src="footer.js"></script>
   </body>
 </html>
diff --git a/docs/style.css b/docs/style.css
@@ -15,7 +15,7 @@ body {
   box-sizing: border-box;
 }
 
-.hero,
+.footer,
 h1,
 h2,
 h3 {
@@ -74,18 +74,20 @@ section:has(:target):not(:has(section :target)) {
   }
 }
 
+.title-decor {
+  font-variant-ligatures: none;
+  opacity: 0.6;
+  color: #0bd;
+}
 
 .title {
   text-align: center;
   margin-bottom: 0;
 }
-.title .decor {
+.title .title-decor {
   display: inline-block;
   width: 2ch;
-  font-variant-ligatures: none;
   text-align: start;
-  opacity: 0.6;
-  color: #0bd;
 }
 .title-arrow {
   transform: translateX(50%);
@@ -121,7 +123,7 @@ section:has(:target):not(:has(section :target)) {
     -1px 0 0 currentColor, 1px 0 0 currentColor;
 }
 
-.hero {
+.footer {
   font-size: 2rem;
   display: grid;
   grid-template-columns: minmax(0, 1fr) min-content minmax(0, 1fr);
@@ -130,39 +132,36 @@ section:has(:target):not(:has(section :target)) {
   white-space: nowrap;
   overflow: hidden;
 }
-.hero > .support {
+.footer > .support {
   display: flex;
   justify-content: end;
   opacity: 0.3;
   font-size: 55%;
   visibility: hidden;
 }
-.hero > .support ~ .support {
+.footer > .support ~ .support {
   justify-content: start;
 }
-.hero > h1 {
+.footer > h1 {
   margin: 0;
   display: inline-block;
 }
-.hero .decor {
-  font-variant-ligatures: none;
-  opacity: 0.6;
-  color: #0bd;
+.footer .title-decor {
   transition: opacity 0.2s, color 0.2s;
 }
 @media (min-width: 60rem) {
-  .hero > .support {
+  .footer > .support {
     visibility: visible;
   }
-  .hero.idle .decor {
+  .footer.idle .title-decor {
     opacity: 0.3;
     color: inherit;
   }
 }
-.hero .support.entering {
+.footer .support.entering {
   animation: heroSupportEntering 0.3s both ease-out;
 }
-.hero .support.exiting {
+.footer .support.exiting {
   animation: heroSupportExiting 0.3s both ease-in;
 }
 @keyframes heroSupportEntering {