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

* Implemented Astro native content collection for static data * deleted spaces --------- Co-authored-by: psan <psan>
2025-06-03 18:16:13 +02:00
parent b371cba08b
commit 1b21576f4d
8 changed files with 141 additions and 74 deletions
--- a/src/components/blog/Hero.astro
+++ b/src/components/blog/Hero.astro
@@ -4,17 +4,14 @@ import LastPost from "../blog/LastPost.astro";
 import Languages from "../blog/Languages.astro";
 import { Icon } from "astro-icon/components";
 import Heading from "../ui/Heading.astro";
+import { AstroError } from "astro/errors";
+import { getCollection} from "astro:content";

-const { 
-  profileImage = "/images/efeeleprofile.webp",
-  profileAlt = "Photo of Fernando Aldair López Ponce (EFEELE) for the blog",
-  profileLink = "/about-me",
-  profileTitle = "FrontEnd Developer",
-  profileName = "Fernando Aldair López Ponce",
-  githubLink = "https://github.com/EFEELE/NeonMint",
-  githubText = "Do you like this blog's design?",
-  techsTitle = "TECHS"
-} = Astro.props;
+const [staticData] = await getCollection('staticData');
+
+if (!staticData) {
+  throw new AstroError("JSON data not found");
+}
 ---

 <section class="py-8 px-8  max-sm:px-4 max-sm:py-2">
