🎨 Format files, Added codeberg to links,lighter colour for linkcards

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,11 +7,13 @@
   "contactMe": "Contact me",
   "myLinks": "My links",
   "myProjects": "My projects",
+  "uses": "Uses",
   "hardware": "Hardware",
   "accessories": "Accessories",
   "sourceCode": "Source code",
   "createdAt": "Created at",
   "updatedAt": "Updated at",
+  "forMirrors": "For mirrors of Gitea",
   "forPersonalProjects": "For personal projects",
   "status": "Status",
   "name": "Name",

messages/nb.json

@@ -7,11 +7,13 @@
   "contactMe": "Kontakt meg",
   "myLinks": "Mine lenker",
   "myProjects": "Mine prosjekter",
+  "uses": "Uses",
   "hardware": "Maskinvare",
   "accessories": "Tilbehør",
   "sourceCode": "Kildekode",
   "createdAt": "Opprettet",
   "updatedAt": "Oppdatert",
+  "forMirrors": "For mirrors av Gitea",
   "forPersonalProjects": "For personlige prosjekter",
   "status": "Status",
   "name": "Navn",

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.0-beta.2",
-    "@astrojs/node": "9.0.0-beta.2",
+    "@astrojs/mdx": "^4.0.8",
+    "@astrojs/node": "9.1.0",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/svelte": "6.0.0-beta.1",
-    "@astrojs/tailwind": "^5.1.2",
-    "@iconify-json/pajamas": "^1.2.3",
-    "@inlang/paraglide-astro": "^0.2.2",
-    "@inlang/paraglide-js": "1.11.2",
-    "@tailwindcss/typography": "^0.5.15",
-    "astro": "5.0.0-beta.5",
-    "astro-icon": "^1.1.1",
+    "@astrojs/svelte": "^7.0.4",
+    "@iconify-json/pajamas": "^1.2.5",
+    "@inlang/paraglide-astro": "^0.3.5",
+    "@inlang/paraglide-js": "1.11.8",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.6",
+    "astro": "5.3.0",
+    "astro-icon": "^1.1.5",
     "sharp": "^0.33.5",
