Upgrade Astro to v5 (#51)

* chore: upgrade Astro to v5

* fix: Astro v5 deprecated functionality

Author: carsakiller

package.json

@@ -11,10 +11,10 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.2",
+    "@astrojs/mdx": "^4.3.0",
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@types/lodash": "^4.17.6",
-    "astro": "^4.11.5",
+    "astro": "^5.8.0",
     "autoprefixer": "^10.4.19",
     "axios": "^1.7.2",
     "dayjs": "^1.11.11",

pnpm-lock.yaml

@@ -1,12 +1,21 @@
 ---
+import { render } from "astro:content";
+import { getCollection } from "astro:content";
 import type { searchItem } from "~/services/search";
 import { searchTerms } from "~/services/search";
 
-const getContentStaticURL = (path: string, target?: string): string | null => {
-  const rgx = /\/src\/.+?\/(.+)\..*?/g;
+/**
+ * Infers the static URL of a wiki article from its file path.
+ * @param path filepath of article
+ * @param target optional target heading
+ */
+const getContentStaticURL = (path: string, target?: string): string => {
+  const rgx = /src\/.+?\/(.+)\..*?/g;
+
+  console.log(path);
 
   const result = rgx.exec(path);
-  if (result === null) return null;
+  if (result === null) throw new Error(`Failed to infer static URL of ${path}`);
 
   if (target) {
     return `/${result[1]}/#${target}`;
@@ -15,38 +24,36 @@ const getContentStaticURL = (path: string, target?: string): string | null => {
   }
 };
 
-let searchTags: searchItem[] = [];
+const searchTags: searchItem[] = [...searchTerms];
 
-if (searchTags.length === 0) {
-  const pages = await Astro.glob("../../content/**/*.mdx");
+if (searchTags.length === searchTerms.length) {
+  const pages = await getCollection("wiki");
 
   for (const page of pages) {
-    const frontmatter = page.frontmatter;
-    const headings = page.getHeadings();
-
-    const href = getContentStaticURL(page.file);
-    if (!href) {
-      throw new Error(`Failed to get static url of ${page.url}`);
+    if (!page.filePath) {
+      throw new Error(`Page ${page.id} does not have a file path}`);
     }
 
-    //   Add article title to search options
-    searchTags.push({ text: page.frontmatter.title, href });
+    const { headings } = await render(page);
+
+    const href = getContentStaticURL(page.filePath);
+
+    // Add article title to search options
+    searchTags.push({ text: page.data.title, href });
 
     // Add custom article tags to search options
-    for (const tag of frontmatter.tags ?? []) {
+    for (const tag of page.data.tags ?? []) {
       searchTags.push({ text: tag, href });
     }
 
     // Add article headings to search options
     for (const heading of headings) {
-      const href = getContentStaticURL(page.file, heading.slug);
-      if (!href) {
-        throw new Error(`Failed to get static url of ${page.url}`);
-      }
-      searchTags.push({ text: heading.text, href });
+      searchTags.push({
+        text: heading.text,
+        href: getContentStaticURL(page.filePath, heading.slug),
+      });
     }
   }
-  searchTags = searchTags.concat(searchTerms);
 }
 ---
 

src/components/common/Search.astro

@@ -1,7 +1,8 @@
+import { glob } from "astro/loaders";
 import { defineCollection, z } from "astro:content";
 
 const wikiArticleCollection = defineCollection({
-  type: "content",
+  loader: glob({pattern: '**/[^_]*.{md,mdx}', base: "./src/content/wiki" }),
   schema: z.object({
     title: z.string(),
     description: z.string(),

src/content/config.ts renamed to src/content.config.ts

@@ -14,7 +14,7 @@ const articles = await getCollection("wiki");
 export const getStaticPaths = async () => {
   const articles = await getCollection("wiki");
   return articles.map((entry) => {
-    return { params: { slug: entry.slug }, props: { entry } };
+    return { params: { slug: entry.id }, props: { entry } };
   });
 };
 
@@ -41,12 +41,12 @@ export interface Props {
             articles
               .sort((a, b) => a.data.title.localeCompare(b.data.title))
               .map((article) =>
-                article.slug == hereSlug ? (
-                  <a href={`/wiki/${article.slug}/`} class="here">
+                article.id == hereSlug ? (
+                  <a href={`/wiki/${article.id}/`} class="here">
                     {article.data.title}
                   </a>
                 ) : (
-                  <a href={`/wiki/${article.slug}/`}>{article.data.title}</a>
+                  <a href={`/wiki/${article.id}/`}>{article.data.title}</a>
                 )
               )
           }
@@ -73,15 +73,15 @@ export interface Props {
           <a
             class="edit-page"
             target="_blank"
-            href={`https://github.com/LuaLS/LuaLS.github.io/tree/main/src/content/wiki/${article.slug}.mdx`}
+            href={`https://github.com/LuaLS/LuaLS.github.io/tree/main/src/content/wiki/${article.id}.mdx`}
           >
             <Icon name="pencil" group="solid" /> Edit this page
           </a>
           <a
             class="open-issue"
             target="_blank"
             href={`https://github.com/LuaLS/LuaLS.github.io/issues/new?title=${encodeURIComponent(
-              `Issue with wiki page "${article.slug}"`
+              `Issue with wiki page "${article.id}"`
             )}`}
           >
             <Icon name="circle-dot" group="solid" /> Open Issue

src/layouts/WikiArticle.astro

@@ -14,17 +14,18 @@ import H6 from "~/components/wiki/headings/H6.astro";
 import dayjs from "~/services/time";
 import Tooltip from "~/components/common/Tooltip.astro";
 import Time from "~/components/common/Time.astro";
+import { render } from "astro:content";
 
 export const getStaticPaths = async () => {
   const articles = await getCollection("wiki");
   return articles.map((article) => {
-    return { params: { slug: article.slug }, props: { article } };
+    return { params: { slug: article.id }, props: { article } };
   });
 };
 
 const { article } = Astro.props;
 
-const { Content, headings, remarkPluginFrontmatter } = await article.render();
+const { Content, headings, remarkPluginFrontmatter } = await render(article);
 
 export interface Props {
   article: CollectionEntry<"wiki">;

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

@@ -7,6 +7,7 @@ import fetch from "~/util/fetch";
 import ExternalLink from "~/components/common/ExternalLink.astro";
 
 import { Image } from "astro:assets";
+import { render } from "astro:content";
 
 const CONTRIBUTOR_COUNT = 30;
 
@@ -15,14 +16,14 @@ const allWikiArticles = (await getCollection("wiki")).sort((a, b) =>
 );
 await Promise.all(
   allWikiArticles.map((article) =>
-    article.render().then((r) => {
+    render(article).then((r) => {
       article.data.lastModified = r.remarkPluginFrontmatter.lastModified;
     })
   )
 );
 const articleCount = allWikiArticles.length;
 const wordCount = allWikiArticles.reduce(
-  (x, article) => x + Array.from(article.body.matchAll(/\w+/g)).length,
+  (x, article) => x + Array.from((article.body ?? "").matchAll(/\w+/g)).length,
   0
 );
 const gettingStartedArticles = allWikiArticles.filter(
@@ -101,7 +102,7 @@ if (!contributors) {
           {
             gettingStartedArticles.map((article) => (
               <div class="article">
-                <a href={`/wiki/${article.slug}/`}>
+                <a href={`/wiki/${article.id}/`}>
                   {article.data.title}
                   <p>{article.data.description}</p>
                 </a>
@@ -135,9 +136,9 @@ if (!contributors) {
               <div
                 class="article"
                 data-last-modified={article.data.lastModified}
-                data-length={article.body.length}
+                data-length={(article.body ?? "").length}
               >
-                <a href={`/wiki/${article.slug}/`}>
+                <a href={`/wiki/${article.id}/`}>
                   <div class="name">{article.data.title}</div>
                   <p class="description">{article.data.description}</p>
                 </a>