foxgirlriley/MyWebsite-Astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(blog): added blog posting infrastructure

Browse source
This commit is contained in:
Fishandchips321 2026-02-18 15:58:37 +00:00
parent 88c12e7d4f
commit 62b78058a5
6 changed files with 107 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/content.config.ts Normal file
View file

@ -0,0 +1,15 @@
import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";
const blog = defineCollection({
loader: glob({ base: "./src/content/posts", pattern: "**/*.{md,mdx}" }),
schema: z.object({
title: z.string(),
description: z.string().optional(),
pubDate: z.coerce.date(),
modifiedDate: z.coerce.date().optional(),
wantsPanel: z.boolean().default(true)
})
});
export const collections = { blog };

19
src/layouts/MainLayout.astro
View file

@ -1,5 +1,12 @@
--- ---
import Panel from "./Panel.astro";
import "../styles/global.scss"; import "../styles/global.scss";
import { getCollection } from "astro:content";
const { title } = Astro.props;
const pageTitle = title || "FoxGirlRiley's shitty website | Bwaaa 🎺";
const hasPosts = (await getCollection("blog")).length > 0;
--- ---
<!doctype html> <!doctype html>
@ -8,9 +15,19 @@ import "../styles/global.scss";
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" /> <link rel="icon" type="image/svg+xml" href="/icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FoxGirlRiley's shitty website | Bwaaa 🎺</title> <title>{pageTitle}</title>
</head> </head>
<body> <body>
{
hasPosts && (
<Panel>
<span style="display: flex; flex-direction: row; justify-content: space-between; width: 200px;">
<a href="/">Home</a>
<a href="/blog">Blog</a>
</span>
</Panel>
)
}
<slot /> <slot />
</body> </body>
</html> </html>

4
src/layouts/Panel.astro
View file

@ -1,9 +1,9 @@
--- ---
import "../styles/Panel.scss"; import "../styles/Panel.scss";
const { title } = Astro.props; const { title, customClass } = Astro.props;
--- ---
<div class="panel"> <div class={`panel ${customClass}`}>
{title && <h3 class="panelTitle">{title}</h3>} {title && <h3 class="panelTitle">{title}</h3>}
<slot /> <slot />
</div> </div>

33
src/pages/blog/[...slug].astro Normal file
View file

@ -0,0 +1,33 @@
---
import { render } from "astro:content";
import { getCollection } from "astro:content";
import Main from "../../layouts/MainLayout.astro";
import TransFlagPanel from "../../layouts/TransFlagPanel.astro";
import Panel from "../../layouts/Panel.astro";
export const getStaticPaths = async () => {
const posts = await getCollection("blog");
return posts.map((post) => ({
params: { slug: post.id },
props: post,
}));
};
const post = Astro.props;
const { Content } = await render(post);
---
<Main title={post.data.title}>
<TransFlagPanel>
<h1>{post.data.title}</h1>
</TransFlagPanel>
{
post.data.wantsPanel ? (
<Panel>
<Content />
</Panel>
) : (
<Content />
)
}
</Main>

31
src/pages/blog/index.astro Normal file
View file

@ -0,0 +1,31 @@
---
import { getCollection } from "astro:content";
import Main from "../../layouts/MainLayout.astro";
import TransFlagPanel from "../../layouts/TransFlagPanel.astro";
import Panel from "../../layouts/Panel.astro";
import "./index.scss";
const latestPosts = (await getCollection("blog")).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
---
<Main title="Blog">
<TransFlagPanel>
<h1>Blog!!!</h1>
</TransFlagPanel>
{
latestPosts.map((post) => {
return (
<a href={`/blog/${post.id}`} class="blog-post-link">
<Panel
title={`${post.data.title} - ${post.data.pubDate.toLocaleString()}`}
customClass="blog-post-panel"
>
<p>{post.data.description}</p>
</Panel>
</a>
);
})
}
</Main>

8
src/pages/blog/index.scss Normal file
View file

@ -0,0 +1,8 @@
.blog-post-panel {
background-color: lightgray;
}
.blog-post-link {
text-decoration: none;
color: black;
}