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/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 { 
+const [staticData] = await getCollection('staticData');
-  profileImage = "/images/efeeleprofile.webp",
+
-  profileAlt = "Photo of Fernando Aldair López Ponce (EFEELE) for the blog",
+if (!staticData) {
-  profileLink = "/about-me",
+  throw new AstroError("JSON data not found");
-  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;
 ---
 
 <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"

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 [staticData] = await getCollection('staticData');
-const email = "mailto:hello@efeele.dev";
+
-const github = "https://github.com/EFEELE";
+if (!staticData) {
-const linkedin = "https://www.linkedin.com/in/efeele/";
+  throw new AstroError("JSON data not found");
-const instagram = "https://www.instagram.com/efeele.dev/";
+}
-const youtube = "https://www.youtube.com/@efeeledev";
 ---
 
 <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={`mailto:${staticData.data.email}`} iconName={staticData.data.emailIconName} label={`Send email to ${staticData.data.email}`} />
-      <Social link={instagram} iconName="instagram" label={`Visit ${name} on Instagram`} />
+      <Social link={staticData.data.instagram} iconName={staticData.data.instagramIconName} label={`Visit ${staticData.data.alias} on Instagram`} />
-      <Social link={youtube} iconName="youtube" label={`Visit ${name} on YouTube`} />
+      <Social link={staticData.data.youtube} iconName={staticData.data.youtubeIconName} label={`Visit ${staticData.data.alias} on YouTube`} />
-      <Social link={github} iconName="github" label={`Visit ${name} on GitHub`} />
+      <Social link={staticData.data.github} iconName={staticData.data.githubIconName} label={`Visit ${staticData.data.alias} on GitHub`} />
-      <Social link={linkedin} iconName="linkedin" label={`Visit ${name} on LinkedIn`} />
+      <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={staticData.data.github} iconName={staticData.data.githubIconName} />
-        <Social
+        <Social link={staticData.data.linkedin} iconName={staticData.data.linkedinIconName} />
-          link={linkedin}
-          iconName="linkedin"
-        />
       </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={staticData.data.github} iconName={staticData.data.githubIconName} />
-    <Social link="https://www.linkedin.com/in/efeele/" iconName="linkedin" />
+    <Social link={staticData.data.linkedin} iconName={staticData.data.linkedinIconName} />
   </div>
 </nav>

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 [staticData] = await getCollection('staticData');
-const title = "Ready to take your idea to the next level?";
+
-const subtitle = "Let's work together.";
+if (!staticData) {
-const buttonText = "Contact Me";
+  throw new AstroError("JSON data not found");
-const buttonIcon = "paperplane";
+}
 ---
 
 <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}
+            text={staticData.data.contactSectionSubtitle}
-            textGradient={subtitle}
+            textGradient={staticData.data.contactSectionSubtitle}
             level={2}
           />
         </div>
@@ -27,9 +29,9 @@ const buttonIcon = "paperplane";
         >   
           <Button
             variant="big"
-            link={`mailto:${mail}`}
+            link={`mailto:${staticData.data.email}`}
-            text={buttonText}
+            text={staticData.data.contactSectionButtonText}
-            iconName={buttonIcon}
+            iconName={staticData.data.contactSectionButtonIcon}
           />
         </div>
       </div>

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  {
+const [staticData] = await getCollection('staticData');
-  profileImage = "/images/efeeleprofile.webp",
+
-  profileAlt = "Photo of Fernando Aldair López Ponce (EFEELE) for the blog",
+if (!staticData) {
-  profileLink = "/about-me",
+  throw new AstroError("JSON data not found");
-  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;;
 ---
 
 <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})`}
+              style={`background-image: url(${staticData.data.profileImage})`}
-              aria-label="Photo of Fernando Aldair López Ponce (EFEELE) for the blog"
+              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}
+            link={"mailto:" + staticData.data.email}
-            text="Contact Me"
+            text={staticData.data.contactSectionButtonText}
-            iconName="envelope"
+            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"

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,
+};

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"
+}