feat: personalize blog and update configurations

src/components/BaseHead.astro

@@ -6,7 +6,7 @@ import "@/styles/global.css";
 
 type Props = SiteMeta;
 
-const { articleDate, description, ogImage, title } = Astro.props;
+const { articleDate, description, ogImage, title, tags } = Astro.props;
 
 const titleSeparator = "•";
 const siteTitle = `${title} ${titleSeparator} ${siteConfig.title}`;
@@ -39,6 +39,7 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
 <meta content={siteTitle} name="title" />
 <meta content={description} name="description" />
 <meta content={siteConfig.author} name="author" />
+{tags && <meta content={tags} name="tags" />}
 
 {/* Open Graph / Facebook */}
 <meta content={articleDate ? "article" : "website"} property="og:type" />

src/components/SocialList.astro

@@ -13,10 +13,20 @@ const socialLinks: {
 	name: string;
 }[] = [
 	{
-		friendlyName: "Github",
-		link: "https://github.com/chrismwilliams/astro-cactus",
+		friendlyName: "Email",
+		link: "mailto:work@kazoottt.top",
+		name: "mdi:email",
+	},
+	{
+		friendlyName: "GitHub",
+		link: "https://github.com/kazoottt",
 		name: "mdi:github",
 	},
+	{
+		friendlyName: "Twitter",
+		link: "https://x.com/kazoottt",
+		name: "mdi:twitter",
+	},
 ];
 ---
 
@@ -32,7 +42,7 @@ const socialLinks: {
 						rel={`noreferrer ${isWebmention ? "me authn" : ""}`}
 						target="_blank"
 					>
-						<Icon aria-hidden="true" class="h-8 w-8" focusable="false" name={name} />
+						<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name={name} />
 						<span class="sr-only">{friendlyName}</span>
 					</a>
 				</li>

src/components/layout/Footer.astro

@@ -9,7 +9,7 @@ const year = new Date().getFullYear();
 >
 	<div class="me-0 sm:me-4">
 		&copy; {siteConfig.author}
-		{year}.<span class="inline-block">&nbsp;🚀&nbsp;Astro Cactus</span>
+		{year}.<span class="inline-block">&nbsp;🚀&nbsp;{siteConfig.title}</span>
 	</div>
 	<nav
 		aria-labelledby="footer_links"

src/components/layout/Header.astro

@@ -1,7 +1,7 @@
 ---
 import Search from "@/components/Search.astro";
 import ThemeToggle from "@/components/ThemeToggle.astro";
-import { menuLinks } from "@/site.config";
+import { menuLinks, siteConfig } from "@/site.config";
 ---
 
 <header class="group relative mb-28 flex items-center sm:ps-18" id="main-header">
@@ -31,7 +31,7 @@ import { menuLinks } from "@/site.config";
 					fill="#53C68C"></path>
 				<path d="M45.334 240 0 213.334v120L45.334 360V240Z" fill="#B04304"></path>
 			</svg>
-			<span class="text-xl font-bold sm:text-2xl">Astro Cactus</span>
+			<span class="text-xl font-bold sm:text-2xl">{siteConfig.title}</span>
 		</a>
 		<nav
 			aria-label="Main menu"

src/content.config.ts

@@ -28,6 +28,7 @@ const note = defineCollection({
 	schema: baseSchema.extend({
 		description: z.string().optional().nullable(),
 		date: z.union([z.string(), z.date()]).transform((val) => new Date(val)),
+		tags: z.array(z.string()).default([]).transform(removeDupsAndLowerCase),
 	}),
 });
 

src/data/post.ts

@@ -1,3 +1,4 @@
+import { collectionDateSort } from "@/utils/date";
 import { type CollectionEntry, getCollection } from "astro:content";
 
 /** filter out draft posts based on the environment */
@@ -7,6 +8,14 @@ export async function getAllPosts(): Promise<CollectionEntry<"post">[]> {
 	});
 }
 
+export async function getAllCollectionPosts() {
+	const posts = await getAllPosts();
+	const notes = await getCollection("note");
+	const allPosts = [...posts, ...notes];
+	const allPostsSortedByDate = allPosts.sort(collectionDateSort);
+	return allPostsSortedByDate;
+}
+
 /** groups posts by year (based on option siteConfig.sortPostsByUpdatedDate), using the year as the key
  *  Note: This function doesn't filter draft posts, pass it the result of getAllPosts above to do so.
  */

src/layouts/Base.astro

