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

26
astro/package-lock.json generated
View File

@@ -11,6 +11,7 @@
"@astrojs/preact": "^4.1.3",
"@directus/sdk": "^21.2.0",
"@rollup/plugin-graphql": "^2.0.5",
"@tailwindcss/typography": "^0.5.19",
"@tailwindcss/vite": "^4.2.1",
"astro": "^5.17.1",
"highlight.js": "^11.11.1",
@@ -2698,6 +2699,18 @@
"node": ">= 20"
}
},
"node_modules/@tailwindcss/typography": {
"version": "0.5.19",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
"integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
"license": "MIT",
"dependencies": {
"postcss-selector-parser": "6.0.10"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
}
},
"node_modules/@tailwindcss/vite": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.1.tgz",
@@ -6312,6 +6325,19 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/postcss-selector-parser": {
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
"license": "MIT",
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
},
"engines": {
"node": ">=4"
}
},
"node_modules/preact": {
"version": "10.28.4",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.28.4.tgz",

1
astro/package.json
View File

@@ -12,6 +12,7 @@
"@astrojs/preact": "^4.1.3",
"@directus/sdk": "^21.2.0",
"@rollup/plugin-graphql": "^2.0.5",
"@tailwindcss/typography": "^0.5.19",
"@tailwindcss/vite": "^4.2.1",
"astro": "^5.17.1",
"highlight.js": "^11.11.1",

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();
}