Astro3.3

作成: 2023年10月20日

astro

もう3.3なの!?

Astro2.8あたりでmdxのエラーが起こりそのまま更新しないで放置しているうちにAstroがバージョン3へ進んでしまっていた。そこからいくつかの変更点がありAstro3.3へアップデートしたのでそれまでに修正した箇所を日付とともに記録しておく。

もう3.3なの!?

2023-06-16

不具合もあるので最新の2.6にはせずにAstro 2.4にアップデートした。特に修正点はなし。

2023-07-21

Astro 2.8.5にアップデート。RSS生成部分が古く公式のものと違っていたので以下のように書き換えた。

---
export async function GET() {
  const posts = await getCollection(BLOG_NAME);
  return rss({
    title: SITE_TITLE,
    site: "https://ubanis.com",
    description: SITE_DESCRIPTION,
    items: posts.map((post) => ({
      title: post.data.title,
      description: post.data.description,
      pubDate: post.data.date,
      link: "/" + post.slug,
    })),
  });
}

mdxでエラーが出るので特に利用もしていないので外すことにした。(Astro3.3現在では直っている可能性あり)

2023-09-13

Astro3.0にアップデートした。

ここでAstroに大きな変更があり大規模なリファクタリングがあったという。

Transitionという画面簡易が正式サポートされた。これは現在Chromeだけで動く様子。

しかしなぜか私のサイトだとこのTransitionが動作しないので採用を3.0では見送った。

Transition対応は以下のように記述するだけですべてのページに適用できる。要素ごとに設定することも可能。

---
import { ViewTransitions } from 'astro:transitions';
---
<!-- 以下<head>内 -->
<ViewTransitions />

getstaticpathsで行われていた配列の自動フラット化が行われなくなった

このサイトだとタグのpaginate部分でうまく動作しなくなったので公式が言うようにflatとFlatMapを使い以下のように書き換えた。

---
export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
  const allPosts = await getCollection(BLOG_NAME);
  allPosts.sort(sortByDate);
  const allTags = [...new Set(allPosts.map((post) => post.data.tags).flat())];

  const paths = allTags.flatMap((tag) => {
    const filteredPosts = allPosts.filter((post) =>
      post.data.tags?.includes(tag!)
    );
    return paginate(filteredPosts, {
      params: { tag },
      pageSize: BLOG_PAGESIZE,
    });
  });
  return paths.flat();
}

2023-09-18

Astro3.1にアップデート。

Transitionが正しく動作するようになったので導入した。このサイトをChromeで閲覧するとページ簡易がフェードとともに行われる。

2023-09-30

Astro3.2にアップデート。

他のAstroテンプレートを見ていたらいちいちMarkdownファイルにLayoutを書いていたのが間違いだったと気づきすべてのmarkdownファイルからLayout指定を削除してLayoutをそれぞれ修正した。

2023-10-08

AndroidのLinux環境Termuxでもesbuildを追加すればAstroが動作することを確認したものの、previewはできるがbuildができない。

とりあえずesbuildもパッケージの一つとして導入した。

2023-10-14

Astro3.3にアップデート。

公式に画像最適化ができるPictureコンポーネントが搭載されたのでプロフィールのところだけで利用することにした。

---
import { Picture } from "astro:assets";
import nyan from "../../public/img/nyan4.jpg";
---
  <Picture
    src={nyan}
    formats={["webp"]}
    height="143"
    width="128"
    alt="ちんぽねこ"
  />

画像最適化はMarkdownファイルの画像も以前に搭載されたAssetsからの画像読み込みならば適用できるものファイルの置き場所がAssetsに制限されてしまいObsidianから画像が利用できなくなってしまう。

そのため従来のpublicフォルダからの読み込みのままにしている。