update linting and fix dead links

Author: janosh

.github/workflows/test.yml

@@ -9,6 +9,6 @@ on:
 
 jobs:
   tests:
-    uses: janosh/workflows/.github/workflows/npm-test-release.yml@main
+    uses: janosh/workflows/.github/workflows/npm-test.yml@main
     with:
       working-directory: site

.pre-commit-config.yaml

@@ -2,7 +2,7 @@ ci:
   autoupdate_schedule: quarterly
   skip: [eslint]
 
-default_stages: [commit]
+default_stages: [pre-commit]
 
 default_install_hook_types: [pre-commit, commit-msg]
 
@@ -37,7 +37,7 @@ repos:
         args: [--config-file, .github/yamllint.yml]
 
   - repo: https://github.com/igorshubovych/markdownlint-cli
-    rev: v0.42.0
+    rev: v0.44.0
     hooks:
       - id: markdownlint
         # MD013: line too long
@@ -46,26 +46,28 @@ repos:
         args: [--disable, MD013, MD033, MD041, '--']
 
   - repo: https://github.com/codespell-project/codespell
-    rev: v2.3.0
+    rev: v2.4.1
     hooks:
       - id: codespell
         exclude: ^site/src/sites.yml$
         args: [--ignore-words-list, 'ons,linz', --check-filenames]
-        stages: [commit, commit-msg]
+        stages: [pre-commit, commit-msg]
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.15.0
+    rev: v9.19.0
     hooks:
       - id: eslint
         types: [file]
         args: [--fix, --config, site/eslint.config.js]
         files: \.(js|ts|svelte)$
         additional_dependencies:
+          - 'typescript-eslint'
           - eslint
           - eslint-plugin-svelte
+          - globals
           - svelte
           - typescript
-          - typescript-eslint
+          - '@stylistic/eslint-plugin'
 
   - repo: local
     hooks:

readme.md

