add social section

src/components/Card.astro

@@ -4,8 +4,17 @@ interface Props {
   description: string;
   href: string;
   cta: string;
-  icon: "gitea" | "github" | "steam" | "psn" | "xbox" | "switch" | "link";
+  icon:
+    | "gitea"
+    | "github"
+    | "steam"
+    | "psn"
+    | "xbox"
+    | "switch"
+    | "link"
+    | "mastodon";
   accent?: "primary" | "default";
+  rel?: string;
   warning?: string;
 }
 
@@ -16,9 +25,12 @@ const {
   cta,
   icon,
   accent = "default",
+  rel,
   warning,
 } = Astro.props;
 
+const linkRel = rel ? `${rel} noreferrer` : "noreferrer";
+
 const icons = {
   gitea: "fa-brands fa-git-alt",
   github: "fa-brands fa-github",
@@ -27,6 +39,7 @@ const icons = {
   xbox: "fa-brands fa-xbox",
   switch: "fa-solid fa-gamepad",
   link: "fa-solid fa-link",
+  mastodon: "fa-brands fa-mastodon",
 } satisfies Record<Props["icon"], string>;
 ---
 
@@ -35,7 +48,7 @@ const icons = {
     class="card-link"
     href={href}
     target="_blank"
-    rel="noreferrer"
+    rel={linkRel}
     aria-label={`${cta}: ${title}`}
   >
     <span class="card-icon" aria-hidden="true">

src/data/links.ts

@@ -3,8 +3,17 @@ export type HubLink = {
   description: string;
   href: string;
   cta: string;
-  icon: "gitea" | "github" | "steam" | "psn" | "xbox" | "switch" | "link";
+  icon:
+    | "gitea"
+    | "github"
+    | "steam"
+    | "psn"
+    | "xbox"
+    | "switch"
+    | "link"
+    | "mastodon";
   accent?: "primary" | "default";
+  rel?: string;
   warning?: string;
 };
 
@@ -33,6 +42,17 @@ export const codeLinks: HubLink[] = [
   },
 ];
 
+export const socialLinks: HubLink[] = [
+  {
+    title: "Mastodon",
+    description: "Fediverse profile for posts, replies, and small public updates.",
+    href: "https://tech.lgbt/@thelilfrog",
+    cta: "Open tech.lgbt",
+    icon: "mastodon",
+    rel: "me",
+  },
+];
+
 export const playLinks: HubLink[] = [
   {
     title: "Steam",

src/pages/index.astro

@@ -2,7 +2,7 @@
 import Card from "../components/Card.astro";
 import Section from "../components/Section.astro";
 import Layout from "../layouts/Layout.astro";
-import { codeLinks, hero, playLinks, utilityLinks } from "../data/links";
+import { codeLinks, hero, playLinks, socialLinks, utilityLinks } from "../data/links";
 ---
 
 <Layout
@@ -31,6 +31,15 @@ import { codeLinks, hero, playLinks, utilityLinks } from "../data/links";
       {codeLinks.map((link) => <Card {...link} />)}
     </Section>
 
+    <Section
+      id="social"
+      title="Social"
+      columns="2"
+      description="A small public profile for fediverse updates and verification."
+    >
+      {socialLinks.map((link) => <Card {...link} />)}
+    </Section>
+
     <Section
       id="links"
       title="Temporary Links"