Cleanup before swap

- Update Node to v22
- Update Pagefind
- Update readme
- Make current year automatically update
- Remove underscores from the Start Date and End Date filters

.nvmrc

@@ -1 +1 @@
-v20
+v22

README.md

@@ -1,31 +1,61 @@
 # Medieval Scrolls Astro
 - The [Medieval Scrolls Digital Archive](https://medievalscrolls.com/) is a comprehensive resource for research on scrolls in the Middle Ages. The website was originally designed as a supplementary resource for Tom Kelly's HarvardX course **Scrolls in the Age of the Book**, which provided an introduction to the making and use of scrolls in the European Middle Ages. In its first iteration it was a Wordpress + Angular application. This project is a redesign of the website using Astro, a static site generator.
+- Data was migrated from Wordpress to Astro using `wordpress-export-to-markdown` (see `/migration` folder for details).
 - The data source for the Astro application is stored in Google Sheets and transformed into JSON (`data/scrolls_master_list.json`) using [OpenSheet](https://github.com/benborgers/opensheet#readme) in `scrape_sheets/scrape_sheet.py`. A Github Actions workflow (`update_scrolls_data`) on a cron job is used to update the JSON file in the repository. `enhance_sheets/enhance_sheets.py` was used to add additional metadata to the Sheet on a one-time basis.
+- Running `npm run build` will rebuild the Pagefind index. `pagefind` is used for static search functionality.
 
 ## 🚀 Project Structure
 
-Inside of your Astro project, you'll see the following folders and files:
+- The Astro app is in `src`.
+- Astro components (or Vue, React, Svelte, etc - Astro can wrap any of them) live in `src/components`.
+- We are using Typescript; the type definitions are in `src/types`.
+- Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. `scrolls` has an index page (for the search) and a dynamic route for each scroll at `[...slug].astro`.
+- Any static assets, like images, can be placed in the `public/` directory.
+- The built application is output to the `dist/` directory.
 
 ```text
 /
+├── .astro
+├── .git
+├── .github/workflows
+├── dist/
+├── enhance_sheets/
+├── migration/wordpress-export-to-markdown
 ├── public/
 │   └── favicon.svg
+├── scrape_sheets
 ├── src/
 │   ├── components/
-│   │   └── Card.astro
+│   │   └── Footer.astro
+│   │   └── Header.astro ...
+│   ├── data/
 │   ├── layouts/
-│   │   └── Layout.astro
+│   │   └── BaseLayout.astro
+│   │   └── PageLayout.astro
+│   │   └── ScrollLayout.astro
 │   └── pages/
-│       └── index.astro
+│   │   └── scrolls/
+│   │       └── [...slug].astro
+│   │       └── index.astro
+│   │   └── bibliography.astro
+│   │   └── houghton-library.astro
+│   │   └── index.astro
+│   │   └── intro.astro
+│   └── styles/
+│   └── types/
+│   │   └── Scroll.d.ts
+│   └── consts.ts
+│   └── env.d.ts
+└── .gitignore
+└── .nojekyll
+└── .nvmrc
+└── .astro.config.mjs
 └── package.json
+└── package-lock.json
+└── README.md
+└── tsconfig.json
 ```
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
 ## 🧞 Commands
 
 All commands are run from the root of the project, from a terminal:
@@ -37,8 +67,4 @@ All commands are run from the root of the project, from a terminal:
 | `npm run build`           | Build your production site to `./dist/`          |
 | `npm run preview`         | Preview your build locally, before deploying     |
 | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+| `npm run astro -- --help` | Get help using the Astro CLI                     |

package.json

@@ -1,7 +1,7 @@
 {
   "name": "scrolls-astro",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -14,7 +14,8 @@
     "@astrojs/mdx": "^2.0.2",
     "@astrojs/sitemap": "^3.0.3",
     "astro": "^4.0.6",
-    "astro-pagefind": "^1.3.0",
-    "typescript": "^5.3.3"
+    "astro-pagefind": "^1.5.0",
+    "typescript": "^5.3.3",
+    "pagefind": "^1.1.0"
   }
 }

src/components/Footer.astro

@@ -1,5 +1,7 @@
 ---
 import veritas from '../images/veritas.png';
+
+const currentYear = new Date().getFullYear();
 ---
 
 <footer class="pt96 pb96 pt-xs-48 pb-xs-48">
@@ -32,7 +34,7 @@ import veritas from '../images/veritas.png';
         class="col-md-8 col-md-offset-2 col-sm-9 col-sm-offset-1 text-center"
       >
         <p class="fade-1-4">
-          ©2023 <span>Medieval Scrolls Digital Archive</span>, HarvardX, and
+          ©{currentYear} <span>Medieval Scrolls Digital Archive</span>, HarvardX, and
           Harvard University.<br /><br />All media related to the <span
             >Medieval Scrolls Digital Archive</span
           > is in the public domain.

src/layouts/ScrollLayout.astro

@@ -41,8 +41,8 @@ const headlineStyle = `transform: translate3d(0px, 0px, 0px); background: url('$
                     {formattedDate && <span style="display:none;" data-pagefind-meta=`date:${formattedDate}`></span>}
                     {scroll.type && <span style="display:none;" data-pagefind-meta=`type:${scroll.type}`></span>}
                     {scroll.description && <span style="display:none;" data-pagefind-meta=`description:${scroll.description}`></span>}
-                    {scroll.date_start && <span style="display:none;" data-pagefind-filter=`date_start:${scroll.date_start}`></span>}
-                    {scroll.date_end && <span style="display:none;" data-pagefind-filter=`date_end:${scroll.date_end}`></span>}
+                    {scroll.date_start && <span style="display:none;" data-pagefind-filter=`Start Date:${scroll.date_start}`></span>}
+                    {scroll.date_end && <span style="display:none;" data-pagefind-filter=`End Date:${scroll.date_end}`></span>}
                     {scroll.language_1 && <span style="display:none;" data-pagefind-filter=`language:${scroll.language_1}`></span>}
                     {scroll.language_2 && <span style="display:none;" data-pagefind-filter=`language:${scroll.language_2}`></span>}
                     <h1 data-pagefind-meta="title">{scroll.meta_title}</h1>

src/pages/index.astro

@@ -1,6 +1,5 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
-// import { Image } from 'astro:assets';
 import harvardx from '../images/harvardx_logo-light.png';
 import houghton from '../images/houghton.jpg';
 import houghton_scroll from '../images/houghton_scroll.jpg';

src/pages/scrolls/[...slug].astro

@@ -1,10 +1,6 @@
 ---
 import ScrollLayout from '../../layouts/ScrollLayout.astro';
 import scrollsData from '../../data/scrolls_master_list.json';
-// import { Debug } from 'astro:components';
-
-// Debugging: Log scrollsData to check structure
-// console.log("Scrolls Data:", scrollsData);
 
 export async function getStaticPaths() {
   return scrollsData
@@ -13,9 +9,6 @@ export async function getStaticPaths() {
       params: { slug: scroll.slug },
     }));
 }
-// const req = Astro.request;
-// const params = Astro.request.params; // This is null for some reason
-// const scroll = scrollsData.find(s => s.slug && s.slug === params.slug);
 
 const fullUrl = new URL(Astro.request.url);
 const pathSegments = fullUrl.pathname.split('/').filter(Boolean);
@@ -27,7 +20,4 @@ if (!scroll) {
   return Astro.redirect('/404');
 }
 ---
-<!-- <Debug {req}/> -->
-<ScrollLayout {...scroll}>
-    <!-- <Content /> -->
-</ScrollLayout>
+<ScrollLayout {...scroll}></ScrollLayout>

src/pages/scrolls/index.astro

@@ -1,10 +1,6 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
-// import { SITE_TITLE } from '../../consts';
-// import Search from "astro-pagefind/components/Search";
-// import Debug from "astro-pagefind/components/Debug";
 ---
-<!-- <Debug {plainText} /> -->
 
 <BaseLayout title="Database">
     <div class="archive-page page">
@@ -19,17 +15,23 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 <script type="module">
     document.body.classList.add("archive-search", "grid", "primary");
     window.addEventListener('DOMContentLoaded', (event) => {
-        new PagefindUI({
+        window.search = new PagefindUI({
             element: "#search",
             pageSize: 25,
             showImages: false,
             showEmptyFilters: false,
-            // resetStyles: false
+            translations: {
+                placeholder: "Type to search for scrolls"
+            },
+            autofocus: true,
+            // openFilters: ['type']
         });
 
+        // search.triggerSearch(null, true); // this doesn't work, and can't import the JS API alongside Default UI
+
         // pageFind resetStyles looks weird; we can't style a result directly without it;
         // we can't apply styles directly because the elements don't exist until the search is run.
-        // Instead we'll use a MutationObserver to apply styles to the results after they're created.
+        // Instead, use a MutationObserver to apply styles to the results after they're created.
         // Create a new MutationObserver instance
         var observer = new MutationObserver(function(mutations) {
             mutations.forEach(function(mutation) {