Only use templates for <main>

Header and dialog are the same on every page so keep loaded without JS

diff --git a/index.html b/index.html
index 7e8601ea011268dca57a668fe9498dda23dca7c7..58211d90428d9cb5663ede883c42c36ea4ce3bfc 100644 (file)
--- a/index.html
+++ b/index.html
@@ -30,35 +30,35 @@
     View this site's source code on <a href="https://github.com/ardislu/ardislu.dev">GitHub</a>.
   </noscript>
 
-  <template id="header">
-    <header>
-      <a href="/">
-        <svg role="img" aria-labelledby="logo" width="24" height="24" viewBox="0 0 24 24" fill="#005ce6">
-          <title id="logo">ardislu.dev logo</title>
-          <path d="m15.79 0 8.2 6.83-5.47 4.55-8.2-6.83z" />
-          <path d="m5.48 8.59 8.2 6.83-5.47 4.55-8.2-6.83z" />
-          <path d="m18.535 13.25 3.854-3.129 1.285 1.043-5.139 4.172z" />
-          <path d="m0.96453 17.951 1.1832-0.981 5.9161 4.904 5.9162-4.904v1.962l-5.9162 4.904z" />
+  <header>
+    <a href="/">
+      <svg role="img" aria-labelledby="logo" width="24" height="24" viewBox="0 0 24 24" fill="#005ce6">
+        <title id="logo">ardislu.dev logo</title>
+        <path d="m15.79 0 8.2 6.83-5.47 4.55-8.2-6.83z" />
+        <path d="m5.48 8.59 8.2 6.83-5.47 4.55-8.2-6.83z" />
+        <path d="m18.535 13.25 3.854-3.129 1.285 1.043-5.139 4.172z" />
+        <path d="m0.96453 17.951 1.1832-0.981 5.9161 4.904 5.9162-4.904v1.962l-5.9162 4.904z" />
+      </svg>
+    </a>
+    <h1>ardislu.dev</h1>
+    <nav>
+      <a id="edit" href="/">
+        <svg role="img" aria-labelledby="pencil" width="24" height="24" viewBox="0 0 24 24">
+          <title id="pencil">Edit this page</title>
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" />
         </svg>
       </a>
-      <h1>ardislu.dev</h1>
-      <nav>
-        <a id="edit" href="/">
-          <svg role="img" aria-labelledby="pencil" width="24" height="24" viewBox="0 0 24 24">
-            <title id="pencil">Edit this page</title>
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" />
-          </svg>
-        </a>
-        <a href="https://github.com/ardislu/ardislu.dev">
-          <svg role="img" aria-labelledby="github" width="24" height="24" viewBox="0 0 24 24">
-            <title id="github">GitHub repository</title>
-            <path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z" />
-          </svg>
-        </a>
-      </nav>
-    </header>
-  </template>
+      <a href="https://github.com/ardislu/ardislu.dev">
+        <svg role="img" aria-labelledby="github" width="24" height="24" viewBox="0 0 24 24">
+          <title id="github">GitHub repository</title>
+          <path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z" />
+        </svg>
+      </a>
+    </nav>
+  </header>
+
+  <main></main>
 
   <template id="home-loader">
     <main class="card-container"></main>
@@ -76,12 +76,10 @@
     <main></main>
   </template>
 
-  <template id="toast">
-    <dialog open>
-      <p>A newer version of this page is available.</p>
-      <button>Refresh</button>
-    </dialog>
-  </template>
+  <dialog>
+    <p>A newer version of this page is available.</p>
+    <button>Refresh</button>
+  </dialog>
 
   <script type="module" src="/script.js"></script>
 </body>

diff --git a/script.js b/script.js
index 00f78839e17275049d38ce87376f409e2f1b18fc..748cd9159fccbbe5e21535c69e8f0d039b10db02 100644 (file)
--- a/script.js
+++ b/script.js
@@ -9,7 +9,7 @@ const cacheChannel = new BroadcastChannel('cache');
 cacheChannel.addEventListener('message', e => {
   // Ignore static assets like logo.svg, style.css, script.js, etc. 
   if (new URL(e.data.resource).pathname === '/api' && e.data.isUpdated) {
-    document.body.append(toast);
+    toast.show();
   }
 });
 
@@ -23,14 +23,15 @@ document.querySelectorAll('template').forEach(t => {
   components.set(t.id, t.content.firstElementChild);
   t.remove();
 });
+components.set('header', document.querySelector('header'));
+components.set('toast', document.querySelector('dialog'));
 globalThis.COMPONENTS = components;
 const header = components.get('header');
 const homeLoader = components.get('home-loader');
 const homeMain = components.get('home-main');
 const postLoader = components.get('post-loader');
 const postMain = components.get('post-main');
-const toast = components.get('toast');
-toast.querySelector('button').addEventListener('click', _ => location.reload());
+document.querySelector('dialog > button').addEventListener('click', _ => location.reload());
 
 /* Fetch important <head> elements for convenience */
 const head = {
@@ -109,15 +110,12 @@ async function fetchPostContent(path) {
 
 /* Client-side routing */
 async function showPage(path) {
-  document.body.innerHTML = '';
-  document.body.appendChild(header);
-
   // Determine which placeholders to show
   if (path === '/home' || path === '/') {
-    document.body.appendChild(homeLoader);
+    document.querySelector('main').replaceWith(homeLoader);
   }
   else {
-    document.body.appendChild(postLoader);
+    document.querySelector('main').replaceWith(postLoader);
   }
 
   // Load all post metadata if it hasn't been loaded yet
@@ -140,8 +138,7 @@ async function showPage(path) {
           <h2>${post.title}</h2><p>${post.description}</p><p><a href="${path}">${post.linkText}</a></p>
         </article>`);
     }
-    homeLoader.remove();
-    document.body.appendChild(homeMain);
+    document.querySelector('main').replaceWith(homeMain);
   }
   else if (posts.has(path)) {
     const post = posts.get(path);
@@ -163,8 +160,7 @@ async function showPage(path) {
       `<article class="post">
         ${marked(post.content)}
       </article>`);
-    postLoader.remove();
-    document.body.appendChild(postMain);
+    document.querySelector('main').replaceWith(postMain);
     hljs.highlightAll();
   }
   else {