jimniels · jimniels · Feb 27, 2026 · Feb 28, 2026 · Feb 28, 2026 · Mar 2, 2026
diff --git a/src/routes/index.ori b/src/routes/index.ori
@@ -1,7 +1,9 @@
 (site) => <templates/Page.ori.html>({
+  site,
   title: "Jim Nielsen’s Notes",
-  children: Tree.map(
-    site.items,
+  children: `${Tree.map(
+    Tree.take(site.items, 10),
     (item) => <templates/Note.ori.html>(item)
-  )
+  )}<a href="/n/">View all notes</a>`
+  path: "/"
 })
diff --git a/src/routes/shuffle.ori.html b/src/routes/shuffle.ori.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>Shuffle</title>
+<style>
+  @view-transition {
+    navigation: auto;
+  }
+</style>
+<script>
+  const postsIds = ${Tree.json(Tree.map(_.items, (post) => `/n/${post.id}/`))};
+  // randomly select one of the postsIds
+  const randomPostId = postsIds[Math.floor(Math.random() * postsIds.length)];
+  window.location.href = randomPostId;
+</script>
+<noscript>
+  <p>Please enable JavaScript to view this page.</p>
+</noscript>
diff --git a/src/site.ori b/src/site.ori
@@ -9,14 +9,35 @@
   feed.xml = Origami.rss(site_truncated)
   index.html = <routes/index.ori>(site)
 
-  // n = tree:map(_postData/items, {
-  //   key: (post) => post/id
-  //   value: (post) => {
-  //     index.html: ./templates/Page.ori.html({
-  //       title: post/title,
-  //       children: ./templates/Note.ori.html(post)
-  //     })
-  //   }
-  // })
+  shuffle = {
+    index.html: <routes/shuffle.ori.html>(site)
+  }
+
+  n = {
+    index.html: <templates/Page.ori.html>({
+    site,
+    title: "Archive | Jim Nielsen’s Notes",
+    children: 
+      `<div style="margin-top:3rem; font-style: italic">
+        Every note I’ve published is here on this page. Use your browser’s built-in find functionality to search keywords on this page.
+      </div>
+      ${Tree.map(
+        site.items,
+        (item) => <templates/Note.ori.html>(item)
+      )}`
+      path: "/n/"
+    })
+    ...Tree.map(site.items, {
+      key: (post) => post.id
+      value: (post) => {
+        index.html: templates/Page.ori.html({
+          title: post.title,
+          children: templates/Note.ori.html(post)
+          site: site,
+          path: `/n/${post.id}/`
+        })
+      }
+    })
+  }
 }
 
diff --git a/src/templates/Note.ori.html b/src/templates/Note.ori.html
@@ -1,5 +1,5 @@
 <!-- ( _ : {Note} ) -->
-<article id="${_.id}" data-tags="${_.tags}">
+<article id="${_.id}" data-tags="${_.tags ? _.tags.join(' ') : ''}">
   <header>
     <h1><a href="${_.external_url}">${_.title}</a></h1>
     <p class="byline">
@@ -10,7 +10,7 @@ <h1><a href="${_.external_url}">${_.title}</a></h1>
   <footer class="de-emphasized">
     <ul>
       <li>
-        <a href="#${_.id}"
+        <a href="/n/${_.id}/"
           ><time datetime="${_.date_published}"
             >${_.date_published.slice(0, 10)}</time
           ></a

diff --git a/src/templates/Page.ori.html b/src/templates/Page.ori.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<!-- ( _ : { children: string, title: string } ) -->
+<!-- ( _ : { path: string, site: Site,children: string, title: string } ) -->
 <html lang="en" data-theme="Notes" id="top">
   <head>
     <meta charset="UTF-8" />
@@ -27,72 +27,65 @@
   </head>
   <body>
     <nav>
-      <a href="#top" title="Jump to top" aria-label="Jump to top"
-        >${<svgs/icon-jump.svg>}</a
-      >
+      <!-- prettier-ignore -->
       <a
-        href="#"
-        title="Jump to random note"
-        aria-label="Jump to random note"
-        class="js-shuffle"
+        href="/"
+        title="Home"
+        aria-label="Home"
+        aria-current="${_.path=== '/' ? 'page' : 'false'}"
+        >${<templates/icons.ori/home>}</a>
+      <!-- prettier-ignore -->
+      <button
+        title="Shuffle (jump to random note)"
+        aria-label="Shuffle (jump to random note)"
+        id="js-shuffle"
+        style="view-transition-name: ${_.path.startsWith('/n/') ? 'nav-icon-shuffle' : '__NONE__'}"
       >
-        ${<svgs/icon-shuffle.svg>}
-      </a>
+        ${<templates/icons.ori/shuffle>}
+      </button>
 
