From ad07a06cfe36109465156ce4a97a3887b13b25ca Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Thu, 20 Feb 2025 07:07:42 -0800
Subject: [PATCH] Migrate to Svelte 5 (#135)

* migrate to Svelte 5

* npm-test.yml add install-e2e: npx playwright install chromium

nodejs-gh-pages.yml drop custom install-cmd

* fix build

* fix playwright tests

* 2 new in site/tests/site.test.ts

- Add test for 404 page handling
- Add test for page metadata (title, description, OG tags)
---
 .github/workflows/gh-pages.yml         |   1 -
 .github/workflows/test.yml             |   1 +
 .pre-commit-config.yaml                |   2 +-
 site/package.json                      |  44 +++++------
 site/src/lib/ContributorList.svelte    |   6 +-
 site/src/lib/Filters.svelte            |  30 ++++---
 site/src/lib/Person.svelte             |   8 +-
 site/src/lib/Screenshot.svelte         |  20 +++--
 site/src/lib/SiteDetails.svelte        |  40 ++++++----
 site/src/lib/SiteList.svelte           |  12 ++-
 site/src/lib/SitePreview.svelte        |  11 ++-
 site/src/routes/+error.svelte          |   2 +-
 site/src/routes/+layout.svelte         |   8 +-
 site/src/routes/+page.svelte           | 103 ++++++++++++++-----------
 site/src/routes/[slug]/+page.server.ts |  11 ++-
 site/src/routes/[slug]/+page.svelte    |  26 +++----
 site/tests/site.test.ts                |  61 ++++++++++-----
 17 files changed, 231 insertions(+), 155 deletions(-)

diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index 01b20c4..a10d67b 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -12,4 +12,3 @@ jobs:
     uses: janosh/workflows/.github/workflows/nodejs-gh-pages.yml@main
     with:
       working-directory: site
-      install-cmd: npm install -f
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 3cc05a7..d2e11aa 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -12,3 +12,4 @@ jobs:
     uses: janosh/workflows/.github/workflows/npm-test.yml@main
     with:
       working-directory: site
+      install-e2e: npx playwright install chromium
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 3c903c7..ff42330 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -54,7 +54,7 @@ repos:
         stages: [pre-commit, commit-msg]
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.19.0
+    rev: v9.20.1
     hooks:
       - id: eslint
         types: [file]
diff --git a/site/package.json b/site/package.json
index 3d12503..87fc030 100644
--- a/site/package.json
+++ b/site/package.json
@@ -17,31 +17,31 @@
     "test": "playwright test tests/*.test.ts"
   },
   "devDependencies": {
-    "@iconify/svelte": "^4.0.2",
-    "@playwright/test": "^1.47.1",
+    "@iconify/svelte": "^4.2.0",
+    "@playwright/test": "^1.50.1",
     "@rollup/plugin-yaml": "^4.1.2",
-    "@stylistic/eslint-plugin": "^3.0.1",
-    "@sveltejs/adapter-static": "^3.0.5",
-    "@sveltejs/kit": "^2.5.28",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "dotenv": "^16.4.5",
-    "eslint": "^9.10.0",
-    "eslint-plugin-svelte": "^2.44.0",
+    "@stylistic/eslint-plugin": "^4.0.1",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.17.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "dotenv": "^16.4.7",
+    "eslint": "^9.20.1",
+    "eslint-plugin-svelte": "^2.46.1",
     "js-yaml": "^4.1.0",
-    "marked": "^14.1.2",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
-    "puppeteer": "^23.3.1",
+    "marked": "^15.0.7",
+    "prettier": "^3.5.1",
+    "prettier-plugin-svelte": "^3.3.3",
+    "puppeteer": "^24.2.1",
     "sharp": "^0.33.5",
-    "svelte": "4.2.19",
-    "svelte-check": "^4.0.2",
-    "svelte-multiselect": "^10.3.0",
-    "svelte-preprocess": "^6.0.2",
-    "svelte-zoo": "^0.4.11",
-    "svelte2tsx": "^0.7.19",
-    "typescript": "5.6.2",
-    "typescript-eslint": "^8.6.0",
-    "vite": "^5.4.6"
+    "svelte": "^5.20.2",
+    "svelte-check": "^4.1.4",
+    "svelte-multiselect": "11.0.0-rc.1",
+    "svelte-preprocess": "^6.0.3",
+    "svelte-zoo": "^0.4.17",
+    "svelte2tsx": "^0.7.34",
+    "typescript": "5.7.3",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.1.1"
   },
   "keywords": [
     "sveltekit",
diff --git a/site/src/lib/ContributorList.svelte b/site/src/lib/ContributorList.svelte
index e1a3454..d6f2983 100644
--- a/site/src/lib/ContributorList.svelte
+++ b/site/src/lib/ContributorList.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
   import type { RepoContributor } from '$lib'
 
-  export let contributors: RepoContributor[]
+  interface Props {
+    contributors: RepoContributor[]
+  }
+
+  let { contributors }: Props = $props()
 </script>
 
 <ul class="contributors">
diff --git a/site/src/lib/Filters.svelte b/site/src/lib/Filters.svelte
index 2408410..eacba07 100644
--- a/site/src/lib/Filters.svelte
+++ b/site/src/lib/Filters.svelte
@@ -10,9 +10,13 @@
     tag_filter_mode,
   } from './stores'
 
