stricter link check with lychee, update package.json, pre-commit hooks, site metadata and screenshots

Author: janosh

.github/workflows/link-check.yml

@@ -4,18 +4,21 @@ on:
   workflow_dispatch:
   schedule:
     - cron: '0 0 1 * *' # monthly
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
 
 jobs:
-  markdown-link-check:
+  link-check:
     runs-on: ubuntu-latest
-    if: github.repository_owner == 'janosh'
     steps:
       - name: Check out repo
         uses: actions/checkout@v4
 
-      - name: Run markdown link check
-        uses: gaurav-nelson/github-action-markdown-link-check@v1
-        # docs at https://git.io/JBaKu
+      - name: Discover broken links
+        uses: lycheeverse/lychee-action@v2
         with:
-          # sets status code 500 (Internal Server Error) and 503 (Service Unavailable) as alive
-          config-file: .github/workflows/link-check-config.json
+          args: --exclude '%7B' --exclude-path ./site/src/sites.yml -- ./**/*.{md,svelte,ts,yml}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -12,4 +12,6 @@ jobs:
     uses: janosh/workflows/.github/workflows/npm-test.yml@main
     with:
       working-directory: site
+      test-cmd: ''
       install-e2e: npx playwright install chromium
+      e2e-test-cmd: npx playwright test tests/*.ts

.gitignore

@@ -7,3 +7,6 @@ build
 
 # secrets
 .env
+
+# tests
+test-results

.pre-commit-config.yaml

@@ -31,7 +31,7 @@ repos:
           - svelte
 
   - repo: https://github.com/adrienverge/yamllint
-    rev: v1.35.1
+    rev: v1.37.1
     hooks:
       - id: yamllint
         args: [--config-file, .github/yamllint.yml]
@@ -53,8 +53,16 @@ repos:
         args: [--ignore-words-list, 'ons,linz', --check-filenames]
         stages: [pre-commit, commit-msg]
 
+  - repo: https://github.com/crate-ci/typos
+    rev: v1.32.0
+    hooks:
+      - id: typos
+        types: [text]
+        args: []
+        exclude: ^site/src/sites.yml|.pre-commit-config.yaml$
+
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.20.1
+    rev: v9.27.0
     hooks:
       - id: eslint
         types: [file]

readme.md

@@ -17,31 +17,31 @@
     "test": "playwright test tests/*.test.ts"
   },
   "devDependencies": {
-    "@iconify/svelte": "^4.2.0",
-    "@playwright/test": "^1.50.1",
+    "@iconify/svelte": "^5.0.0",
+    "@playwright/test": "^1.52.0",
     "@rollup/plugin-yaml": "^4.1.2",
-    "@stylistic/eslint-plugin": "^4.0.1",
+    "@stylistic/eslint-plugin": "^4.2.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.17.2",
+    "@sveltejs/kit": "^2.21.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "dotenv": "^16.4.7",
-    "eslint": "^9.20.1",
-    "eslint-plugin-svelte": "^2.46.1",
+    "dotenv": "^16.5.0",
+    "eslint": "^9.27.0",
+    "eslint-plugin-svelte": "^3.8.1",
     "js-yaml": "^4.1.0",
-    "marked": "^15.0.7",
-    "prettier": "^3.5.1",
-    "prettier-plugin-svelte": "^3.3.3",
-    "puppeteer": "^24.2.1",
-    "sharp": "^0.33.5",
-    "svelte": "^5.20.2",
-    "svelte-check": "^4.1.4",
-    "svelte-multiselect": "11.0.0-rc.1",
+    "marked": "^15.0.11",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.4.0",
+    "puppeteer": "^24.8.2",
+    "sharp": "^0.34.1",
+    "svelte": "^5.30.2",
+    "svelte-check": "^4.2.1",
+    "svelte-multiselect": "11.1.0",
     "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"
+    "svelte-zoo": "^0.4.18",
+    "svelte2tsx": "^0.7.39",
+    "typescript": "5.8.3",
+    "typescript-eslint": "^8.32.1",
+    "vite": "^6.3.5"
   },
   "keywords": [
     "sveltekit",

site/package.json

@@ -4,12 +4,11 @@
   interface Props {
     contributors: RepoContributor[]
   }
-
   let { contributors }: Props = $props()
 </script>
 
 <ul class="contributors">
-  {#each contributors as { avatar_url, html_url, login }}
+  {#each contributors as { avatar_url, html_url, login } (JSON.stringify(login))}
     <li>
       <a href={html_url}>
         <img src={avatar_url} alt={login} />

site/src/lib/ContributorList.svelte

@@ -14,8 +14,10 @@
 
   const slugify = (title: string) => title.toLowerCase().replaceAll(` `, `-`)
 
-  const base = `https://raw.githubusercontent.com/janosh/awesome-sveltekit/main/site/static`
-  let src = $derived(`${dev ? `` : base}/screenshots/${slugify(title)}${resolution}.avif`)
+  const base_url = `https://github.com/janosh/awesome-sveltekit/raw/main/site/static`
+  let src = $derived(
+    `${dev ? `` : base_url}/screenshots/${slugify(title)}${resolution}.avif`,
+  )
 </script>
 
 <img {src} alt="Screenshot of {title}" {width} {height} {style} />

site/src/lib/Screenshot.svelte

@@ -71,7 +71,7 @@
       {/if}
       {#if contributors.length > 1}
         <ol class="contributors">
-          {#each contributors as person}
+          {#each contributors as person (person.name)}
             <li>
               <Person {person} />
             </li>
@@ -105,7 +105,7 @@
     <hr />
     <p class="tags flex">
       <Icon icon="octicon:tag" />&ensp;Tags&emsp;
-      {#each tags as tag}
+      {#each tags as tag (tag)}
         <span>{tag}</span>
       {/each}
     </p>
@@ -114,7 +114,7 @@
     <hr />
     <p class="uses flex">
       <Icon icon="octicon:stack-16" />&ensp;Uses&emsp;
-      {#each tools as [tool, href]}
+      {#each tools as [tool, href] (tool)}
         <a {href}>{tool}</a>
       {/each}
     </p>

site/src/lib/SiteDetails.svelte

@@ -8,12 +8,12 @@
     site: Site
     idx?: number
     tags?: boolean
-    style?: string | null
+    [key: string]: unknown
   }
-  let { site, idx = 0, tags = false, style = null }: Props = $props()
+  let { site, idx = 0, tags = false, ...rest }: Props = $props()
 </script>
 
-<a href={site.slug} {style}>
+<a href={site.slug} {...rest}>
   <Screenshot title={site.title} resolution=".small" style="cursor: pointer;" />
 </a>
 <div class="flex">
@@ -30,7 +30,7 @@
 {#if tags}
   <p class="tags flex">
     <Icon icon="octicon:tag" style="margin: 0 1ex 0 0;" />
-    {#each site.tags as tag}
+    {#each site.tags as tag (tag)}
       <small class:active={$filter_tags.find((t) => t.label === tag)}>
         {tag}
       </small>