-    "svelte": "^4.2.19",
-    "tailwindcss": "^3.4.13",
-    "typescript": "^5.6.3"
+    "svelte": "^5.20.1",
+    "tailwindcss": "^4.0.6",
+    "typescript": "^5.7.3"
   },
   "devDependencies": {
-    "daisyui": "^4.12.13",
-    "prettier": "^3.3.3",
+    "daisyui": "^5.0.0-beta.8",
+    "prettier": "^3.5.1",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-svelte": "^3.2.7",
-    "vite": "^5.4.8"
+    "prettier-plugin-svelte": "^3.3.3",
+    "vite": "^6.1.0"
   },
   "prettier": {
     "semi": false,

src/components/ContactMeForm.astro

@@ -4,14 +4,20 @@ import * as m from "@/paraglide/messages.js"
 // TODO self-host email server
 ---
 
-<form class="flex flex-col gap-2 max-w-[500px] mx-auto" method="post" action="https://formspree.io/f/mknykgbn">
+<form
+  class="flex flex-col gap-2 max-w-[500px] mx-auto"
+  method="post"
+  action="https://formspree.io/f/mknykgbn"
+>
   <Input label={m.name()} type="text" name="name" required />
   <Input label={m.subject()} name="subject" required />
   <Input label={m.email()} name="_replyto" />
-  <input name="_gotcha" type="text" class={"hidden"} /> { /*Honeypot spam filter*/}
+  <input name="_gotcha" type="text" class={"hidden"} />
+  {/*Honeypot spam filter*/}
   <label class="flex flex-col">
     {m.message()}
-    <textarea name="message" class="textarea textarea-bordered" required></textarea>
+    <textarea name="message" class="textarea textarea-bordered" required
+    ></textarea>
   </label>
   <button type="submit">{m.send()}</button>
 </form>

src/components/Footer.astro

@@ -9,7 +9,7 @@ import * as m from "@/paraglide/messages"
 const giteaLink = `${GIT_URL}/martials/martials.no`
 ---
 
-<div class="divider" />
+<div class="divider"></div>
 <div class="py-5 flex flex-row gap-1 justify-around w-full items-center">
   <div>
     <GiteaLink href={giteaLink} />

src/components/Greeting.astro

@@ -16,7 +16,14 @@ import "@/styles/global.css"
     </h1>
     <p class="mx-1 sm:my-10">{m.aboutMe()}</p>
   </div>
-  <Image src={me} alt="Me on a hike" width="400" height="400" class="p-5 mx-auto" loading={"eager"} />
+  <Image
+    src={me}
+    alt="Me on a hike"
+    width="400"
+    height="400"
+    class="p-5 mx-auto"
+    loading={"eager"}
+  />
 </div>
 <!-- Mastodon verification -->
 <a rel="me" href="https://snabelen.no/@Martials" class="hidden">Mastodon</a>

src/components/HardwarePage.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import Select from "./Select.svelte"
-  import * as m from "@/paraglide/messages"
-  import CollapseList from "@/components/collapse/CollapseList.svelte"
-
-  export let hardware: any[] = []
-
-  const hardwareOptions = hardware.map((item) => ({
-    key: item.id,
-    value: item.data.title
-  }))
-
-  let selectedHardwareKey: string = hardware[0].id
-  $: selectedHardware = hardware.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>
-  <div>
-    <Select options={hardwareOptions} on:change={onChange} class="mx-auto w-max" />
-  </div>
-  <br />
-
-  <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
-  <div class="my-2" />
-  {#if (selectedHardware.data.accessories)}
-    <CollapseList items={selectedHardware.data.accessories} title={m.accessories()} />
-  {/if}
-</div>

src/components/LanguageButtonGroup.astro

@@ -6,6 +6,10 @@ const currentPath = resolvePathname(Astro.url.pathname)
 ---
 
 <div class="join">
-  <LocaleLink to={currentPath as NavLink} lang="nb" class="btn join-item">Norsk</LocaleLink>
-  <LocaleLink to={currentPath as NavLink} lang="en" class="btn join-item">English</LocaleLink>
+  <LocaleLink to={currentPath as NavLink} lang="nb" class="btn join-item"
+    >Norsk</LocaleLink
+  >
+  <LocaleLink to={currentPath as NavLink} lang="en" class="btn join-item"
+    >English</LocaleLink
+  >
 </div>

src/components/Select.svelte

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

src/components/UsesPage.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import Select from "./Select.svelte"
+  import * as m from "@/paraglide/messages"
+  import CollapseList from "@/components/collapse/CollapseList.svelte"
+  import type { CollectionEntry } from "astro:content"
+
+  interface Props {
+    uses: CollectionEntry<"uses">[]
+  }
+
+  const { uses }: Props = $props()
+
+  const hardwareOptions = uses.map((item) => ({
+    key: item.id,
+    value: item.data.title,
+  }))
+
+  let selectedHardwareKey = $state(uses[0].id)
+  let selectedHardware = $derived(
+    uses.find((item) => item.id === selectedHardwareKey)!,
+  )
+  // TODO set url query param to selected hardware
+</script>
+
+<div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
+  <h1 class="text-center">{m.uses()}</h1>
+  <div>
+    <Select
+      options={hardwareOptions}
+      bind:selected={selectedHardwareKey}
+      class="mx-auto w-max"
+    />
+  </div>
+  <br />
+
+  <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
+  <div class="my-2"></div>
+  {#if selectedHardware.data.accessories}
+    <CollapseList
+      items={selectedHardware.data.accessories}
+      title={m.accessories()}
+    />
+  {/if}
+</div>

src/components/collapse/Collapse.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-  export let title: string = ""
+  import type { Snippet } from "svelte"
+
+  interface Props {
+    title?: string
+    children: Snippet
+  }
+
+  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,12 +1,15 @@
 <script lang="ts">
   import Collapse from "@/components/collapse/Collapse.svelte"
 
-  export let items: string[] = []
-  export let title: string = ""
+  interface Props {
+    items?: string[]
+    title?: string
+  }
 
+  const { items = [], title = "" }: Props = $props()
 </script>
 
-<Collapse title={title}>
+<Collapse {title}>
   <ul>
     {#each items as item}
       <li class="list-disc ml-5">{item}</li>

src/components/icons/Gitea.astro

@@ -7,4 +7,4 @@ interface Props {
 const { class: clazz } = Astro.props
 ---
 
-<PajamasIcon name="pajamas:gitea" class={clazz}></PajamasIcon>
+<PajamasIcon name="pajamas:gitea" class={clazz} />

src/components/links/ExternalLink.astro

@@ -7,6 +7,12 @@ interface Props extends LinkProps {
 const { href, noStyle = false, class: clazz, ...props } = Astro.props
 ---
 
-<a href={href} target="_blank" rel="noopener" class:list={[noStyle ? "" : "link", clazz]} {...props}>
+<a
+  href={href}
+  target="_blank"
+  rel="noopener"
+  class:list={[noStyle ? "" : "link", clazz]}
+  {...props}
+>
   <slot />
 </a>

src/components/myLinks/LinkCard.astro

@@ -11,7 +11,7 @@ const { title, message, url, icon, class: clazz } = Astro.props
 ---
 
 <ExternalLink href={url} noStyle>
-  <div class:list={["card bg-neutral", clazz]}>
+  <div class:list={["card bg-base-300", clazz]}>
     <div class="card-body p-5 flex flex-row items-center">
       <PajamasIcon name={icon ?? "pajamas:link"} class="w-6 h-6" />
       <div>

src/components/myLinks/myLinks.ts

@@ -3,44 +3,50 @@ import { GIT_URL } from "astro:env/client"
 import * as m from "@/paraglide/messages"
 
 export interface MyLink {
-  title: string;
-  url: string;
-  message?: string;
+  title: string
+  url: string
+  message?: string
   icon?: PajamasIcon
 }
 
 export default [
   {
-    title: "GitHub",
-    url: "https://github.com/emberal",
-    icon: "pajamas:github"
+    title: "Codeberg",
+    url: "https://codeberg.org/martials",
+    message: m.forMirrors(),
+    icon: "pajamas:git",
   },
   {
     title: "Gitea",
     url: `${GIT_URL}/martials`,
     message: m.forPersonalProjects(),
-    icon: "pajamas:gitea"
+    icon: "pajamas:gitea",
+  },
+  {
+    title: "GitHub",
+    url: "https://github.com/emberal",
+    icon: "pajamas:github",
   },
   {
     title: "LinkedIn",
     url: "https://www.linkedin.com/in/martin-b-2a69391a3/",
-    icon: "pajamas:linkedin"
+    icon: "pajamas:linkedin",
   },
   {
-    title: "Mastodon (Snabelen)",
+    title: "Mastodon (Snabelen.no)",
     url: "https://snabelen.no/@Martials",
-    icon: "pajamas:mastodon"
+    icon: "pajamas:mastodon",
   },
   {
     title: "Pixelfed",
-    url: "https://pixelfed.social/i/web/profile/261454857934868480"
+    url: "https://pixelfed.social/i/web/profile/261454857934868480",
   },
   {
     title: "Steam",
-    url: "https://steamcommunity.com/id/martials/"
+    url: "https://steamcommunity.com/id/martials/",
   },
   {
     title: "Trakt.tv",
-    url: "https://trakt.tv/users/martials"
-  }
-] satisfies MyLink[]
+    url: "https://trakt.tv/users/martials",
+  },
+] as MyLink[]

src/components/projects/MyProjectsPage.astro

@@ -17,10 +17,7 @@ const baseUrl: NavLink = "/projects"
 <div class="flex flex-wrap justify-around">
   {
     projects.map(
-      ({
-         data: { title, description, tags, heroImage, heroImageAlt },
-         id
-       }) => (
+      ({ data: { title, description, tags, heroImage, heroImageAlt }, id }) => (
         <div class="my-5 px-2">
           <ProjectCard
             title={title}
@@ -31,7 +28,7 @@ const baseUrl: NavLink = "/projects"
             imageAlt={heroImageAlt}
           />
         </div>
-      )
+      ),
     )
   }
 </div>

src/components/projects/ProjectPage.astro

@@ -15,7 +15,7 @@ interface Props {
 const { project } = Astro.props
 
 const entry = await getEntry("projects", project)
-const { Content } = await render(entry)
+const { Content } = await render(entry!)
 const {
   title,
   description,
@@ -24,7 +24,7 @@ const {
   heroImageAlt,
   source,
   createdAt,
-  updatedAt
+  updatedAt,
 } = entry!.data
 ---
 

src/content/config.ts

@@ -12,20 +12,20 @@ const projectCollection = defineCollection({
       tags: z.array(z.string()),
       source: z.string(),
       createdAt: z.string(),
-      updatedAt: z.string()
-    })
+      updatedAt: z.string(),
+    }),
 })
 
-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())),
-    hardware: z.array(z.string())
-  })
+    hardware: z.array(z.string()),
+  }),
 })
 
 export const collections = {
   projects: projectCollection,
-  hardware: hardwareCollection
+  uses: usesCollection,
 }

