👽️ Updated legacy svelte components to runes

astro.config.mjs

@@ -1,7 +1,7 @@
 // @ts-check
 import { defineConfig, envField } from "astro/config"
 import paraglide from "@inlang/paraglide-astro"
-import tailwind from "@astrojs/tailwind"
+import tailwindcss from "@tailwindcss/vite"
 import sitemap from "@astrojs/sitemap"
 import svelte from "@astrojs/svelte"
 import node from "@astrojs/node"
@@ -20,10 +20,9 @@ export default defineConfig({
   output: "server",
   i18n: {
     defaultLocale: "nb",
-    locales: ["nb", "en"]
+    locales: ["nb", "en"],
   },
   integrations: [
-    tailwind(),
     sitemap(),
     mdx(),
     svelte(),
@@ -31,18 +30,21 @@ export default defineConfig({
     paraglide({
       // recommended settings
       project: "./project.inlang",
-      outdir: "./src/paraglide" //where your files should be
+      outdir: "./src/paraglide", //where your files should be
-    })
+    }),
   ],
   adapter: node({
-    mode: "standalone"
+    mode: "standalone",
   }),
+  vite: {
+    plugins: [tailwindcss()],
+  },
   env: {
     schema: {
       DOMAIN: envField.string({ context: "client", access: "public" }),
       URL: envField.string({ context: "client", access: "public" }),
       GIT_URL: envField.string({ context: "client", access: "public" }),
-      STATUS_URL: envField.string({ context: "client", access: "public" })
+      STATUS_URL: envField.string({ context: "client", access: "public" }),
-    }
+    },
-  }
+  },
 })

messages/en.json

@@ -7,6 +7,7 @@
   "contactMe": "Contact me",
   "myLinks": "My links",
   "myProjects": "My projects",
+  "uses": "Uses",
   "hardware": "Hardware",
   "accessories": "Accessories",
   "sourceCode": "Source code",

messages/nb.json

@@ -7,6 +7,7 @@
   "contactMe": "Kontakt meg",
   "myLinks": "Mine lenker",
   "myProjects": "Mine prosjekter",
+  "uses": "Uses",
   "hardware": "Maskinvare",
   "accessories": "Tilbehør",
   "sourceCode": "Kildekode",

package.json

@@ -8,34 +8,35 @@
     "build": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide && astro check && astro build",
     "preview": "astro preview",
     "astro": "astro",
+    "type-check": "astro check",
     "postinstall": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide",
     "format": "prettier --write \"./src/**/*.{js,mjs,ts,astro,svelte,css,md,json}\"",
     "watch-messages": "paraglide-js compile --watch --project ./project.inlang --outdir ./src/paraglide"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^4.0.6",
+    "@astrojs/mdx": "^4.0.8",
-    "@astrojs/node": "9.0.1",
+    "@astrojs/node": "9.1.0",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/svelte": "^7.0.3",
+    "@astrojs/svelte": "^7.0.4",
-    "@astrojs/tailwind": "^5.1.4",
+    "@iconify-json/pajamas": "^1.2.5",
-    "@iconify-json/pajamas": "^1.2.4",
     "@inlang/paraglide-astro": "^0.3.5",
     "@inlang/paraglide-js": "1.11.8",
     "@tailwindcss/typography": "^0.5.16",
-    "astro": "5.1.7",
+    "@tailwindcss/vite": "^4.0.6",
+    "astro": "5.3.0",
     "astro-icon": "^1.1.5",
     "sharp": "^0.33.5",