@@ -59,7 +59,7 @@ Awesome examples of SvelteKit in the wild. Visit **[janosh.github.io/awesome-sve
    uses: [PNPM], [TypeScript], [Tailwind], [sveltekit-i18n], [PostCSS], [Husky]
 
 1. **[Official SvelteKit docs](https://kit.svelte.dev)** 
-   [[code](https://github.com/sveltejs/kit/blob/-/sites/kit.svelte.dev)] 
+   [[code](https://github.com/sveltejs/kit/tree/main/documentation/docs)] 
    <a href="https://github.com/sveltejs/kit/stargazers">
    <img src="https://img.shields.io/github/stars/sveltejs/kit?logo=github" alt="GitHub stars" valign="middle">
    </a>
@@ -109,7 +109,7 @@ Awesome examples of SvelteKit in the wild. Visit **[janosh.github.io/awesome-sve
    uses: [Vitest], [PostCSS], [highlight.js], [Tailwind], [Typescript], [jsdom]
 
 1. **[shadcn-svelte](https://shadcn-svelte.com)**&nbsp;
-   [[code](https://github.com/huntabyte/shadcn-svelte/blob/-/apps/www)]&ensp;
+   [[code](https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs)]&ensp;
    <a href="https://github.com/huntabyte/shadcn-svelte/stargazers">
    <img src="https://img.shields.io/github/stars/huntabyte/shadcn-svelte?logo=github" alt="GitHub stars" valign="middle">
    </a>
@@ -188,7 +188,7 @@ Awesome examples of SvelteKit in the wild. Visit **[janosh.github.io/awesome-sve
 
    uses: [TypeScript], [Three.js], [Tailwind], [PostCSS], [Algolia], [Iconify]
 
-1. **[svelte-realworld](https://realworld.svelte.dev)**&nbsp;
+1. **[svelte-realworld](https://github.com/gothinkster/realworld)**&nbsp;
    [[code](https://github.com/sveltejs/realworld)]&ensp;
    <a href="https://github.com/sveltejs/realworld/stargazers">
    <img src="https://img.shields.io/github/stars/sveltejs/realworld?logo=github" alt="GitHub stars" valign="middle">
@@ -324,7 +324,7 @@ Awesome examples of SvelteKit in the wild. Visit **[janosh.github.io/awesome-sve
    <img src="https://img.shields.io/github/stars/kbrgl/svelte-french-toast?logo=github" alt="GitHub stars" valign="middle">
    </a>
 
-   Svelte port of Timo Lins&#39; react-hot-toast, a lightweight, customizable toast notification library.<br>
+   Svelte port of react-hot-toast, a lightweight, customizable toast notification library.<br>
 
    uses: [TypeScript], [Prism], [Tailwind], [PostCSS], [PNPM]
 
@@ -348,7 +348,7 @@ Awesome examples of SvelteKit in the wild. Visit **[janosh.github.io/awesome-sve
 
    uses: [TypeScript], [tRPC]
 
-1. **[Cryptgeon](https://cryptgeon.nicco.io)**&nbsp;
+1. **[Cryptgeon](https://cryptgeon.org)**&nbsp;
    [[code](https://github.com/cupcakearmy/cryptgeon/blob/-/packages/frontend)]&ensp;
    <a href="https://github.com/cupcakearmy/cryptgeon/stargazers">
    <img src="https://img.shields.io/github/stars/cupcakearmy/cryptgeon?logo=github" alt="GitHub stars" valign="middle">
@@ -468,7 +468,7 @@ Awesome examples of SvelteKit in the wild. Visit **[janosh.github.io/awesome-sve
 
    uses: [GitHub API], [Monaco], [Playwright], [Google Analytics], [Supabase], [Vercel], [PNPM], [Sass], [TypeScript], [remark], [rehype]
 
-1. **[Watch This](https://what-to-watch-roan.vercel.app)**&nbsp;
+1. **[Watch This](https://github.com/StephDietz/watch-this/issues/28)**&nbsp;
    [[code](https://github.com/StephDietz/watch-this)]&ensp;
    <a href="https://github.com/StephDietz/watch-this/stargazers">
    <img src="https://img.shields.io/github/stars/StephDietz/watch-this?logo=github" alt="GitHub stars" valign="middle">
@@ -558,6 +558,16 @@ Awesome examples of SvelteKit in the wild. Visit **[janosh.github.io/awesome-sve
 
    uses: [Vitest], [Playwright], [Typescript], [PNPM], [pre-commit], [rehype], [jsdom], [GitHub Pages], [mdsvexamples]
 
+1. **[Scientific Diagrams](https://janosh.github.io/diagrams)**&nbsp;
+   [[code](https://github.com/janosh/diagrams)]&ensp;
+   <a href="https://github.com/janosh/diagrams/stargazers">
+   <img src="https://img.shields.io/github/stars/janosh/diagrams?logo=github" alt="GitHub stars" valign="middle">
+   </a>
+
+   100+ MIT-licensed scientific diagrams created with CeTZ (Typst) and/or TikZ (LaTeX). Mostly about physics, chemistry, and machine learning.<br>
+
+   uses: [TypeScript], [svelte-multiselect], [pre-commit], [PNPM], [svelte-enhanced-img]
+
 1. **[SvelteKit on Edge](https://sveltekit-on-the-edge.vercel.app)**&nbsp;
    [[code](https://github.com/Rich-Harris/sveltekit-on-the-edge)]&ensp;
    <a href="https://github.com/Rich-Harris/sveltekit-on-the-edge/stargazers">
@@ -598,16 +608,6 @@ Awesome examples of SvelteKit in the wild. Visit **[janosh.github.io/awesome-sve
 
    uses: [TypeScript], [PNPM], [Vercel], [MDsveX], [Tailwind], [PostCSS], [Husky], [Playwright], [DaisyUI]
 
-1. **[TikZ](https://janosh.github.io/tikz)**&nbsp;
-   [[code](https://github.com/janosh/tikz)]&ensp;
-   <a href="https://github.com/janosh/tikz/stargazers">
-   <img src="https://img.shields.io/github/stars/janosh/tikz?logo=github" alt="GitHub stars" valign="middle">
-   </a>
-
-   Random collection of MIT-licensed standalone TikZ images, mostly about physics and machine learning.<br>
-
-   uses: [TypeScript], [svelte-multiselect], [pre-commit], [PNPM], [GitHub Pages]
-
 1. **[Hexapipes](https://hexapipes.vercel.app)**&nbsp;
    [[code](https://github.com/gereleth/hexapipes)]&ensp;
    <a href="https://github.com/gereleth/hexapipes/stargazers">
@@ -971,6 +971,7 @@ Awesome examples of SvelteKit in the wild. Visit **[janosh.github.io/awesome-sve
 [superforms]: https://github.com/ciscoheat/sveltekit-superforms
 [surge.sh]: https://surge.sh
 [svelte forms lib]: https://github.com/tjinauyeung/svelte-forms-lib
+[svelte-enhanced-img]: https://svelte.dev/docs/kit/images#sveltejs-enhanced-img
 [svelte-highlight]: https://github.com/metonym/svelte-highlight
 [svelte-intl-precompile]: https://github.com/cibernox/svelte-intl-precompile
 [svelte-markdown]: https://github.com/pablo-abc/svelte-markdown

site/eslint.config.js

@@ -1,17 +1,19 @@
+import stylistic from '@stylistic/eslint-plugin'
 import svelte from 'eslint-plugin-svelte'
 import tslint from 'typescript-eslint'
 
-/** @type { import("eslint").Linter.FlatConfig[] } */
+/** @type { import("eslint").Linter.Config[] } */
 export default [
   ...tslint.configs.recommended,
   ...svelte.configs[`flat/recommended`],
+  { plugins: { '@stylistic': stylistic } },
   {
     rules: {
       '@typescript-eslint/no-unused-vars': [
         `error`,
         { argsIgnorePattern: `^_`, varsIgnorePattern: `^_` },
       ],
-      '@typescript-eslint/quotes': [`error`, `backtick`, { avoidEscape: true }],
+      '@stylistic/quotes': [`error`, `backtick`, { avoidEscape: true }],
       'svelte/no-at-html-tags': `off`,
     },
   },
@@ -27,6 +29,6 @@ export default [
     },
   },
   {
-    ignores: [`build/`],
+    ignores: [`build/`, `.svelte-kit/`, `package/`],
   },
 ]

site/package.json

@@ -20,6 +20,7 @@
     "@iconify/svelte": "^4.0.2",
     "@playwright/test": "^1.47.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",

site/src/lib/Filters.svelte

@@ -12,7 +12,7 @@
 
   export let tags: [string, number][]
   export let contributors: [string, number][]
-  export let sort_order: 'asc' | 'desc' = `desc`
+  export let sort_order: `asc` | `desc` = `desc`
 </script>
 
 <div class="filters">
@@ -24,7 +24,7 @@
       bind:selected={$filter_tags}
     >
       <span slot="option" let:option style="display: flex;">
-        {option.label} <span style="flex: 1;" />
+        {option.label} <span style="flex: 1;"></span>
         {option.count}
       </span>
     </MultiSelect>
@@ -39,7 +39,7 @@
       bind:selected={$filter_contributors}
     >
       <span slot="option" let:option style="display: flex;">
-        {option.label} <span style="flex: 1;" />
+        {option.label} <span style="flex: 1;"></span>
         {option.count}
       </span>
     </MultiSelect>

site/src/lib/Screenshot.svelte

@@ -6,7 +6,7 @@
   export let width = 800
   export let height = 600
   export let style = ``
-  export let resolution: '.small' | '' = ``
+  export let resolution: `.small` | `` = ``
 
   const titleToSlug = (title: string) => title.toLowerCase().replaceAll(` `, `-`)
 

site/src/lib/index.ts

@@ -46,6 +46,6 @@ export type RepoContributor = {
   url: string
   html_url: string
   repos_url: string
-  type: 'User' | 'Bot'
+  type: `User` | `Bot`
   contributions: number
 }

site/src/routes/+page.svelte

@@ -40,7 +40,7 @@
       }, {} as Record<string, number>)
   ).sort((c1, c2) => c2[1] - c1[1])
 
-  function arr_includes(arr: string[], values: string[], mode: 'all' | 'any'): boolean {
+  function arr_includes(arr: string[], values: string[], mode: `all` | `any`): boolean {
     if (values.length === 0) return true
     if (arr.length === 0) return false
     if (mode === `all`) return values.every((val) => arr.includes(val))
@@ -65,7 +65,7 @@
     return query_match && tag_match && contrib_match
   })
 
-  let sort_order: 'asc' | 'desc' = `desc`
+  let sort_order: `asc` | `desc` = `desc`
   $: sort_factor = sort_order == `asc` ? -1 : 1
   // arr.sort() sorts in-place but we need to reassign filtered_sites so Svelte rerenders
   $: if ($sort_by[0] === `GitHub repo stars`) {

site/src/sites.yml

@@ -61,7 +61,7 @@
 - title: Official SvelteKit docs
   url: https://kit.svelte.dev
   repo: https://github.com/sveltejs/kit
-  site_src: https://github.com/sveltejs/kit/blob/-/sites/kit.svelte.dev
+  site_src: https://github.com/sveltejs/kit/tree/main/documentation/docs
   npm: https://npmjs.com/package/@sveltejs/kit
   description: The fastest way to build Svelte apps.
   uses:
@@ -136,12 +136,12 @@
       name: Martin Krisnanto Putra
       location: Tokyo, Japan
       company: null
-- title: TikZ
-  url: https://janosh.github.io/tikz
-  repo: https://github.com/janosh/tikz
+- title: Scientific Diagrams
+  url: https://janosh.github.io/diagrams
+  repo: https://github.com/janosh/diagrams
   description: >-
-    Random collection of MIT-licensed standalone TikZ images, mostly about
-    physics and machine learning.
+    100+ MIT-licensed scientific diagrams created with CeTZ (Typst) and/or TikZ
+    (LaTeX). Mostly about physics, chemistry, and machine learning.
   tags:
     - diagrams
     - graphics
@@ -154,14 +154,14 @@
     - svelte-multiselect
     - pre-commit
     - PNPM
-    - GitHub Pages
+    - svelte-enhanced-img
   date_created: 2020-08-09T00:00:00.000Z
   date_added: 2021-05-25T00:00:00.000Z
-  slug: tikz
-  repo_stars: 189
+  slug: scientific-diagrams
+  repo_stars: 225
   contributors:
     - github: janosh
-      twitter: jrib_
+      twitter: null
       url: https://janosh.dev
       avatar: https://avatars.githubusercontent.com/u/30958850?v=4
       name: Janosh Riebesell
@@ -940,7 +940,7 @@
       location: France
       company: null
 - title: svelte-realworld
-  url: https://realworld.svelte.dev
+  url: https://github.com/gothinkster/realworld
   repo: https://github.com/sveltejs/realworld
   description: SvelteKit implementation of the RealWorld app.
   uses:
@@ -1748,7 +1748,7 @@
       location: Irvine, CA
       company: Latitude
 - title: Cryptgeon
-  url: https://cryptgeon.nicco.io
+  url: https://cryptgeon.org
   repo: https://github.com/cupcakearmy/cryptgeon
   site_src: https://github.com/cupcakearmy/cryptgeon/blob/-/packages/frontend
   description: >-
@@ -1931,8 +1931,8 @@
   url: https://svelte-french-toast.com
   repo: https://github.com/kbrgl/svelte-french-toast
   description: >-
-    Svelte port of Timo Lins' react-hot-toast, a lightweight, customizable
-    toast notification library.
+    Svelte port of react-hot-toast, a lightweight, customizable toast
+    notification library.
   uses:
     - TypeScript
     - Prism
@@ -2533,7 +2533,7 @@
       location: null
       company: null
 - title: Watch This
-  url: https://what-to-watch-roan.vercel.app
+  url: https://github.com/StephDietz/watch-this/issues/28
   repo: https://github.com/StephDietz/watch-this
   description: >-
     Uses OpenAI GPT-3 API and streaming Vercel edge functions to generate cinema
@@ -2767,7 +2767,7 @@
       company: null
 - title: shadcn-svelte
   url: https://shadcn-svelte.com
-  site_src: https://github.com/huntabyte/shadcn-svelte/blob/-/apps/www
+  site_src: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs
   repo: https://github.com/huntabyte/shadcn-svelte
   description: shadcn/ui, but for Svelte.
   uses: