buyfakett/kazoottt-blog-v2
1
0
Fork 0
mirror of https://github.com/KazooTTT/kazoottt-blog-v2.git synced 2025-06-16 23:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增分类

Browse Source
This commit is contained in:
KazooTTT
2025-02-05 21:30:41 +08:00
parent 1f239d3205
commit fc91e1e390
12 changed files with 323 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/blog/Masthead.astro
View File

@ -2,6 +2,9 @@
import { Image } from "astro:assets";
import type { CollectionEntry } from "astro:content";
import FormattedDate from "@/components/FormattedDate.astro";
import Card from "../componentsBefore/Card.astro";
import { Icon } from "astro-icon/components";
import Label from "../componentsBefore/Label.astro";
interface Props {
content: CollectionEntry<"post">;
@ -19,19 +22,30 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
---
{
data.coverImage && (
data.banner && (
<div class="mb-6 aspect-video">
<Image
alt={data.coverImage.alt}
alt={data.banner}
class="object-cover"
fetchpriority="high"
loading="eager"
src={data.coverImage.src}
src={data.banner}
/>
</div>
)
}
{data.draft ? <span class="text-base text-red-500">(Draft)</span> : null}
{
data.category && (
<div class="my-2">
<Label title={data.category} as="a" href={`/categories/${data.category}/`}>
<Icon name="category" slot="icon" />
</Label>
</div>
)
}
<h1 class="title">
{data.title}
</h1>
@ -81,3 +95,11 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
</div>
)
}
{
data.description && data.description.trim().length > 0 && (
<Card heading="摘要（由llm生成）" altText="摘要" class="my-4 w-full">
<div class="text-muted-foreground ml-4">{data.description}</div>
</Card>
)
}

36
src/components/componentsBefore/Card.astro
View File

@ -1,10 +1,10 @@
---
import { cn } from '@/utils'
import type { ImageMetadata } from 'astro'
import { Image } from 'astro:assets'
import { cn } from "@/utils/tailwind";
import type { ImageMetadata } from "astro";
import { Image } from "astro:assets";
const {
as: Tag = 'div',
as: Tag = "div",
class: className,
href,
target,
@ -13,25 +13,25 @@ const {
date,
imagePath,
altText,
imageClass
} = Astro.props
imageClass,
} = Astro.props;
// If href is provided, use 'a' tag instead of the default or provided tag
const Component = href ? 'a' : Tag
const Component = href ? "a" : Tag;
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
const images = import.meta.glob<{ default: ImageMetadata }>("/src/assets/*.{jpeg,jpg,png,gif}");
if (imagePath) {
if (!images[imagePath])
throw new Error(`"${imagePath}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`)
throw new Error(`"${imagePath}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`);
}
---
<Component
class={cn(
className,
'relative rounded-2xl border border-border bg-primary-foreground px-5 py-3',
href && 'transition-all hover:border-foreground/25 hover:shadow-sm'
"relative rounded-2xl border border-border bg-primary-foreground px-5 py-3",
href && "transition-all hover:border-foreground/25 hover:shadow-sm"
)}
href={href}
target={target}
@ -41,16 +41,16 @@ if (imagePath) {
<Image
src={images[imagePath]()}
alt={altText}
class={cn('mb-3 md:absolute md:mb-0', imageClass)}
loading='eager'
class={cn("mb-3 md:absolute md:mb-0", imageClass)}
loading="eager"
/>
)
}
<div class='flex flex-col gap-y-1.5'>
<div class='flex flex-col gap-y-0.5'>
<h1 class='text-lg font-medium'>{heading}</h1>
{subheading && <h2 class='text-muted-foreground'>{subheading}</h2>}
{date && <h2 class='text-muted-foreground'>{date}</h2>}
<div class="flex flex-col gap-y-1.5">
<div class="flex flex-col gap-y-0.5">
<h1 class="text-lg font-medium">{heading}</h1>
{subheading && <h2 class="text-muted-foreground">{subheading}</h2>}
{date && <h2 class="text-muted-foreground">{date}</h2>}
</div>
<slot />
</div>

10
src/components/componentsBefore/Label.astro
View File

@ -1,18 +1,18 @@
---
import { cn } from '@/utils'
import { cn } from "@/utils/tailwind";
const { class: className, as: Tag = 'div', title, href, ...props } = Astro.props
const { class: className, as: Tag = "div", title, href, ...props } = Astro.props;
---
<Tag
class={cn(
className,
'flex flex-row items-center justify-center gap-x-2',
href && 'hover:opacity-75 transition-all'
"flex flex-row items-center gap-x-2",
href && "hover:opacity-75 transition-all"
)}
href={href}
{...props}
>
<slot name='icon' />
<slot name="icon" />
<p>{title}</p>
</Tag>

34
src/components/componentsBefore/ProjectCard.astro
View File

