feature: date page using Svelte

[#154]

package.json

@@ -44,8 +44,10 @@
     "@storybook/sveltekit": "^8.4.5",
     "@storybook/test": "^8.4.5",
     "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@types/ramda": "^0.30.2",
     "autoprefixer": "^10.4.20",
     "cypress": "^13.16.0",
     "eslint": "^9.7.0",
@@ -54,14 +56,21 @@
     "globals": "^15.0.0",
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.6",
+    "ramda": "^0.30.1",
     "start-server-and-test": "^2.0.8",
     "storybook": "^8.4.5",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
+    "svelte-markdown": "*",
     "tailwindcss": "^3.4.9",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.0.0",
     "vite": "^5.0.3",
     "vitest": "^2.0.4"
+  },
+  "overrides": {
+    "svelte-markdown": {
+      "svelte": "^5.0.0"
+    }
   }
 }

src/data/findByDate.ts

@@ -0,0 +1,23 @@
+import {__, filter} from 'ramda'
+
+// n.b. all this data uses human-style month numbers (Jan=1), not JS-style (Jan=0)
+import albumsData from './albums.json'
+import birthdaysData from './birthdays.json'
+import miscData from './misc.json'
+import showNotesData from './show-notes.json'
+import showsData from './shows.json'
+
+function findWithin(dataSet) {
+  const finder = filter(__, dataSet)
+  return ({monthNum, day}) => finder((entry) => entry.month === monthNum && entry.day === day)
+}
+
+export const findAlbums = findWithin(albumsData)
+export const findBirthdays = findWithin(birthdaysData)
+export const findMisc = findWithin(miscData)
+export const findShowNotes = findWithin(showNotesData)
+
+const showFinder = filter(__, showsData)
+export const findShows = ({monthNum, day}) => {
+  return showFinder((entry) => entry.show_month === monthNum && entry.show_day === day)
+}

src/lib/components/Calendar.svelte

@@ -8,7 +8,7 @@
 
   function monthName(month:number) {
     const firstOfThaMonth = new Date(leapYear, month, 1) // yes this is a Bone Thugs reference
-    return dateToText(firstOfThaMonth, {month:'long'}).split(' ')[0]
+    return dateToText(firstOfThaMonth, {month:'long'}).split(' ', 1)[0]
   }
 </script>
 

src/params/date.spec.ts

@@ -0,0 +1,30 @@
+import {describe, expect, it} from 'vitest'
+import {match} from './date'
+
+describe('params matcher: date', () => {
+  it('is a function', () => {
+    expect(typeof match).toBe('function')
+  })
+
+  describe('with a `month-day` string', () => {
+    it('returns true', () => {
+      expect(match('jul-16')).toBe(true)
+      expect(match('abc-12')).toBe(true) // we aren't fully validating in the matcher...
+    })
+  })
+
+  describe('with an incorrect-looking string', () => {
+    it('returns false', () => {
+      expect(match('foobar')).toBe(false)
+      expect(match('foo-bar')).toBe(false)
+      expect(match('foo-123')).toBe(false)
+      expect(match('a-0')).toBe(false)
+    })
+  })
+
+  describe('with a non-string', () => {
+    it('returns false', () => {
+      expect(match({})).toBe(false)
+    })
+  })
+})

src/params/date.ts

@@ -0,0 +1,7 @@
+// import type {ParamMatcher} from '@sveltejs/kit'
+
+const REGEX_MONTH_DAY = /^([a-z]+)-([1-9]\d?)$/
+
+export function match(param:string):boolean {
+  return REGEX_MONTH_DAY.test(param)
+}

src/routes/+layout.svelte

@@ -5,7 +5,7 @@
 </script>
 
 
-<main>
+<main class="flex flex-col flex-nowrap items-center px-1 pb-12">
   {@render children()}
 </main>
 
@@ -20,15 +20,20 @@
 </footer>
 
 <style lang="postcss">
+  @import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
+
   :global(html) {
     color: theme(colors.zinc.200);
     background-color: theme(colors.zinc.900);
   }
+  :global(.font-silkscreen) {
+    font-family: Silkscreen;
+  }
   :global(a) {
     color: yellowgreen;
   }
   :global(a:hover) {
-    text-shadow: 1px 2px 5px hsl(from yellow h s l / .6)
+    text-shadow: 1px 2px 5px hsl(from yellow h s l / .6);
   }
 
   footer img {

src/routes/+page.svelte

@@ -12,7 +12,7 @@
 
 <main class="flex flex-col flex-nowrap items-center p-1">
 
-  <h1 class="my-8 text-3xl text-blue-gothic" style="font-family:Silkscreen;">Today in King Gizzard History</h1>
+  <h1 class="my-8 text-3xl text-blue-gothic font-silkscreen">Today in King Gizzard History</h1>
 
   <noscript><strong>This site requires JavaScript.</strong></noscript>
 
@@ -26,5 +26,4 @@
 
 
 <style lang="postcss">
-  @import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
 </style>