+      <a
+        href="/n/"
+        title="Search"
+        aria-label="Search"
+        aria-current="${_.path === '/n/' ? 'page' : 'false'}"
+        >${<templates/icons.ori/search>}</a
+      >
       <a href="/feed.xml" title="RSS feed" arial-label="RSS feed"
-        >${<svgs/icon-rss.svg>}</a
+        >${<templates/icons.ori/rss>}</a
       >
 
-      <!-- <a href="/menu/" title="Menu" arial-label="Menu" style="margin-left: auto"
+      <!-- <a href="/menu/" title="Menu" arial-label="Menu"
         >${<svgs/icon-menu.svg>}</a
       > -->
     </nav>
+    ${_.path === '/' ? `
     <header>
       <h1>Notes</h1>
       <p>Quoting others & adding my 2¢ — a microblog.</p>
-      ${<svgs/signature.svg>}
+      ${<svgs/signature.svg>} ${(_.path === '/' || _.path === '/n/') ? ` ` : ``}
     </header>
+    ` : ''}
     <main>${_.children}</main>
+    ${_.path === '/' ? `
     <footer>
       Holy cow, you made it all the way to the bottom? Look at you 👏
       <br />
       <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
         >Here’s a special gift.</a
       >
     </footer>
+    ` : ''}
+
+    <script src="/edit-link.js" type="module"></script>
     <script>
