Add the Project and Blog index pages (no pagination just yet)

astro/src/components/blogs/BlogIndex.astro

@@ -1,9 +1,52 @@
 ---
+import { getAllPaginatedBlogs } from '@/content/blogs/blogs';
+import { getSettings } from '@/content/settings/settings';
+import CalendarIcon from '@/icons/CalendarIcon.astro';
+import { getImageUrl } from '@/lib/images';
+import { markdownToHtml } from '@/lib/markdown';
+import { getBlogRoute } from '@/lib/routing';
+import { Image } from 'astro:assets';
+
 interface Props {
     page: BlogIndex;
 }
 
 const { page } = Astro.props;
+const { pageNumber } = page;
+
+const settings = await getSettings();
+const blogs = await getAllPaginatedBlogs(settings, pageNumber);
 ---
 
-<div>Blog Index</div>
+<div
+    id={`blogindex-${pageNumber}`}
+    class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
+>
+    <div class="flex flex-col justify-center items-center gap-2.5">
+        <h1 class="text-5xl font-bold">{ settings.blog.title }</h1>
+        { settings.blog.subtext !== null && (
+            <div set:html={markdownToHtml(settings.blog.subtext)}></div>
+        ) }
+    </div>
+
+    <div class="grid grid-cols-2 gap-6">
+        { blogs.map((blog) => (
+            <a href={getBlogRoute(settings.blog, blog)} class={`flex flex-col gap-2`}>
+                <Image
+                    src={getImageUrl(blog.searchEngine.thumbnail.url)}
+                    alt={blog.title}
+                    class="flex rounded-2xl shadow-md w-full"
+                    width={600}
+                    height={315}
+                />
+                <div class="flex flex-col gap-1">
+                    <h4 class="font-semibold text-[28px]">{blog.title}</h4>
+                    <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>
+            </a>
+        )) }
+    </div>
+</div>

astro/src/components/projects/ProjectIndex.astro

@@ -1,9 +1,52 @@
 ---
+import { getSettings } from '@/content/settings/settings';
+import { getAllPaginatedProjects } from '@/content/projects/projects';
+import { markdownToHtml } from '@/lib/markdown';
+import { Image } from 'astro:assets';
+import { getProjectRoute } from '@/lib/routing';
+import CalendarIcon from '@/icons/CalendarIcon.astro';
+import { getImageUrl } from '@/lib/images';
+
 interface Props {
     page: ProjectIndex;
 }
 
 const { page } = Astro.props;
+const { pageNumber } = page;
+
+const settings = await getSettings();
+const projects = await getAllPaginatedProjects(settings, pageNumber);
 ---
 
-<div>Project Index</div>
+<div
+    id={`projectindex-${pageNumber}`}
+    class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
+>
+    <div class="flex flex-col justify-center items-center gap-2.5">
+        <h1 class="text-5xl font-bold">{ settings.project.title }</h1>
+        { settings.project.subtext !== null && (
+            <div set:html={markdownToHtml(settings.project.subtext)}></div>
+        ) }
+    </div>
+
+    <div class="grid grid-cols-2 gap-6">
+        { projects.map((project) => (
+            <a href={getProjectRoute(settings.project, project)} class={`flex flex-col gap-2`}>
+                <Image
+                    src={getImageUrl(project.searchEngine.thumbnail.url)}
+                    alt={project.title}
+                    class="flex rounded-2xl shadow-md w-full"
+                    width={600}
+                    height={315}
+                />
+                <div class="flex flex-col gap-1">
+                    <h4 class="font-semibold text-[28px]">{project.title}</h4>
+                    <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>
+            </a>
+        )) }
+    </div>
+</div>

astro/src/content/blogs/blogs.ts

@@ -3,6 +3,7 @@ import { print } from 'graphql';
 import getBlogs from '@/graphql/blogs/getBlogs.graphql';
 import getBlogPost from '@/graphql/blogs/getBlog.graphql';
 import getLastBlogPosts from '@/graphql/blogs/getLastBlogPosts.graphql';