@ -1,24 +1,24 @@
---
import { Image } from 'astro:assets'
import type { ImageMetadata } from 'astro'
import { cn } from '@/utils'
import { Image } from "astro:assets";
import type { ImageMetadata } from "astro";
import { cn } from "@/utils/tailwind";
const {
as: Tag = 'a',
as: Tag = "a",
class: className,
href,
heading,
subheading,
imagePath,
altText,
target
} = Astro.props
target,
} = Astro.props;
let imageComponent = null
let imageComponent = null;
if (imagePath) {
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
const images = import.meta.glob<{ default: ImageMetadata }>("/src/assets/*.{jpeg,jpg,png,gif}");
if (images[imagePath]) {
imageComponent = images[imagePath]
imageComponent = images[imagePath];
}
}
---
@ -26,9 +26,9 @@ if (imagePath) {
<Tag
class={cn(
className,
'flex flex-col rounded-2xl border border-border bg-primary-foreground h-[240px]',
'justify-center items-center',
href && 'transition-all hover:border-foreground/25 hover:shadow-sm'
"flex flex-col rounded-2xl border border-border bg-primary-foreground h-[240px]",
"justify-center items-center",
href && "transition-all hover:border-foreground/25 hover:shadow-sm"
)}
href={href}
target={target}
@ -38,14 +38,14 @@ if (imagePath) {
<Image
src={imageComponent()}
alt={altText}
class='h-32 w-full rounded-2xl rounded-bl-none rounded-br-none object-cover'
loading='eager'
class="h-32 w-full rounded-2xl rounded-br-none rounded-bl-none object-cover"
loading="eager"
/>
)
}
<div class='flex w-full flex-1 flex-col justify-center gap-y-2 px-5 py-4 text-center'>
<h1 class='text-lg font-medium'>{heading}</h1>
<h2 class='line-clamp-2 text-sm text-muted-foreground'>{subheading}</h2>
<div class="flex w-full flex-1 flex-col justify-center gap-y-2 px-5 py-4 text-center">
<h1 class="text-lg font-medium">{heading}</h1>
<h2 class="text-muted-foreground line-clamp-2 text-sm">{subheading}</h2>
</div>
<slot />

14
src/components/componentsBefore/Section.astro
View File

@ -1,15 +1,15 @@
---
import { cn } from '@/utils'
import { cn } from "@/utils/tailwind";
const { class: className, title, subtitle } = Astro.props
const { class: className, title, subtitle } = Astro.props;
---
<section class={cn(className, 'flex flex-col gap-y-5 md:flex-row md:gap-y-0')}>
<div class='md:w-1/3'>
<h2 class='font-semibol text-xl'>{title}</h2>
<h3 class='text-muted-foreground'>{subtitle}</h3>
<section class={cn(className, "flex flex-col gap-y-5 md:flex-row md:gap-y-0")}>
<div class="md:w-1/3">
<h2 class="font-semibol text-xl">{title}</h2>
<h3 class="text-muted-foreground">{subtitle}</h3>
</div>
<div class='flex flex-col gap-y-3 md:w-2/3'>
<div class="flex flex-col gap-y-3 md:w-2/3">
<slot />
</div>
</section>

26
src/components/note/Note.astro
View File

@ -10,6 +10,21 @@ type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
const { as: Tag = "div", note, isPreview = false } = Astro.props;
const { Content } = await render(note);
const dateTimeOptions: Intl.DateTimeFormatOptions = note.data.date_created
? {
hour: "2-digit",
minute: "2-digit",
year: "2-digit",
month: "2-digit",
day: "2-digit",
}
: {
year: "2-digit",
month: "2-digit",
day: "2-digit",
};
const date = note.data.date_created ?? note.data.date;
---
<article
@ -30,16 +45,7 @@ const { Content } = await render(note);
)
}
</Tag>
<FormattedDate
dateTimeOptions={{
hour: "2-digit",
minute: "2-digit",
year: "2-digit",
month: "2-digit",
day: "2-digit",
}}
date={note.data.date}
/>
<FormattedDate dateTimeOptions={dateTimeOptions} date={date} />
<div
class="prose prose-sm prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0"
class:list={{ "line-clamp-6": isPreview }}

7
src/content.config.ts
View File

@ -6,7 +6,7 @@ function removeDupsAndLowerCase(array: string[]) {
}
const baseSchema = z.object({
title: z.string()
title: z.string(),
});
const post = defineCollection({
@ -20,6 +20,8 @@ const post = defineCollection({
categories: z.array(z.string()).default([]).transform(removeDupsAndLowerCase),
date: z.union([z.string(), z.date()]).transform((val) => new Date(val)),
date_modified: z.date().optional(),
data_created: z.date().optional(),
category: z.string().optional().nullable(),
}),
});
@ -28,9 +30,10 @@ const note = defineCollection({
schema: baseSchema.extend({
description: z.string().optional().nullable(),
date: z.union([z.string(), z.date()]).transform((val) => new Date(val)),
date_modified: z.date().optional(),
data_created: z.date().optional(),
tags: z.array(z.string()).default([]).transform(removeDupsAndLowerCase),
}),
});
export const collections = { post, note };

