convert to use directus

src/components/ContactCTA.astro

@@ -1,11 +1,16 @@
 ---
 import CallToAction from './CallToAction.astro';
 import Icon from './Icon.astro';
+
+import directus from "../../lib/directus"
+import { readSingleton } from "@directus/sdk";
+
+const global = await directus.request(readSingleton("global"));
 ---
 
 <aside>
 	<h2>Interested in working together?</h2>
-	<CallToAction href="mailto:alexander.lebens@gmail.com">
+	<CallToAction href=`mailto:${global.email}`>
 		Send Me a Message
 		<Icon icon="paper-plane-tilt" size="1.2em" />
 	</CallToAction>

src/components/Footer.astro

@@ -1,6 +1,11 @@
 ---
 import Icon from './Icon.astro';
 const currentYear = new Date().getFullYear();
+
+import directus from "../../lib/directus"
+import { readSingleton } from "@directus/sdk";
+
+const global = await directus.request(readSingleton("global"));
 ---
 
 <footer>
@@ -9,7 +14,7 @@ const currentYear = new Date().getFullYear();
 			Designed & Developed in Minnesota with <a href="https://astro.build/">Astro</a>
 			<Icon icon="rocket-launch" size="1.2em" />
 		</p>
-		<p>&copy; {currentYear} Alex Lebens</p>
+		<p>&copy; {currentYear} {global.name}</p>
 	</div>
 	<p class="socials">
 		<a href="https://github.com/alexlebens"> GitHub</a>

src/components/MainHead.astro

@@ -1,14 +1,19 @@
 ---
 import '../styles/global.css';
 
+import directus from "../../lib/directus"
+import { readSingleton } from "@directus/sdk";
+
 interface Props {
 	title?: string | undefined;
 	description?: string | undefined;
 }
 
+const global = await directus.request(readSingleton("global"));
+
 const {
-	title = 'Alex Lebens',
-	description = 'A profile of Alex Lebens',
+	title = `${global.name}`,
+	description = `A profile of ${global.name}`,
 } = Astro.props;
 ---
 

src/components/Nav.astro

@@ -3,6 +3,9 @@ import Icon from './Icon.astro';
 import ThemeToggle from './ThemeToggle.astro';
 import type { iconPaths } from './IconPaths';
 
+import directus from "../../lib/directus"
+import { readSingleton } from "@directus/sdk";
+
 const textLinks: { label: string; href: string }[] = [
 	{ label: 'Home', href: '/' },
 	{ label: 'Projects', href: '/projects/' },
@@ -13,13 +16,15 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
 	{ label: 'GitHub', href: 'https://github.com/alexlebens', icon: 'github-logo' },
 	{ label: 'LinkedIn', href: 'https://www.linkedin.com/in/alexanderlebens', icon: 'linkedin-logo' },
 ];
+
+const global = await directus.request(readSingleton("global"));
 ---
 
 <nav>
 	<div class="menu-header">
 		<a href="/" class="site-title">
 			<Icon icon="terminal-window" color="var(--accent-regular)" size="1.6em" gradient />
-			Alex Lebens
+			{global.name}
 		</a>
 		<menu-button>
 			<template>

src/components/PortfolioPreview.astro

@@ -1,16 +1,17 @@
 ---
-import type { CollectionEntry } from 'astro:content';
+import type { Post } from '../../lib/directus';
+import { directus_url } from '../../lib/directus';
 
 interface Props {
-	project: CollectionEntry<'projects'>;
+	posts: Post;
 }
 
-const { data, slug } = Astro.props.project;
+const post: Post = Astro.props.posts;
 ---
 
-<a class="card" href={`/projects/${slug}`}>
-	<span class="title">{data.title}</span>
-	<img src={data.img} alt={data.img_alt || ''} loading="lazy" decoding="async" />
+<a class="card" href={`/projects/${post.slug}`}>
+	<span class="title">{post.title}</span>
+	<img src={`${directus_url}/assets/${post.image}?width=500`} alt={post.image_alt || ''} loading="lazy" decoding="async" />
 </a>
 
 <style>

src/components/Skills.astro

@@ -1,22 +1,27 @@
 ---
 import Icon from './Icon.astro';
+
+import directus from "../../lib/directus"
+import { readSingleton } from "@directus/sdk";
+
+const skills = await directus.request(readSingleton("skills"));
 ---
 
 <section class="box skills">
 	<div class="stack gap-2 lg:gap-4">
 		<Icon icon="cloud" color="var(--accent-regular)" size="2.5rem" gradient />
-		<h2>AWS</h2>
-		<p>Certified DevOps Engineer and former AWS Cloud Engineer skilled in deploying, managing, and architecting a wide range of AWS services.</p>
+		<h2 set:html={skills.skill_1}/>
+		<p set:html={skills.skill_1_description}/>
 	</div>
 	<div class="stack gap-2 lg:gap-4">
 		<Icon icon="network" color="var(--accent-regular)" size="2.5rem" gradient />
-		<h2>Kubernetes</h2>
-		<p>My skills encompass Kubernetes administration and application development, validated by my CKA and CKAD certifications.</p>
+		<h2 set:html={skills.skill_2}/>
+		<p set:html={skills.skill_2_description}/>
 	</div>
 	<div class="stack gap-2 lg:gap-4">
 		<Icon icon="strategy" color="var(--accent-regular)" size="2.5rem" gradient />
-		<h2>GitOps</h2>
-		<p>Hands-on experience leveraging a variety of IaC tools such as CloudFormation, CDK, Helm, and ArgoCD to streamline infrastructure provisioning and management across multiple projects.</p>
+		<h2 set:html={skills.skill_3}/>
+		<p set:html={skills.skill_3_description}/>
 	</div>
 </section>