update to Collection

astro.config.mjs

@@ -12,4 +12,5 @@ export default defineConfig({
       },
     },
   },
+  site: "https://blog.cloverta.top"
 })

package-lock.json

@@ -8,6 +8,7 @@
       "name": "sanyecao-blog",
       "version": "0.0.1",
       "dependencies": {
+        "@astrojs/rss": "^4.0.17",
         "astro": "^6.0.8",
         "url": "^0.11.4"
       },
@@ -73,6 +74,17 @@
         "node": ">=22.12.0"
       }
     },
+    "node_modules/@astrojs/rss": {
+      "version": "4.0.17",
+      "resolved": "https://registry.npmjs.org/@astrojs/rss/-/rss-4.0.17.tgz",
+      "integrity": "sha512-eV+wdMbeVKC9+sPaV0LN8JL1LGo9YAh3GKl4Ou4nzMNLmXM/aswYpSGxVEAuHilgBZ6/++/Pv08ICmuOqX107w==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-xml-parser": "5.4.1",
+        "piccolore": "^0.1.3",
+        "zod": "^4.3.6"
+      }
+    },
     "node_modules/@astrojs/telemetry": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.0.tgz",
@@ -2371,6 +2383,40 @@
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "license": "MIT"
     },
+    "node_modules/fast-xml-builder": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.1.4.tgz",
+      "integrity": "sha512-f2jhpN4Eccy0/Uz9csxh3Nu6q4ErKxf0XIsasomfOihuSUa3/xw6w8dnOtCDgEItQFJG8KyXPzQXzcODDrrbOg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "path-expression-matcher": "^1.1.3"
+      }
+    },
+    "node_modules/fast-xml-parser": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.4.1.tgz",
+      "integrity": "sha512-BQ30U1mKkvXQXXkAGcuyUA/GA26oEB7NzOtsxCDtyu62sjGw5QraKFhx2Em3WQNjPw9PG6MQ9yuIIgkSDfGu5A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "fast-xml-builder": "^1.0.0",
+        "strnum": "^2.1.2"
+      },
+      "bin": {
+        "fxparser": "src/cli/cli.js"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -3892,6 +3938,21 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/path-expression-matcher": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.2.0.tgz",
+      "integrity": "sha512-DwmPWeFn+tq7TiyJ2CxezCAirXjFxvaiD03npak3cRjlP9+OjTmSy1EpIrEbh+l6JgUundniloMLDQ/6VTdhLQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/piccolore": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/piccolore/-/piccolore-0.1.3.tgz",
@@ -4482,6 +4543,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/strnum": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.2.2.tgz",
+      "integrity": "sha512-DnR90I+jtXNSTXWdwrEy9FakW7UX+qUZg28gj5fk2vxxl7uS/3bpI4fjFYVmdK9etptYBPNkpahuQnEwhwECqA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/svgo": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/rss": "^4.0.17",
     "astro": "^6.0.8",
     "url": "^0.11.4"
   },

src/blog/post-1.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/MarkdownPostLayout.astro
 title: 'My First Blog Post'
 pubDate: 2022-07-01
 description: 'This is the first post of my new Astro blog.'

src/components/Header.astro

@@ -0,0 +1,20 @@
+---
+import Navigation from "./Navigation.astro";
+import ThemeIcon from "./ThemeIcon.astro";
+---
+
+<header>
+    <nav>
+        <div>
+            <ThemeIcon />
+        </div>
+        <Navigation />
+    </nav>
+</header>
+
+<style>
+    div {
+        display: flex;
+        justify-content: space-between;
+    }
+</style>

src/components/Posts/PostList.astro

@@ -1,18 +1,24 @@
 ---
+import { getCollection } from "astro:content";
 import PostItem from "./PostItem.astro";
 
-const allPosts = Object.values(import.meta.glob('@/pages/posts/*.md', { eager: true }));
+const allPosts = await getCollection("blog");
 ---
 
 <ul>