22
src/data/post.ts
View File

@ -55,3 +55,25 @@ export function getUniqueTagsWithCount(posts: CollectionEntry<"post">[]): [strin
),
].sort((a, b) => b[1] - a[1]);
}
/** Note: This function doesn't filter draft posts, pass it the result of getAllPosts above to do so. */
export function getAllCategories(posts: Array<CollectionEntry<"post">>): string[] {
return posts.map((post) => post.data.category ?? "未分类");
}
/** Note: This function doesn't filter draft posts, pass it the result of getAllPosts above to do so. */
export function getUniqueCategories(posts: Array<CollectionEntry<"post">>): string[] {
return [...new Set(getAllCategories(posts))];
}
/** Note: This function doesn't filter draft posts, pass it the result of getAllPosts above to do so. */
export function getUniqueCategoriesWithCount(
posts: Array<CollectionEntry<"post">>,
): Array<[string, number]> {
return [
...getAllCategories(posts).reduce(
(acc, t) => acc.set(t, (acc.get(t) || 0) + 1),
new Map<string, number>(),
),
].sort((a, b) => b[1] - a[1]);
}

3
src/layouts/BlogPost.astro
View File

@ -19,6 +19,7 @@ const {
date_modified: updatedDate,
date: publishDate,
tags,
category,
} = post.data;
const socialImage = ogImage ?? `/og-image/${post.id}.png`;
const articleDate = updatedDate?.toISOString() ?? publishDate.toISOString();
@ -32,7 +33,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
description: description ?? "",
ogImage: socialImage,
title,
tags: tags.join(", "),
tags: [category, ...tags].join(", "),
}}
>
<article class="grow break-words" data-pagefind-body>

74
src/pages/categories/[category]/[...page].astro Normal file
View File

@ -0,0 +1,74 @@
---
import type { CollectionEntry } from "astro:content";
import Pagination from "@/components/Paginator.astro";
import PostPreview from "@/components/blog/PostPreview.astro";
import { getAllPosts, getUniqueCategories } from "@/data/post";
import PageLayout from "@/layouts/Base.astro";
import { collectionDateSort } from "@/utils/date";
import type { GetStaticPaths, Page } from "astro";
export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
const allPosts = await getAllPosts();
const sortedPosts = allPosts.sort(collectionDateSort);
const uniqueCategories = getUniqueCategories(sortedPosts);
return uniqueCategories.flatMap((category) => {
const filterPosts = sortedPosts.filter((post) => post.data.category === category);
return paginate(filterPosts, {
pageSize: 10,
params: { category },
});
});
};
interface Props {
page: Page<CollectionEntry<"post">>;
}
const { page } = Astro.props;
const { category } = Astro.params;
const meta = {
description: `View all posts with the category - ${category}`,
title: `Category: ${category}`,
};
const paginationProps = {
...(page.url.prev && {
prevUrl: {
text: "← Previous Categories",
url: page.url.prev,
},
}),
...(page.url.next && {
nextUrl: {
text: "Next Categories →",
url: page.url.next,
},
}),
};
---
<PageLayout meta={meta}>
<div class="mb-6 flex items-center">
<h1 class="sr-only">Posts with the category {category}</h1>
<a class="title text-accent" href="/categories/"
><span class="sr-only">All {" "}</span>Categories</a
>
<span aria-hidden="true" class="ms-2 me-3 text-xl">→</span>
<span aria-hidden="true" class="text-xl">#{category}</span>
</div>
<section aria-labelledby={`categories-${category}`}>
<h2 id={`categories-${category}`} class="sr-only">Post List</h2>
<ul class="space-y-4">
{
page.data.map((p) => (
<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
<PostPreview as="h2" post={p} />
</li>
))
}
</ul>
<Pagination {...paginationProps} />
</section>
</PageLayout>

35
src/pages/categories/index.astro Normal file
View File

@ -0,0 +1,35 @@
---
import { getAllPosts, getUniqueCategoriesWithCount } from "@/data/post";
import PageLayout from "@/layouts/Base.astro";
const allPosts = await getAllPosts();
const allCategories = getUniqueCategoriesWithCount(allPosts);
const meta = {
description: "A list of all the categories I've written about in my posts",
title: "All Categories",
};
---
<PageLayout meta={meta}>
<h1 class="title mb-6">Categories</h1>
<ul class="space-y-4">
{
allCategories.map(([item, val]) => (
<li class="flex items-center gap-x-2">
<a
class="cactus-link inline-block"
data-astro-prefetch
href={`/categories/${item}/`}
title={`View posts with the category: ${item}`}
>
&#35;{item}
</a>
<span class="inline-block">
- {val} Post{val > 1 && "s"}
</span>
</li>
))
}
</ul>
</PageLayout>