@@ -12,13 +12,19 @@ interface Props {
 }
 
 const {
-	meta: { articleDate, description = siteConfig.description, ogImage, title },
+	meta: { articleDate, description = siteConfig.description, ogImage, title, tags },
 } = Astro.props;
 ---
 
 <html class="scroll-smooth" lang={siteConfig.lang}>
 	<head>
-		<BaseHead articleDate={articleDate} description={description} ogImage={ogImage} title={title} />
+		<BaseHead
+			articleDate={articleDate}
+			description={description}
+			ogImage={ogImage}
+			title={title}
+			tags={tags}
+		/>
 	</head>
 	<body
 		class="bg-global-bg text-global-text mx-auto flex min-h-screen max-w-3xl flex-col px-4 pt-16 font-mono text-sm font-normal antialiased sm:px-8"

src/layouts/BlogPost.astro

@@ -18,6 +18,7 @@ const {
 	description,
 	date_modified: updatedDate,
 	date: publishDate,
+	tags,
 } = post.data;
 const socialImage = ogImage ?? `/og-image/${post.id}.png`;
 const articleDate = updatedDate?.toISOString() ?? publishDate.toISOString();
@@ -28,9 +29,10 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
 <BaseLayout
 	meta={{
 		articleDate,
-		description,
+		description: description ?? "",
 		ogImage: socialImage,
 		title,
+		tags: tags.join(", "),
 	}}
 >
 	<article class="grow break-words" data-pagefind-body>

src/pages/about.astro

@@ -9,28 +9,5 @@ const meta = {
 
 <PageLayout meta={meta}>
 	<h1 class="title mb-6">About</h1>
-	<div class="prose prose-sm prose-cactus max-w-none">
-		<p>
-			Hi, I’m a starter Astro. I’m particularly great for getting you started with your own blogging
-			website.
-		</p>
-		<p>Here are my some of my awesome built in features:</p>
-		<ul class="list-inside list-disc" role="list">
-			<li>I'm ultra fast as I'm a static site</li>
-			<li>I'm fully responsive</li>
-			<li>I come with a light and dark mode</li>
-			<li>I'm easy to customise and add additional content</li>
-			<li>I have Tailwind CSS styling</li>
-			<li>Shiki code syntax highlighting</li>
-			<li>Satori for auto generating OG images for blog posts</li>
-		</ul>
-		<p>
-			Clone or fork my <a
-				class="cactus-link inline-block"
-				href="https://github.com/chrismwilliams/astro-cactus"
-				rel="noreferrer"
-				target="_blank">repo</a
-			> if you like me!
-		</p>
-	</div>
+	<div class="prose prose-sm prose-cactus max-w-none">TODO ...</div>
 </PageLayout>

src/pages/friends.astro

@@ -0,0 +1,78 @@
+---
+import BaseLayout from "@/layouts/Base.astro";
+
+const friends: { name: string; url: string; description?: string }[] = [
+	{
+		name: "Yuang's Blog",
+		url: "https://yuuuuang.com/",
+	},
+	{
+		name: "huaiying",
+		url: "https://blog.csdn.net/huaiyingdetective",
+	},
+	{
+		name: "Sorry404 Wang",
+		url: "http://40404.site/",
+	},
+	{
+		name: "lijinghua",
+		url: "www.lijinghua.club",
+	},
+	{
+		name: "思无道",
+		url: "https://siwudao.github.io/",
+	},
+	{
+		name: "Kai",
+		url: "https://kaiyi.cool/",
+	},
+	{
+		name: "buyfakett",
+		url: "https://www.tteam.icu/",
+	},
+	{
+		name: "poivre",
+		url: "https://blog.poivrehxx.site/",
+	},
+	{
+		name: `Roi's Blog`,
+		url: "https://roi.moe/",
+	},
+];
+---
+
+<BaseLayout
+	meta={{
+		title: `Friends`,
+		description: "my friends ",
+	}}
+>
+	<div class="container mx-auto px-4 py-8">
+		<h1 class="title mb-6">Friends</h1>
+		<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+			{
+				friends.map((friend) => (
+					<a
+						href={friend.url.startsWith("http") ? friend.url : `https://${friend.url}`}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="block rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg dark:bg-gray-800"
+					>
+						<h2 class="text-xl font-semibold">{friend.name}</h2>
+						{friend.description && (
+							<p class="mt-2 truncate text-sm text-gray-600 dark:text-gray-400">
+								{friend.description}
+							</p>
+						)}
+					</a>
+				))
+			}
+		</div>
+	</div>
+</BaseLayout>
+
+<style>
+	.container {
+		max-width: 1200px;
+	}
+</style>

src/pages/index.astro

@@ -23,11 +23,7 @@ const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES);
 <PageLayout meta={{ title: "Home" }}>
 	<section>
 		<h1 class="title mb-6">Hello World!</h1>
