Merge branch 'main' into build/update_latest

iamStephenFang · iamStephenFang · commit 7c7e8a23075b · 2025-03-19T12:56:15.000+08:00
# Conflicts:
#	CHANGELOG.md
#	package.json
#	src/config.ts
#	src/data/blog/_releases/astro-paper-2.md
#	src/data/blog/_releases/astro-paper-3.md
#	src/data/blog/_releases/astro-paper-4.md
#	src/data/blog/_releases/astro-paper-5.md
#	src/data/blog/adding-new-post.md
#	src/data/blog/examples/example-draft-post.md
#	src/data/blog/examples/portfolio-website-development.md
#	src/data/blog/examples/tailwind-typography.md
#	src/data/blog/examples/terminal-development.md
diff --git a/astro.config.ts b/astro.config.ts
@@ -35,5 +35,6 @@ export default defineConfig({
   experimental: {
     svg: true,
     responsiveImages: true,
+    preserveScriptOrder: true,
   },
 });
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "astro-paper",
   "type": "module",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "scripts": {
     "dev": "astro dev",
     "build": "astro check && astro build && pagefind --site dist && cp -r dist/pagefind public/",
@@ -18,25 +18,25 @@
     "@astrojs/sitemap": "^3.2.1",
     "@giscus/react": "^3.1.0",
     "@resvg/resvg-js": "^2.6.2",
-    "@tailwindcss/vite": "^4.0.12",
+    "@tailwindcss/vite": "^4.0.14",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "astro": "^5.4.2",
+    "astro": "^5.5.2",
     "lodash.kebabcase": "^4.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",
     "satori": "^0.12.1",
     "sharp": "^0.33.5",
-    "tailwindcss": "^4.0.12"
+    "tailwindcss": "^4.0.14"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
     "@pagefind/default-ui": "^1.3.0",
     "@tailwindcss/typography": "^0.5.16",
     "@types/lodash.kebabcase": "^4.1.9",
-    "@typescript-eslint/parser": "^8.26.0",
+    "@typescript-eslint/parser": "^8.26.1",
     "eslint": "^9.22.0",
     "eslint-plugin-astro": "^1.3.1",
     "globals": "^16.0.0",
@@ -45,6 +45,6 @@
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "typescript": "^5.8.2",
-    "typescript-eslint": "^8.26.0"
+    "typescript-eslint": "^8.26.1"
   }
-}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -1,17 +1,16 @@
 ---
 import { slugifyStr } from "@/utils/slugify";
 import type { CollectionEntry } from "astro:content";
+import { getPath } from "@/utils/getPath";
 import Datetime from "./Datetime.astro";
 