+import getPaginatedBlogs from '@/graphql/blogs/getPaginatedBlogs.graphql';
 import { formatDate } from "@/lib/dates";
 
 export async function getAllBlogs(settings: GlobalSettings): Promise<BlogPost[]> {
@@ -212,3 +213,76 @@ export async function getLastBlogs(amount: number): Promise<BlogPost[]> {
 
     return blogs;
 }
+
+export async function getAllPaginatedBlogs(settings: GlobalSettings, page: number): Promise<BlogPost[]> {
+    const client = await createDirectusConnection();
+    const result = await client.query(print(getPaginatedBlogs), {
+        date: formatDate(new Date(), "%Y-%M-%D"),
+        limit: 8,
+        pageNumber: page
+    });
+
+    let blogs: BlogPost[] = [];
+
+    result["Blogs"].forEach((blogRecord: any) => {
+        let dates: string[] = [
+            settings.blog.lastModified.toISOString(),
+            settings.website.lastModified.toISOString(),
+            blogRecord["date_created"],
+            blogRecord["date_updated"],
+            blogRecord["search_engine"][0]["date_created"],
+            blogRecord["search_engine"][0]["date_updated"],
+            blogRecord["search_engine"][0]["thumbnail"]["created_on"]
+        ];
+
+        const blog: BlogPost = {
+            exists: true,
+            type: "BlogPost",
+            id: blogRecord["id"],
+            lastModified: new Date(),
+            title: blogRecord["title"],
+            content: blogRecord["content"],
+            date: blogRecord["date"],
+            url: blogRecord["url"],
+            searchEngine: {
+                title: blogRecord["search_engine"][0]["title"],
+                description: blogRecord["search_engine"][0]["description"],
+                allowCrawlers: blogRecord["search_engine"][0]["allow_crawler"],
+                canonical: blogRecord["search_engine"][0]["canonical"],
+                priority: blogRecord["search_engine"][0]["priority"],
+                thumbnail: {
+                    url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                    height: blogRecord["search_engine"][0]["thumbnail"]["height"],
+                    width: blogRecord["search_engine"][0]["thumbnail"]["width"]
+                }
+            },
+            tags: []
+        };
+
+        blogRecord["tags"].forEach((tagRecord: any) => {
+            blog["tags"].push({
+                text: tagRecord["Tags_id"]["text"],
+                code: tagRecord["Tags_id"]["code"],
+                color: tagRecord["Tags_id"]["color"]
+            });
+
+            dates.push(tagRecord["Tags_id"]["date_created"]);
+            dates.push(tagRecord["Tags_id"]["date_updated"]);
+        });
+
+        if (dates.filter(e => e !== null).length === 0) {
+            blog.lastModified = new Date();
+        }
+        else {
+            const sortedDates: string[] = dates.sort((a: string, b: string) => {
+                return new Date(b).getTime() - new Date(a).getTime();
+            });
+
+            blog.lastModified = new Date(sortedDates[0]);
+        }
+        
+        blogs.push(blog);
+    });
+
+    return blogs;
+}

astro/src/content/projects/projects.ts

@@ -210,3 +210,75 @@ const client = await createDirectusConnection();
 
     return projects;
 }
