From bb7e94dd2403e65481e1046cc4d0dd5302420659 Mon Sep 17 00:00:00 2001
From: Ciffelia <mc.prince.0203@gmail.com>
Date: Thu, 18 Jan 2024 18:19:32 +0900
Subject: [PATCH] WIP

---
 src/components/hero/HeroSection.astro         | 39 ++++++++-----------
 src/components/hero/SocialLink.astro          |  1 +
 src/content/config.ts                         | 16 ++++++++
 src/content/link/0-twitter.json               |  6 +++
 .../link/0-twitter.svg}                       |  0
 src/content/link/1-github.json                |  6 +++
 .../github.svg => content/link/1-github.svg}  |  0
 src/env.d.ts                                  |  1 +
 src/styles/theme.css                          |  8 ----
 9 files changed, 47 insertions(+), 30 deletions(-)
 create mode 100644 src/content/config.ts
 create mode 100644 src/content/link/0-twitter.json
 rename src/{assets/twitter.svg => content/link/0-twitter.svg} (100%)
 create mode 100644 src/content/link/1-github.json
 rename src/{assets/github.svg => content/link/1-github.svg} (100%)

diff --git a/src/components/hero/HeroSection.astro b/src/components/hero/HeroSection.astro
index 249056a..d3b1592 100644
--- a/src/components/hero/HeroSection.astro
+++ b/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>
 
diff --git a/src/components/hero/SocialLink.astro b/src/components/hero/SocialLink.astro
index 7380e6d..ede2c6b 100644
--- a/src/components/hero/SocialLink.astro
+++ b/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);
diff --git a/src/content/config.ts b/src/content/config.ts
new file mode 100644
index 0000000..e9a6886
--- /dev/null
+++ b/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,
+};
diff --git a/src/content/link/0-twitter.json b/src/content/link/0-twitter.json
new file mode 100644
index 0000000..2bccd40
--- /dev/null
+++ b/src/content/link/0-twitter.json
@@ -0,0 +1,6 @@
+{
+  "name": "Twitter",
+  "url": "https://twitter.com/ciffelia",
+  "color": "#1da1f2",
+  "icon": "./0-twitter.svg"
+}
diff --git a/src/assets/twitter.svg b/src/content/link/0-twitter.svg
similarity index 100%
rename from src/assets/twitter.svg
rename to src/content/link/0-twitter.svg
diff --git a/src/content/link/1-github.json b/src/content/link/1-github.json
new file mode 100644
index 0000000..9b729c5
--- /dev/null
+++ b/src/content/link/1-github.json
@@ -0,0 +1,6 @@
+{
+  "name": "GitHub",
+  "url": "https://github.com/ciffelia",
+  "color": "#231f20",
+  "icon": "./1-github.svg"
+}
diff --git a/src/assets/github.svg b/src/content/link/1-github.svg
similarity index 100%
rename from src/assets/github.svg
rename to src/content/link/1-github.svg
diff --git a/src/env.d.ts b/src/env.d.ts
index f964fe0..acef35f 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 8af457f..e4e24ca 100644
--- a/src/styles/theme.css
+++ b/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);
   }
 }