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

messages/en.json

@@ -13,6 +13,7 @@
   "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

@@ -13,6 +13,7 @@
   "sourceCode": "Kildekode",
   "createdAt": "Opprettet",
   "updatedAt": "Oppdatert",
+  "forMirrors": "For mirrors av Gitea",
   "forPersonalProjects": "For personlige prosjekter",
   "status": "Status",
   "name": "Navn",

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>
+<a rel="me" href="https://snabelen.no/@Martials" class="hidden">Mastodon</a>

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,5 +1,4 @@
 <script lang="ts">
-
   // TODO move to types?
   interface Option<Key> {
     key: Key

src/components/UsesPage.svelte

@@ -5,31 +5,40 @@
   import type { CollectionEntry } from "astro:content"
 
   interface Props {
-    uses: CollectionEntry<'uses'>[]
+    uses: CollectionEntry<"uses">[]
   }
 
   const { uses }: Props = $props()
 
   const hardwareOptions = uses.map((item) => ({
     key: item.id,
-    value: item.data.title
+    value: item.data.title,
   }))
 
   let selectedHardwareKey = $state(uses[0].id)
-  let selectedHardware = $derived(uses.find((item) => item.id === selectedHardwareKey)!)
-
+  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" />
+    <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 selectedHardware.data.accessories}
+    <CollapseList
+      items={selectedHardware.data.accessories}
+      title={m.accessories()}
+    />
   {/if}
 </div>

src/components/collapse/Collapse.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+  import type { Snippet } from "svelte"
 
   interface Props {
     title?: string
-    children: any
+    children: Snippet
   }
 
   const { title = "", children }: Props = $props()
@@ -13,4 +14,4 @@
   <div class="collapse-content">
     {@render children()}
   </div>
-</details>
+</details>

src/components/collapse/CollapseList.svelte

@@ -9,10 +9,10 @@
   const { items = [], title = "" }: Props = $props()
 </script>
 
-<Collapse title={title}>
+<Collapse {title}>
   <ul>
     {#each items as item}
       <li class="list-disc ml-5">{item}</li>
     {/each}
   </ul>
-</Collapse>
+</Collapse>

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>
+</div>

src/components/projects/ProjectPage.astro

@@ -24,7 +24,7 @@ const {
   heroImageAlt,
   source,
   createdAt,
-  updatedAt
+  updatedAt,
 } = entry!.data
 ---
 

src/content/config.ts

@@ -12,8 +12,8 @@ const projectCollection = defineCollection({
       tags: z.array(z.string()),
       source: z.string(),
       createdAt: z.string(),
-      updatedAt: z.string()
-    })
+      updatedAt: z.string(),
+    }),
 })
 
 const usesCollection = defineCollection({
@@ -21,11 +21,11 @@ const usesCollection = defineCollection({
   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,
-  uses: usesCollection
+  uses: usesCollection,
 }

src/layouts/Layout.astro

@@ -12,20 +12,20 @@ const { title, class: clazz } = Astro.props
 
 <!doctype html>
 <html lang={languageTag()} dir={"ltr"}>
-<head>
-  <meta charset="UTF-8" />
-  <meta name="description" content="Astro description" />
-  <meta name="viewport" content="width=device-width" />
-  <link rel="sitemap" href="/sitemap-index.xml" />
-  <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]}>
-  <slot />
-</main>
-<Footer />
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="sitemap" href="/sitemap-index.xml" />
+    <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]}>
+      <slot />
+    </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.uses,
-    to: "/uses"
+    to: "/uses",
   },
   {
     label: m.contactMe,
-    to: "/contact"
-  }
+    to: "/contact",
+  },
 ]
 
 export default Links

src/pages/en/links.astro

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

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

@@ -10,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

@@ -9,4 +9,4 @@ const projects = await getCollection("projects")
 
 <Layout title="Projects">
   <MyProjectsPage projects={projects} />
-</Layout>
+</Layout>

src/pages/en/uses.astro

@@ -8,5 +8,5 @@ const uses = await getCollection("uses")
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <UsesPage server:defer uses={uses} />
+  <UsesPage client:load uses={uses} />
 </Layout>

src/pages/index.astro

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

src/pages/links.astro

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

src/pages/projects/[project].astro

@@ -10,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/styles/global.css

@@ -3,26 +3,26 @@
 @plugin "daisyui";
 
 @layer utilities {
-    .debug {
-        @apply border border-red-500;
-    }
+  .debug {
+    @apply border border-red-500;
+  }
 }
 
 @layer base {
-    br {
-        @apply my-0.5;
-    }
+  br {
+    @apply my-0.5;
+  }
 
-    h1 {
-        @apply text-4xl font-bold mb-2;
-    }
+  h1 {
+    @apply text-4xl font-bold mb-2;
+  }
 
-    h2 {
-        @apply text-3xl font-bold mb-2;
-    }
+  h2 {
+    @apply text-3xl font-bold mb-2;
+  }
 
-    /* TODO change default style*/
-    a {
-        @apply link
-    }
+  /* TODO change default style*/
+  a {
+    @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,7 +7,7 @@ interface TranslatedPathnames {
 }
 
 export type NavLink =
-  "/"
+  | "/"
   | "/contact"
   | "/projects"
   | `/projects/${Project["id"]}`
@@ -19,7 +19,7 @@ const paths: Set<NavLink> = new Set([
   "/contact",
   "/projects",
   "/links",
-  "/uses"
+  "/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]}`