+
+export async function getAllPaginatedProjects(settings: GlobalSettings, page: number): Promise<ProjectPost[]> {
+    const client = await createDirectusConnection();
+    const result = await client.query(print(getProjects), {
+        date: formatDate(new Date(), "%Y-%M-%D"),
+        limit: 6,
+        pageNumber: page
+    });
+
+    let projects: ProjectPost[] = [];
+
+    result["Projects"].forEach((projectRecord: any) => {
+        let dates: string[] = [
+            settings.project.lastModified.toISOString(),
+            settings.website.lastModified.toISOString(),
+            projectRecord["date_created"],
+            projectRecord["date_updated"],
+            projectRecord["search_engine"][0]["date_created"],
+            projectRecord["search_engine"][0]["date_updated"],
+            projectRecord["search_engine"][0]["thumbnail"]["created_on"]
+        ];
+
+        const project: ProjectPost = {
+            exists: true,
+            type: "ProjectPost",
+            lastModified: new Date(),
+            title: projectRecord["title"],
+            content: projectRecord["content"],
+            date: projectRecord["date"],
+            url: projectRecord["url"],
+            searchEngine: {
+                title: projectRecord["search_engine"][0]["title"],
+                description: projectRecord["search_engine"][0]["description"],
+                allowCrawlers: projectRecord["search_engine"][0]["allow_crawler"],
+                canonical: projectRecord["search_engine"][0]["canonical"],
+                priority: projectRecord["search_engine"][0]["priority"],
+                thumbnail: {
+                    url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                    height: projectRecord["search_engine"][0]["thumbnail"]["height"],
+                    width: projectRecord["search_engine"][0]["thumbnail"]["width"]
+                }
+            },
+            tags: []
+        };
+
+        projectRecord["tags"].forEach((tagRecord: any) => {
+            project["tags"].push({
+                text: tagRecord["Tags_id"]["text"],
+                code: tagRecord["Tags_id"]["code"],
+                color: tagRecord["Tags_id"]["color"]
+            });
+
+            dates.push(tagRecord["Tags_id"]["date_created"]);
+            dates.push(tagRecord["Tags_id"]["date_updated"]);
+        });
+
+        if (dates.filter(e => e !== null).length === 0) {
+            project.lastModified = new Date();
+        }
+        else {
+            const sortedDates: string[] = dates.sort((a: string, b: string) => {
+                return new Date(b).getTime() - new Date(a).getTime();
+            });
+
+            project.lastModified = new Date(sortedDates[0]);
+        }
+        
+        projects.push(project);
+    });
+
+    return projects;
+}

astro/src/graphql/blogs/getPaginatedBlogs.graphql

@@ -0,0 +1,39 @@
+query getPaginatedBlogs($date: String!, $pageNumber: Int!, $limit: Int!) {
+    Blogs(sort: ["-date", "-date_created"], filter: { status: { _eq: "published" }, date: { _lte: $date } }, limit: $limit, page: $pageNumber) {
+        id,
+        date_created,
+        date_updated,
+        status,
+        title,
+        url,
+        date,
+        content,
+        tags {
+            Tags_id {
+                id,
+                date_created,
+                date_updated,
+                text,
+                code,
+                color
+            }
+        },
+        search_engine {
+            id,
+            date_created,
+            date_updated,
+            title,
+            description,
+            thumbnail {
+                id,
+                created_on,
+                filename_disk,
+                width,
+                height
+            },
+            canonical,
+            allow_crawler,
+            priority
+        }
+    }
+}

astro/src/graphql/projects/getPaginatedProjects.graphql

@@ -0,0 +1,39 @@
+query getAllProjects($date: String!, $pageNumber: Int!, $limit: Int!) {
+    Projects(sort: ["-date", "-date_created"], filter: { status: { _eq: "published" }, date: { _lte: $date } }, limit: $limit, page: $pageNumber) {
+        id,
+        date_created,
+        date_updated,
+        status,
+        title,
+        url,
+        date,
+        content,
+        tags {
+            Tags_id {
+                id,
+                date_created,
+                date_updated,
+                text,
+                code,
+                color
+            }
+        },
+        search_engine {
+            id,
+            date_created,
+            date_updated,
+            title,
+            description,
+            thumbnail {
+                id,
+                created_on,
+                filename_disk,
+                width,
+                height
+            },
+            canonical,
+            allow_crawler,
+            priority
+        }
+    }
+}

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

@@ -31,6 +31,8 @@ if (page === null || page.page === null || !page.page.exists) {
         statusText: "Not Found"
     });
 }
+
+console.log(page);
 ---
 
 { page.page.type === "Webpage" && page.page.exists && (
@@ -110,7 +112,7 @@ if (page === null || page.page === null || !page.page.exists) {
             }
     }}}>
         <Fragment slot="content">
-            <ProjectIndex page={page.page as ProjectIndex} />
+            <ProjectIndex page={page.page} />
         </Fragment>
     </WebpageLayout>
 ) }