added RSS and pages

template.html

@@ -3,7 +3,12 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Pascal Maas · Blog</title>
+<title>{{title}}</title>
+<meta name="description" content="{{description}}">
+<meta property="og:title" content="{{title}}">
+<meta property="og:description" content="{{description}}">
+<link rel="alternate" type="application/rss+xml" title="Pascal Maas"
+      href="{{root}}feed.xml">
 <script>
   // Runs before the page is drawn, so a saved dark choice doesn't flash.
   try {
@@ -16,19 +21,19 @@
   /* Served from static/; Georgia shows until these have loaded. */
   @font-face {
     font-family: "Poltawski Nowy"; font-weight: 400; font-style: normal;
-    src: url("static/PoltawskiNowy-Regular.ttf"); font-display: swap;
+    src: url("{{root}}static/PoltawskiNowy-Regular.ttf"); font-display: swap;
   }
   @font-face {
     font-family: "Poltawski Nowy"; font-weight: 400; font-style: italic;
-    src: url("static/PoltawskiNowy-Italic.ttf"); font-display: swap;
+    src: url("{{root}}static/PoltawskiNowy-Italic.ttf"); font-display: swap;
   }
   @font-face {
     font-family: "Poltawski Nowy"; font-weight: 700; font-style: normal;
-    src: url("static/PoltawskiNowy-Bold.ttf"); font-display: swap;
+    src: url("{{root}}static/PoltawskiNowy-Bold.ttf"); font-display: swap;
   }
   @font-face {
     font-family: "Poltawski Nowy"; font-weight: 700; font-style: italic;
-    src: url("static/PoltawskiNowy-BoldItalic.ttf"); font-display: swap;
+    src: url("{{root}}static/PoltawskiNowy-BoldItalic.ttf"); font-display: swap;
   }
   :root {
     --latte: #f4f2ee; --espresso: #231c15;
@@ -59,6 +64,7 @@
   .site-header h1 {
     margin: 0; font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.01em;
   }
+  .site-header h1 a { color: inherit; text-decoration: none; }
   .site-header p { display: none; margin: 0; color: var(--muted); }
   .site-header {
     display: flex; justify-content: space-between;
@@ -167,7 +173,7 @@
 <div class="wrap">
   <header class="site-header">
     <div class="site-title">
-      <h1>Pascal Maas</h1>
+      <h1><a href="{{root}}">Pascal Maas</a></h1>
       <p>A blog about bioinformatics in metabolomics</p>
     </div>
     <div class="header-actions">
@@ -188,11 +194,11 @@
     </nav>
 
     <main>
-{{posts}}
+{{content}}
     </main>
   </div>
 
-  <footer>© {{year}} Pascal Maas</footer>
+  <footer>© {{year}} Pascal Maas · <a href="{{root}}feed.xml">RSS</a></footer>
 </div>
 <script>
   const root = document.documentElement;
@@ -219,9 +225,7 @@
     } catch (error) {}
   });
 
-  const header = document.querySelector(".site-header");
-  const articles = Array.from(document.querySelectorAll("main article"));
-  const links = document.querySelectorAll("nav a");
+  const articles = document.querySelectorAll("main article");
 
   // First use of each term per post keeps its definition, moved out of
   // "title" so the browser's plain tooltip doesn't show beside the bubble.
@@ -238,30 +242,6 @@
       term.tabIndex = 0;
     }
   }
-
-  // The current post is the last one whose top has passed a line 3rem
-  // (48px) below the header; at the very bottom, it is always the last post.
-  function markCurrentPost() {
-    if (articles.length === 0) {
-      return;
-    }
-    const line = header.getBoundingClientRect().bottom + 48;
-    const viewBottom = window.innerHeight + window.scrollY;
-    const atBottom = viewBottom >= root.scrollHeight - 2;
-    let current = articles[0];
-    for (const article of articles) {
-      if (atBottom || article.getBoundingClientRect().top <= line) {
-        current = article;
-      }
-    }
-    for (const link of links) {
-      link.classList.toggle("current", link.hash === "#" + current.id);
-    }
-  }
-
-  markCurrentPost();
-  window.addEventListener("scroll", markCurrentPost, { passive: true });
-  window.addEventListener("resize", markCurrentPost);
 </script>
 </body>
 </html>