-  {allPosts.map((post: any) => {
-    const formattedDate = new Date(post.frontmatter.pubDate)
-      .toISOString()
-      .split("T")[0];
+  {
+    allPosts.map((post: any) => {
+      const formattedDate = new Date(post.data.pubDate)
+        .toISOString()
+        .split("T")[0];
 
-    return (
-      <PostItem url={post.url} title={post.frontmatter.title} date={formattedDate}/>
-    );
-  })}
+      return (
+        <PostItem
+          url={`/posts/${post.id}/`}
+          title={post.data.title}
+          date={formattedDate}
+        />
+      );
+    })
+  }
 </ul>
-

src/components/ThemeIcon.astro

@@ -0,0 +1,77 @@
+---
+
+---
+
+<button id="themeToggle" aria-label="Toggle theme">
+    <svg
+        aria-hidden="true"
+        width="30px"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+    >
+        <path
+            class="sun"
+            fill-rule="evenodd"
+            d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
+        ></path>
+        <path
+            class="moon"
+            fill-rule="evenodd"
+            d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+        ></path>
+    </svg>
+</button>
+
+<style>
+    #themeToggle {
+        border: 0;
+        background: none;
+        cursor: pointer;
+    }
+    .sun {
+        fill: black;
+    }
+    .moon {
+        fill: transparent;
+    }
+
+    :global(.dark) .sun {
+        fill: transparent;
+    }
+    :global(.dark) .moon {
+        fill: white;
+    }
+</style>
+
+<script is:inline>
+    const theme = (() => {
+        const localStorageTheme = localStorage?.getItem("theme") ?? "";
+        if (["dark", "light"].includes(localStorageTheme)) {
+            return localStorageTheme;
+        }
+        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            return "dark";
+        }
+        return "light";
+    })();
+
+    if (theme === "light") {
+        document.documentElement.classList.remove("dark");
+    } else {
+        document.documentElement.classList.add("dark");
+    }
+
+    window.localStorage.setItem("theme", theme);
+
+    const handleToggleClick = () => {
+        const element = document.documentElement;
+        element.classList.toggle("dark");
+
+        const isDark = element.classList.contains("dark");
+        localStorage.setItem("theme", isDark ? "dark" : "light");
+    };
+
+    document
+        .getElementById("themeToggle")
+        ?.addEventListener("click", handleToggleClick);
+</script>

src/content.config.ts

@@ -0,0 +1,23 @@
+// Import the glob loader
+import { glob } from "astro/loaders";
+// Import utilities from `astro:content`
+import { defineCollection } from "astro:content";
+// Import Zod
+import { z } from "astro/zod";
+// Define a `loader` and `schema` for each collection
+const blog = defineCollection({
+    loader: glob({ pattern: '**/[^_]*.md', base: "./src/blog" }),
+    schema: z.object({
+        title: z.string(),
+        pubDate: z.date(),
+        description: z.string(),
+        author: z.string(),
+        image: z.object({
+            url: z.string(),
+            alt: z.string()
+        }),
+        tags: z.array(z.string())
+    })
+});
+// Export a single `collections` object to register your collection(s)
+export const collections = { blog };

src/layouts/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
-import Footer from "../components/Footer.astro"
+import Footer from "../components/Footer.astro";
+import Header from "@/components/Header.astro";
 const { pageTitle } = Astro.props;
 ---
 
@@ -14,6 +15,7 @@ const { pageTitle } = Astro.props;
 		<title>{pageTitle}</title>
 	</head>
 	<body>
+		<Header />
 		<slot />
 		<Footer />
 	</body>

src/layouts/MarkdownPostLayout.astro

@@ -1,14 +1,46 @@
 ---
-import BaseLayout from './BaseLayout.astro';
-import '../styles/global.css'
+import BaseLayout from "./BaseLayout.astro";
+import "@/styles/global.css";
 const { frontmatter } = Astro.props;
 ---
+
 <BaseLayout pageTitle={frontmatter.title}>
-  <meta charset="utf-8" />
   <h1>{frontmatter.title}</h1>
-  <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
   <p><em>{frontmatter.description}</em></p>
+  <p>{frontmatter.pubDate.toString().slice(0, 10)}</p>
+
   <p>Written by: {frontmatter.author}</p>
+
   <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
+
+  <div class="tags">
+    {
+      frontmatter.tags.map((tag: string) => (
+        <p class="tag">
+          <a href={`/tags/${tag}`}>{tag}</a>
+        </p>
+      ))
+    }
+  </div>
+
   <slot />
