Kyren223/github-website
1
0
Fork 0
mirror of https://github.com/Kyren223/website.git synced 2026-03-29 17:31:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Experimenting with my own markdown styling for blogs

Browse Source
This commit is contained in:
Kyren223
2024-11-14 23:56:57 +02:00
parent f944960c2e
commit 74702d29ac
5 changed files with 41 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/BlogItem.astro
View File

@@ -22,7 +22,7 @@ interface Props {
title: string;
description: string;
date: Date;
href: string;
href?: string;
header?: string;
}
@@ -31,13 +31,20 @@ const { title, description, date, href, header } = Astro.props;
<TerminalBorder header={header} footer={formatDate(date)} margin="0 0 20px;">
<span class="cursor-pointer group block w-full">
<a href={href} style="all: unset;">
<h1 class="text-[130%] text-[var(--accent)] group-hover:underline">
{title}
</h1>
<p class="text-[var(--secondary)]">
{description}
</p>
</a>
{
href ? (
<a href={href} style="all: unset;">
<h1 class="text-[130%] text-[var(--accent)] group-hover:underline">
{title}
</h1>
<p class="text-[var(--secondary)]">{description}</p>
</a>
) : (
<>
<h1 class="text-[130%] text-[var(--accent)]">{title}</h1>
<p class="text-[var(--secondary)]">{description}</p>
</>
)
}
</span>
</TerminalBorder>

2
src/layouts/Blog.astro
View File

@@ -19,7 +19,7 @@ const { title } = Astro.props;
<title>{title}</title>
</head>
<body>
<main class="w-[70%] m-auto">
<main class="w-[70%] m-auto py-16">
<Markdown>
<slot />
</Markdown>

2
src/pages/blogs.astro
View File

@@ -24,7 +24,7 @@ const blogs = (await getCollection("blogs"))
<>
<BlogItem
title={blog.title}
description={blog.description ? blog.description : ""}
description={blog.description ?? ""}
date={blog.date}
href={blog.href}
/>

26
src/pages/blogs/[...slug].astro
View File

@@ -1,6 +1,9 @@
---
import Blog from "@layouts/Blog.astro";
import { getCollection } from "astro:content";
import Blog from "@layouts/Blog.astro";
import Markdown from "@components/Markdown.astro";
import Terminal from "@layouts/Terminal.astro";
import BlogItem from "@components/BlogItem.astro";
export async function getStaticPaths() {
const blogEntries = await getCollection("blogs");
@@ -14,6 +17,21 @@ const { entry } = Astro.props;
const { Content } = await entry.render();
---
<Blog title=`/home/kyren/blogs/${entry.slug}`>
<Content />
</Blog>
<Terminal path="blogs/">
<div class="w-full h-[65vh] overflow-y-auto pr-4">
<div class="flex flex-col h-full m-0 p-0">
<BlogItem
title={entry.data.title}
description={entry.data.description ?? ""}
date={entry.data.date}
/>
<div class="text-[130%] flex-grow">
<Content />
</div>
</div>
</div>
</Terminal>
<!-- <Blog title=`/home/kyren/blogs/${entry.slug}`> -->
<!-- <Content /> -->
<!-- </Blog> -->

4
src/pages/index.astro
View File

@@ -123,9 +123,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
<BlogItem
header="Latest Blog Post"
title={latestBlog.data.title}
description={latestBlog.data.description
? latestBlog.data.description
: ""}
description={latestBlog.data.description ?? ""}
date={latestBlog.data.date}
href={"/blogs/" + latestBlog.slug}
/>