feat: use notion as a headless cms to display dynamic bio

package.json

@@ -18,6 +18,7 @@
     "@emailjs/browser": "^3.12.1",
     "@iconify/json": "^2.2.218",
     "@iconify/tailwind": "^1.1.1",
+    "@notionhq/client": "^2.2.15",
     "@onboardbase/nudgeer-safe": "^0.2.1",
     "@vee-validate/zod": "^4.13.1",
     "@vueuse/core": "^10.10.1",

src/components/Home.astro

@@ -1,9 +1,46 @@
 ---
 import { Image } from "astro:assets";
+import { Client } from "@notionhq/client";
+import { sequence } from "astro:middleware";
+
+const notion = new Client({
+  auth: import.meta.env.NOTION_API_KEY,
+});
+
+let title: string = `
+I'm a Software Engineer focused on Frontend, AWS Certified Cloud Practitioner and a Computer Science student who is always eager to learn and explore, I've worked with C++, JavaScript, TypeScript, React, Nextjs, Vue, Nuxtjs, Astro, Docker, Node.js, Express.js, Prisma and PostgreSQL.
+`;
+
+try {
+  const response = await fetch(
+    "https://api.notion.com/v1/pages/0d32acfc4b91411b8b7976be5a9c78a1",
+    {
+      headers: {
+        Authorization: `Bearer ${import.meta.env.NOTION_API_KEY}`,
+        "Notion-Version": "2022-06-28",
+      },
+    }
+  );
+  const data = await response.json();
+
+  if (
+    data.properties &&
+    data.properties.title &&
+    data.properties.title.title &&
+    data.properties.title.title[0] &&
+    data.properties.title.title[0].text
+  ) {
+    title = data.properties.title.title[0].text.content;
+  } else {
+    console.error("Unexpected data structure:", data);
+  }
+} catch (error) {
+  console.error("Error fetching Notion data:", error);
+}
 ---
 
 <main class="flex select-none flex-col *:mx-auto">
-  <section class="container flex flex-col gap-4">
+  <section class="container flex flex-col gap-4 lg:!max-w-5xl">
     <div class="flex flex-col-reverse items-center justify-between gap-4">
       <div class="flex flex-col items-center">
         <h1 class="text-lg font-bold">Amr Tamer</h1>
@@ -19,11 +56,9 @@ import { Image } from "astro:assets";
         height={200}
       />
     </div>
-    <div class="space-y-4 *:text-base [&_span]:block">
-      <p>
-        I'm a software engineer focused on Frontend and a computer science
-        student who is always eager to learn and explore, I've worked with C++,
-        JavaScript, TypeScript, React, Nextjs, Vue, Nuxtjs, Astro and Docker.
+    <div class="w-full space-y-4 *:text-base [&_span]:block">
+      <p id="bio">
+        {title}
       </p>
       <div class="leading-[3rem]">
         You can <a

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/lib/types.d.ts

@@ -21,3 +21,53 @@ type Work = {
   description: string;
   skills: string;
 };
+
+interface NotionUser {
+  object: "user";
+  id: string;
+}
+
+interface NotionTitle {
+  type: "text";
+  text: {
+    content: string;
+    link: null | string;
+  };
+  annotations: {
+    bold: boolean;
+    italic: boolean;
+    strikethrough: boolean;
+    underline: boolean;
+    code: boolean;
+    color: string;
+  };
+  plain_text: string;
+  href: null | string;
+}
+
+interface NotionPage {
+  object: "page";
+  id: string;
+  created_time: string;
+  last_edited_time: string;
+  created_by: NotionUser;
+  last_edited_by: NotionUser;
+  cover: null | any; // You can define a more specific type if needed
+  icon: null | any; // You can define a more specific type if needed
+  parent: {
+    type: "workspace";
+    workspace: boolean;
+  };
+  archived: boolean;
+  in_trash: boolean;
+  properties: {
+    title: {
+      id: string;
+      type: "title";
+      title: NotionTitle[];
+    };
+  };
+  url: string;
+  public_url: string;
+  request_id: string;
+}