Merge pull request #251 from cybozu/topic/upgrade_astro3

upgrade astro3

.node-version

@@ -1 +1 @@
-v18.13.0
+20.6.1

astro.config.mjs

@@ -7,5 +7,5 @@ export default defineConfig({
     syntaxHighlight: "prism",
   },
   site: "https://cybozu.github.io/",
-  base: "/frontend-monthly",
+  base: "frontend-monthly/",
 })

package.json

@@ -11,9 +11,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.0.1",
+    "@astrojs/check": "^0.2.0",
+    "astro": "^3.0.13",
     "dayjs": "^1.11.7",
-    "github-markdown-css": "^4.0.0"
+    "github-markdown-css": "^4.0.0",
+    "typescript": "^5.2.2"
   },
   "devDependencies": {
     "@types/node": "^18.11.18",

src/components/EventSummary.astro

@@ -1,26 +1,25 @@
 ---
 import type { CollectionEntry } from "astro:content"
+import { Image } from "astro:assets"
+import headerImg from "../assets/header.png"
 
 export interface Props {
   frontmatter: CollectionEntry<"posts">["data"]
 }
 import dayjs from "dayjs"
-import { staticPath } from "../lib/helper"
+// import { staticPath } from "../lib/helper"
 import StreamInfo from "./StreamInfo.astro"
 const { frontmatter } = Astro.props
-const startDate = dayjs(frontmatter.date)
-const format = "HH:mm"
+// const startDate = dayjs(frontmatter.date)
+// const format = "HH:mm"
 ---
 
-<img
-  src={staticPath("/img/header.png")}
-  alt=""
-  width="659"
-  height="229"
-  style={{
-    height: "auto",
-    maxWidth: "100%",
-  }}
+<Image
+  src={headerImg}
+  alt="タイトル画像"
+  width="660"
+  height="270"
+  quality="max"
 />
 <h2>イベント概要</h2>
 <p>

src/pages/index.astro

@@ -1,25 +1,32 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection } from "astro:content"
 import Layout from "../layouts/Layout.astro"
 import dayjs from "dayjs"
+import { Image } from "astro:assets"
+import iconImg from "../assets/icon.jpeg"
 
-const posts = await getCollection('posts');
-const contents = await Promise.all(posts.map(async post => {
+const posts = await getCollection("posts")
+const contents = await Promise.all(
+  posts
+    .map(async post => {
       const pagePath = `./posts/${post.slug}`
       const date = dayjs(post.data.date).format("YYYY/MM/DD")
       const title = `#${post.data.no} - ${date}`
 
-      const rendered = await post.render();
-      const headings = rendered.headings.
-        filter(heading => heading.depth === 3)
+      const rendered = await post.render()
+      const headings = rendered.headings.filter(heading => heading.depth === 3)
 
       return { pagePath, title, headings }
     })
-    .reverse())
+    .reverse()
+)
 ---
 
 <Layout title="Cybozu Frontend Monthly">
-  <h1 class="title">Cybozu Frontend Monthly</h1>
+  <h1 class="title">
+    <Image src={iconImg} alt="" width="50" height="50" />Cybozu Frontend Monthly
+  </h1>
+
   <ul class="posts">
     {
       contents.map(content => {
@@ -50,6 +57,11 @@ const contents = await Promise.all(posts.map(async post => {
     line-height: 1.25;
     margin-bottom: 16px;
     margin-top: 0;
+    display: flex;
+    align-items: center;
+    img {
+      margin-right: 0.25em;
+    }
   }
   .posts {
     list-style: none;

src/pages/posts/[slug].astro

@@ -1,13 +1,15 @@
 ---
-export interface Props {
-  post: CollectionEntry<'posts'>
-}
-import { getCollection, CollectionEntry } from 'astro:content'
+import { getCollection } from 'astro:content'
+import type { CollectionEntry } from 'astro:content'
 import PostLayout from "../../layouts/PostLayout.astro"
 import EventSummary from "../../components/EventSummary.astro"
 import MembersList from "../../components/MembersList.astro"
 import EmbedIntroduceSlide from "../../components/EmbedIntroduceSlide.astro"
 
+export interface Props {
+  post: CollectionEntry<'posts'>
+}
+
 export const getStaticPaths = async () => {
   const posts = await getCollection('posts')