feat: update to latest astro(4.5)

.github/workflows/playwright.yml

@@ -10,7 +10,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v1
         with:
-          version: 1.0.14
+          version: 1.0.30
       - name: Install dependencies
         run: bun i --no-save
       - name: Install Playwright Browsers

README.md

@@ -65,7 +65,7 @@ echo "MICROCMS_API_KEY=${microcmsのAPI Key}" >> ./.env
 pnpm run dev
 ```
 
-`http://localhost:3000`にアクセス
+`http://localhost:4321`にアクセス
 
 ## ご意見・質問など
 

astro.config.mjs

@@ -1,4 +1,4 @@
-import { defineConfig } from "astro/config";
+import { defineConfig, passthroughImageService } from "astro/config";
 
 import tailwind from "@astrojs/tailwind";
 
@@ -19,4 +19,7 @@ export default defineConfig({
   build: {
     inlineStylesheets: "auto",
   },
+  image: {
+    service: passthroughImageService(),
+  },
 });

package.json

@@ -11,26 +11,26 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/cloudflare": "^6.6.2",
-    "@astrojs/tailwind": "^4.0.0",
-    "astro": "^2.9.7",
-    "microcms-js-sdk": "^2.5.0",
-    "tailwindcss": "^3.3.3"
+    "@astrojs/cloudflare": "^9.1.0",
+    "@astrojs/tailwind": "^5.1.0",
+    "astro": "4.5",
+    "microcms-js-sdk": "^3.0.0",
+    "tailwindcss": "^3.3.3",
+    "typescript-eslint": "^7.2.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.36.2",
     "@tailwindcss/typography": "^0.5.9",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@types/bun": "^1.0.8",
     "eslint": "^8.46.0",
-    "eslint-config-prettier": "^8.9.0",
-    "eslint-config-standard-with-typescript": "^35.0.0",
-    "eslint-plugin-astro": "^0.27.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-astro": "^0.31.4",
     "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
-    "prettier": "^2.8.8",
-    "prettier-plugin-astro": "^0.10.0",
-    "typescript": "^5.1.6"
+    "prettier": "^3.2.5",
+    "prettier-plugin-astro": "^0.13.0",
+    "typescript": "^5.4.2"
   }
 }

playwright.config.ts

@@ -36,15 +36,15 @@ const config: PlaywrightTestConfig = {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: "http://localhost:3000",
+    baseURL: "http://localhost:4321",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
   },
   /* start server when running the testing script */
   webServer: {
-    command: "bun --bun run start",
-    url: "http://localhost:3000/",
+    command: "bun run start",
+    url: "http://localhost:4321/",
     reuseExistingServer: !process.env.CI,
   },
 

src/library/postFetcher.ts

@@ -1,23 +1,24 @@
-import { createClient, MicroCMSQueries } from "microcms-js-sdk";
+import { createClient } from "microcms-js-sdk";
+import type { MicroCMSQueries } from "microcms-js-sdk";
 const client = createClient({
-  serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
-  apiKey: import.meta.env.MICROCMS_API_KEY,
+  serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN as string,
+  apiKey: process.env.MICROCMS_API_KEY as string,
 });
 
-type Category = {
+interface Category {
   id: string;
   createdAt: string;
   updatedAt: string;
   publishedAt: string;
   revisedAt: string;
   name: string;
-};
-type Eyecatch = {
+}
+interface Eyecatch {
   url: string;
   height: number;
   width: number;
-};
-export type Post = {
+}
+export interface Post {
   id: string;
   createdAt: string;
   updatedAt: string;
@@ -28,13 +29,13 @@ export type Post = {
   category: Category;
   content: string;
   description: string;
-};
-export type PostResponse = {
+}
+export interface PostResponse {
   totalCount: number;
   offset: number;
   limit: number;
   contents: Post[];
-};
+}
 
 /**
  * 記事を複数件取得する

src/test/topPageTest.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("test", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("http://localhost:4321/");
   await page
     .getByRole("link", {
       name: "2022年12月19日 初めての投稿~このブログを作った経緯~ このブログの初めての投稿です。このブログを作った経緯とか、これから何に使うのかとかについて説明しています。今後ともよろしくお願いします。",