Continue switching to handbook content collection

This commit is contained in:
2024-03-10 07:44:20 -05:00
parent 9290bde8c7
commit 7a206cd937
6 changed files with 31 additions and 54 deletions

View File

@@ -11,7 +11,7 @@ import ThemeToggle from "@components/ThemeToggle";
</h2>
<div class="internal-links">
<HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink>
<HeaderLink href="/handbook">handbook</HeaderLink>
<HeaderLink href="/about">About</HeaderLink>
</div>
<div class="social-links">

View File

@@ -1,6 +1,6 @@
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
const handbook = defineCollection({
type: 'content',
// Type-check frontmatter using a schema
schema: z.object({
@@ -8,9 +8,9 @@ const blog = defineCollection({
description: z.string(),
// Transform string to Date object
pubDate: z.coerce.date(),
updatedDate: z.coerce.date().optional(),
lastModified: z.coerce.date().optional(),
heroImage: z.string().optional(),
}),
});
export const collections = { blog };
export const collections = { handbook };

View File

@@ -1,13 +1,14 @@
---
import type { CollectionEntry } from 'astro:content';
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import FormattedDate from '../components/FormattedDate.astro';
import BaseHead from '@components/BaseHead.astro';
import Header from '@components/Header.astro';
import Footer from '@components/Footer.astro';
import FormattedDate from '@components/FormattedDate.astro';
type Props = CollectionEntry<'blog'>['data'];
type Props = CollectionEntry<'handbook'>['data'];
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
const { title, description, pubDate, heroImage, lastModified } = Astro.props;
console.log(Astro.props)
---
<html lang="en">
<head>
@@ -15,17 +16,6 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
<style>
main {
width: calc(100% - 2em);
max-width: 100%;
margin: 0;
}
.hero-image {
width: 100%;
}
.hero-image img {
display: block;
margin: 0 auto;
border-radius: 12px;
box-shadow: var(--box-shadow);
}
.prose {
width: 720px;
@@ -34,41 +24,28 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
padding: 1em;
color: rgb(var(--gray-dark));
}
.title {
margin-bottom: 1em;
padding: 1em 0;
text-align: center;
line-height: 1;
}
.title h1 {
margin: 0 0 0.5em 0;
}
.date {
margin-bottom: 0.5em;
color: rgb(var(--gray));
}
</style>
</head>
<body>
<Header />
<main class="dark:text-zinc-200">
<main class="dark:text-zinc-200 max-w-full m-0">
<article>
<div class="hero-image">
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
<div class="w-full mb-4">
{heroImage && <img class="block rounded-xl mx-auto shadow-lg" width={1020} height={510} src={heroImage} alt="" />}
</div>
<div class="prose">
<div class="title">
<div class="date">
<div class="m-auto py-4 text-center leading-4">
<div class="mb-2 text-zinc-300">
<FormattedDate date={pubDate} />
{
updatedDate && (
lastModified && (
<div class="italic">
Last updated on <FormattedDate date={updatedDate} />
Last updated on <FormattedDate date={lastModified} />
</div>
)
}
</div>
<h1>{title}</h1>
<h1 class="mb-2">{title}</h1>
<hr />
</div>
<slot />

View File

@@ -1,15 +1,15 @@
---
import { type CollectionEntry, getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';
import BlogPost from '@layouts/BlogPost.astro';
export async function getStaticPaths() {
const posts = await getCollection('blog');
const posts = await getCollection('handbook')
return posts.map((post) => ({
params: { slug: post.slug },
props: post,
}));
}
type Props = CollectionEntry<'blog'>;
type Props = CollectionEntry<'handbook'>;
const post = Astro.props;
const { Content } = await post.render();

View File

@@ -1,12 +1,12 @@
---
import BaseHead from '../../components/BaseHead.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import BaseHead from '@components/BaseHead.astro';
import Header from '@components/Header.astro';
import Footer from '@components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '@/consts';
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';
import FormattedDate from '@components/FormattedDate.astro';
const posts = (await getCollection('blog')).sort(
const posts = (await getCollection('handbook')).sort(
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
);
---
@@ -93,7 +93,7 @@ const posts = (await getCollection('blog')).sort(
{
posts.map((post) => (
<li>
<a href={`/blog/${post.slug}/`}>
<a href={`/handbook/${post.slug}/`}>
<img width={720} height={360} src={post.data.heroImage} alt="" />
<h4 class="title">{post.data.title}</h4>
<p class="date">

View File

@@ -3,14 +3,14 @@ import { getCollection } from 'astro:content';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
export async function GET(context) {
const posts = await getCollection('blog');
const posts = await getCollection('handbook');
return rss({
title: SITE_TITLE,
description: SITE_DESCRIPTION,
site: context.site,
items: posts.map((post) => ({
...post.data,
link: `/blog/${post.slug}/`,
link: `/handbook/${post.slug}/`,
})),
});
}