-    "svelte": "^5.19.0",
+    "svelte": "^5.20.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.6",
     "typescript": "^5.7.3"
   },
   "devDependencies": {
-    "daisyui": "^4.12.23",
+    "daisyui": "^5.0.0-beta.8",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.1",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-svelte": "^3.3.3",
-    "vite": "^6.0.7"
+    "vite": "^6.1.0"
   },
   "prettier": {
     "semi": false,

src/components/Select.svelte

@@ -1,20 +1,23 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte"
 
   // TODO move to types?
-  interface Option {
+  interface Option<Key> {
-    key: string
+    key: Key
     value: string
   }
 
-  export let options: Option[] = []
+  interface Props<Key = string> {
-  // TODO bind data instead of dispatching events
+    selected: Key
-  const dispatch = createEventDispatcher<{ change: string }>()
+    options?: Option<Key>[]
+    class?: string
+  }
+
+  let { selected = $bindable(), options = [], class: clazz }: Props = $props()
 </script>
 
 <select
-  class="select select-bordered w-full max-w-xs ${$$restProps.class}"
+  bind:value={selected}
-  on:change={(value) => dispatch("change", value.currentTarget.value)}
+  class="select select-bordered w-full max-w-xs ${clazz}"
 >
   {#each options as { key, value }}
     <option value={key}>{value}</option>

src/components/UsesPage.svelte

@@ -2,27 +2,28 @@
   import Select from "./Select.svelte"
   import * as m from "@/paraglide/messages"
   import CollapseList from "@/components/collapse/CollapseList.svelte"
+  import type { CollectionEntry } from "astro:content"
 
-  export let hardware: any[] = []
+  interface Props {
+    uses: CollectionEntry<'uses'>[]
+  }
 
-  const hardwareOptions = hardware.map((item) => ({
+  const { uses }: Props = $props()
+
+  const hardwareOptions = uses.map((item) => ({
     key: item.id,
     value: item.data.title
   }))
 
-  let selectedHardwareKey: string = hardware[0].id
+  let selectedHardwareKey = $state(uses[0].id)
-  $: selectedHardware = hardware.find((item) => item.id === selectedHardwareKey)!
+  let selectedHardware = $derived(uses.find((item) => item.id === selectedHardwareKey)!)
-
-  // TODO bind to component
-  function onChange({ detail }: CustomEvent<string>) {
-    selectedHardwareKey = detail
-  }
 
 </script>
+
 <div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
-  <h1 class="text-center">{m.hardware()}</h1>
+  <h1 class="text-center">{m.uses()}</h1>
   <div>
-    <Select options={hardwareOptions} on:change={onChange} class="mx-auto w-max" />
+    <Select options={hardwareOptions} bind:selected={selectedHardwareKey} class="mx-auto w-max" />
   </div>
   <br />
 

src/components/collapse/Collapse.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
-  export let title: string = ""
+
+  interface Props {
+    title?: string
+    children: any
+  }
+
+  const { title = "", children }: Props = $props()
 </script>
 
 <details class="collapse collapse-arrow bg-base-200">
   <summary class="collapse-title text-xl font-medium">{title}</summary>
   <div class="collapse-content">
-    <slot />
+    {@render children()}
   </div>
 </details>

src/components/collapse/CollapseList.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
   import Collapse from "@/components/collapse/Collapse.svelte"
 
-  export let items: string[] = []
+  interface Props {
-  export let title: string = ""
+    items?: string[]
+    title?: string
+  }
 
+  const { items = [], title = "" }: Props = $props()
 </script>
 
 <Collapse title={title}>

src/content/config.ts

@@ -16,8 +16,8 @@ const projectCollection = defineCollection({
     })
 })
 
-const hardwareCollection = defineCollection({
+const usesCollection = defineCollection({
-  loader: glob({ pattern: "**\/*.yaml", base: "./src/content/hardware" }),
+  loader: glob({ pattern: "**\/*.yaml", base: "./src/content/uses" }),
   schema: z.object({
     title: z.string(),
     accessories: z.optional(z.array(z.string())),
@@ -27,5 +27,5 @@ const hardwareCollection = defineCollection({
 
 export const collections = {
   projects: projectCollection,
-  hardware: hardwareCollection
+  uses: usesCollection
 }

src/content/uses/desktop.yaml

@@ -3,7 +3,7 @@ accessories:
   - Gaming chair | Arozzi Mezzo V2 Gaming chair Fabric Black/Red # https://www.komplett.no/product/1079732?noredirect=true
   - Headset | Logitech PRO X LIGHTSPEED Wireless Gaming Headset # https://www.komplett.no/product/1162749?noredirect=true
   - Keyboard | Keychron K8 Pro QMK/VIA RGB Gateron Red # https://www.komplett.no/product/1303473/gaming/gaming-utstyr/gamingtastatur/keychron-k8-pro-qmkvia-rgb-gateron-red-traadloest-gamingtastatur-sort
-  - Monitor 1 | AOC 27" LED FreeSync G2790PX # https://www.komplett.no/product/975642?noredirect=true
+  - Monitor 1 | Philips 34" 34M2C6500/00 # https://www.komplett.no/product/1307753/gaming/gaming-utstyr/gamingskjermer/philips-34-gamingskjerm-34m2c650000
   - Monitor 2 | Asus 28" 4K LED PB287Q # https://www.komplett.no/product/815114?noredirect=true
   - Mouse | Logitech G502 HERO Gaming Mouse
   - Mousepad | Svive Styx ESGR Gaming Mousepad XXL # https://www.komplett.no/product/985884?noredirect=true

src/content/uses/homelab.yaml

@@ -1,3 +1,3 @@
-title: Home Server
+title: Homelab
 hardware:
   - b # Graphics cards, CPUs, etc.

src/links.ts

@@ -20,7 +20,7 @@ const Links: Link[] = [
     to: "/links"
   },
   {
-    label: m.hardware,
+    label: m.uses,
     to: "/uses"
   },
   {

src/pages/404.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro"
+import "@/styles/global.css"
 ---
 
 <Layout title="404">

src/pages/en/index.astro

@@ -1,6 +1,7 @@
 ---
 import OnePager from "../../components/Greeting.astro"
 import Layout from "../../layouts/Layout.astro"
+import "@/styles/global.css"
 ---
 
 <Layout title="Welcome">

src/pages/en/links.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from "@/layouts/Layout.astro"
 import LinksPage from "@/components/myLinks/LinksPage.astro"
+import "@/styles/global.css"
 ---
 <Layout title="My links">
   <LinksPage />

src/pages/en/projects/[project].astro

@@ -1,6 +1,7 @@
 ---
 import ProjectPage from "@/components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
+import "@/styles/global.css"
 
 // Prerender the page as static HTML during build
 export const prerender = true

src/pages/en/projects/index.astro

@@ -2,6 +2,7 @@
 import { getCollection } from "astro:content"
 import Layout from "@/layouts/Layout.astro"
 import MyProjectsPage from "@/components/projects/MyProjectsPage.astro"
+import "@/styles/global.css"
 
 const projects = await getCollection("projects")
 ---

src/pages/en/uses.astro

@@ -1,12 +1,12 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import HardwarePage from "@/components/HardwarePage.svelte"
+import UsesPage from "@/components/UsesPage.svelte"
 import "@/styles/global.css"
 import { getCollection } from "astro:content"
 
-const hardware = await getCollection("hardware")
+const uses = await getCollection("uses")
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <HardwarePage server:defer hardware={hardware} />
+  <UsesPage server:defer uses={uses} />
 </Layout>

src/pages/index.astro

@@ -1,6 +1,9 @@
 ---
 import Layout from "../layouts/Layout.astro"
 import Greeting from "../components/Greeting.astro"
+
+// https://slashpages.net/
+
 ---
 
 <Layout title="Velkommen">

src/pages/links.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from "@/layouts/Layout.astro"
 import LinksPage from "@/components/myLinks/LinksPage.astro"
+import "@/styles/global.css"
 ---
 <Layout title="Mine lenker">
   <LinksPage />

src/pages/projects/[project].astro

@@ -1,6 +1,7 @@
 ---
 import ProjectPage from "@/components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
+import "@/styles/global.css"
 
 // Prerender the page as static HTML during build
 export const prerender = true

src/pages/projects/index.astro

@@ -2,6 +2,7 @@
 import { getCollection } from "astro:content"
 import Layout from "@/layouts/Layout.astro"
 import MyProjectsPage from "@/components/projects/MyProjectsPage.astro"
+import "@/styles/global.css"
 
 const projects = await getCollection("projects")
 ---

src/pages/uses.astro

@@ -1,12 +1,12 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import HardwarePage from "@/components/HardwarePage.svelte"
+import UsesPage from "@/components/UsesPage.svelte"
 import "@/styles/global.css"
 import { getCollection } from "astro:content"
 
-const hardware = await getCollection("hardware")
+const uses = await getCollection("uses")
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <HardwarePage server:defer hardware={hardware} />
+  <UsesPage client:load uses={uses} />
 </Layout>

src/styles/global.css

@@ -1,6 +1,6 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+@plugin "@tailwindcss/typography";
-@tailwind utilities;
+@plugin "daisyui";
 
 @layer utilities {
     .debug {

tailwind.config.mjs

@@ -1,8 +0,0 @@
-/** @type {import("tailwindcss").Config} */
-export default {
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-  theme: {
-    extend: {}
-  },
-  plugins: [require("@tailwindcss/typography"), require("daisyui")]
-}