Add project posts to the website

astro/src/components/blogs/BlogPost.astro

@@ -0,0 +1,39 @@
+---
+import CalendarIcon from '@/icons/CalendarIcon.astro';
+import { getImageUrl } from '@/lib/images';
+import { markdownToHtml } from '@/lib/markdown';
+import { Image } from 'astro:assets';
+
+interface Props {
+    blog: BlogPost;
+}
+
+const { blog } = Astro.props;
+---
+
+<div
+    id={`blog-${blog.id}`}
+    class="flex flex-row justify-center items-center"
+>
+    <div class="flex lg:flex-col flex-col py-12 px-12 gap-y-8 gap-x-18 lg:max-w-[67%] w-full">
+        <div class="flex flex-col gap-3">
+            <h1 class="font-semibold text-5xl">{blog.title}</h1>
+            <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
+                <CalendarIcon width={20} height={20} />
+                <div>{blog.date}</div>
+            </div>
+        </div>
+
+        <div>
+            <Image
+                src={getImageUrl(blog.searchEngine.thumbnail.url)}
+                width="1200"
+                height="630"
+                alt={blog.title}
+                class="rounded-2xl shadow-md object-cover"
+            />
+        </div>
+
+        <div set:html={markdownToHtml(blog.content)}></div>
+    </div>
+</div>

astro/src/components/projects/ProjectPost.astro

@@ -0,0 +1,39 @@
+---
+import CalendarIcon from '@/icons/CalendarIcon.astro';
+import { getImageUrl } from '@/lib/images';
+import { markdownToHtml } from '@/lib/markdown';
+import { Image } from 'astro:assets';
+
+interface Props {
+    project: ProjectPost;
+}
+
+const { project } = Astro.props;
+---
+
+<div
+    id={`project-${project.id}`}
+    class="flex flex-row justify-center items-center"
+>
+    <div class="flex lg:flex-col flex-col py-12 px-12 gap-y-8 gap-x-18 lg:max-w-[67%] w-full">
+        <div class="flex flex-col gap-3">
+            <h1 class="font-semibold text-5xl">{project.title}</h1>
+            <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
+                <CalendarIcon width={20} height={20} />
+                <div>{project.date}</div>
+            </div>
+        </div>
+
+        <div>
+            <Image
+                src={getImageUrl(project.searchEngine.thumbnail.url)}
+                width="1200"
+                height="630"
+                alt={project.title}
+                class="rounded-2xl shadow-md object-cover"
+            />
+        </div>
+
+        <div set:html={markdownToHtml(project.content)}></div>
+    </div>
+</div>

astro/src/content/projects/projects.ts

@@ -28,6 +28,7 @@ export async function getAllProjects(settings: GlobalSettings): Promise<ProjectP
             exists: true,
             type: "ProjectPost",
             lastModified: new Date(),
+            id: projectRecord["id"],
             title: projectRecord["title"],
             content: projectRecord["content"],
             date: projectRecord["date"],
@@ -98,6 +99,7 @@ export async function getProject(settings: GlobalSettings, route: string): Promi
         exists: true,
 
         lastModified: new Date(),
+        id: projectRecord["id"],
         title: projectRecord["title"],
         content: projectRecord["content"],
         date: projectRecord["date"],
@@ -143,7 +145,7 @@ export async function getProject(settings: GlobalSettings, route: string): Promi
 }
 
 export async function getLastProjects(amount: number): Promise<ProjectPost[]> {
-const client = await createDirectusConnection();
+    const client = await createDirectusConnection();
     const result = await client.query(print(getLastProjectsQuery), {
         date: formatDate(new Date(), "%Y-%M-%D"),
         amount: amount
@@ -164,6 +166,7 @@ const client = await createDirectusConnection();
             exists: true,
             type: "ProjectPost",
             lastModified: new Date(),
+            id: projectRecord["id"],
             title: projectRecord["title"],
             content: projectRecord["content"],
             date: projectRecord["date"],
@@ -236,6 +239,7 @@ export async function getAllPaginatedProjects(settings: GlobalSettings, page: nu
             exists: true,
             type: "ProjectPost",
             lastModified: new Date(),
+            id: projectRecord["id"],
             title: projectRecord["title"],
             content: projectRecord["content"],
             date: projectRecord["date"],

astro/src/graphql/projects/getProject.graphql

@@ -27,7 +27,7 @@ query getAllProjects($route: String!) {
             thumbnail {
                 id,
                 created_on,
-                filename_download,
+                filename_disk,
                 width,
                 height
             },

astro/src/pages/[...route].astro

@@ -8,6 +8,8 @@ import ProjectLayout from "@/layouts/ProjectLayout.astro";
 import BlogIndex from "@/components/blogs/BlogIndex.astro";
 import ProjectIndex from "@/components/projects/ProjectIndex.astro";
 import Webpage from "@/components/webpage/Webpage.astro";
+import BlogPost from "@/components/blogs/BlogPost.astro";
+import ProjectPost from "@/components/projects/ProjectPost.astro";
 
 export async function getStaticPaths() {
     const settings = await getSettings();
@@ -92,7 +94,7 @@ console.log(page);
         tags: []
     }}>
         <Fragment slot="content">
-            <dib>BlogPost</dib>
+            <BlogPost blog={page.page} />
         </Fragment>
     </BlogLayout>
 ) }
@@ -134,7 +136,7 @@ console.log(page);
         tags: []
     }}>
         <Fragment slot="content">
-            <div>ProjectPost</div>
+            <ProjectPost project={page.page} />
         </Fragment>
     </ProjectLayout>
 ) }

astro/src/types/projects/project.d.ts

@@ -2,6 +2,7 @@ type ProjectPost = {
     type: "ProjectPost";
     exists: boolean;
 
+    id: string;
     title: string;
     url: string;
     date: string;