Implemented Astro native content collection for static data (#9)

* Implemented Astro native content collection for static data

* deleted spaces

---------

Co-authored-by: psan <psan>

src/components/layout/Footer.astro

@@ -1,13 +1,14 @@
 ---
 import Social from "../ui/Social.astro";
 import { Icon } from "astro-icon/components";
+import { AstroError } from "astro/errors";
+import { getCollection} from "astro:content";
 
-const name = "EFEELE";
-const email = "mailto:hello@efeele.dev";
-const github = "https://github.com/EFEELE";
-const linkedin = "https://www.linkedin.com/in/efeele/";
-const instagram = "https://www.instagram.com/efeele.dev/";
-const youtube = "https://www.youtube.com/@efeeledev";
+const [staticData] = await getCollection('staticData');
+
+if (!staticData) {
+  throw new AstroError("JSON data not found");
+}
 ---
 
 <footer
@@ -29,18 +30,18 @@ const youtube = "https://www.youtube.com/@efeeledev";
     </div>
     <div class="text-center">
       <a
-        href="https://github.com/EFEELE"
+        href={staticData.data.github}
         class="flex items-center justify-center gap-3 text-base font-normal italic max-sm:text-sm"
         aria-label="About the website development"
-        ><Icon name="code" aria-hidden="true" /> Developed by <strong>EFEELE</strong>, with Astro</a
+        ><Icon name="code" aria-hidden="true" /> Developed by <strong>{staticData.data.alias}</strong>, with Astro</a
       >
     </div>
     <div class="flex items-center justify-center gap-5" role="list" aria-label="Social media links">
-      <Social link={email} iconName="envelope" label={`Send email to ${email}`} />
-      <Social link={instagram} iconName="instagram" label={`Visit ${name} on Instagram`} />
-      <Social link={youtube} iconName="youtube" label={`Visit ${name} on YouTube`} />
-      <Social link={github} iconName="github" label={`Visit ${name} on GitHub`} />
-      <Social link={linkedin} iconName="linkedin" label={`Visit ${name} on LinkedIn`} />
+      <Social link={`mailto:${staticData.data.email}`} iconName={staticData.data.emailIconName} label={`Send email to ${staticData.data.email}`} />
+      <Social link={staticData.data.instagram} iconName={staticData.data.instagramIconName} label={`Visit ${staticData.data.alias} on Instagram`} />
+      <Social link={staticData.data.youtube} iconName={staticData.data.youtubeIconName} label={`Visit ${staticData.data.alias} on YouTube`} />
+      <Social link={staticData.data.github} iconName={staticData.data.githubIconName} label={`Visit ${staticData.data.alias} on GitHub`} />
+      <Social link={staticData.data.linkedin} iconName={staticData.data.linkedinIconName} label={`Visit ${staticData.data.alias} on LinkedIn`} />
     </div>
   </nav>
 </footer>

src/components/layout/Header.astro

@@ -3,13 +3,18 @@ import Navigation from "./Navigation.astro";
 import ThemeIcon from "../ui/ThemeIcon.astro";
 import Social from "../ui/Social.astro";
 import { Icon } from "astro-icon/components";
+import { AstroError } from "astro/errors";
+import { getCollection} from "astro:content";
+
+const [staticData] = await getCollection('staticData');
+
+if (!staticData) {
+  throw new AstroError("JSON data not found");
+}
 
 const currentPath = Astro.url.pathname;
 const routes = ["/", "/portfolio", "/about-me", ]; 
 
-const github = "https://github.com/EFEELE";
-const linkedin = "https://www.linkedin.com/in/efeele/";
-
 // Check if the current route is in the list of routes
 const isActiveRoute = routes.includes(currentPath);
 
@@ -38,11 +43,8 @@ const navItems = isActiveRoute
 
     <div class="flex items-center justify-between gap-5 text-xl">
       <div class="max-md:hidden flex items-center justify-center gap-5" role="list">
-        <Social link={github} iconName="github" />
-        <Social
-          link={linkedin}
-          iconName="linkedin"
-        />
+        <Social link={staticData.data.github} iconName={staticData.data.githubIconName} />
+        <Social link={staticData.data.linkedin} iconName={staticData.data.linkedinIconName} />
       </div>
     </div>
     <div class="flex items-center gap-5 text-xl md:pl-5">

src/components/layout/Navigation.astro

@@ -1,5 +1,13 @@
 ---
 import Social from "../ui/Social.astro";
+import { AstroError } from "astro/errors";
+import { getCollection} from "astro:content";
+
+const [staticData] = await getCollection('staticData');
+
+if (!staticData) {
+  throw new AstroError("JSON data not found");
+}
 
 const { items = [] }: { items: (keyof typeof menu)[] } = Astro.props as {
   items: (keyof typeof menu)[];
@@ -154,7 +162,7 @@ const baseClasses = {
     role="group"
     aria-label="Social Media Links"
   >
-    <Social link="https://github.com/EFEELE" iconName="github" />
-    <Social link="https://www.linkedin.com/in/efeele/" iconName="linkedin" />
+    <Social link={staticData.data.github} iconName={staticData.data.githubIconName} />
+    <Social link={staticData.data.linkedin} iconName={staticData.data.linkedinIconName} />
   </div>
 </nav>