From 26e001eaf079fe61dbabc670782ca3ded1f4a495 Mon Sep 17 00:00:00 2001 From: vighnesh153 Date: Sun, 29 Dec 2024 18:28:01 +0530 Subject: [PATCH] refactor: move blogs to astro collections --- .../0001.Why-I-moved-on-from-React.md | 0 .../website/src/content.config.ts | 18 ++++++++++++ .../blog/how-to-pull-requests.mdx} | 3 +- .../index.mdx => content/blog/playground.mdx} | 5 ++-- .../blog/reinvent-the-wheel/index.mdx | 3 +- .../blog/reinvent-the-wheel/wheel.webp | Bin .../website/src/layouts/BlogLayout.astro | 27 +++++++++--------- .../website/src/pages/blog/[id].astro | 20 +++++++++++++ .../website/src/pages/blog/index.astro | 15 +++++----- .../website/src/utils/BlogFrontmatter.ts | 7 ----- .../website/src/utils/index.ts | 1 - 11 files changed, 62 insertions(+), 37 deletions(-) rename tools-nodejs/vighnesh153-astro/website/src/{content/blog => blog_holder}/0001.Why-I-moved-on-from-React.md (100%) create mode 100644 tools-nodejs/vighnesh153-astro/website/src/content.config.ts rename tools-nodejs/vighnesh153-astro/website/src/{pages/blog/how-to-pull-requests/index.mdx => content/blog/how-to-pull-requests.mdx} (99%) rename tools-nodejs/vighnesh153-astro/website/src/{pages/blog/playground/index.mdx => content/blog/playground.mdx} (95%) rename tools-nodejs/vighnesh153-astro/website/src/{pages => content}/blog/reinvent-the-wheel/index.mdx (99%) rename tools-nodejs/vighnesh153-astro/website/src/{pages => content}/blog/reinvent-the-wheel/wheel.webp (100%) create mode 100644 tools-nodejs/vighnesh153-astro/website/src/pages/blog/[id].astro delete mode 100644 tools-nodejs/vighnesh153-astro/website/src/utils/BlogFrontmatter.ts diff --git a/tools-nodejs/vighnesh153-astro/website/src/content/blog/0001.Why-I-moved-on-from-React.md b/tools-nodejs/vighnesh153-astro/website/src/blog_holder/0001.Why-I-moved-on-from-React.md similarity index 100% rename from tools-nodejs/vighnesh153-astro/website/src/content/blog/0001.Why-I-moved-on-from-React.md rename to tools-nodejs/vighnesh153-astro/website/src/blog_holder/0001.Why-I-moved-on-from-React.md diff --git a/tools-nodejs/vighnesh153-astro/website/src/content.config.ts b/tools-nodejs/vighnesh153-astro/website/src/content.config.ts new file mode 100644 index 00000000..4af5c593 --- /dev/null +++ b/tools-nodejs/vighnesh153-astro/website/src/content.config.ts @@ -0,0 +1,18 @@ +import { defineCollection, z } from "astro:content"; + +import { glob } from "astro/loaders"; + +const blog = defineCollection({ + loader: glob({ base: "./src/content/blog", pattern: "**/*.mdx" }), + schema: z.object({ + title: z.coerce.string(), + creationDate: z.coerce.date(), + description: z.coerce.string(), + tags: z.enum(["software engineering", "best practices", "philosophy"]) + .array(), + slug: z.coerce.string(), + live: z.coerce.boolean().default(false), + }), +}); + +export const collections = { blog }; diff --git a/tools-nodejs/vighnesh153-astro/website/src/pages/blog/how-to-pull-requests/index.mdx b/tools-nodejs/vighnesh153-astro/website/src/content/blog/how-to-pull-requests.mdx similarity index 99% rename from tools-nodejs/vighnesh153-astro/website/src/pages/blog/how-to-pull-requests/index.mdx rename to tools-nodejs/vighnesh153-astro/website/src/content/blog/how-to-pull-requests.mdx index 7e2e50fb..db1b0fef 100644 --- a/tools-nodejs/vighnesh153-astro/website/src/pages/blog/how-to-pull-requests/index.mdx +++ b/tools-nodejs/vighnesh153-astro/website/src/content/blog/how-to-pull-requests.mdx @@ -1,11 +1,10 @@ --- -layout: '@/layouts/BlogLayout.astro' - title: How to create good pull requests? creationDate: 2024-09-29 description: Turns out creating a pull request requires a lot more effort than just commiting your changes and uploading to a VCS. tags: ['software engineering', 'best practices'] +slug: how-to-pull-requests live: true --- diff --git a/tools-nodejs/vighnesh153-astro/website/src/pages/blog/playground/index.mdx b/tools-nodejs/vighnesh153-astro/website/src/content/blog/playground.mdx similarity index 95% rename from tools-nodejs/vighnesh153-astro/website/src/pages/blog/playground/index.mdx rename to tools-nodejs/vighnesh153-astro/website/src/content/blog/playground.mdx index f5bbcf5d..168e3835 100644 --- a/tools-nodejs/vighnesh153-astro/website/src/pages/blog/playground/index.mdx +++ b/tools-nodejs/vighnesh153-astro/website/src/content/blog/playground.mdx @@ -1,10 +1,9 @@ --- -layout: '@/layouts/BlogLayout.astro' - title: 'Playground Blog post' creationDate: 2022-07-01 description: 'This is the first post of my new Astro blog.' -tags: ['astro', 'blogging', 'learning in public'] +tags: ['software engineering'] +slug: playground live: false --- diff --git a/tools-nodejs/vighnesh153-astro/website/src/pages/blog/reinvent-the-wheel/index.mdx b/tools-nodejs/vighnesh153-astro/website/src/content/blog/reinvent-the-wheel/index.mdx similarity index 99% rename from tools-nodejs/vighnesh153-astro/website/src/pages/blog/reinvent-the-wheel/index.mdx rename to tools-nodejs/vighnesh153-astro/website/src/content/blog/reinvent-the-wheel/index.mdx index add990db..6ff7e927 100644 --- a/tools-nodejs/vighnesh153-astro/website/src/pages/blog/reinvent-the-wheel/index.mdx +++ b/tools-nodejs/vighnesh153-astro/website/src/content/blog/reinvent-the-wheel/index.mdx @@ -1,10 +1,9 @@ --- -layout: '@/layouts/BlogLayout.astro' - title: I hate the "Don't reinvent the wheel" advice creationDate: 2024-09-16 description: I hate it when people tell me to not do something that has already been done before. tags: ['philosophy', 'software engineering'] +slug: reinvent-the-wheel live: true --- diff --git a/tools-nodejs/vighnesh153-astro/website/src/pages/blog/reinvent-the-wheel/wheel.webp b/tools-nodejs/vighnesh153-astro/website/src/content/blog/reinvent-the-wheel/wheel.webp similarity index 100% rename from tools-nodejs/vighnesh153-astro/website/src/pages/blog/reinvent-the-wheel/wheel.webp rename to tools-nodejs/vighnesh153-astro/website/src/content/blog/reinvent-the-wheel/wheel.webp diff --git a/tools-nodejs/vighnesh153-astro/website/src/layouts/BlogLayout.astro b/tools-nodejs/vighnesh153-astro/website/src/layouts/BlogLayout.astro index 6f752d85..ff08a441 100644 --- a/tools-nodejs/vighnesh153-astro/website/src/layouts/BlogLayout.astro +++ b/tools-nodejs/vighnesh153-astro/website/src/layouts/BlogLayout.astro @@ -1,24 +1,23 @@ --- +import type { CollectionEntry } from "astro:content"; import ContentLayout from "./ContentLayout.astro"; -import { classes, type BlogFrontmatter } from "@/utils/index.ts"; +import { classes } from "@/utils/index.ts"; interface Props { - frontmatter: BlogFrontmatter & { - // path to blog post - url: string; - }; + post?: CollectionEntry<"blog">; } -const { frontmatter } = Astro.props; +const { post } = Astro.props; -const date = new Date( - frontmatter.creationDate ?? Date.now(), -).toLocaleDateString("en-us", { - year: "numeric", - month: "long", - day: "numeric", -}); +const date = new Date(post?.data.creationDate ?? Date.now()).toLocaleDateString( + "en-us", + { + year: "numeric", + month: "long", + day: "numeric", + } +); --- @@ -32,7 +31,7 @@ const date = new Date( > {/* Heading */}

- {frontmatter.title ?? "Heading 1"} + {post?.data.title ?? "Heading 1"}

{/* Creation date */} diff --git a/tools-nodejs/vighnesh153-astro/website/src/pages/blog/[id].astro b/tools-nodejs/vighnesh153-astro/website/src/pages/blog/[id].astro new file mode 100644 index 00000000..63869e97 --- /dev/null +++ b/tools-nodejs/vighnesh153-astro/website/src/pages/blog/[id].astro @@ -0,0 +1,20 @@ +--- +import { getCollection, render } from "astro:content"; + +import BlogLayout from "@/layouts/BlogLayout.astro"; + +export async function getStaticPaths() { + const posts = await getCollection("blog"); + return posts.map((post) => ({ + params: { id: post.data.slug }, + props: { post }, + })); +} + +const { post } = Astro.props; +const { Content } = await render(post); +--- + + + + diff --git a/tools-nodejs/vighnesh153-astro/website/src/pages/blog/index.astro b/tools-nodejs/vighnesh153-astro/website/src/pages/blog/index.astro index de58b7cc..5c048b84 100644 --- a/tools-nodejs/vighnesh153-astro/website/src/pages/blog/index.astro +++ b/tools-nodejs/vighnesh153-astro/website/src/pages/blog/index.astro @@ -1,15 +1,14 @@ --- -import { type BlogFrontmatter } from "@/utils/index.ts"; +import { getCollection } from "astro:content"; import ContentLayout from "@/layouts/ContentLayout.astro"; -const posts = Object.values(import.meta.glob("./*/*.mdx", { eager: true })); +const posts = await getCollection("blog"); const frontmatterList = posts - .map((_blog) => { - const blog = _blog as { frontmatter: BlogFrontmatter; url: string }; + .map((post) => { return { - ...blog.frontmatter, - url: blog.url, + ...post.data, + url: `/blog/${post.data.slug}`, }; }) .filter((it) => import.meta.env.DEV || it.live) @@ -17,7 +16,7 @@ const frontmatterList = posts new Date(a.creationDate ?? Date.now()) > new Date(b.creationDate ?? Date.now()) ? -1 - : 1, + : 1 ); --- @@ -36,7 +35,7 @@ const frontmatterList = posts { frontmatterList.map((frontmatter) => { const date = new Date( - frontmatter.creationDate ?? Date.now(), + frontmatter.creationDate ?? Date.now() ).toLocaleDateString("en-us", { year: "numeric", month: "long", diff --git a/tools-nodejs/vighnesh153-astro/website/src/utils/BlogFrontmatter.ts b/tools-nodejs/vighnesh153-astro/website/src/utils/BlogFrontmatter.ts deleted file mode 100644 index 2c9cc558..00000000 --- a/tools-nodejs/vighnesh153-astro/website/src/utils/BlogFrontmatter.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface BlogFrontmatter { - title: string | undefined; - description: string | undefined; - creationDate: string | undefined; - tags: string[] | undefined; - live: boolean | undefined; -} diff --git a/tools-nodejs/vighnesh153-astro/website/src/utils/index.ts b/tools-nodejs/vighnesh153-astro/website/src/utils/index.ts index c4efe61d..f661ffd4 100644 --- a/tools-nodejs/vighnesh153-astro/website/src/utils/index.ts +++ b/tools-nodejs/vighnesh153-astro/website/src/utils/index.ts @@ -1,6 +1,5 @@ export * from "./content/index.ts"; export * from "./auth.ts"; -export * from "./BlogFrontmatter.ts"; export * from "./classes.ts"; export * from "./computeInitialsFromName.ts"; export * from "./copy_to_clipboard.ts";