src/content/uses/desktop.yaml

@@ -2,8 +2,8 @@ title: Desktop
 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 | Logitech G710
-  - Monitor 1 | AOC 27" LED FreeSync G2790PX # https://www.komplett.no/product/975642?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 | 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/layouts/Layout.astro

@@ -12,7 +12,7 @@ const { title, class: clazz } = Astro.props
 
 <!doctype html>
 <html lang={languageTag()} dir={"ltr"}>
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
@@ -20,12 +20,12 @@ const { title, class: clazz } = Astro.props
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
-</head>
-<body class="flex flex-col h-screen">
-<Navbar />
-<main class:list={["grow", clazz]}>
+  </head>
+  <body class="flex flex-col h-screen">
+    <Navbar />
+    <main class:list={["grow", clazz]}>
       <slot />
-</main>
-<Footer />
-</body>
+    </main>
+    <Footer />
+  </body>
 </html>

src/links.ts

@@ -9,24 +9,24 @@ interface Link {
 const Links: Link[] = [
   {
     label: m.home,
-    to: "/"
+    to: "/",
   },
   {
     label: m.myProjects,
-    to: "/projects"
+    to: "/projects",
   },
   {
     label: m.myLinks,
-    to: "/links"
+    to: "/links",
   },
   {
-    label: m.hardware,
-    to: "/hardware"
+    label: m.uses,
+    to: "/uses",
   },
   {
     label: m.contactMe,
-    to: "/contact"
-  }
+    to: "/contact",
+  },
 ]
 
 export default Links

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

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
@@ -9,7 +10,7 @@ export function getStaticPaths(): GetStaticPathsResult {
   return [
     { params: { project: "hvl-ics-simplifier" } },
     { params: { project: "homepage" } },
-    { params: { project: "simplify-truths" } }
+    { params: { project: "simplify-truths" } },
   ]
 }
 

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 client:load uses={uses} />
 </Layout>

