feat: add Browse page with paginated publication index

astro.config.mjs

@@ -1,8 +1,31 @@
 import { defineConfig } from "astro/config";
 
+// Prevent duplicate customElements.define() errors in dev mode.
+// The myst-awesome library imports Web Awesome components from many
+// separate <script> entry points, which Astro/Vite can execute more
+// than once. This patches define() to silently skip duplicates.
+function safeCustomElements() {
+  return {
+    name: "safe-custom-elements",
+    hooks: {
+      "astro:config:setup"({ injectScript }) {
+        injectScript(
+          "head-inline",
+          `{
+            const orig = customElements.define.bind(customElements);
+            customElements.define = function (name, ctor, opts) {
+              if (!customElements.get(name)) orig(name, ctor, opts);
+            };
+          }`
+        );
+      },
+    },
+  };
+}
+
 export default defineConfig({
   // Use the myst-awesome theme configuration
-  integrations: [],
+  integrations: [safeCustomElements()],
 
   server: {
     port: 4321, // Use port 4321 for the main project

src/components/Authors.astro

@@ -179,9 +179,7 @@ if (authors) {
 )}
 
 <script>
-  // Web Awesome icons are loaded globally
-  // Import Web Awesome components
-  import '@awesome.me/webawesome/dist/components/icon/icon.js';
+  // Web Awesome icon component is loaded by BasePage layout
   import { registerScienceIconsLibrary } from '@awesome-myst/myst-awesome/lib/wa-scienceicons.ts';
 
   // Register scienceicons library

src/components/Header.astro

@@ -23,6 +23,10 @@ import SearchDialog from './SearchDialog.astro';
       <wa-icon label="Search" name="magnifying-glass" variant="solid" class="nav-icon brand-text"></wa-icon>
       <span class="brand-text">Search</span>
     </button>
+    <a href="/browse" class="nav-link">
+      <wa-icon label="Browse" name="book-open" variant="solid" class="nav-icon brand-text"></wa-icon>
+      <span class="brand-text">Browse</span>
+    </a>
     <a href="/about" class="nav-link">
       <wa-icon label="About" name="circle-info" variant="solid" class="nav-icon brand-text"></wa-icon>
       <span class="brand-text">About</span>

src/components/SearchDialog.astro

@@ -38,9 +38,9 @@
 
 <script>
   // @ts-nocheck
+  // Web Awesome icon/button components are loaded by BasePage layout
   import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
   import '@awesome.me/webawesome/dist/components/input/input.js';
-  import '@awesome.me/webawesome/dist/components/icon/icon.js';
   import '@awesome.me/webawesome/dist/components/zoomable-frame/zoomable-frame.js';
   import Fuse from 'fuse.js'