-</BaseLayout>
+</BaseLayout>
+<style>
+  a {
+    color: #00539f;
+  }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .tag {
+    margin: 0.25em;
+    border: dotted 1px #a1a1a1;
+    border-radius: 0.5em;
+    padding: 0.5em 1em;
+    font-size: 1.15em;
+    background-color: #f8fcfd;
+  }
+</style>

src/pages/about.astro

@@ -1,17 +1,13 @@
 ---
 import Footer from "@/components/Footer.astro";
 import PostList from "@/components/Posts/PostList.astro";
+import BaseLayout from "@/layouts/BaseLayout.astro";
 import "@/styles/global.css";
 
 const pageTitle = "About Me";
 ---
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>{pageTitle}</title>
-</head>
-<body>
+<BaseLayout pageTitle={pageTitle}>
   <h1>{pageTitle}</h1>
   <h2>... and my new Astro site!</h2>
 
@@ -28,6 +24,4 @@ const pageTitle = "About Me";
   <h1>My Astro Learning Blog</h1>
   <p>This is where I will post about my journey learning Astro.</p>
   <PostList />
-
-  <Footer />
-</body>
+</BaseLayout>

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

@@ -0,0 +1,19 @@
+---
+import { getCollection, render } from "astro:content";
+import MarkdownPostLayout from "@/layouts/MarkdownPostLayout.astro";
+
+export async function getStaticPaths() {
+    const posts = await getCollection("blog");
+    return posts.map((post) => ({
+        params: { slug: post.id },
+        props: { post },
+    }));
+}
+
+const { post } = Astro.props;
+const { Content } = await render(post);
+---
+
+<MarkdownPostLayout frontmatter={post.data}>
+    <Content />
+</MarkdownPostLayout>

src/pages/rss.xml.js

@@ -0,0 +1,11 @@
+import rss, { pagesGlobToRssItems } from '@astrojs/rss';
+
+export async function GET(context) {
+    return rss({
+        title: 'Astro Learner | Blog',
+        description: 'My journey learning Astro',
+        site: context.site,
+        items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
+        customData: `<language>en-us</language>`,
+    });
+}

src/pages/tags/[tag].astro

@@ -1,19 +1,17 @@
 ---
-import BaseLayout from "@/layouts/BaseLayout.astro";
+import { getCollection } from "astro:content";
+import BaseLayout from "../../layouts/BaseLayout.astro";
 import PostItem from "@/components/Posts/PostItem.astro";
 
 export async function getStaticPaths() {
-  const allPosts = Object.values(
-    import.meta.glob("../posts/*.md", { eager: true }),
-  );
-
+  const allPosts = await getCollection("blog");
   const uniqueTags = [
-    ...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat()),
+    ...new Set(allPosts.map((post) => post.data.tags).flat()),
   ];
 
   return uniqueTags.map((tag) => {
-    const filteredPosts = allPosts.filter((post: any) =>
-      post.frontmatter.tags.includes(tag),
+    const filteredPosts = allPosts.filter((post) =>
+      post.data.tags.includes(tag),
     );
     return {
       params: { tag },
@@ -24,17 +22,14 @@ export async function getStaticPaths() {
 
 const { tag } = Astro.params;
 const { posts } = Astro.props;
-const filteredPosts = posts.filter((post: any) =>
-  post.frontmatter.tags?.includes(tag),
-);
 ---
 
 <BaseLayout pageTitle={tag}>
   <p>Posts tagged with {tag}</p>
   <ul>
     {
-      posts.map((post: any) => (
-        <PostItem url={post.url} title={post.frontmatter.title} />
+      posts.map((post) => (
+        <PostItem url={`/posts/${post.id}/`} title={post.data.title} />
       ))
     }
   </ul>

src/styles/global.css

@@ -18,4 +18,27 @@ body {
 h1 {
   margin: 1rem 0;
   font-size: 2.5rem;
+}
+
+html.dark {
+  background-color: #0d0950;
+  color: #fff;
+}
+
+.dark .menu {
+  background-color: #fff;
+  color: #000;
+}
+
+.dark .nav-links a:hover,
+.dark .nav-links a:focus {
+  color: #0d0950;
+}
+
+.dark .nav-links a {
+  color: #fff;
+}
+
+.dark a {
+  color: #ff9776;
 }