-export interface Props {
-  href?: string;
-  frontmatter: CollectionEntry<"blog">["data"];
-  secHeading?: boolean;
+export interface Props extends CollectionEntry<"blog"> {
+  variant?: "h2" | "h3";
 }
 
-const { href, frontmatter, secHeading = true } = Astro.props;
+const { variant = "h2", data, id, filePath } = Astro.props;
 
-const { title, pubDatetime, modDatetime, description } = frontmatter;
+const { title, pubDatetime, modDatetime, description } = data;
 
 const headerProps = {
   style: { viewTransitionName: slugifyStr(title) },
@@ -21,17 +20,17 @@ const headerProps = {
 
 <li class="my-6">
   <a
-    href={href}
+    href={getPath(id, filePath)}
     class="inline-block text-lg font-medium text-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
   >
     {
-      secHeading ? (
+      variant === "h2" ? (
         <h2 {...headerProps}>{title}</h2>
       ) : (
         <h3 {...headerProps}>{title}</h3>
       )
     }
   </a>
-  <Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} />
+  <Datetime {pubDatetime} {modDatetime} />
   <p>{description}</p>
 </li>
diff --git a/src/content.config.ts b/src/content.config.ts
@@ -2,8 +2,10 @@ import { defineCollection, z } from "astro:content";
 import { glob } from "astro/loaders";
 import { SITE } from "@/config";
 
+export const BLOG_PATH = "src/data/blog";
+
 const blog = defineCollection({
-  loader: glob({ pattern: "**/[^_]*.md", base: "./src/data/blog" }),
+  loader: glob({ pattern: "**/[^_]*.md", base: `./${BLOG_PATH}` }),
   schema: ({ image }) =>
     z.object({
       author: z.string().default(SITE.author),
diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
@@ -8,6 +8,7 @@ import Datetime from "@/components/Datetime.astro";
 import EditPost from "@/components/EditPost.astro";
 import ShareLinks from "@/components/ShareLinks.astro";
 import BackButton from "@/components/BackButton.astro";
+import { getPath } from "@/utils/getPath";
 import { slugifyStr } from "@/utils/slugify";
 import IconChevronLeft from "@/assets/icons/IconChevronLeft.svg";
 import IconChevronRight from "@/assets/icons/IconChevronRight.svg";
@@ -46,7 +47,7 @@ if (typeof initOgImage === "string") {
 
 // Use dynamic OG image if enabled and no remote|local ogImage
 if (!ogImageUrl && SITE.dynamicOgImage) {
-  ogImageUrl = `/posts/${slugifyStr(title)}/index.png`;
+  ogImageUrl = `${getPath(post.id, post.filePath)}/index.png`;
 }
 
 // Resolve OG image URL (or fallback to SITE.ogImage / default `og.png`)
diff --git a/src/pages/archives/index.astro b/src/pages/archives/index.astro
@@ -69,8 +69,8 @@ const months = [
                             new Date(a.data.pubDatetime).getTime() / 1000
                           )
                       )
-                      .map(({ data, id }) => (
-                        <Card href={`/posts/${id}`} frontmatter={data} />
+                      .map(data => (
+                        <Card {...data} />
                       ))}
                   </ul>
                 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -81,12 +81,8 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
           <section id="featured" class="pt-12 pb-6">
             <h2 class="text-2xl font-semibold tracking-wide">Featured</h2>
             <ul>
-              {featuredPosts.map(({ data, id }) => (
-                <Card
-                  href={`/posts/${id}/`}
-                  frontmatter={data}
-                  secHeading={false}
-                />
+              {featuredPosts.map(data => (
+                <Card variant="h3" {...data} />
               ))}
             </ul>
           </section>
@@ -101,14 +97,8 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
           <h2 class="text-2xl font-semibold tracking-wide">Recent Posts</h2>
           <ul>
             {recentPosts.map(
-              ({ data, id }, index) =>
-                index < SITE.postPerIndex && (
-                  <Card
-                    href={`/posts/${id}/`}
-                    frontmatter={data}
-                    secHeading={false}
-                  />
-                )
+              (data, index) =>
+                index < SITE.postPerIndex && <Card variant="h3" {...data} />
             )}
           </ul>
         </section>
diff --git a/src/pages/posts/[...page].astro b/src/pages/posts/[...page].astro
@@ -22,11 +22,7 @@ const { page } = Astro.props;
   <Header />
   <Main pageTitle="Posts" pageDesc="All the articles I've posted.">
     <ul>
-      {
-        page.data.map(({ data, id }) => (
-          <Card href={`/posts/${id}`} frontmatter={data} />
-        ))
-      }
+      {page.data.map(data => <Card {...data} />)}
     </ul>
   </Main>
 
diff --git a/src/pages/posts/[...slug]/index.astro b/src/pages/posts/[...slug]/index.astro
@@ -2,16 +2,16 @@
 import { type CollectionEntry, getCollection } from "astro:content";
 import PostDetails from "@/layouts/PostDetails.astro";
 import getSortedPosts from "@/utils/getSortedPosts";
+import { getPath } from "@/utils/getPath";
 
 export interface Props {
   post: CollectionEntry<"blog">;
 }
 
 export async function getStaticPaths() {
   const posts = await getCollection("blog", ({ data }) => !data.draft);
-
   const postResult = posts.map(post => ({
-    params: { slug: post.id },
+    params: { slug: getPath(post.id, post.filePath, false) },
     props: { post },
   }));
 
diff --git a/src/pages/posts/[...slug]/index.png.ts b/src/pages/posts/[...slug]/index.png.ts
@@ -1,7 +1,7 @@
 import type { APIRoute } from "astro";
 import { getCollection, type CollectionEntry } from "astro:content";
+import { getPath } from "@/utils/getPath";
 import { generateOgImageForPost } from "@/utils/generateOgImages";
-import { slugifyStr } from "@/utils/slugify";
 import { SITE } from "@/config";
 
 export async function getStaticPaths() {
@@ -14,7 +14,7 @@ export async function getStaticPaths() {
   );
 
   return posts.map(post => ({
-    params: { slug: slugifyStr(post.data.title) },
+    params: { slug: getPath(post.id, post.filePath, false) },
     props: post,
   }));
 }
diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts
@@ -1,5 +1,6 @@
 import rss from "@astrojs/rss";
 import { getCollection } from "astro:content";
+import { getPath } from "@/utils/getPath";
 import getSortedPosts from "@/utils/getSortedPosts";
 import { SITE } from "@/config";
 
@@ -10,8 +11,8 @@ export async function GET() {
     title: SITE.title,
     description: SITE.desc,
     site: SITE.website,
-    items: sortedPosts.map(({ data, id }) => ({
-      link: `posts/${id}/`,
+    items: sortedPosts.map(({ data, id, filePath }) => ({
+      link: getPath(id, filePath),
       title: data.title,
       description: data.description,
       pubDate: new Date(data.modDatetime ?? data.pubDatetime),
diff --git a/src/pages/tags/[tag]/[...page].astro b/src/pages/tags/[tag]/[...page].astro
@@ -40,11 +40,7 @@ const { page, tagName } = Astro.props;
   >
     <h1 slot="title" transition:name={tag}>{`Tag:${tag}`}</h1>
     <ul>
-      {
-        page.data.map(({ data, id }) => (
-          <Card href={`/posts/${id}`} frontmatter={data} />
-        ))
-      }
+      {page.data.map(data => <Card {...data} />)}
     </ul>
   </Main>
 
diff --git a/src/styles/typography.css b/src/styles/typography.css
@@ -29,9 +29,15 @@
   pre:has(code) {
     @apply border border-border;
   }
-  code,
-  blockquote {
-    word-wrap: break-word;
+
+  .prose code,
+  .prose blockquote {
+    @apply break-words;
+  }
+
+  .prose table code {
+    /* add line breaks whenever necessary for codes under table */
+    @apply break-all;
   }
 
   pre > code {
diff --git a/src/utils/getPath.ts b/src/utils/getPath.ts
@@ -0,0 +1,36 @@
+import { BLOG_PATH } from "@/content.config";
+import { slugifyStr } from "./slugify";
+
+/**
+ * Get full path of a blog post
+ * @param id - id of the blog post (aka slug)
+ * @param filePath - the blog post full file location
+ * @param includeBase - whether to include `/posts` in return value
+ * @returns blog post path
+ */
+export function getPath(
+  id: string,
+  filePath: string | undefined,
+  includeBase = true
+) {
+  const pathSegments = filePath
+    ?.replace(BLOG_PATH, "")
+    .split("/")
+    .filter(path => path !== "") // remove empty string in the segments ["", "other-path"] <- empty string will be removed
+    .filter(path => !path.startsWith("_")) // exclude directories start with underscore "_"
+    .slice(0, -1) // remove the last segment_ file name_ since it's unnecessary
+    .map(segment => slugifyStr(segment)); // slugify each segment path
+
+  const basePath = includeBase ? "/posts" : "";
+
+  // Making sure `id` does not contain the directory
+  const blogId = id.split("/");
+  const slug = blogId.length > 0 ? blogId.slice(-1) : blogId;
+
+  // If not inside the sub-dir, simply return the file path
+  if (!pathSegments || pathSegments.length < 1) {
+    return [basePath, slug].join("/");
+  }
+
+  return [basePath, ...pathSegments, slug].join("/");
+}

Original file line number	Diff line number	Diff line change
`@@ -69,8 +69,8 @@ const months = [`
`69`	`69`	`new Date(a.data.pubDatetime).getTime() / 1000`
`70`	`70`	`)`
`71`	`71`	`)`
`72`		`- .map(({ data, id }) => (`
`73`		- <Card href={`/posts/${id}`} frontmatter={data} />
	`72`	`+ .map(data => (`
	`73`	`+ <Card {...data} />`
`74`	`74`	`))}`
`75`	`75`	`</ul>`
`76`	`76`	`</div>`