From 7e501c399b5d94645b5a8c70af8f5fd5bbc55f0e Mon Sep 17 00:00:00 2001 From: itsfinniii <102350242+itsfinniii@users.noreply.github.com> Date: Sat, 28 Mar 2026 16:40:54 +0100 Subject: [PATCH] Add the Project and Blog index pages (no pagination just yet) --- astro/src/components/blogs/BlogIndex.astro | 45 ++++++++++- .../components/projects/ProjectIndex.astro | 45 ++++++++++- astro/src/content/blogs/blogs.ts | 74 +++++++++++++++++++ astro/src/content/projects/projects.ts | 72 ++++++++++++++++++ .../graphql/blogs/getPaginatedBlogs.graphql | 39 ++++++++++ .../projects/getPaginatedProjects.graphql | 39 ++++++++++ astro/src/pages/[...route].astro | 4 +- 7 files changed, 315 insertions(+), 3 deletions(-) create mode 100644 astro/src/graphql/blogs/getPaginatedBlogs.graphql create mode 100644 astro/src/graphql/projects/getPaginatedProjects.graphql diff --git a/astro/src/components/blogs/BlogIndex.astro b/astro/src/components/blogs/BlogIndex.astro index 4c4ad3f..cfa5182 100644 --- a/astro/src/components/blogs/BlogIndex.astro +++ b/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); --- -
Blog Index
+
+
+

{ settings.blog.title }

+ { settings.blog.subtext !== null && ( +
+ ) } +
+ +
+ { blogs.map((blog) => ( + + {blog.title} +
+

{blog.title}

+
+ +
{blog.date}
+
+
+ + )) } +
+
diff --git a/astro/src/components/projects/ProjectIndex.astro b/astro/src/components/projects/ProjectIndex.astro index 34dcd2c..95de3b1 100644 --- a/astro/src/components/projects/ProjectIndex.astro +++ b/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); --- -
Project Index
+
+
+

{ settings.project.title }

+ { settings.project.subtext !== null && ( +
+ ) } +
+ +
+ { projects.map((project) => ( + + {project.title} +
+

{project.title}

+
+ +
{project.date}
+
+
+ + )) } +
+
diff --git a/astro/src/content/blogs/blogs.ts b/astro/src/content/blogs/blogs.ts index 6f83001..ae7e7d8 100644 --- a/astro/src/content/blogs/blogs.ts +++ b/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 { @@ -212,3 +213,76 @@ export async function getLastBlogs(amount: number): Promise { return blogs; } + +export async function getAllPaginatedBlogs(settings: GlobalSettings, page: number): Promise { + 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; +} diff --git a/astro/src/content/projects/projects.ts b/astro/src/content/projects/projects.ts index 6c8815c..2ddb203 100644 --- a/astro/src/content/projects/projects.ts +++ b/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 { + 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; +} diff --git a/astro/src/graphql/blogs/getPaginatedBlogs.graphql b/astro/src/graphql/blogs/getPaginatedBlogs.graphql new file mode 100644 index 0000000..8c70fb8 --- /dev/null +++ b/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 + } + } +} diff --git a/astro/src/graphql/projects/getPaginatedProjects.graphql b/astro/src/graphql/projects/getPaginatedProjects.graphql new file mode 100644 index 0000000..91f1d10 --- /dev/null +++ b/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 + } + } +} diff --git a/astro/src/pages/[...route].astro b/astro/src/pages/[...route].astro index 07b13fd..2a90dc2 100644 --- a/astro/src/pages/[...route].astro +++ b/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) { } }}}> - + ) }