-  export let tags: [string, number][]
-  export let contributors: [string, number][]
-  export let sort_order: `asc` | `desc` = `desc`
+  interface Props {
+    tags: [string, number][]
+    contributors: [string, number][]
+    sort_order?: `asc` | `desc`
+  }
+
+  let { tags, contributors, sort_order = $bindable(`desc`) }: Props = $props()
 </script>
 
 <div class="filters">
@@ -23,10 +27,12 @@
       placeholder="Filter by tag..."
       bind:selected={$filter_tags}
     >
-      <span slot="option" let:option style="display: flex;">
-        {option.label} <span style="flex: 1;"></span>
-        {option.count}
-      </span>
+      {#snippet option({ option })}
+        <span style="display: flex;">
+          {option.label} <span style="flex: 1;"></span>
+          {option.count}
+        </span>
+      {/snippet}
     </MultiSelect>
     {#if $filter_tags.length > 1}
       <RadioButtons bind:selected={$tag_filter_mode} options={[`all`, `any`]} />
@@ -38,10 +44,12 @@
       placeholder="Filter by contributor..."
       bind:selected={$filter_contributors}
     >
-      <span slot="option" let:option style="display: flex;">
-        {option.label} <span style="flex: 1;"></span>
-        {option.count}
-      </span>
+      {#snippet option({ option })}
+        <span style="display: flex;">
+          {option.label} <span style="flex: 1;"></span>
+          {option.count}
+        </span>
+      {/snippet}
     </MultiSelect>
     {#if $filter_contributors.length > 1}
       <RadioButtons bind:selected={$contributor_filter_mode} options={[`all`, `any`]} />
diff --git a/site/src/lib/Person.svelte b/site/src/lib/Person.svelte
index 43535b2..ad97827 100644
--- a/site/src/lib/Person.svelte
+++ b/site/src/lib/Person.svelte
@@ -2,9 +2,13 @@
   import Icon from '@iconify/svelte'
   import type { Contributor } from '.'
 
-  export let person: Contributor
+  interface Props {
+    person: Contributor
+  }
+
+  let { person }: Props = $props()
 
-  $: ({ name, twitter, github, url, avatar } = person)
+  let { name, twitter, github, url, avatar } = $derived(person)
 </script>
 
 <span>
diff --git a/site/src/lib/Screenshot.svelte b/site/src/lib/Screenshot.svelte
index 95d6026..170b505 100644
--- a/site/src/lib/Screenshot.svelte
+++ b/site/src/lib/Screenshot.svelte
@@ -1,17 +1,21 @@
 <script lang="ts">
   import { dev } from '$app/environment'
 
-  export let title: string
-  // width/height used only for aspect ratio to avoid content shift on img load
-  export let width = 800
-  export let height = 600
-  export let style = ``
-  export let resolution: `.small` | `` = ``
+  interface Props {
+    title: string
+    // width/height used only for aspect ratio to avoid content shift on img load
+    width?: number
+    height?: number
+    style?: string
+    resolution?: `.small` | ``
+  }
+
+  let { title, width = 800, height = 600, style = ``, resolution = `` }: Props = $props()
 
-  const titleToSlug = (title: string) => title.toLowerCase().replaceAll(` `, `-`)
+  const slugify = (title: string) => title.toLowerCase().replaceAll(` `, `-`)
 
   const base = `https://raw.githubusercontent.com/janosh/awesome-sveltekit/main/site/static`
-  $: src = `${dev ? `` : base}/screenshots/${titleToSlug(title)}${resolution}.avif`
+  let src = $derived(`${dev ? `` : base}/screenshots/${slugify(title)}${resolution}.avif`)
 </script>
 
 <img {src} alt="Screenshot of {title}" {width} {height} {style} />
diff --git a/site/src/lib/SiteDetails.svelte b/site/src/lib/SiteDetails.svelte
index dec86c0..52bebea 100644
--- a/site/src/lib/SiteDetails.svelte
+++ b/site/src/lib/SiteDetails.svelte
@@ -4,24 +4,30 @@
   import { Tooltip } from 'svelte-zoo'
   import { Person, Screenshot, type Site } from '.'
 
-  export let site: Site
+  interface Props {
+    site: Site
+  }
+
+  let { site }: Props = $props()
 
-  $: ({ title, url, tags, uses, contributors, date_created, repo_stars } = site)
+  let { title, url, tags, uses, contributors, date_created, repo_stars } = $derived(site)
 
-  $: days_since_created = Math.floor(
-    (Date.now() - date_created.getTime()) / (1000 * 60 * 60 * 24)
+  let days_since_created = $derived(
+    Math.floor((Date.now() - date_created.getTime()) / (1000 * 60 * 60 * 24)),
   )
 
-  $: tools = uses.map((tool) => {
-    const href = uses_links[tool.toLowerCase()]
-    if (!href) {
-      console.error(`Unknown tool: ${tool}`)
-    } else if (!href.startsWith(`https`)) {
-      // all tools should have an https URL
-      throw `All tool URLs should use HTTPS: ${tool} has href: ${href}`
-    }
-    return [tool, href]
-  })
+  let tools = $derived(
+    uses.map((tool) => {
+      const href = uses_links[tool.toLowerCase()]
+      if (!href) {
+        console.error(`Unknown tool: ${tool}`)
+      } else if (!href.startsWith(`https`)) {
+        // all tools should have an https URL
+        throw `All tool URLs should use HTTPS: ${tool} has href: ${href}`
+      }
+      return [tool, href]
+    }),
+  )
 </script>
 
 <section>
@@ -48,7 +54,7 @@
     <hr />
     <p class="flex">
       <Icon icon="octicon:star" />&emsp;Stars
-      <span style="flex: 1" />
+      <span style="flex: 1"></span>
       <a href="{site.repo}/stargazers">{repo_stars.toLocaleString()}</a>
     </p>
   {/if}
@@ -72,7 +78,7 @@
           {/each}
         </ol>
       {:else}
-        <span style="flex: 1" />
+        <span style="flex: 1"></span>
         <Person person={contributors[0]} />
       {/if}
     </div>
@@ -81,7 +87,7 @@
     <hr />
     <p class="flex">
       <Icon icon="octicon:project" />&emsp;Project started on
-      <span style="flex: 1" />
+      <span style="flex: 1"></span>
       <Tooltip
         text="{days_since_created} days ago"
         min_width="max-content"
diff --git a/site/src/lib/SiteList.svelte b/site/src/lib/SiteList.svelte
index 9c17d15..00c0f83 100644
--- a/site/src/lib/SiteList.svelte
+++ b/site/src/lib/SiteList.svelte
@@ -7,9 +7,13 @@
   import type { Site } from '.'
   import { SitePreview } from '.'
 
-  export let sites: Site[]
+  interface Props {
+    sites: Site[]
+  }
+
+  let { sites }: Props = $props()
 
-  let active_idx = -1
+  let active_idx = $state(-1)
 
   function handle_keyup(event: KeyboardEvent) {
     if (event.key === `Enter` && active_idx >= 0) {
@@ -29,7 +33,7 @@
   }
 </script>
 
-<svelte:window on:keyup={handle_keyup} />
+<svelte:window onkeyup={handle_keyup} />
 
 <ol use:highlight_matches={{ query: $search, css_class: `highlight-match` }}>
   {#each sites as site, idx (site.url)}
@@ -56,7 +60,7 @@
     border-radius: 1ex;
     padding: 10pt;
   }
-  ol > :is(li:hover, li.active) {
+  ol > :is(:global(li:hover, li.active)) {
     transform: scale(1.01);
     background-color: rgba(255, 255, 255, 0.05);
   }
diff --git a/site/src/lib/SitePreview.svelte b/site/src/lib/SitePreview.svelte
index a603014..d26d54f 100644
--- a/site/src/lib/SitePreview.svelte
+++ b/site/src/lib/SitePreview.svelte
@@ -4,10 +4,13 @@
   import { Screenshot } from '.'
   import { filter_tags } from './stores'
 
-  export let site: Site
-  export let idx: number = 0
-  export let tags: boolean = false
-  export let style: string | null = null
+  interface Props {
+    site: Site
+    idx?: number
+    tags?: boolean
+    style?: string | null
+  }
+  let { site, idx = 0, tags = false, style = null }: Props = $props()
 </script>
 
 <a href={site.slug} {style}>
diff --git a/site/src/routes/+error.svelte b/site/src/routes/+error.svelte
index a09686c..a5b51fc 100644
--- a/site/src/routes/+error.svelte
+++ b/site/src/routes/+error.svelte
@@ -3,7 +3,7 @@
   import { homepage, name } from '$site/package.json'
   import Icon from '@iconify/svelte'
 
-  let online: boolean
+  let online: boolean = $state(true)
 </script>
 
 <svelte:head>
diff --git a/site/src/routes/+layout.svelte b/site/src/routes/+layout.svelte
index cf18f15..9db7ec2 100644
--- a/site/src/routes/+layout.svelte
+++ b/site/src/routes/+layout.svelte
@@ -5,8 +5,12 @@
   import { GitHubCorner } from 'svelte-zoo'
   import '../app.css'
   import sites from '../sites.yml'
+  interface Props {
+    children?: import('svelte').Snippet
+  }
 
-  let innerWidth: number
+  let { children }: Props = $props()
+  let innerWidth: number = $state(0)
 
   const actions = sites.map(({ title, slug }) => {
     return { label: title, action: () => goto(slug) }
@@ -23,4 +27,4 @@
   <base target="_{innerWidth > 600 ? `blank` : `self`}" />
 </svelte:head>
 
-<slot />
+{@render children?.()}
diff --git a/site/src/routes/+page.svelte b/site/src/routes/+page.svelte
index 73bd9bc..0988633 100644
--- a/site/src/routes/+page.svelte
+++ b/site/src/routes/+page.svelte
@@ -14,17 +14,20 @@
   import sites from '../sites.yml'
   import type { Snapshot } from './$types'
 
-  export let data
+  let { data } = $props()
 
   const tags = Object.entries(
     sites
       .flatMap((site) => site.tags)
-      .reduce((acc, el) => {
-        acc[el] = (acc[el] ?? 0) + 1
-        return acc
-      }, {} as Record<string, number>)
+      .reduce(
+        (acc, el) => {
+          acc[el] = (acc[el] ?? 0) + 1
+          return acc
+        },
+        {} as Record<string, number>,
+      ),
   ).filter(([, count]) => count > 2)
-  tags.sort(([a], [b]) => a.localeCompare(b))
+  tags.sort(([t1], [t2]) => t1.localeCompare(t2))
 
   const contributors = Object.entries(
     sites
@@ -32,13 +35,16 @@
         (site) =>
           site.contributors
             ?.map((c) => c.name)
-            .filter((name) => ![null, `Janosh Riebesell`].includes(name)) ?? []
+            .filter((name) => ![null, `Janosh Riebesell`].includes(name)) ?? [],
       )
-      .reduce((acc, el) => {
-        acc[el] = (acc[el] ?? 0) + 1
-        return acc
-      }, {} as Record<string, number>)
-  ).sort((c1, c2) => c2[1] - c1[1])
+      .reduce(
+        (acc, el) => {
+          acc[el] = (acc[el] ?? 0) + 1
+          return acc
+        },
+        {} as Record<string, number>,
+      ),
+  ).sort((contrib1, contrib2) => contrib2[1] - contrib1[1])
 
   function arr_includes(arr: string[], values: string[], mode: `all` | `any`): boolean {
     if (values.length === 0) return true
@@ -48,45 +54,50 @@
     else throw `Unexpected filter mode=${mode}`
   }
 
-  $: filtered_sites = sites.filter((site) => {
-    const query_match = $search?.length === 0 || JSON.stringify(site).includes($search)
-
-    const tag_match = arr_includes(
-      site.tags ?? [],
-      $filter_tags.map((t) => t.label), // tags the site should have
-      $tag_filter_mode // all or any
-    )
-    const contrib_match = arr_includes(
-      site.contributors?.map((c) => c.name) ?? [],
-      $filter_contributors.map((c) => c.label), // contributors the site should have
-      $contributor_filter_mode // all or any
-    )
-
-    return query_match && tag_match && contrib_match
-  })
+  let filtered_sites = $derived(
+    sites.filter((site) => {
+      const query_match = $search?.length === 0 || JSON.stringify(site).includes($search)
+
+      const tag_match = arr_includes(
+        site.tags ?? [],
+        $filter_tags.map((t) => t.label), // tags the site should have
+        $tag_filter_mode, // all or any
+      )
+      const contrib_match = arr_includes(
+        site.contributors?.map((c) => c.name) ?? [],
+        $filter_contributors.map((c) => c.label), // contributors the site should have
+        $contributor_filter_mode, // all or any
+      )
+
+      return query_match && tag_match && contrib_match
+    }),
+  )
 
-  let sort_order: `asc` | `desc` = `desc`
-  $: sort_factor = sort_order == `asc` ? -1 : 1
+  let sort_order: `asc` | `desc` = $state(`desc`)
+  let sort_factor = $derived(sort_order == `desc` ? 1 : -1)
   // arr.sort() sorts in-place but we need to reassign filtered_sites so Svelte rerenders
-  $: if ($sort_by[0] === `GitHub repo stars`) {
-    $sorted_sites = filtered_sites.sort(
-      (siteA, siteB) => sort_factor * ((siteB.repo_stars ?? 0) - (siteA.repo_stars ?? 0))
-    )
-  } else if ($sort_by[0] === `Date created`) {
-    $sorted_sites = filtered_sites.sort(
-      (siteA, siteB) => sort_factor * (+siteB.date_created - +siteA.date_created)
-    )
-  } else if ($sort_by[0] === `Date last updated`) {
-    $sorted_sites = filtered_sites.sort(
-      (siteA, siteB) => sort_factor * (+siteB.last_updated - +siteA.last_updated)
-    )
-  }
+  $effect(() => {
+    if ($sort_by[0] === `GitHub repo stars`) {
+      $sorted_sites = filtered_sites.sort(
+        (siteA, siteB) =>
+          sort_factor * ((siteB.repo_stars ?? 0) - (siteA.repo_stars ?? 0)),
+      )
+    } else if ($sort_by[0] === `Date created`) {
+      $sorted_sites = filtered_sites.sort(
+        (siteA, siteB) => sort_factor * (+siteB.date_created - +siteA.date_created),
+      )
+    } else if ($sort_by[0] === `Date last updated`) {
+      $sorted_sites = filtered_sites.sort(
+        (siteA, siteB) => sort_factor * (+siteB.last_updated - +siteA.last_updated),
+      )
+    }
+  })
 
   const meta_description = `Awesome examples of SvelteKit sites in the wild`
 
   export const snapshot: Snapshot = {
-    capture: () => ({ sort_order, sort_factor }),
-    restore: (values) => ({ sort_order, sort_factor } = values),
+    capture: () => ({ sort_order }),
+    restore: (values) => ({ sort_order } = values),
   }
 </script>
 
@@ -159,7 +170,7 @@
     margin: auto;
     display: block;
   }
-  :where(h1, h2, p) {
+  :where(:global(h1, h2, p)) {
     text-align: center;
     margin: 1em auto;
   }
diff --git a/site/src/routes/[slug]/+page.server.ts b/site/src/routes/[slug]/+page.server.ts
index 1658606..974be90 100644
--- a/site/src/routes/[slug]/+page.server.ts
+++ b/site/src/routes/[slug]/+page.server.ts
@@ -1,12 +1,15 @@
-import { sorted_sites } from '$lib/stores'
+import sites from '$site/src/sites.yml'
 import { error } from '@sveltejs/kit'
-import { get } from 'svelte/store'
+
+export const entries = () => {
+  // Return an array of all possible slug values
+  return sites.map((site) => ({ slug: site.slug }))
+}
 
 export const load = ({ params }) => {
   const { slug } = params
 
-  const sites = get(sorted_sites)
-
+  // TODO revert back to filtered_sites such that PrevNext doesn't navigate to pages the user excluded
   const site = sites.find((site) => site.slug === slug)
 
   if (!site) throw error(404, `Page '${slug}' not found`)
diff --git a/site/src/routes/[slug]/+page.svelte b/site/src/routes/[slug]/+page.svelte
index 71b95fa..ea86160 100644
--- a/site/src/routes/[slug]/+page.svelte
+++ b/site/src/routes/[slug]/+page.svelte
@@ -4,10 +4,10 @@
   import Icon from '@iconify/svelte'
   import { PrevNext } from 'svelte-zoo'
 
-  export let data
+  let { data } = $props()
 
-  $: head_title = `${data.site.title} | Awesome SvelteKit`
-  $: plain_description = data.site?.description?.replace(/<[^>]*>/g, ``)
+  let head_title = $derived(`${data.site.title} | Awesome SvelteKit`)
+  let plain_description = $derived(data.site?.description?.replace(/<[^>]*>/g, ``))
 </script>
 
 <svelte:head>
@@ -31,17 +31,17 @@
   items={data.sites?.map((site) => [site.slug, site])}
   current={data.slug}
   style="max-width: var(--main-max-width);"
-  let:item
-  let:kind
 >
-  <div style="max-width: 250px;">
-    <h3 style="text-align: {kind == `next` && `right`}">
-      <a href={item.slug}>
-        {@html kind == `next` ? `Next &rarr;` : `&larr; Previous`}
-      </a>
-    </h3>
-    <SitePreview site={item} />
-  </div>
+  {#snippet children({ item, kind })}
+    <div style="max-width: 250px;">
+      <h3 style="text-align: {kind == `next` && `right`}">
+        <a href={item.slug}>
+          {@html kind == `next` ? `Next &rarr;` : `&larr; Previous`}
+        </a>
+      </h3>
+      <SitePreview site={item} />
+    </div>
+  {/snippet}
 </PrevNext>
 
 <footer>
diff --git a/site/tests/site.test.ts b/site/tests/site.test.ts
index 723532a..6a66900 100644
--- a/site/tests/site.test.ts
+++ b/site/tests/site.test.ts
@@ -5,38 +5,31 @@ test.describe.configure({ mode: `parallel` })
 
 test(`test search functionality on the landing page`, async ({ page }) => {
   await page.goto(`/`, { waitUntil: `networkidle` })
-  const all = await page.$$(`ol > li > a:has(> img)`)
+  const all_sites = await page.$$(`ol > li > a:has(> img)`)
   await page.fill(`[placeholder='Search...']`, `test`)
   await page.waitForTimeout(1_000)
 
-  const filtered = await page.$$(`ol > li > a:has(> img)`)
-  expect(all.length > filtered.length).toBe(true)
+  const filtered_sites = await page.$$(`ol > li > a:has(> img)`)
+  expect(all_sites.length > filtered_sites.length).toBe(true)
 
   // TODO also test sort functionality
 })
 
 test(`can navigate between detail pages with arrow keys`, async ({ page }) => {
-  // test that the arrow keys don't work on the landing page
   await page.goto(`/`, { waitUntil: `networkidle` })
 
   await page.keyboard.press(`ArrowRight`)
-  // get slugs to first 2 detail pages
-  const [slug_1, slug_2] = await page.$$eval(
-    `ol > li > a:has(> img)`,
-    (cards) => cards.map((card) => card.getAttribute(`href`)),
+
+  // Navigate to first page
+  await page.goto(`/svelte.dev`, { waitUntil: `networkidle` })
+
+  // Get the next URL from the "Next" link
+  const next_url = await page.$eval(`a:has-text("Next")`, (el) =>
+    el.closest(`a`)?.getAttribute(`href`),
   )
 
-  // test that the arrow keys work on detail pages
-  await page.goto(`/${slug_1}`, { waitUntil: `networkidle` })
   await page.keyboard.press(`ArrowRight`)
-  await page.waitForURL(`/${slug_2}`, {
-    waitUntil: `networkidle`,
-  })
-
-  await page.keyboard.press(`ArrowLeft`)
-  await page.waitForURL(`/${slug_1}`, {
-    waitUntil: `networkidle`,
-  })
+  await page.waitForURL(`/${next_url}`)
 })
 
 test(`can navigate landing page with arrow keys`, async ({ page }) => {
@@ -59,3 +52,35 @@ test(`can navigate landing page with arrow keys`, async ({ page }) => {
     waitUntil: `networkidle`,
   })
 })
+
+// Test 404 page
+test(`shows 404 page for invalid slugs`, async ({ page }) => {
+  const response = await page.goto(`/not-a-real-site`, {
+    waitUntil: `networkidle`,
+  })
+
+  expect(response?.status()).toBe(404)
+  await expect(
+    page.locator(`text=Page 'not-a-real-site' not found`),
+  ).toBeVisible()
+})
+
+// Test metadata
+test(`page has correct meta tags`, async ({ page }) => {
+  await page.goto(`/svelte.dev`, { waitUntil: `networkidle` })
+
+  // Check title
+  await expect(page).toHaveTitle(`Svelte.dev | Awesome SvelteKit`)
+
+  // Check meta description
+  const description = await page.$eval(`meta[name="description"]`, (el) =>
+    el.getAttribute(`content`),
+  )
+  expect(description).toBe(`Cybernetically enhanced web apps.`)
+
+  // Check OG tags
+  const og_title = await page.$eval(`meta[property="og:title"]`, (el) =>
+    el.getAttribute(`content`),
+  )
+  expect(og_title).toBe(`Svelte.dev | Awesome SvelteKit`)
+})