feat: upgrade to astro v3

Upgrade to astro v3. Update dependencies. Fix codes and features due to migration.

BREAKING CHANGE: Astro v3

resolve #111

README.md

@@ -131,7 +131,7 @@ All commands are run from the root of the project, from a terminal:
 | Command                | Action                                                                                                                           |
 | :--------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
 | `npm install`          | Installs dependencies                                                                                                            |
-| `npm run dev`          | Starts local dev server at `localhost:3000`                                                                                      |
+| `npm run dev`          | Starts local dev server at `localhost:4321`                                                                                      |
 | `npm run build`        | Build your production site to `./dist/`                                                                                          |
 | `npm run preview`      | Preview your build locally, before deploying                                                                                     |
 | `npm run format:check` | Check code format with Prettier                                                                                                  |

astro.config.mjs

@@ -38,4 +38,5 @@ export default defineConfig({
       exclude: ["@resvg/resvg-js"],
     },
   },
+  scopedStyleStrategy: "where",
 });

package.json

@@ -16,35 +16,37 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@astrojs/rss": "^2.4.1",
+    "@astrojs/check": "^0.2.0",
+    "@astrojs/rss": "^3.0.0",
     "@resvg/resvg-js": "^2.4.1",
-    "astro": "^2.4.5",
+    "astro": "^3.0.13",
     "fuse.js": "^6.6.2",
     "github-slugger": "^2.0.0",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^8.0.1",