@@ -24,7 +21,7 @@ const {
    <div
      class="p-8 max-md:gap-0  max-xl:p-5 h-full max-md:p-4 max-lg:gap-1 gap-3 flex flex-col border border-emerald-50 rounded-2xl dark:bg-zinc-800 bg-gradient-to-r from-riptide-200 to-mint-200 dark:from-riptide-500 dark:to-mint-500 dark:border-zinc-800 dark:border-2 dark:bg-gradient-radial md:col-start-4 col-start-2 row-start-2"
    >
-      <Heading text={techsTitle} textGradient="" level={3}/>
+      <Heading text={staticData.data.techsTitle} textGradient="" level={3}/>

      <div class="overflow-y-auto">
        <Languages />
@@ -39,13 +36,13 @@ const {
        <div
          class="w-full h-full relative overflow-hidden rounded-2xl bg-gradient-to-tr from-riptide-100 to-white dark:from-transparent dark:bg-gradient-to-bl dark:to-transparent "
        >
-          <a target="_blank" href={githubLink}>
+          <a target="_blank" href={staticData.data.github}>
            <div
              class="p-8 h-full relative max-xl:p-5 max-md:p-4 flex flex-col gap-8 dark:before:[background-image:radial-gradient(circle,_rgba(13,188,130)_0,_rgba(1,45,34)_100%)] before:[background-image:radial-gradient(circle,_rgba(95,255,202)_0,_rgba(144,253,210)_100%)]  before:h-[30%] before:absolute before:aspect-square xl:before:bottom-10 before:left-30 before:bottom-30 before:rounded-full before:blur-3xl before:opacity-90 before:transition before:z-0"
            >
              <div class="z-2">
                <Heading
-                  text={githubText}
+                  text={staticData.data.githubText}
                  textGradient=""
                  level={3}
                />
@@ -71,11 +68,11 @@ const {
          class="group-hover:scale-103 ease-in-out duration-500 w-5/12 max-sm:w-auto flex justify-center items-center"
        >
          <div
-            aria-label={profileAlt}
+            aria-label={staticData.data.profileAlt}
            class="h-full w-full max-sm:rounded-full rounded-2xl max-sm:size-20 bg-center bg-cover"
-            style={`background-image: url(${profileImage})`}
+            style={`background-image: url(${staticData.data.profileImage})`}
          >
-            <a href={profileLink} class="h-full w-full flex"></a>
+            <a href={staticData.data.profileLink} class="h-full w-full flex"></a>
          </div>
        </div>
        <div class="p-4 w-7/12 flex flex-col justify-center gap-4 max-sm:w-fit max-md:gap-2">
@@ -83,15 +80,15 @@ const {
            class="font-extrabold text-lg max-xl:text-base max-lg:text-sm max-lg:flex max-lg:flex-col-reverse max-md:flex-row leading-normal max-sm:leading-none"
            ><b
              class="bg-gradient-to-r  from-riptide-400 to-mint-400 dark:from-riptide-200 dark:to-mint-400 text-transparent bg-clip-text"
-              >{profileTitle}</b
+              >{staticData.data.profileTitle}</b
            > 🚀</span
          >
          <Heading
-          text={profileName}
+          text={staticData.data.profileName}
          level={3}
        />
          <Button
-            link={profileLink}
+            link={staticData.data.profileLink}
            text="About Me"
            iconName="person"
            class="drop-shadow-xl"
--- a/src/components/layout/Footer.astro
+++ b/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>
--- a/src/components/layout/Header.astro
+++ b/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">
--- a/src/components/layout/Navigation.astro
+++ b/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>
--- a/src/components/portfolio/Contact.astro
+++ b/src/components/portfolio/Contact.astro
@@ -1,12 +1,14 @@
 ---
 import Heading from "../ui/Heading.astro";
 import Button from "../ui/Button.astro";
+import { AstroError } from "astro/errors";
+import { getCollection} from "astro:content";

-const mail = "hello@efeele.dev";
-const title = "Ready to take your idea to the next level?";
-const subtitle = "Let's work together.";
-const buttonText = "Contact Me";
-const buttonIcon = "paperplane";
+const [staticData] = await getCollection('staticData');
+
+if (!staticData) {
+  throw new AstroError("JSON data not found");
+}
 ---

 <section>
@@ -17,8 +19,8 @@ const buttonIcon = "paperplane";
      <div class="flex items-center justify-between max-sm:flex-col max-sm:gap-8 max-sm:text-center">
        <div class="max-w-lg">
          <Heading
-            text={title}
-            textGradient={subtitle}
+            text={staticData.data.contactSectionSubtitle}
+            textGradient={staticData.data.contactSectionSubtitle}
            level={2}
          />
        </div>
@@ -27,9 +29,9 @@ const buttonIcon = "paperplane";
        >   
          <Button
            variant="big"
-            link={`mailto:${mail}`}
-            text={buttonText}
-            iconName={buttonIcon}
+            link={`mailto:${staticData.data.email}`}
+            text={staticData.data.contactSectionButtonText}
+            iconName={staticData.data.contactSectionButtonIcon}
          />
        </div>
      </div>
--- a/src/components/portfolio/HeroIndex.astro
+++ b/src/components/portfolio/HeroIndex.astro
@@ -4,18 +4,14 @@ import Heading from "../ui/Heading.astro";
 import Tools from "../portfolio/Tools.astro";
 import { Icon } from "astro-icon/components";
 import Hobbies from "../portfolio/Hobbies.astro";
+import { AstroError } from "astro/errors";
+import { getCollection} from "astro:content";

-const  {
-  profileImage = "/images/efeeleprofile.webp",
-  profileAlt = "Photo of Fernando Aldair López Ponce (EFEELE) for the blog",
-  profileLink = "/about-me",
-  profileTitle = "FrontEnd Developer",
-  profileName = "Fernando López",
-  githubLink = "https://github.com/EFEELE/NeonMint",
-  githubText = "Do you like this blog's design?",
-  portfolioImage = "/images/portfolio.webp",
-  email = "hello@efeele.dev",
-} = Astro.props;;
+const [staticData] = await getCollection('staticData');
+
+if (!staticData) {
+  throw new AstroError("JSON data not found");
+}
 ---

 <section
@@ -40,11 +36,11 @@ const  {
          <div class="relative z-20 flex w-full rounded-full bg-mint-900">
            <div
              class="w-full aspect-square rounded-full bg-center bg-cover"
-              style={`background-image: url(${profileImage})`}
-              aria-label="Photo of Fernando Aldair López Ponce (EFEELE) for the blog"
+              style={`background-image: url(${staticData.data.profileImage})`}
+              aria-label={staticData.data.profileAlt}
            >
              <a
-                href={profileLink}
+                href={staticData.data.profileLink}
                class="flex h-full w-full"
                aria-label="View about me page"></a>
            </div>
@@ -67,14 +63,14 @@ const  {
        <h1
          class="text-4xl font-black leading-none text-blacktext  dark:text-white max-xl:text-3xl max-lg:text-2xl  max-sm:text-center"
        >
-          {profileName} 👋
+          {staticData.data.profileName} 👋
        </h1>
        <p
          class="mb-0 text-lg font-semibold leading-8 text-blacktext dark:text-gray-200 max-xl:text-base"
        >
          <span
            class="bg-gradient-to-r from-riptide-500 to-mint-500 bg-clip-text font-black text-transparent   dark:from-riptide-300 dark:to-mint-200"
-            >{profileTitle}</span
+            >{staticData.data.profileTitle}</span
          > with <span
            class="bg-gradient-to-r from-riptide-500 to-mint-500 bg-clip-text font-black text-transparent  dark:from-riptide-300 dark:to-mint-200"
            >8 years of experience</span
@@ -83,12 +79,12 @@ const  {

        <div class="flex gap-4 max-sm:flex-col max-sm:items-center">
          <Button
-            link={"mailto:" + email}
-            text="Contact Me"
-            iconName="envelope"
+            link={"mailto:" + staticData.data.email}
+            text={staticData.data.contactSectionButtonText}
+            iconName={staticData.data.emailIconName}
          />
          <Button
-            link={profileLink}
+            link={staticData.data.profileLink}
            text="About Me"
            iconName="person"
            variant="dark"
@@ -121,7 +117,7 @@ const  {
        >
          <a
            target="_blank"
-            href={githubLink}
+            href={staticData.data.github}
            aria-label="View this site's code repository on GitHub"
          >
            <div
@@ -198,7 +194,7 @@ const  {
        </p>
        <img
          class="relative left-0 z-0 mt-40 w-full object-cover transition-all ease-in-out duration-500 group-hover:rotate-2 group-hover:scale-185 max-xl:mt-28 max-lg:mt-10 max-sm:mt-0 max-md:scale-100 max-sm:scale-125 scale-180 max-md:group-hover:scale-105 before:[background-image:radial-gradient(circle,_rgba(13,188,130)_0,_rgba(1,45,34)_100%)] before:absolute before:left-30 before:-bottom-0 before:h-[80%] before:aspect-square before:rounded-full before:blur-3xl before:opacity-80 before:-z-10 before:transition"
-          src={portfolioImage}
+          src={staticData.data.portfolioImage}
          alt="View of two website interfaces with modern and dark design. The first screen shows the title 'Behind the Code' with a rocket and dark background, explaining the origin of a community software project. The second screen presents a platform for finding speakers, with an attractive design, expert photos, and a prominent search button."
          loading="lazy"
          width="480"
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -0,0 +1,36 @@
+// src/content/config.ts
+import { defineCollection, z } from 'astro:content';
+
+const jsonDataCollection = defineCollection({
+  type: 'data',
+  schema: z.object({
+    //Define JSON-file structure
+    profileImage: z.string(),
+    profileAlt: z.string(),
+    profileLink: z.string(),
+    profileTitle: z.string(),
+    profileName: z.string(),
+    github: z.string().url(),
+    githubText: z.string(),
+    portfolioImage: z.string(),
+    email: z.string().email(),
+    linkedin: z.string().url(),
+    instagram: z.string().url(),
+    youtube: z.string().url(),
+    alias: z.string(),
+    contactSectionTitle: z.string(),
+    contactSectionSubtitle: z.string(),
+    contactSectionButtonText: z.string(),
+    contactSectionButtonIcon: z.string(),
+    techsTitle: z.string(),
+    instagramIconName: z.string(),
+    youtubeIconName: z.string(),
+    githubIconName: z.string(),
+    linkedinIconName: z.string(),
+    emailIconName: z.string()
+  }),
+});
+
+export const collections = {
+  staticData: jsonDataCollection,
+};
--- a/src/content/staticData/allStaticData.json
+++ b/src/content/staticData/allStaticData.json
@@ -0,0 +1,25 @@
+{
+  "profileImage": "/images/efeeleprofile.webp",
+  "profileAlt": "Photo of Fernando Aldair López Ponce (EFEELE) for the blog",
+  "profileLink": "/about-me",
+  "profileTitle": "FrontEnd Developer",
+  "profileName": "Fernando López",
+  "github": "https://github.com/EFEELE/NeonMint",
+  "githubText": "Do you like this blog's design?",
+  "portfolioImage": "/images/portfolio.webp",
+  "email": "hello@efeele.dev",
+  "linkedin": "https://www.linkedin.com/in/efeele/",
+  "instagram": "https://www.instagram.com/efeele.dev/",
+  "youtube": "https://www.youtube.com/@efeeledev",
+  "alias": "EFEELE",
+  "contactSectionTitle": "Ready to take your idea to the next level?",
+  "contactSectionSubtitle": "Let's work together.",
+  "contactSectionButtonText": "Contact Me",
+  "contactSectionButtonIcon": "paperplane",
+  "techsTitle": "TECHS",
+  "instagramIconName": "instagram",
+  "youtubeIconName": "youtube",
+  "githubIconName": "github",
+  "linkedinIconName": "linkedin",
+  "emailIconName": "envelope"
+}