Links page.

Icons using npm package instead of svgs.

Props and types.

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

src/components/myLinks/LinkCard.astro

@@ -0,0 +1,23 @@
+---
+import ExternalLink from "../links/ExternalLink.astro"
+import PajamasIcon from "../icons/PajamasIcon.astro"
+import type { MyLink } from "./myLinks"
+
+interface Props extends MyLink {
+  class?: string
+}
+
+const { title, message, url, icon, class: clazz } = Astro.props
+---
+
+<ExternalLink href={url} noStyle>
+  <div class:list={["card bg-neutral", clazz]}>
+    <div class="card-body p-5 flex flex-row items-center">
+      <PajamasIcon name={icon ?? "pajamas:link"} class="w-6 h-6" />
+      <div>
+        <h5 class="card-title">{title}</h5>
+        <p class="prose">{message}</p>
+      </div>
+    </div>
+  </div>
+</ExternalLink>

src/components/myLinks/LinksPage.astro

@@ -0,0 +1,15 @@
+---
+import links from "./myLinks"
+import LinkCard from "./LinkCard.astro"
+import "@/styles/global.css"
+import * as m from "@/paraglide/messages"
+---
+
+<h1 class="text-center">{m.myLinks()}</h1>
+<div class="flex flex-col mx-auto w-fit gap-5">
+  {
+    links.map((link) => (
+      <LinkCard {...link} class="max-w-[500px] sm:min-w-96" />
+    ))
+  }
+</div>

src/components/myLinks/myLinks.ts

@@ -0,0 +1,47 @@
+import type { PajamasIcon } from "@/types/icons.ts"
+import * as m from "@/paraglide/messages"
+
+const gitUrl = import.meta.env.GIT_URL
+
+export interface MyLink {
+  title: string;
+  url: string;
+  message?: string;
+  icon?: PajamasIcon
+}
+
+export default [
+  {
+    title: "GitHub",
+    url: "https://github.com/emberal",
+    icon: "pajamas:github"
+  },
+  {
+    title: "Gitea",
+    url: `${gitUrl}/martials`,
+    message: m.forPersonalProjects(),
+    icon: "pajamas:gitea"
+  },
+  {
+    title: "LinkedIn",
+    url: "https://www.linkedin.com/in/martin-b-2a69391a3/",
+    icon: "pajamas:linkedin"
+  },
+  {
+    title: "Mastodon (Snabelen)",
+    url: "https://snabelen.no/@Martials",
+    icon: "pajamas:mastodon"
+  },
+  {
+    title: "Pixelfed",
+    url: "https://pixelfed.social/i/web/profile/261454857934868480"
+  },
+  {
+    title: "Steam",
+    url: "https://steamcommunity.com/id/martials/"
+  },
+  {
+    title: "Trakt.tv",
+    url: "https://trakt.tv/users/martials"
+  }
+] satisfies MyLink[]