itsfinniii/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
itsfinniii
2026-03-28 16:40:54 +01:00
parent 5cbc906d65
commit 7e501c399b
7 changed files with 315 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
astro/src/components/blogs/BlogIndex.astro
View File

@@ -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>

45
astro/src/components/projects/ProjectIndex.astro
View File

@@ -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>