Full Migration to Collections (#7)

* fixed /blog and /garden

* switched to collections in permalink pages

* converted rss page

src/components/BlogPosts.tsx

@@ -1,16 +1,16 @@
 import type { Component } from "solid-js";
-import type { Frontmatter } from "~/lib/blog";
+import { type CollectionEntry } from "astro:content";
 
 export interface Post {
-  url?: string;
-  frontmatter: Frontmatter;
+  url: string;
+  entry: CollectionEntry<'blog' | 'garden'>;
 }
 
 export interface Props {
   posts: Post[];
 }
 
-const format = (date: string) =>
+const format = (date: string | Date) =>
   new Date(date).toLocaleDateString("en-us", {
     year: "numeric",
     month: "short",
@@ -20,13 +20,13 @@ const format = (date: string) =>
 const BlogPosts: Component<Props> = (props) => {
   return (
     <table>
-      {props.posts.map(({ frontmatter: fm, url }) => (
+      {props.posts.map(({ entry: { data }, url }) => (
         <tr>
           <td>
-            <time datetime={fm.pubDate}>{format(fm.pubDate)}</time>
+            <time datetime={data.pubDate?.toISOString()}>{format(data.pubDate || "")}</time>
           </td>
           <td>
-            <a href={url || ''}>{fm.title}</a>
+            <a href={url}>{data.title}</a>
           </td>
         </tr>
       ))}

src/components/BookmarkCard.astro

@@ -49,7 +49,7 @@ const { href, name, description, tags } = Astro.props;
     {
       tags.map((tag) => (
         <span>
-          <a href={`/bookmarks/${tag}`}>{tag}</a>
+          <a href={`/bookmarks/tag/${tag}`}>{tag}</a>
         </span>
       ))
     }

src/content/config.ts

@@ -5,8 +5,11 @@ const blog = defineCollection({
   schema: z.object({
     title: z.string(),
     description: z.string(),
-    tags: z.array(z.string()),
-    pubDate: z.date().optional(),
+    tags: z.array(z.enum([
+      "journal",
+      "goals",
+    ])),
+    pubDate: z.date(),
     blog: z.boolean().optional(),
     draft: z.boolean().optional(),
   }),
@@ -17,8 +20,19 @@ const garden = defineCollection({
   schema: z.object({
     title: z.string(),
     description: z.string().optional(),
-    tags: z.array(z.string()),
-    pubDate: z.date().optional(),
+    tags: z.array(z.enum([
+      "computer-science",
+      "hobbies",
+      "homelab",
+      "ideas",
+      "kubernetes",
+      "opsec",
+      "philosophy",
+      "programming",
+      "security",
+    ])),
+    pubDate: z.date(),
+    modDate: z.date().optional(),
     draft: z.boolean().optional(),
   }),
 });

src/content/garden/Building Habits.md

@@ -3,6 +3,7 @@ title: Building Habits
 description: Ideas about habit building.
 pubDate: 2023-01-09T18:48:15.000Z
 tags: []
+slug: Building-Habits
 ---
 
 Habits are a common topic among self help gurus and its understandable, we all

src/layouts/BlogPost.astro

@@ -8,12 +8,13 @@ export interface Props {
   content: {
     title: string;
     description: string;
-    pubDate: Date;
     tags?: string[];
+    pubDate: Date;
+    modDate?: Date | undefined;
   };
 }
 const {
-  content: { title, description, tags, pubDate },
+  content: { title, description, tags, pubDate, modDate },
 } = Astro.props;
 const date = new Date(pubDate);
 ---
@@ -38,7 +39,11 @@ const date = new Date(pubDate);
     <hr />
     <footer>
       {tags && tags.length > 0 && <pre>tags: [{tags?.join(" ")}]</pre>}
-      published: {humanDate(date)}
+      <pre>published: {humanDate(date)}</pre>
+      {modDate !== undefined && !isNaN(modDate.getTime())
+        ? <pre>modified: {humanDate(modDate)}</pre>
+        : <></>
+      }
     </footer>
   </main>
 </Base>

src/layouts/PostList.astro

@@ -3,10 +3,10 @@ import path from "~/lib/path";
 import Base from "~/layouts/Base.astro";
 import Nav from "~/components/Nav.astro";
 import BlogPosts from "~/components/BlogPosts";
-import GithubSlugger from "github-slugger";
-import { getPosts, slug } from "~/lib/blog";
 import { SITE_TITLE } from "~/config";
 
+import { getCollection } from "astro:content";
+
 export interface Props {
   blog: boolean;
   subTitle: string;
@@ -15,21 +15,20 @@ export interface Props {
 
 const { subTitle, blog, description } = Astro.props;
 
-const allPosts = await getPosts({
-  blog: blog,
-  drafts: import.meta.env.DEV,
-});
-const slugger = new GithubSlugger();
-
+const allPosts = await getCollection(blog ? "blog" : "garden");
 // TODO Build a search index for content and tags
 const posts = allPosts.map((p) => {
-  const s = slug(p, true, slugger);
-  if (!p.frontmatter.slug) p.frontmatter.slug = s;
   return {
-    url: p.url || path.join(Astro.url.pathname, s),
-    frontmatter: p.frontmatter,
+    url: path.join(Astro.url.pathname, p.slug),
+    entry: p,
   };
+}).filter((post) => !post.entry.data.draft);
+
+posts.sort((a, b) => {
+  if (!a.entry.data.pubDate || !b.entry.data.pubDate) return 0;
+  return b.entry.data.pubDate.getTime() - a.entry.data.pubDate.getTime();
 });
+
 const title = `${SITE_TITLE} | ${subTitle}`;
 const props = { title, description }
 ---

src/lib/dates.ts

@@ -6,5 +6,5 @@ export const humanDate = (d: Date) =>
     hour: "2-digit",
     minute: "2-digit",
     second: "2-digit",
-    timeZoneName: "longGeneric",
+    timeZoneName: "shortGeneric",
   });

src/pages/blog/[slug].astro

@@ -1,29 +1,41 @@
 ---
 export const prerender = true;
-import type { MarkdownInstance, GetStaticPathsResult } from "astro";
-import { type Frontmatter, getPosts, slug } from "~/lib/blog";
-import GithubSlugger from "github-slugger";
+import type { GetStaticPathsResult } from "astro";
+import { type CollectionEntry, getCollection } from "astro:content";
+import BlogPost from "~/layouts/BlogPost.astro";
 
 export interface Props {
-  post: MarkdownInstance<Frontmatter>;
+  post: CollectionEntry<"blog">;
 }
 
 export const getStaticPaths = async (): Promise<GetStaticPathsResult> => {
-  const slugger = new GithubSlugger();
-  const posts = await getPosts({ blog: true });
+  const posts = (await getCollection("blog")).filter((p) => !p.data.draft);
   return posts.map((post) => {
     return {
       params: {
-        slug: slug(post, true, slugger),
+        slug: post.slug,
       },
       props: { post },
     };
   });
 };
 
 const {
-  post: { Content },
+  post: {
+    data: { title, description, tags, pubDate },
+    render,
+  },
 } = Astro.props;
+const rendered = await render();
+const Content = rendered.Content;
+const info = {
+  title,
+  description,
+  tags,
+  pubDate: new Date(pubDate || ""),
+};
 ---
 
-<Content />
+<BlogPost content={info}>
+  <Content />
+</BlogPost>

src/pages/content/[date]/[slug].astro

@@ -1,31 +1,63 @@
 ---
 export const prerender = true;
-import type { MarkdownInstance, GetStaticPathsResult } from "astro";
-import { type Frontmatter, getPosts, slug } from "~/lib/blog";
+
+import BlogPost from "~/layouts/BlogPost.astro";
+import type { GetStaticPathsResult } from "astro";
 import GithubSlugger from "github-slugger";
+import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
 
 export interface Props {
-  post: MarkdownInstance<Frontmatter>;
+  post: CollectionEntry<"blog" | "garden">;
 }
 
 export const getStaticPaths = async (): Promise<GetStaticPathsResult> => {
   const slugger = new GithubSlugger();
-  const posts = await getPosts({ drafts: import.meta.env.DEV });
-  return posts.map((post) => {
-    let date: Date = new Date(post.frontmatter.pubDate);
-    return {
-      params: {
-        slug: slug(post, true, slugger),
-        date: date.toLocaleDateString().replaceAll("/", "-"),
-      },
-      props: { post },
-    };
-  });
+  const posts = (await getCollection("blog")).filter((p) => !p.data.draft);
+  const garden = (await getCollection("garden")).filter((p) => !p.data.draft);
+  let paths = [
+    ...posts.map((post) => {
+      let date = new Date(post.data.pubDate || "");
+      const slug = slugger.slug(post.id.replace(".md", ""), false);
+      return {
+        params: {
+          slug,
+          date: date.toLocaleDateString().replaceAll("/", "-"),
+        },
+        props: { post },
+      };
+    }),
+    ...garden.map((post) => {
+      let date = new Date(post.data.pubDate || "");
+      const slug = slugger.slug(post.id.replace(".md", ""), false);
+      return {
+        params: {
+          slug,
+          date: date.toLocaleDateString().replaceAll("/", "-"),
+        },
+        props: { post },
+      };
+    }),
+  ];
+  return paths;
 };
 
 const {
-  post: { Content },
+  post: {
+    render,
+    data: { title, description, tags, pubDate },
+  },
 } = Astro.props;
+
+const { Content } = await render();
+const info = {
+  title,
+  tags,
+  pubDate,
+  description: description || "",
+};
 ---
 
-<Content />
+<BlogPost content={info}>
+  <Content />
+</BlogPost>

src/pages/garden/[slug].astro

@@ -1,22 +1,20 @@
 ---
 export const prerender = true;
 
-import type { MarkdownInstance, GetStaticPathsResult } from "astro";
-import { type Frontmatter, getPosts, slug } from "~/lib/blog";
-import GithubSlugger from "github-slugger";
+import type { GetStaticPathsResult } from "astro";
 import BlogPost from "~/layouts/BlogPost.astro";
+import { type CollectionEntry, getCollection } from "astro:content";
 
 export interface Props {
-  post: MarkdownInstance<Frontmatter>;
+  post: CollectionEntry<"garden">;
 }
 
 export const getStaticPaths = async (): Promise<GetStaticPathsResult> => {
-  const slugger = new GithubSlugger();
-  const posts = await getPosts({ blog: false });
+  const posts = (await getCollection("garden")).filter((p) => !p.data.draft);
   return posts.map((post) => {
     return {
       params: {
-        slug: slug(post, true, slugger),
+        slug: post.slug,
       },
       props: { post },
     };
@@ -25,15 +23,19 @@ export const getStaticPaths = async (): Promise<GetStaticPathsResult> => {
 
 const {
   post: {
-    Content,
-    frontmatter: { layout, title, description, pubDate, tags },
+    data: { title, description, tags, pubDate, modDate },
+    render,
   },
 } = Astro.props;
-const content = {
+const layout = false;
+const rendered = await render();
+const Content = rendered.Content;
+const info = {
   title,
-  description,
   tags,
-  pubDate: new Date(pubDate),
+  description: description || "",
+  pubDate: pubDate,
+  modDate: modDate,
 };
 ---
 
@@ -44,7 +46,7 @@ const content = {
   layout ? (
     <Content />
   ) : (
-    <BlogPost content={content}>
+    <BlogPost content={info}>
       <Content />
     </BlogPost>
   )