Links page.

Icons using npm package instead of svgs.

Props and types.

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

src/components/Footer.astro

@@ -1,9 +1,17 @@
 ---
 import GiteaLink from "./links/GiteaLink.astro"
+import ExternalLink from "./links/ExternalLink.astro"
+import PajamasIcon from "./icons/PajamasIcon.astro"
+import * as m from "@/paraglide/messages"
 const gitUrl = import.meta.env.GIT_URL
+const statusUrl = import.meta.env.STATUS_URL
 ---
 
 <div class="divider"></div>
-<div class="mx-auto py-5">
+<div class="mx-auto py-5 flex flex-col gap-1 items-center">
   <GiteaLink href={gitUrl} />
+  <ExternalLink href={statusUrl} class="flex items-center" title="Status">
+    <PajamasIcon name="pajamas:status-health" class="w-6 h-6 mr-2" />
+    {m.status()}
+  </ExternalLink>
 </div>

src/components/Greeting.astro

@@ -18,3 +18,5 @@ import "@/styles/global.css"
   </div>
   <Image src={me} alt="Me on a hike" width="400" height="400" class="p-5 mx-auto" />
 </div>
+<!-- Mastodon verification -->
+<a rel="me" href="https://snabelen.no/@Martials" class="hidden">Mastodon</a>

src/components/icons/Gitea.astro

@@ -0,0 +1,10 @@
+---
+import PajamasIcon from "./PajamasIcon.astro"
+interface Props {
+  class?: string
+}
+
+const { class: clazz } = Astro.props
+---
+
+<PajamasIcon name="pajamas:gitea" class={clazz}></PajamasIcon>

src/components/icons/PajamasIcon.astro

@@ -0,0 +1,12 @@
+---
+import type { PajamasIcon } from "@/types/icons"
+import type { ComponentProps } from "@/types/props"
+import { Icon } from "astro-icon/components"
+interface Props extends ComponentProps {
+  name: PajamasIcon
+}
+
+const { name, class: clazz, ...props } = Astro.props
+---
+
+<Icon name={name} class:list={[clazz]} {...props} />

src/components/links/ExternalLink.astro

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

src/components/links/GiteaLink.astro

@@ -1,7 +1,7 @@
 ---
 import ExternalLink from "./ExternalLink.astro"
-import * as m from "../../paraglide/messages"
-import Gitea from "../../icons/Gitea.astro"
+import * as m from "@/paraglide/messages"
+import Gitea from "../icons/Gitea.astro"
 interface Props {
   href: string
 }

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[]