-    "satori": "^0.8.1",
+    "satori": "^0.10.4",
-    "tailwindcss": "^3.3.2"
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2"
   },
   "devDependencies": {
-    "@astrojs/react": "^2.1.3",
+    "@astrojs/react": "^3.0.2",
-    "@astrojs/sitemap": "^1.3.1",
+    "@astrojs/sitemap": "^3.0.0",
-    "@astrojs/tailwind": "^3.1.2",
+    "@astrojs/tailwind": "^5.0.0",
-    "@divriots/jampack": "^0.11.2",
+    "@divriots/jampack": "^0.20.1",
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/github-slugger": "^1.3.0",
-    "@types/react": "^18.2.6",
+    "@types/react": "^18.2.21",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/parser": "^6.7.0",
-    "astro-eslint-parser": "^0.14.0",
+    "astro-eslint-parser": "^0.15.0",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.40.0",
+    "eslint": "^8.49.0",
-    "eslint-plugin-astro": "^0.27.0",
+    "eslint-plugin-astro": "^0.29.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
+    "lint-staged": "^14.0.1",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.3",
     "prettier-plugin-astro": "^0.12.0",
-    "prettier-plugin-tailwindcss": "^0.2.8",
+    "prettier-plugin-tailwindcss": "^0.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

remark-collapse.d.ts

@@ -0,0 +1 @@
+declare module 'remark-collapse';

src/components/Breadcrumbs.astro

@@ -16,7 +16,7 @@ breadcrumbList[0] === "posts" &&
   <ul>
     <li>
       <a href="/">Home</a>
-      <span aria-hidden="true">&#62;</span>
+      <span aria-hidden="true">&nbsp;&gt;&nbsp;</span>
     </li>
     {
       breadcrumbList.map((breadcrumb, index) =>
@@ -33,7 +33,7 @@ breadcrumbList[0] === "posts" &&
         ) : (
           <li>
             <a href={`/${breadcrumb}`}>{breadcrumb}</a>
-            <span aria-hidden="true">&#62;</span>
+            <span aria-hidden="true">&nbsp;&gt;&nbsp;</span>
           </li>
         )
       )

src/components/Card.tsx

@@ -10,21 +10,8 @@ export interface Props {
 export default function Card({ href, frontmatter, secHeading = true }: Props) {
   const { title, pubDatetime, description } = frontmatter;
   return (
-    <li className="my-6">
+    <li className="list-card">
-      <a
+      <a href={href}>{secHeading ? <h2>{title}</h2> : <h3>{title}</h3>}</a>
-        href={href}
-        className="inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
-      >
-        {secHeading ? (
-          <h2 className="text-lg font-medium decoration-dashed hover:underline">
-            {title}
-          </h2>
-        ) : (
-          <h3 className="text-lg font-medium decoration-dashed hover:underline">
-            {title}
-          </h3>
-        )}
-      </a>
       <Datetime datetime={pubDatetime} />
       <p>{description}</p>
     </li>

src/components/Header.astro

@@ -3,9 +3,6 @@ import { LOGO_IMAGE, SITE } from "@config";
 import Hr from "./Hr.astro";
 import LinkButton from "./LinkButton.astro";
 
-import logoPNG from "/assets/logo.png";
-import logoSVG from "/assets/logo.svg";
-
 export interface Props {
   activeNav?: "posts" | "tags" | "about" | "search";
 }
@@ -21,8 +18,8 @@ const { activeNav } = Astro.props;
         {
           LOGO_IMAGE.enable ? (
             <img
-              src={LOGO_IMAGE.svg ? logoSVG : logoPNG}
+              src={`/assets/${LOGO_IMAGE.svg ? "logo.svg" : "logo.png"}`}
-              alt="AstroPaper Logo"
+              alt={SITE.title}
               width={LOGO_IMAGE.width}
               height={LOGO_IMAGE.height}
             />
@@ -78,7 +75,7 @@ const { activeNav } = Astro.props;
               href="/search"
               className={`focus-outline p-3 sm:p-1 ${
                 activeNav === "search" ? "active" : ""
-              }`}
+              } flex`}
               ariaLabel="search"
               title="Search"
             >

src/pages/[ogTitle].svg.ts

@@ -2,9 +2,8 @@ import { getCollection } from "astro:content";
 import generateOgImage from "@utils/generateOgImage";
 import type { APIRoute } from "astro";
 
-export const get: APIRoute = async ({ params }) => ({
+export const GET: APIRoute = async ({ params }) =>
-  body: await generateOgImage(params.ogTitle),
+  new Response(await generateOgImage(params.ogTitle));
-});
 
 const postImportResult = await getCollection("blog", ({ data }) => !data.draft);
 const posts = Object.values(postImportResult);

src/pages/index.astro

@@ -23,7 +23,7 @@ const socialCount = SOCIALS.filter(social => social.active).length;
   <Header />
   <main id="main-content">
     <section id="hero">
-      <h1>Mingalaba</h1>
+      <h1 class="mr-2">Mingalaba</h1>
       <a
         target="_blank"
         href="/rss.xml"

src/pages/posts/[slug].astro

@@ -1,5 +1,5 @@
 ---
-import { CollectionEntry, getCollection } from "astro:content";
+import { type CollectionEntry, getCollection } from "astro:content";
 import Posts from "@layouts/Posts.astro";
 import PostDetails from "@layouts/PostDetails.astro";
 import getSortedPosts from "@utils/getSortedPosts";

src/pages/rss.xml.ts

@@ -4,7 +4,7 @@ import getSortedPosts from "@utils/getSortedPosts";
 import slugify from "@utils/slugify";
 import { SITE } from "@config";
 
-export async function get() {
+export async function GET() {
   const posts = await getCollection("blog");
   const sortedPosts = getSortedPosts(posts);
   return rss({

src/pages/search.astro

@@ -5,7 +5,7 @@ import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
-import Search from "@components/Search";
+import SearchBar from "@components/Search";
 
 // Retrieve all articles
 const posts = await getCollection("blog", ({ data }) => !data.draft);
@@ -21,7 +21,7 @@ const searchList = posts.map(({ data }) => ({
 <Layout title={`Search | ${SITE.title}`}>
   <Header activeNav="search" />
   <Main pageTitle="Search" pageDesc="Search any article ...">
-    <Search client:load searchList={searchList} />
+    <SearchBar client:load searchList={searchList} />
   </Main>
   <Footer />
 </Layout>

src/pages/tags/[tag].astro

@@ -1,5 +1,5 @@
 ---
-import { CollectionEntry, getCollection } from "astro:content";
+import { type CollectionEntry, getCollection } from "astro:content";
 import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
 import Header from "@components/Header.astro";

src/styles/base.css

@@ -128,4 +128,16 @@
   .focus-outline {
     @apply outline-2 outline-offset-1 outline-skin-fill focus-visible:no-underline focus-visible:outline-dashed;
   }
+
+  /* Card */
+  .list-card {
+    @apply my-6;
+  }
+  .list-card > a {
+    @apply inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0;
+  }
+  .list-card h2,
+  .list-card h3 {
+    @apply text-lg font-medium decoration-dashed hover:underline;
+  }
 }

src/utils/generateOgImage.tsx

@@ -1,4 +1,4 @@
-import satori, { SatoriOptions } from "satori";
+import satori, { type SatoriOptions } from "satori";
 import { SITE } from "@config";
 import { writeFile } from "node:fs/promises";
 import { Resvg } from "@resvg/resvg-js";