142
src/pages/posts/[...page].astro
View File

@ -2,7 +2,7 @@
import type { CollectionEntry } from "astro:content";
import Pagination from "@/components/Paginator.astro";
import PostPreview from "@/components/blog/PostPreview.astro";
import { getAllPosts, getUniqueTags, groupPostsByYear } from "@/data/post";
import { getAllPosts, getUniqueCategories, getUniqueTags, groupPostsByYear } from "@/data/post";
import PageLayout from "@/layouts/Base.astro";
import { collectionDateSort } from "@/utils/date";
import type { GetStaticPaths, Page } from "astro";
@ -11,20 +11,23 @@ import { Icon } from "astro-icon/components";
export const getStaticPaths = (async ({ paginate }) => {
const MAX_POSTS_PER_PAGE = 10;
const MAX_TAGS = 7;
const MAX_CATEGORIES = 7;
const allPosts = await getAllPosts();
const uniqueTags = getUniqueTags(allPosts).slice(0, MAX_TAGS);
const uniqueCategories = getUniqueCategories(allPosts).slice(0, MAX_CATEGORIES);
return paginate(allPosts.sort(collectionDateSort), {
pageSize: MAX_POSTS_PER_PAGE,
props: { uniqueTags },
props: { uniqueTags, uniqueCategories },
});
}) satisfies GetStaticPaths;
interface Props {
page: Page<CollectionEntry<"post">>;
uniqueTags: string[];
uniqueCategories: string[];
}
const { page, uniqueTags } = Astro.props;
const { page, uniqueTags, uniqueCategories } = Astro.props;
const meta = {
description: "Read my collection of posts and the things that interest me",
@ -79,47 +82,96 @@ const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
}
<Pagination {...paginationProps} />
</div>
{
!!uniqueTags.length && (
<aside>
<h2 class="title mb-4 flex items-center gap-2 text-lg">
Tags
<svg
aria-hidden="true"
class="h-6 w-6"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0 0h24v24H0z" fill="none" stroke="none" />
<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
<path d="M6 9h-.01" />
</svg>
</h2>
<ul class="flex flex-wrap gap-2">
{uniqueTags.map((tag) => (
<li>
<a class="cactus-link flex items-center justify-center" href={`/tags/${tag}/`}>
<span aria-hidden="true">#</span>
<span class="sr-only">View all posts with the tag</span>
{tag}
</a>
</li>
))}
</ul>
<span class="mt-4 block sm:text-end">
<a class="hover:text-link" href="/tags/">
View all <span aria-hidden="true">→</span>
<span class="sr-only">blog tags</span>
</a>
</span>
</aside>
)
}
<aside class="flex flex-col gap-2">
{
!!uniqueTags.length && (
<div>
<h2 class="title mb-4 flex items-center gap-2 text-lg">
Tags
<svg
aria-hidden="true"
class="h-6 w-6"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0 0h24v24H0z" fill="none" stroke="none" />
<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
<path d="M6 9h-.01" />
</svg>
</h2>
<ul class="flex flex-wrap gap-2">
{uniqueTags.map((tag) => (
<li>
<a class="cactus-link flex items-center justify-center" href={`/tags/${tag}/`}>
<span aria-hidden="true">#</span>
<span class="sr-only">View all posts with the tag</span>
{tag}
</a>
</li>
))}
</ul>
<span class="mt-4 block sm:text-end">
<a class="hover:text-link" href="/tags/">
View all <span aria-hidden="true">→</span>
<span class="sr-only">blog tags</span>
</a>
</span>
</div>
)
}
{
!!uniqueCategories.length && (
<div>
<h2 class="title mb-4 flex items-center gap-2 text-lg">
Categories
<svg
aria-hidden="true"
class="h-6 w-6"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0 0h24v24H0z" fill="none" stroke="none" />
<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
<path d="M6 9h-.01" />
</svg>
</h2>
<ul class="flex flex-wrap gap-2">
{uniqueCategories.map((category) => (
<li>
<a
class="cactus-link flex items-center justify-center"
href={`/categories/${category}/`}
>
<span aria-hidden="true">#</span>
<span class="sr-only">View all posts with the category</span>
{category}
</a>
</li>
))}
</ul>
<span class="mt-4 block sm:text-end">
<a class="hover:text-link" href="/categories/">
View all <span aria-hidden="true">→</span>
<span class="sr-only">blog categories</span>
</a>
</span>
</div>
)
}
</aside>
</div>
</PageLayout>