xevion/utsa-handbook
1
0
Fork 0
mirror of https://github.com/Xevion/utsa-handbook.git synced 2025-12-10 10:09:11 -06:00
Code Issues Packages Projects Releases Wiki Activity

Continue switching to handbook content collection

Browse Source
This commit is contained in:
Xevion
2024-03-10 07:44:20 -05:00
parent 9290bde8c7
commit 7a206cd937
6 changed files with 31 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Header.astro
View File

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

6
src/content/config.ts
View File

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

53
src/layouts/BlogPost.astro
View File

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

6
src/pages/blog/[...slug].astro → src/pages/handbook/[...slug].astro
View File

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

14
src/pages/blog/index.astro → src/pages/handbook/index.astro
View File

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

4
src/pages/rss.xml.js
View File

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