-		<p class="mb-4">
-			Hi, I’m a theme for Astro, a simple starter that you can use to create your website or blog.
-			If you want to know more about how you can customise me, add more posts, and make it your own,
-			click on the GitHub icon link below and it will take you to my repo.
-		</p>
+		<p class="mb-4">TODO ...</p>
 		<SocialList />
 	</section>
 	<section class="mt-16">

src/pages/notes/[...slug].astro

@@ -22,6 +22,7 @@ const meta = {
 	description:
 		note.data.description || `Read about my note posted on: ${note.data.date.toLocaleDateString()}`,
 	title: note.data.title,
+	tags: note.data.tags.join(", "),
 };
 ---
 

src/pages/rss.xml.ts

@@ -1,19 +1,37 @@
 import { getAllPosts } from "@/data/post";
 import { siteConfig } from "@/site.config";
+import { collectionDateSort } from "@/utils/date";
 import rss from "@astrojs/rss";
+import MarkdownIt from "markdown-it";
+import sanitizeHtml from "sanitize-html";
 
 export const GET = async () => {
 	const posts = await getAllPosts();
+	const sortedPosts = posts.sort(collectionDateSort);
+	const parser = new MarkdownIt();
 
 	return rss({
+		customData: `<follow_challenge>
+		<feedId>75113012474671104</feedId>
+		<userId>62156866798228480</userId>
+	</follow_challenge>`,
 		title: siteConfig.title,
 		description: siteConfig.description,
 		site: import.meta.env.SITE,
-		items: posts.map((post) => ({
+		items: sortedPosts.map((post) => ({
 			title: post.data.title,
 			description: post.data.description ?? "",
 			pubDate: post.data.date,
 			link: `posts/${post.id}/`,
+			content: post.body
+				? sanitizeHtml(parser.render(post.body), {
+						allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
+						textFilter: function (text: string) {
+							return text.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F-\x9F\uFFF0-\uFFFF]/g, "");
+						},
+					})
+				: "",
+			author: siteConfig.author,
 		})),
 	});
 };

src/site.config.ts

@@ -3,10 +3,10 @@ import type { AstroExpressiveCodeOptions } from "astro-expressive-code";
 
 export const siteConfig: SiteConfig = {
 	// Used as both a meta property (src/components/BaseHead.astro L:31 + L:49) & the generated satori png (src/pages/og-image/[slug].png.ts)
-	author: "Chris Williams",
+	author: "KazooTTT",
 	// Date.prototype.toLocaleDateString() parameters, found in src/utils/date.ts.
 	date: {
-		locale: "en-GB",
+		locale: "zh-CN",
 		options: {
 			day: "numeric",
 			month: "short",
@@ -14,15 +14,15 @@ export const siteConfig: SiteConfig = {
 		},
 	},
 	// Used as the default description meta property and webmanifest description
-	description: "An opinionated starter theme for Astro",
+	description: "记录技术分享、学习笔记、生活日常、碎碎念的地方。",
 	// HTML lang property, found in src/layouts/Base.astro L:18 & astro.config.ts L:48
-	lang: "en-GB",
+	lang: "zh-CN",
 	// Meta property, found in src/components/BaseHead.astro L:42
-	ogLocale: "en_GB",
+	ogLocale: "zh_CN",
 	// Used to construct the meta title property found in src/components/BaseHead.astro L:11, and webmanifest name found in astro.config.ts L:42
-	title: "Astro Theme Cactus",
+	title: "声控烤箱的博客",
 	// ! Please remember to replace the following site property with your own domain, used in astro.config.ts
-	url: "https://astro-cactus.chriswilliams.dev/",
+	url: "https://blog.kazoottt.top/",
 };
 
 // Used to generate links in both the Header & Footer.
@@ -43,6 +43,10 @@ export const menuLinks: { path: string; title: string }[] = [
 		path: "/notes/",
 		title: "Notes",
 	},
+	{
+		path: "/friends/",
+		title: "Friends",
+	},
 ];
 
 // https://expressive-code.com/reference/configuration/

src/types.ts

@@ -22,6 +22,7 @@ export interface SiteMeta {
 	description?: string;
 	ogImage?: string | undefined;
 	title: string;
+	tags?: string | undefined;
 }
 
 /** Webmentions */