directus: query API for metadata

package.json

@@ -9,6 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@directus/sdk": "^18.0.3",
     "@headlessui/react": "^1.7.7",
     "@kodingdotninja/use-tailwind-breakpoint": "^0.0.5",
     "@tailwindcss/typography": "^0.5.8",

src/pages/index.tsx

@@ -8,14 +8,19 @@ import type { Project } from "../utils/types";
 import Link from "next/link";
 import Balancer from "react-wrap-balancer";
 import AppWrapper from "../components/AppWrapper";
+import directus from "../utils/directus";
+import { readItems } from "@directus/sdk";
 
 type ProjectWithBlur = Project & { bannerBlur: string };
 
 type HomeStaticProps = {
+  tagline: string;
   projects: ProjectWithBlur[];
 };
 
 export async function getStaticProps() {
+  const metadata = await directus.request(readItems("metadata"));
+
   const projects: Project[] = [
     {
       title: "Portal",
@@ -89,6 +94,7 @@ export async function getStaticProps() {
 
   return {
     props: {
+      tagline: metadata.tagline,
       projects: await Promise.all(
         projects.map(async (project) => {
           const { base64 } = await getPlaiceholder(project.banner, {
@@ -112,7 +118,10 @@ const buttons = [
   { text: "Resume", href: "/resume" },
 ];
 
-const Home: NextPage<HomeStaticProps> = ({ projects }: HomeStaticProps) => {
+const Home: NextPage<HomeStaticProps> = ({
+  tagline,
+  projects,
+}: HomeStaticProps) => {
   const useLong = useBreakpointValue("sm", true, false);
 
   // use-tailwind-breakpoint
@@ -149,10 +158,7 @@ const Home: NextPage<HomeStaticProps> = ({ projects }: HomeStaticProps) => {
               Xevion
             </div>
             <div className="px-4 text-center text-base text-zinc-500 sm:text-sm">
-              <Balancer>
+              <Balancer>{tagline}</Balancer>
-                Beginning contractor roles soon. <br /> Always open to new
-                opportunities.
-              </Balancer>
             </div>
           </div>
         </div>

src/utils/directus.ts

@@ -0,0 +1,5 @@
+import { createDirectus, rest } from "@directus/sdk";
+
+const directus = createDirectus("https://api.xevion.dev").with(rest());
+
+export default directus;

yarn.lock

@@ -17,6 +17,11 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@directus/sdk@^18.0.3":
+  version "18.0.3"
+  resolved "https://registry.yarnpkg.com/@directus/sdk/-/sdk-18.0.3.tgz#779f4e7bae1bba71c87b7ac2e7f8248bf97da01a"
+  integrity sha512-PnEDRDqr2x/DG3HZ3qxU7nFp2nW6zqJqswjii57NhriXgTz4TBUI8NmSdzQvnyHuTL9J0nedYfQGfW4v8odS1A==
+
 "@eslint/eslintrc@^1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95"