websiteをリニューアルしました

はじめに#

当サイトをリニューアルしました。

以前はHugoで動かしていましたが、Astroを使うように変えました。

リニューアル前からの差分#

これまでに制作した楽曲を全てブログ記事化して追加しました。
- 楽曲を表す記事には一律でカテゴリーMusicを付与しています。
- 試聴できるものについては、各記事に可能な限り音楽プレーヤーを埋め込んでいます。
  - 試聴できるものにはタグ 🎧 を付与しています。
Tokyo Θinema Paradiso の特設サイトを新たに作成しました。
- 特設サイトはこちら
これまで非公開だったいくつかの楽曲を試聴可能にしました。

Fuwariテンプレートに独自追加した機能#

記事カテゴリごとのページネーション付き一覧ページ#

使用例: Discography
サムネイル表示付きでカテゴリに絞り込める一覧ページを作りたかったので追加

実装手順#

以下のようにディレクトリ構造を追加

 |
 |--- [category] <- 追加したディレクトリ
 |    |--- [...page].astro <- 追加したページ
 |
 |--- [...page].astro

追加した […page].astro 内で、ページ一覧取得時に記事のカテゴリで絞り込むようにする

interface BlogPost {
  data: {
    category: string;
  };
}

export const getStaticPaths = (async ({ paginate }) => {
  const allBlogPosts: BlogPost[] = await getSortedPosts()
  const categories = [...new Set(allBlogPosts.flatMap(post => post.data.category))]
  
  return categories.flatMap(category => {
    const filteredPosts = allBlogPosts.filter(post => post.data.category.includes(category))
    return paginate(filteredPosts, {
      params: { category },
      pageSize: PAGE_SIZE
    })
  })
}) satisfies GetStaticPaths

ページネーション用コンポーネント Pagination.astro のリンク先を少し修正

const getPageUrl = (p: number) => {
  if (p == 1) return page.url.first
  // page.url.firstが定義されていない場合はpage.url.currentを使う
  if (!page.url.first) return `${page.url.current}/${p}/`
  else return `${page.url.first}/${p}/`
}

ブログ記事中のTwitterリンクを埋め込みに自動変換#

大まかな流れ
- ブログ記事中のTwitterリンクを検知し、所定のタグに変換するremarkプラグインを追加
```
変換イメージ
https://twitter.com/{username}/status/{投稿id}
↓
<Twitter url=https://twitter.com/{username}/status/{投稿id}>
```
- Twitterタグを埋め込み用コードに変換するrehypeプラグインを追加
  - この記事などを参考に実装。実装例は生成AIに頑張ってもらっただけなので割愛します。。。
- remark -> rehypeの順に追加したプラグインを適用

外部リンクや所定の内部リンクを新規タブで開けるようにする#

特定の条件を満たす場合にリンクのtarget属性を_blankに変更するrehypeプラグインを追加

Tokusetsu3テンプレートを自動でレンダリングできる機能#

json設定ファイルとテンプレート用htmlを元に特設サイトが自動生成されるようになりました。
使用例: Resomnium
詳しく知りたい方はそよもぎまでご連絡ください。

問い合わせフォームの設置#

使用例: Contact
AstroでNetlify Formsを使うを参考にしました。

おわりに#

全曲リストは超頑張って作ったのでいっぱい曲聴いてもらえると嬉しいです！！！

ではでは。