feat: astro-3.0 and all dependencies updated

astro.config.mjs

@@ -8,11 +8,10 @@ import sitemap from "@astrojs/sitemap";
 // https://astro.build/config
 export default defineConfig({
   site: "https://astro-paper.pages.dev/", // replace this with your deployed domain
+  scopedStyleStrategy: "where",
   integrations: [
     tailwind({
-      config: {
-        applyBaseStyles: false,
-      },
+      applyBaseStyles: false,
     }),
     react(),
     sitemap(),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-paper",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "private": false,
   "scripts": {
     "dev": "astro check --watch & astro dev",
@@ -16,36 +16,38 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@astrojs/rss": "^2.4.1",
+    "@astrojs/rss": "^3.0.0",
     "@resvg/resvg-js": "^2.4.1",
-    "astro": "^2.4.5",
+    "astro": "^3.0.9",
     "fuse.js": "^6.6.2",
     "github-slugger": "^2.0.0",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^8.0.1",
-    "satori": "^0.8.1",
-    "tailwindcss": "^3.3.2"
+    "satori": "^0.10.4",
+    "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
-    "@astrojs/react": "^2.1.3",
-    "@astrojs/sitemap": "^1.3.1",
-    "@astrojs/tailwind": "^3.1.2",
-    "@divriots/jampack": "^0.11.2",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/github-slugger": "^1.3.0",
-    "@types/react": "^18.2.6",
-    "@typescript-eslint/parser": "^5.59.5",
-    "astro-eslint-parser": "^0.14.0",
+    "@astrojs/check": "^0.2.0",
+    "@astrojs/react": "^3.0.1",
+    "@astrojs/sitemap": "^3.0.0",
+    "@astrojs/tailwind": "^5.0.0",
+    "@divriots/jampack": "^0.15.0",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/github-slugger": "^2.0.0",
+    "@types/react": "^18.2.21",
+    "@typescript-eslint/parser": "^6.6.0",
+    "astro-eslint-parser": "^0.15.0",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.40.0",
-    "eslint-plugin-astro": "^0.27.0",
+    "eslint": "^8.48.0",
+    "eslint-plugin-astro": "^0.29.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.2.8",
+    "lint-staged": "^14.0.1",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2"
   },
   "config": {
     "commitizen": {

src/components/Breadcrumbs.astro

@@ -1,6 +1,6 @@
 ---
-// Remove current url path and remove trailing slash if exists
-const currentUrlPath = Astro.url.pathname.replace(/\/+$/, "");
+// Get current url path and, if exists, remove trailing slash
+const currentUrlPath = Astro.url.pathname.replace(/\/+$/g, "");
 
 // Get url array from path
 // eg: /tags/tailwindcss => ['tags', 'tailwindcss']
@@ -45,16 +45,13 @@ breadcrumbList[0] === "posts" &&
   .breadcrumb {
     @apply mx-auto mb-1 mt-8 w-full max-w-3xl px-4;
   }
-  .breadcrumb ul li {
-    @apply inline;
-  }
-  .breadcrumb ul li a {
-    @apply capitalize opacity-70;
+  .breadcrumb ul {
+    @apply flex gap-x-2;
   }
-  .breadcrumb ul li span {
-    @apply opacity-70;
+  .breadcrumb ul li {
+    @apply capitalize opacity-70 flex gap-x-2;
   }
-  .breadcrumb ul li:not(:last-child) a {
+  .breadcrumb ul li:not(:last-child) {
     @apply hover:opacity-100;
   }
 </style>

src/components/Header.astro

@@ -21,7 +21,7 @@ const { activeNav } = Astro.props;
         {
           LOGO_IMAGE.enable ? (
             <img
-              src={LOGO_IMAGE.svg ? logoSVG : logoPNG}
+              src={LOGO_IMAGE.svg ? logoSVG.src : logoPNG.src}
               alt="AstroPaper Logo"
               width={LOGO_IMAGE.width}
               height={LOGO_IMAGE.height}

src/pages/[ogTitle].svg.ts

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

src/pages/index.astro

@@ -132,7 +132,7 @@ const socialCount = SOCIALS.filter(social => social.active).length;
     @apply mb-6;
   }
   #hero .rss-icon {
-    @apply mb-2 h-6 w-6 scale-110 fill-skin-accent sm:mb-3 sm:scale-125;
+    @apply mb-2 h-6 w-6 ml-2.5 scale-110 fill-skin-accent sm:mb-3 sm:scale-125;
   }
   #hero p {
     @apply my-2;

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/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";

tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "baseUrl": "src",
     "jsx": "react-jsx",
+    "moduleResolution": "bundler",
     "paths": {
       "@assets/*": ["assets/*"],
       "@config": ["config.ts"],