🎨 Format using Biome

src/components/Select.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-  // TODO move to types?
+// TODO move to types?
-  interface Option<Key> {
+interface Option<Key> {
-    key: Key
+  key: Key
-    value: string
+  value: string
-  }
+}
 
-  interface Props<Key = string> {
+interface Props<Key = string> {
-    selected: Key
+  selected: Key
-    options?: Option<Key>[]
+  options?: Option<Key>[]
-    class?: string
+  class?: string
-  }
+}
 
-  let { selected = $bindable(), options = [], class: clazz }: Props = $props()
+let { selected = $bindable(), options = [], class: clazz }: Props = $props()
 </script>
 
 <select

src/components/Terminal.svelte

@@ -1,80 +1,76 @@
 <script lang="ts">
-  import { onMount } from "svelte"
+import { onMount } from "svelte"
 
-  let history: string[] = []
+let history: string[] = []
-  let currentDir = "~"
+let currentDir = "~"
 
-  type Command = "help" | "about" | "skills" | "projects" | "contact" | "clear"
+type Command = "help" | "about" | "skills" | "projects" | "contact" | "clear"
 
-  const commands: Record<Command, () => string> = {
+const commands: Record<Command, () => string> = {
-    help: () => `Available commands:
+  help: () => `Available commands:
   about - Display information about me
   skills - List my technical skills
   projects - Show my notable projects
   contact - Display my contact information
   clear - Clear the terminal screen`,
-    about: () => `Hi, I'm John Doe!
+  about: () => `Hi, I'm John Doe!
 I'm a passionate software developer with 5 years of experience.
 I love creating elegant solutions to complex problems.`,
-    skills: () => `My technical skills include:
+  skills: () => `My technical skills include:
 - JavaScript/TypeScript
 - React & Next.js
 - Node.js
 - Python
 - SQL & NoSQL databases`,
-    projects: () => `Some of my notable projects:
+  projects: () => `Some of my notable projects:
 1. E-commerce Platform (React, Node.js, MongoDB)
 2. Weather App (React Native, OpenWeatherMap API)
 3. Task Management System (Python, Django, PostgreSQL)`,
-    contact: () => `You can reach me at:
+  contact: () => `You can reach me at:
 Email: john.doe@example.com
 GitHub: github.com/johndoe
 LinkedIn: linkedin.com/in/johndoe`,
-    clear: () => {
+  clear: () => {
+    history = []
+    return ""
+  },
+}
+
+const executeCommand = (input: string) => {
+  const [command, ...args] = input.trim().split(" ")
+  if (command in commands) {
+    return commands[command as Command]()
+  }
+  return `Command not found: ${command}. Type 'help' for available commands.`
+}
+
+let input = ""
+let inputRef: HTMLInputElement | null = null
+
+const handleSubmit = (e: Event) => {
+  e.preventDefault()
+  if (input.trim()) {
+    if (input === "clear") {
       history = []
-      return ""
+    } else {
-    },
+      history = [...history, `${currentDir} $ ${input}`, executeCommand(input)]
-  }
-
-  const executeCommand = (input: string) => {
-    const [command, ...args] = input.trim().split(" ")
-    if (command in commands) {
-      return commands[command as Command]()
     }
-    return `Command not found: ${command}. Type 'help' for available commands.`
+    input = ""
   }
+}
 
-  let input = ""
+onMount(() => {
-  let inputRef: HTMLInputElement | null = null
+  history = [
+    "Welcome to John Doe's Terminal Portfolio!",
+    "Type 'help' to see available commands.",
+  ]
+})
 
-  const handleSubmit = (e: Event) => {
+$: {
-    e.preventDefault()
+  if (inputRef) {
-    if (input.trim()) {
+    inputRef.scrollIntoView({ behavior: "smooth" })
-      if (input === "clear") {
-        history = []
-      } else {
-        history = [
-          ...history,
-          `${currentDir} $ ${input}`,
-          executeCommand(input),
-        ]
-      }
-      input = ""
-    }
-  }
-
-  onMount(() => {
-    history = [
-      "Welcome to John Doe's Terminal Portfolio!",
-      "Type 'help' to see available commands.",
-    ]
-  })
-
-  $: {
-    if (inputRef) {
-      inputRef.scrollIntoView({ behavior: "smooth" })
-    }
   }
+}
 </script>
 
 <div class="min-h-screen bg-black text-green-500 p-4 font-mono">

src/components/collapse/Collapse.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import type { Snippet } from "svelte"
+import type { Snippet } from "svelte"
 
-  interface Props {
+interface Props {
-    title?: string
+  title?: string
-    children: Snippet
+  children: Snippet
-  }
+}
 
-  const { title = "", children }: Props = $props()
+const { title = "", children }: Props = $props()
 </script>
 
 <details class="collapse collapse-arrow bg-base-200">

src/components/collapse/CollapseList.svelte

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

src/content/config.ts

@@ -2,7 +2,7 @@ import { defineCollection, z } from "astro:content"
 import { glob } from "astro/loaders"
 
 const projectCollection = defineCollection({
-  loader: glob({ pattern: "**\/*.mdx", base: "./src/content/projects" }),
+  loader: glob({ pattern: "**/*.mdx", base: "./src/content/projects" }),
   schema: ({ image }) =>
     z.object({
       lang: z.union([z.literal("en"), z.literal("nb")]),
@@ -19,7 +19,7 @@ const projectCollection = defineCollection({
 })
 
 const usesCollection = defineCollection({
-  loader: glob({ pattern: "**\/*.yaml", base: "./src/content/uses" }),
+  loader: glob({ pattern: "**/*.yaml", base: "./src/content/uses" }),
   schema: z.object({
     title: z.string(),
     accessories: z.optional(z.array(z.string())),

src/styles/global.css

@@ -4,50 +4,50 @@
 @plugin "daisyui";
 
 @theme {
-    --color-cat-rosewater: #f5e0dc;
+  --color-cat-rosewater: #f5e0dc;
-    --color-cat-flamingo: #f2cdcd;
+  --color-cat-flamingo: #f2cdcd;
-    --color-cat-pink: #f5c2e7;
+  --color-cat-pink: #f5c2e7;
-    --color-cat-mauve: #cba6f7;
+  --color-cat-mauve: #cba6f7;
-    --color-cat-red: #f38ba8;
+  --color-cat-red: #f38ba8;
-    --color-cat-maroon: #eba0ac;
+  --color-cat-maroon: #eba0ac;
-    --color-cat-peach: #fab387;
+  --color-cat-peach: #fab387;
-    --color-cat-yellow: #f9e2af;
+  --color-cat-yellow: #f9e2af;
-    --color-cat-green: #a6e3a1;
+  --color-cat-green: #a6e3a1;
-    --color-cat-teal: #94e2d5;
+  --color-cat-teal: #94e2d5;
-    --color-cat-sky: #89dceb;
+  --color-cat-sky: #89dceb;
-    --color-cat-sapphire: #74c7ec;
+  --color-cat-sapphire: #74c7ec;
-    --color-cat-blue: #89b4fa;
+  --color-cat-blue: #89b4fa;
-    --color-cat-lavender: #b4befe;
+  --color-cat-lavender: #b4befe;
-    --color-cat-text: #cdd6f4;
+  --color-cat-text: #cdd6f4;
-    --color-cat-surface0: #313244;
+  --color-cat-surface0: #313244;
-    --color-cat-base: #1e1e2e;
+  --color-cat-base: #1e1e2e;
-    --color-cat-mantle: #181825;
+  --color-cat-mantle: #181825;
 }
 
 @layer utilities {
-    .debug {
+  .debug {
-        @apply border border-red-500;
+    @apply border border-red-500;
-    }
+  }
 }
 
 br {
-    @apply my-0.5;
+  @apply my-0.5;
 }
 
 h1 {
-    @apply text-4xl font-bold mb-2;
+  @apply text-4xl font-bold mb-2;
 }
 
 h2 {
-    @apply text-3xl font-bold mb-2;
+  @apply text-3xl font-bold mb-2;
 }
 
 h3 {
-    @apply text-2xl font-bold mb-2;
+  @apply text-2xl font-bold mb-2;
 }
 
 /* TODO change default style*/
 a {
-    @apply link text-cat-mauve;
+  @apply link text-cat-mauve;
-    text-decoration-line: none;
+  text-decoration-line: none;
 }