📦️ Updated Tailwind to v4, updated hardware to uses

src/components/UsesPage.svelte

@@ -3,30 +3,31 @@
   import * as m from "@/paraglide/messages"
   import CollapseList from "@/components/collapse/CollapseList.svelte"
 
-  export let hardware: any[] = []
+  export let uses: any[] = []
 
-  const hardwareOptions = hardware.map((item) => ({
+  const hardwareOptions = uses.map((item) => ({
     key: item.id,
     value: item.data.title
   }))
 
-  let selectedHardwareKey: string = hardware[0].id
-  $: selectedHardware = hardware.find((item) => item.id === selectedHardwareKey)!
+  let selectedHardwareKey: string = uses[0].id
+  $: selectedHardware = uses.find((item) => item.id === selectedHardwareKey)!
 
   // TODO bind to component
+  // TODO onChange not called
   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" />
   </div>
   <br />
 
-  <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
+  <CollapseList items={selectedHardware.data.hardware} title={m.uses()} />
   <div class="my-2"></div>
   {#if (selectedHardware.data.accessories)}
     <CollapseList items={selectedHardware.data.accessories} title={m.accessories()} />

src/content/config.ts

@@ -16,8 +16,8 @@ const projectCollection = defineCollection({
     })
 })
 
-const hardwareCollection = defineCollection({
-  loader: glob({ pattern: "**\/*.yaml", base: "./src/content/hardware" }),
+const usesCollection = defineCollection({
+  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 server:defer uses={uses} />
 </Layout>

src/styles/global.css

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