Hardware page with more content.

Collapse component

Signed-off-by: Martin Berg Alstad <git@martials.no>

messages/en.json

@@ -8,6 +8,7 @@
   "myLinks": "My links",
   "myProjects": "My projects",
   "hardware": "Hardware",
+  "accessories": "Accessories",
   "sourceCode": "Source code",
   "createdAt": "Created at",
   "updatedAt": "Updated at",

messages/nb.json

@@ -8,6 +8,7 @@
   "myLinks": "Mine lenker",
   "myProjects": "Mine prosjekter",
   "hardware": "Maskinvare",
+  "accessories": "Tilbehør",
   "sourceCode": "Kildekode",
   "createdAt": "Opprettet",
   "updatedAt": "Oppdatert",

src/components/Collapse.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let title: string = ""
+</script>
+
+<details class="collapse collapse-arrow bg-base-200">
+  <summary class="collapse-title text-xl font-medium">{title}</summary>
+  <div class="collapse-content">
+    <slot />
+  </div>
+</details>

src/components/HardwarePage.svelte

@@ -1,23 +1,44 @@
 <script lang="ts">
   import Select from "./Select.svelte"
-  import { getCollection } from "astro:content"
+  import * as m from "@/paraglide/messages"
+  import Collapse from "@/components/Collapse.svelte"
 
-  getCollection("hardware")
-    .then((collection) => {
-      console.log(collection)
-    })
+  export let hardware: any[] = []
 
-  // TODO fetch selected hardware from content collection
-  let selectedHardware: string = "CPU"
+  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)!
 
   function onChange({ detail }: CustomEvent<string>) {
-    console.log(detail)
-    selectedHardware = detail
+    selectedHardwareKey = detail
   }
 
-  // TODO show the selected hardware
 </script>
-<div>
-  <h2>{selectedHardware}</h2>
-  <Select options={["CPU", "GPU", "RAM"]} on:change={onChange} />
+<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 />
+
+  <Collapse title={m.hardware()}>
+    <ul>
+      {#each selectedHardware.data.hardware as item}
+        <li class="list-disc ml-5">{item}</li>
+      {/each}
+    </ul>
+  </Collapse>
+  {#if (selectedHardware.data.accessories)}
+    <Collapse title={m.accessories()}>
+      <ul>
+        {#each selectedHardware.data.accessories as item}
+          <li class="list-disc ml-5">{item}</li>
+        {/each}
+      </ul>
+    </Collapse>
+  {/if}
 </div>

src/components/Select.svelte

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

src/content/config.ts

@@ -18,6 +18,7 @@ const projectCollection = defineCollection({
 const hardwareCollection = defineCollection({
   type: "data",
   schema: z.object({
+    title: z.string(),
     accessories: z.optional(z.array(z.string())),
     hardware: z.array(z.string())
   })

src/content/hardware/desktop.yaml

@@ -1,4 +1,23 @@
+title: Desktop
 accessories:
-  - a # Screens, keyboards, mice, etc.
+  - 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
+  - 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
+  - Speakers | Creative T6 Series II # https://www.komplett.no/product/808450?noredirect=true
 hardware:
-  - b # Graphics cards, CPUs, etc.
+  - Case | Fractal Design Define R5 (Black) # https://www.fractal-design.com/products/cases/define/define-r5/black/
+  - CPU | Intel Core i5-10600K CPU # https://www.komplett.no/product/1155669?noredirect=true
+  - CPU cooler | Noctua ...
+  - Fans | 4x Fractal Design R3 140mm Silent fan # https://www.komplett.no/product/836971?noredirect=true
+  - GPU | Palit GeForce RTX 2070 SUPER JetStream # https://www.komplett.no/product/1134511?noredirect=true
+  - HDD | Seagate Barracuda 3TB 3.5" # https://www.komplett.no/product/653074?noredirect=true
+  - Motherboard | Gigabyte H470 HD3 # https://www.komplett.no/product/1161192?noredirect=true
+  - Network card | TP-Link Archer TX3000E # https://www.komplett.no/product/1146481?noredirect=true
+  - Ram | 2x Corsair Vengeance LPX DDR4 3200MHz 16GB (black) # https://www.komplett.no/product/893831?noredirect=true
+  - SSD | Samsung 960 PRO 512GB M.2 PCIe SSD # https://www.komplett.no/product/903118?noredirect=true
+  - SSD | Corsair Force Series MP510 960GB M.2 NVMe SSD 960GB # https://www.komplett.no/product/1153863?noredirect=true
+  - PSU | Corsair CX750M, 750W PSU # https://www.komplett.no/product/773377?noredirect=true

src/content/hardware/homeServer.yaml

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

src/content/hardware/raspberryPi.yaml

@@ -1,3 +1,4 @@
+title: Raspberry Pi 4
 accessories:
   - a # Screens, keyboards, mice, etc.
 hardware:

src/pages/en/hardware.astro

@@ -1,7 +1,7 @@
 ---
-import Layout from "../../layouts/Layout.astro"
-import HardwarePage from "../../components/HardwarePage.svelte"
-import "../../styles/global.css"
+import Layout from "@/layouts/Layout.astro"
+import HardwarePage from "@/components/HardwarePage.svelte"
+import "@/styles/global.css"
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">

src/pages/hardware.astro

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

src/styles/global.css

@@ -3,13 +3,21 @@
 @tailwind utilities;
 
 @layer utilities {
-  .debug {
-    @apply border border-red-500;
-  }
+    .debug {
+        @apply border border-red-500;
+    }
 }
 
 @layer base {
-  h1 {
-    @apply text-4xl font-bold mb-2;
-  }
+    br {
+        @apply my-4;
+    }
+
+    h1 {
+        @apply text-4xl font-bold mb-2;
+    }
+
+    h2 {
+        @apply text-3xl font-bold mb-2;
+    }
 }