WIP

src/components/hero/HeroSection.astro

@@ -1,11 +1,12 @@
 ---
 import { Image } from "astro:assets";
+import { getCollection } from "astro:content";
 import ciffeliaIcon from "@/assets/ciffelia.png";
-import twitterIcon from "@/assets/twitter.svg";
-import githubIcon from "@/assets/github.svg";
 import InViewEffect from "@/components/InViewEffect.astro";
 import Ocean from "./ocean/Ocean.astro";
 import SocialLink from "./SocialLink.astro";
+
+const links = await getCollection("link");
 ---
 
 <header>
@@ -31,26 +32,20 @@ import SocialLink from "./SocialLink.astro";
   </div>
 
   <div class="links">
-    <InViewEffect>
-      <SocialLink
-        url="https://twitter.com/ciffelia"
-        color="var(--color-twitter)"
-        icon={twitterIcon}
-        iconLoading="eager"
-      >
-        Twitter
-      </SocialLink>
-    </InViewEffect>
-    <InViewEffect>
-      <SocialLink
-        url="https://github.com/ciffelia"
-        color="var(--color-github)"
-        icon={githubIcon}
-        iconLoading="eager"
-      >
-        GitHub
-      </SocialLink>
-    </InViewEffect>
+    {
+      links.map(({ data }) => (
+        <InViewEffect>
+          <SocialLink
+            url={data.url}
+            color={data.color}
+            icon={data.icon}
+            iconLoading="eager"
+          >
+            {data.name}
+          </SocialLink>
+        </InViewEffect>
+      ))
+    }
   </div>
 </header>
 

src/components/hero/SocialLink.astro

@@ -33,6 +33,7 @@ const { url, color, icon, iconLoading } = Astro.props;
     background-color: var(--color);
     filter: drop-shadow(0 4px 7px var(--color-shadow1));
     border-radius: 12px;
+    text-decoration: none;
     transition:
       filter 0.15s var(--easing-pop),
       transform 0.15s var(--easing-pop);

src/content/config.ts

@@ -0,0 +1,16 @@
+import { z, defineCollection } from "astro:content";
+
+const linkCollection = defineCollection({
+  type: "data",
+  schema: ({ image }) =>
+    z.object({
+      name: z.string(),
+      url: z.string().url(),
+      color: z.string(),
+      icon: image(),
+    }),
+});
+
+export const collections = {
+  link: linkCollection,
+};

src/content/link/0-twitter.json

@@ -0,0 +1,6 @@
+{
+  "name": "Twitter",
+  "url": "https://twitter.com/ciffelia",
+  "color": "#1da1f2",
+  "icon": "./0-twitter.svg"
+}

src/content/link/1-github.json

@@ -0,0 +1,6 @@
+{
+  "name": "GitHub",
+  "url": "https://github.com/ciffelia",
+  "color": "#231f20",
+  "icon": "./1-github.svg"
+}

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/styles/theme.css

@@ -12,8 +12,6 @@
   --color-light-cover1: #3585ff;
   --color-light-cover2: #0044ac;
   --color-light-ocean: #3585ff;
-  --color-light-twitter: #1da1f2;
-  --color-light-github: #231f20;
 
   /* Dark Theme */
   --color-dark-text1: #fdfdfd;
@@ -28,8 +26,6 @@
   --color-dark-cover1: #0044ac;
   --color-dark-cover2: #3585ff;
   --color-dark-ocean: #0044ac;
-  --color-dark-twitter: #1da1f2;
-  --color-dark-github: #231f20;
 
   /* Miscellaneous */
   --border1: var(--color-border1) solid 1px;
@@ -51,8 +47,6 @@
   --color-cover1: var(--color-light-cover1);
   --color-cover2: var(--color-light-cover2);
   --color-ocean: var(--color-light-ocean);
-  --color-twitter: var(--color-light-twitter);
-  --color-github: var(--color-light-github);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -70,7 +64,5 @@
     --color-cover1: var(--color-dark-cover1);
     --color-cover2: var(--color-dark-cover2);
     --color-ocean: var(--color-dark-ocean);
-    --color-twitter: var(--color-dark-twitter);
-    --color-github: var(--color-dark-github);
   }
 }