-      // Shuffle jump to link
-      const min = 0;
-      const max = document.querySelectorAll("article").length;
-      document.querySelector(".js-shuffle").addEventListener("click", (e) => {
+      const postsIds = ${JSON.stringify(Tree.plain(Tree.map(_.site.items, (post) => post.id)))};
+      // randomly select one of the postsIds
+      const randomPostId = postsIds[Math.floor(Math.random() * postsIds.length)];
+      document.querySelector("#js-shuffle")?.addEventListener("click", (e) => {
         e.preventDefault();
-        const rand = Math.floor(Math.random() * max) + min;
-        Array.from(document.querySelectorAll("article"))[rand].scrollIntoView();
+        window.location.href = "/n/" + randomPostId + "/";
       });
-
-      // Add 'Edit' link to each note for my own personal use
-      // But only if the global var has been set
-      let edit = window.localStorage.getItem("edit") === "true";
-      const urlEdit = new URL(window.location).searchParams.get("edit");
-      if (urlEdit) {
-        edit = urlEdit === "true";
-        window.localStorage.setItem("edit", edit);
-      }
-      if (edit) {
-        Array.from(document.querySelectorAll("article")).forEach((article) => {
-          const id = article.getAttribute("id");
-
-          // Create the link
-          const editLink = document.createElement("a");
-          editLink.href = "ia-writer://open?path=notes:" + id + ".md";
-          editLink.textContent = "Edit";
-
-          // Add the link to the list
-          const li = document.createElement("li");
-          li.appendChild(editLink);
-          article.querySelector("footer ul").appendChild(li);
-        });
-      }
     </script>
   </body>
 </html>
diff --git a/src/templates/icons.ori b/src/templates/icons.ori
@@ -0,0 +1,7 @@
+{
+  home: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 21V13.6C9 13.0399 9 12.7599 9.10899 12.546C9.20487 12.3578 9.35785 12.2049 9.54601 12.109C9.75992 12 10.0399 12 10.6 12H13.4C13.9601 12 14.2401 12 14.454 12.109C14.6422 12.2049 14.7951 12.3578 14.891 12.546C15 12.7599 15 13.0399 15 13.6V21M11.0177 2.764L4.23539 8.03912C3.78202 8.39175 3.55534 8.56806 3.39203 8.78886C3.24737 8.98444 3.1396 9.20478 3.07403 9.43905C3 9.70352 3 9.9907 3 10.5651V17.8C3 18.9201 3 19.4801 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4801 21 18.9201 21 17.8V10.5651C21 9.9907 21 9.70352 20.926 9.43905C20.8604 9.20478 20.7526 8.98444 20.608 8.78886C20.4447 8.56806 20.218 8.39175 19.7646 8.03913L12.9823 2.764C12.631 2.49075 12.4553 2.35412 12.2613 2.3016C12.0902 2.25526 11.9098 2.25526 11.7387 2.3016C11.5447 2.35412 11.369 2.49075 11.0177 2.764Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+  shuffle: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-ccw-icon lucide-refresh-ccw"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>`,
+  // `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 15L21 18M21 18L18 21M21 18H18.5689C17.6297 18 17.1601 18 16.7338 17.8705C16.3564 17.7559 16.0054 17.5681 15.7007 17.3176C15.3565 17.0348 15.096 16.644 14.575 15.8626L14.3333 15.5M18 3L21 6M21 6L18 9M21 6H18.5689C17.6297 6 17.1601 6 16.7338 6.12945C16.3564 6.24406 16.0054 6.43194 15.7007 6.68236C15.3565 6.96523 15.096 7.35597 14.575 8.13744L9.42496 15.8626C8.90398 16.644 8.64349 17.0348 8.29933 17.3176C7.99464 17.5681 7.64357 17.7559 7.2662 17.8705C6.83994 18 6.37033 18 5.43112 18H3M3 6H5.43112C6.37033 6 6.83994 6 7.2662 6.12945C7.64357 6.24406 7.99464 6.43194 8.29933 6.68236C8.64349 6.96523 8.90398 7.35597 9.42496 8.13744L9.66667 8.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+  rss: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 11C6.38695 11 8.67613 11.9482 10.364 13.636C12.0518 15.3239 13 17.6131 13 20M4 4C8.24346 4 12.3131 5.68571 15.3137 8.68629C18.3143 11.6869 20 15.7565 20 20M6 19C6 19.5523 5.55228 20 5 20C4.44772 20 4 19.5523 4 19C4 18.4477 4.44772 18 5 18C5.55228 18 6 18.4477 6 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+  search: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>`
+}
diff --git a/static/edit-link.js b/static/edit-link.js
@@ -0,0 +1,23 @@
+// Add 'Edit' link to each note for my own personal use
+// But only if the global var has been set
+let edit = window.localStorage.getItem("edit") === "true";
+const urlEdit = new URL(window.location).searchParams.get("edit");
+if (urlEdit) {
+  edit = urlEdit === "true";
+  window.localStorage.setItem("edit", edit);
+}
+if (edit) {
+  Array.from(document.querySelectorAll("article")).forEach((article) => {
+    const id = article.getAttribute("id");
+
+    // Create the link
+    const editLink = document.createElement("a");
+    editLink.href = "ia-writer://open?path=notes:" + id + ".md";
+    editLink.textContent = "Edit";
+
+    // Add the link to the list
+    const li = document.createElement("li");
+    li.appendChild(editLink);
+    article.querySelector("footer ul").appendChild(li);
+  });
+}
diff --git a/static/styles.css b/static/styles.css
@@ -1,3 +1,7 @@
+@view-transition {
+  navigation: auto;
+}
+
 :root[data-theme="Notes"] {
   --c-bg: #fff;
   --c-text: #001d32;
@@ -32,13 +36,13 @@ body {
   color: var(--c-text);
 }
 
-a {
+main a {
   color: inherit;
   text-decoration: none;
   border-bottom: 1px solid;
   transition: 0.1s ease color;
 }
-a:hover {
+main a:hover {
   color: var(--c-highlight);
   border-bottom: 2px solid var(--c-highlight);
 }
@@ -181,29 +185,93 @@ nav:after {
             }
           }*/
 
-nav a {
-  border: none !important;
+nav > * {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   box-shadow: 0 0 0 10px var(--c-bg);
   background: var(--c-bg);
   transition: 0.3s ease transform;
+  width: 48px;
+  height: 48px;
+  position: relative;
+  color: inherit;
+  border: none;
 }
-nav a:active {
-  transform: scale(0.9);
+
+nav > *:after {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 2px solid var(--c-text-secondary);
+  opacity: 0.25;
 }
-nav a:first-child {
+
+nav > [aria-current="page"] {
+  opacity: 0.125;
+  border-color: transparent;
+  cursor: default !important;
+  pointer-events: none;
+}
+
+nav > :first-child {
   z-index: 100;
+  margin-right: auto;
 }
 
-[data-open-theme] nav > a:first-child svg,
-nav a:hover svg {
-  fill: var(--c-highlight);
+nav > *:hover {
+  color: inherit;
+  cursor: pointer;
 }
 
 nav svg {
-  fill: var(--c-text-secondary);
-  transition: 0.3s ease fill;
+  width: 24px;
+  height: 24px;
+}
+
+/* nav button svg {
+  view-transition-name: nav-icon;
+} */
+
+::view-transition-old(nav-icon-shuffle),
+::view-transition-new(nav-icon-shuffle) {
+  animation: nav-icon-spin 1.5s ease;
+}
+
+@keyframes nav-icon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.archive-nav {
+  margin-top: 0.5rem;
+  margin-left: 2.25rem;
+  border-radius: 50px;
+  position: relative;
+  z-index: 1;
+}
+.archive-nav a {
+  text-align: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: 5rem;
+  text-decoration: none;
+  color: var(--c-text-secondary);
+  transition: 0.3s ease color;
+}
+.archive-nav a:hover {
+}
+.archive-nav a[aria-current="page"] {
+  color: var(--c-bg);
+  background-color: var(--c-highlight);
+  cursor: default !important;
+  pointer-events: none;
 }