src/pages/index.astro

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

src/pages/links.astro

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

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
@@ -9,7 +10,7 @@ export function getStaticPaths(): GetStaticPathsResult {
   return [
     { params: { project: "hvl-ics-simplifier" } },
     { params: { project: "homepage" } },
-    { params: { project: "simplify-truths" } }
+    { params: { project: "simplify-truths" } },
   ]
 }
 

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;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@plugin "daisyui";
 
 @layer utilities {
   .debug {
@@ -23,6 +23,6 @@
 
   /* TODO change default style*/
   a {
-        @apply link
+    @apply link;
   }
 }

src/types/icons.ts

@@ -1,3 +1,13 @@
-export type Icon = "gitea" | "github" | "mastodon" | "linkedin" | "link" | "status-health"
+/**
+ * @see https://icon-sets.iconify.design/pajamas/
+ */
+export type Icon =
+  | "git"
+  | "gitea"
+  | "github"
+  | "mastodon"
+  | "linkedin"
+  | "link"
+  | "status-health"
 
 export type PajamasIcon = `pajamas:${Icon}`

src/types/props.ts

@@ -1,8 +1,8 @@
 export interface ComponentProps {
-  class?: string;
-  title?: string;
+  class?: string
+  title?: string
 }
 
 export interface LinkProps extends ComponentProps {
-  href: string;
+  href: string
 }

src/utils/linking.ts

@@ -7,19 +7,19 @@ interface TranslatedPathnames {
 }
 
 export type NavLink =
-  "/"
+  | "/"
   | "/contact"
   | "/projects"
   | `/projects/${Project["id"]}`
   | "/links"
-  | "/hardware"
+  | "/uses"
 
 const paths: Set<NavLink> = new Set([
   "/",
   "/contact",
   "/projects",
   "/links",
-  "/hardware"
+  "/uses",
 ])
 
 /**
@@ -33,13 +33,13 @@ const pathnames: Record<AbsolutePathname, TranslatedPathnames> = {}
 for (const path of paths) {
   pathnames[path] = {
     nb: path,
-    en: `/en${path}`
+    en: `/en${path}`,
   }
 }
 
 export function localizePathname(
   pathname: NavLink,
-  locale: AvailableLanguageTag
+  locale: AvailableLanguageTag,
 ): string {
   const pathnameParts = pathname.split("/")
   const firstSegment: AbsolutePathname = `/${pathnameParts[1]}`

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")]
-}