Create Last Blogs component with responsive design

This commit is contained in:
itsfinniii
2026-03-26 22:03:03 +01:00
parent 1e839680b4
commit 1fd51a6a3f
4 changed files with 174 additions and 1 deletions

View File

@@ -2,6 +2,7 @@ import { createDirectusConnection } from "@/lib/directus";
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 { formatDate } from "@/lib/dates";
export async function getAllBlogs(settings: GlobalSettings): Promise<BlogPost[]> {
@@ -24,6 +25,7 @@ export async function getAllBlogs(settings: GlobalSettings): Promise<BlogPost[]>
];
const blog: BlogPost = {
exists: true,
type: "BlogPost",
id: blogRecord["id"],
lastModified: new Date(),
@@ -93,8 +95,8 @@ export async function getBlog(settings: GlobalSettings, route: string): Promise<
];
const blog: BlogPost = {
type: "BlogPost",
exists: true,
type: "BlogPost",
id: blogRecord["id"],
lastModified: new Date(),
title: blogRecord["title"],
@@ -140,3 +142,73 @@ export async function getBlog(settings: GlobalSettings, route: string): Promise<
return blog;
}
export async function getLastBlogs(amount: number): Promise<BlogPost[]> {
const client = await createDirectusConnection();
const result = await client.query(print(getLastBlogPosts), {
date: formatDate(new Date(), "%Y-%M-%D"),
amount: amount
});
let blogs: BlogPost[] = [];
result["Blogs"].forEach((blogRecord: any) => {
let dates: string[] = [
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;
}