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

Fix project and blog posts

Browse Source
This commit is contained in:
itsfinniii
2026-03-28 19:24:57 +01:00
parent f4319c4165
commit 54e53d278e
7 changed files with 72 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
astro/src/components/blogs/BlogPost.astro
View File

@@ -2,6 +2,7 @@
import CalendarIcon from '@/icons/CalendarIcon.astro';
import { getImageUrl } from '@/lib/images';
import { markdownToHtml } from '@/lib/markdown';
import { getTypographyClasses } from '@/styles/markdownClasses';
import { Image } from 'astro:assets';
interface Props {
@@ -15,7 +16,7 @@ const { blog } = Astro.props;
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 lg:flex-col flex-col py-12 px-12 gap-y-8 gap-x-18 lg:max-w-[50%]">
<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">
@@ -24,16 +25,18 @@ const { blog } = Astro.props;
</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 class="aspect-1200/630 w-full max-w-full overflow-hidden">
<div class="w-full h-full rounded-2xl shadow-md object-cover">
<Image
src={getImageUrl(blog.searchEngine.thumbnail.url)}
width="1200"
height="630"
alt={blog.title}
class="rounded-2xl"
/>
</div>
</div>
<div set:html={markdownToHtml(blog.content)}></div>
<div set:html={markdownToHtml(blog.content)} class={`${getTypographyClasses()} min-w-full`}></div>
</div>
</div>

23
astro/src/components/projects/ProjectPost.astro
View File

@@ -2,6 +2,7 @@
import CalendarIcon from '@/icons/CalendarIcon.astro';
import { getImageUrl } from '@/lib/images';
import { markdownToHtml } from '@/lib/markdown';
import { getTypographyClasses } from '@/styles/markdownClasses';
import { Image } from 'astro:assets';
interface Props {
@@ -15,7 +16,7 @@ const { project } = Astro.props;
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 lg:flex-col flex-col py-12 px-12 gap-y-8 gap-x-18 lg:max-w-[50%]">
<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">
@@ -24,16 +25,18 @@ const { project } = Astro.props;
</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 class="aspect-1200/630 w-full max-w-full overflow-hidden">
<div class="w-full h-full rounded-2xl shadow-md object-cover">
<Image
src={getImageUrl(project.searchEngine.thumbnail.url)}
width="1200"
height="630"
alt={project.title}
class="rounded-2xl"
/>
</div>
</div>
<div set:html={markdownToHtml(project.content)}></div>
<div set:html={markdownToHtml(project.content)} class={`${getTypographyClasses()} min-w-full`}></div>
</div>
</div>

7
astro/src/pages/[...route].astro
View File

@@ -25,7 +25,10 @@ export async function getStaticPaths() {
}
const settings = await getSettings();
const page = await getPage(settings, Astro.url.pathname);
const pathName = Astro.url.pathname.replace(/\/$/, "");
const page = await getPage(settings, pathName);
console.log(pathName);
if (page === null || page.page === null || !page.page.exists) {
return new Response("Page not found.", {
@@ -33,8 +36,6 @@ if (page === null || page.page === null || !page.page.exists) {
statusText: "Not Found"
});
}
console.log(page);
---
{ page.page.type === "Webpage" && page.page.exists && (

3
astro/src/styles/global.css
View File

@@ -1 +1,2 @@
@import "tailwindcss";
@import "tailwindcss";
@plugin "@tailwindcss/typography";

13
astro/src/styles/markdownClasses.ts Normal file
View File

@@ -0,0 +1,13 @@
export function getTypographyClasses() {
return [
"prose prose-neutral",
"prose-h1:mb-2",
"prose-h2:mb-1.5 prose-h2:mt-0.5",
"prose-p:mt-1.5 prose-p:mb-7",
"[&>p:has(+:is(h1,h2,h3,h4,h5,h6))]:mb-8",
"[&>p:has(+p)]:mb-4",
"[&>*:first-child]:mt-0",
"[&>*:last-child]:mb-0",
"[&>pre]:max-w-[100%]"
].join(' ').trim();
}