Merge pull request #25 from oriverk/feat/#23-astro5

feat: upgrate to Astro v5-beta

Author: oriverk

astro.config.ts

@@ -16,8 +16,10 @@ import {
 export default defineConfig({
   site: "https://oriverk.dev",
   publicDir: "./public",
-  // add data-astro-prefetch to anchor element
-  prefetch: true,
+  output: 'static',
+  prefetch: {
+    prefetchAll: true
+  },
   integrations: [
     svelte(),
     // NOTE: expressiveCode must be before mdx

package-lock.json

@@ -41,13 +41,13 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.6",
+    "@astrojs/mdx": "^4.0.0-beta.1",
     "@astrojs/rss": "^4.0.7",
-    "@astrojs/svelte": "^5.7.0",
-    "@expressive-code/plugin-line-numbers": "^0.36.1",
+    "@astrojs/svelte": "^6.0.0-beta.0",
+    "@expressive-code/plugin-line-numbers": "^0.37.0",
     "@octokit/graphql": "^8.1.1",
-    "astro": "^4.15.5",
-    "astro-expressive-code": "^0.36.1",
+    "astro": "^5.0.0-beta.2",
+    "astro-expressive-code": "^0.37.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dotenv": "^16.4.5",
@@ -61,28 +61,28 @@
     "remark-comment": "^1.0.0",
     "remark-github-alerts": "^0.1.0-beta.3",
     "rss-parser": "^3.13.0",
-    "satori": "^0.11.0",
+    "satori": "^0.11.1",
     "sharp": "^0.33.5",
     "strip-markdown": "^6.0.0",
-    "svelte": "^5.0.0-next.247",
+    "svelte": "^5.0.0-next.259",
     "unified": "^11.0.5",
     "unist-util-inspect": "^8.1.0",
     "unist-util-is": "^6.0.0",
     "unist-util-visit": "^5.0.0",
     "url-join": "^5.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.1",
+    "@biomejs/biome": "1.9.2",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@octokit/graphql-schema": "^15.25.0",
     "@proofdict/textlint-rule-proofdict": "^3.1.2",
     "@textlint/textlint-plugin-markdown": "^14.2.0",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.5.5",
+    "@types/node": "^22.7.0",
     "fs-extra": "^11.2.0",
     "husky": "^9.1.6",
-    "markdownlint-cli": "^0.41.0",
+    "markdownlint-cli": "^0.42.0",
     "npm-run-all2": "^6.2.3",
     "textlint": "^14.2.0",
     "textlint-filter-rule-allowlist": "^4.0.0",

package.json

@@ -10,7 +10,7 @@ const { github, zenn, x } = siteConfig;
   <h1>oriverk.dev</h1>
   <p><span class="text-gradient">Agr.</span> → ? / Bicycle</p>
   <div class="links">
-    <a href="/blog" title="Blog" data-astro-prefetch>
+    <a href="/blog" title="Blog">
       <Icon type="pencil" size="medium" />
       <span class="sr-only">Blog link</span>
     </a>

src/components/Hero.astro

@@ -13,30 +13,30 @@ const tab = (index: number) => (index === currentPage ? -1 : 0);
   {!!prev && (
     <>
       <li>
-        <a href="/blog" data-astro-prefetch>&lt;&lt;</a>
+        <a href="/blog">&lt;&lt;</a>
       </li>
       <li>
-        <a href={prev} data-astro-prefetch>&lt;</a>
+        <a href={prev}>&lt;</a>
       </li>
     </>
   )}
   {size < total && (
     <li>
-      <a href="/blog" aria-current={curr(1)} tabindex={tab(1)} data-astro-prefetch>1</a>
+      <a href="/blog" aria-current={curr(1)} tabindex={tab(1)}>1</a>
     </li>
   )}
   {[...Array(maxPage - 1)].map((_, index) => (
     <li>
-      <a href={`/blog/${index+2}`} aria-current={curr(index+2)} tabindex={tab(index+2)} data-astro-prefetch>{index+2}</a>
+      <a href={`/blog/${index+2}`} aria-current={curr(index+2)} tabindex={tab(index+2)}>{index+2}</a>
     </li>
   ))}
   {!!next && (
     <ol>
       <li>
-        <a href={next} data-astro-prefetch>&gt;</a>
+        <a href={next}>&gt;</a>
       </li>
       <li>
-        <a href={`/blog/${lastPage}`} data-astro-prefetch>&gt;&gt;</a>
+        <a href={`/blog/${lastPage}`}>&gt;&gt;</a>
       </li>
     </ol>
   )}

src/components/PostPagination.astro

@@ -21,7 +21,7 @@ const { title, date } = meta;
 >
   <div>
     <p class="title">{title}</p>
-    <time class="date" datetime={date}>{date.split("T")[0]}</time>
+    <time class="date" datetime={date}>{date?.split("T")[0]}</time>
   </div>
 </a>
 <!-- {#if !!sub_results.length}

src/components/Search/Hit.svelte

@@ -1,7 +1,8 @@
 import { defineCollection, z } from "astro:content";
+import { glob } from 'astro/loaders';
 
 const staticCollection = defineCollection({
-  type: "content",
+  loader: glob({ pattern: '**\/[^_]*.mdx?', base: "./src/content/static" }),
   schema: z.object({
     title: z.string(),
     description: z.string().optional(),
@@ -13,7 +14,7 @@ const staticCollection = defineCollection({
 });
 
 const blogCollection = defineCollection({
-  type: "content",
+  loader: glob({ pattern: '**\/[^_]*.mdx?', base: "./src/content/blog" }),
   schema: z.object({
     title: z.string(),
     description: z.string().optional(),

src/content/config.ts

@@ -1,13 +1,2 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
-
-interface ImportMetaEnv {
-  readonly SECRET_GITHUB_PERSONAL_ACCESS_TOKEN: string;
-
-  readonly SECRET_ALGOLIA_ADMIN_KEY: string;
-}
-
-// eslint-disable-next-line no-unused-vars
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}

src/env.d.ts

@@ -18,7 +18,7 @@ const isActive = (href: string) =>
         <HeaderSearch client:only="svelte" />
       </li>
       <li>
-        <a href="/blog" class:list={[{acitve: isActive("/blog")}]} data-astro-prefetch>Blog</a>
+        <a href="/blog" class:list={[{acitve: isActive("/blog")}]}>Blog</a>
       </li>
       <li>
         <a href="https://oriverk.github.io/" target="_blank" rel="noopener noreferrer" title="GitHub Page">

src/layouts/Header.astro

@@ -1,5 +1,5 @@
 ---
-import { ViewTransitions } from "astro:transitions";
+import { ClientRouter } from 'astro:transitions';
 import defaultOgImage from "@/assets/images/og.png";
 import ContentWrapper from "@/components/ui/ContentWrapper.astro";
 import urlJoin from "url-join";
@@ -50,7 +50,7 @@ const rssHref = Astro.site
     <meta name="twitter:card" content="summary_large_image" />
     <meta property="og:image" content={ogImage} />
     <meta content="ja_JP" property="og:locale" />
-    <ViewTransitions />
+    <ClientRouter />
   </head>
   <body>
     <div id="astro">
@@ -59,9 +59,15 @@ const rssHref = Astro.site
           <Header />
         </ContentWrapper>
       </header>
-      <main data-pagefind-body={!!pagefind && !noindex}>
-        <slot />
-      </main>
+      {!!pagefind && !noindex ? (
+        <main data-pagefind-body={true}>
+          <slot />
+        </main>
+      ) : (
+        <main>
+          <slot />
+        </main>
+      )}
       <footer>
         <ContentWrapper>
           <Footer />

src/layouts/Layout.astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from "astro:content";
+import { getCollection, render } from "astro:content";
 import AstroLink from "@/components/markdown/AstroLink.astro";
 import ContentWrapper from "@/components/ui/ContentWrapper.astro";
 import Markdown from "@/components/ui/Markdown.astro";
@@ -19,10 +19,9 @@ export const getStaticPaths = (async () => {
 
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 const { post } = Astro.props as Props;
-const { render, data } = post;
+const { data } = post;
 const { title, create, description, update, noindex } = data;
-
-const { Content } = await render();
+const { Content } = await render(post);
 
 export const components = {
   a: AstroLink,

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

@@ -1,4 +1,5 @@
 ---
+import { render } from 'astro:content';
 import PostTag from "@/components/PostTag.astro";
 import AstroLink from "@/components/markdown/AstroLink.astro";
 import ContentWrapper from "@/components/ui/ContentWrapper.astro";
@@ -23,7 +24,7 @@ export const getStaticPaths = (async () => {
 
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 const { post } = Astro.props as Props;
-const { render, data } = post;
+const { data } = post;
 const { title, description, tags, create, update, image, noindex } = data;
 const lastModified = update || create;
 const date = lastModified.toLocaleDateString("ja-JP", {
@@ -32,7 +33,7 @@ const date = lastModified.toLocaleDateString("ja-JP", {
   day: "numeric",
 });
 const isoDate = lastModified.toISOString();
-const { Content, headings } = await render();
+const { Content, headings } = await render(post);
 const toc = getTocHierarchy(headings);
 const { origin, pathname } = Astro.url;
 const ogImage = getOgImageSrc(origin, pathname);

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

@@ -12,6 +12,7 @@
       ]
     }
   },
+  "include": [".astro/types.d.ts", "**/*"],
   "exclude": [
     "./node_modules",
     "./dist"