ホームページ - EY-Office

2023-04-04

EY-OfficeホームページのAstro化を進めています

以前ブログのようなWebサイトを構築するにはAstroが良いかもというブログを書きましたが、中で『EY-OfficeのサイトをJekyllからAstroへの乗り換えは出来そうな気がします』と書きましたが、先週週末に着手しました。

ブログのようなWebサイトを構築するにはAstroが良いかもの中ではブログの部分を中心に説明しましたが、今回はホームページの部分をポーティングし始めました。

Astro

Astroは書きやすい

ホームページのindex.htmlを完全にAstroに置き換えてみました、結果が以下の画像です。完全に置き換わりました！

Jekyllでは、動的な部分、例えばindex.htmlにある最新ブログ記事のリンクは手動で書いているわけではなく、以下のようなLiquidというテンプレート言語で書かれています。site.posts.first.dateはブログ記事の最初の日付が戻り、その値をdate: "%Y-%m-%d"という日付フォーマットフィルターを使いYYYY-MM-DD形式で表示しています。

<div class="news__date">｛{ site.posts.first.date | date: "%Y-%m-%d"}｝</div>
<div class="news__category">ブログ</div>
<a href="｛{ site.posts.first.url }｝" class="news__heading">
  ｛{ site.posts.first.title }｝
</a>

Liquidは高水準の言語でブログやドキュメントを作るのに必要な機能を持っていますが、やはり出来ない事もあります。その場合はRuby言語で独自フィルターを書く事になります。以下は記事に書かれた最初の画像のパス（og:image）を戻すフィルターです。

module Jekyll
  module TextFilter
    def first_photo_url(input)
      if input =~ /<img\s+src="(.*?)"/
        $1
      elsif input =~ /!\[.*?\]\((.*?)\)/
        $1
      else
        "/images/logo.png"
      end
    end
  end
end
Liquid::Template.register_filter(Jekyll::TextFilter)

これはチームでサイトを作る場合は、記事を書く人はLiquidを覚え。足りない機能はプログラマーがRubyでフィルターを書くと仕事を分担できます。しかし1人で全てやる場合は、Liquid言語と独自フィルターを書く方法などを学ぶ必要があり面倒です。

ところがAstroはReactというよりJSXのように、JavaScriptとHTMLが一体化したものなので、動的な部分の処理は全てJavaScript(TypeScript)で書きHTMLに結果を埋め込めます。React開発に慣れている人にはとReact同様に頭をあまり使わずに書けます。
上で上げたJekyllのコードはAstroでは以下のように書けます。lastBlogは他のJavaScript(TypeScript)モジュールとして書かれています。

---
import { lastBlog } from '@utils/BlogPost';

const posts = await Astro.glob('/src/_blog/*.md');
const blog = lastBlog(posts);
---
  ・・・省略・・・
  <div class="news__date">{blog.date}</div>
  <div class="news__category">ブログ</div>
  <a href={blog.path} class="news__heading">{blog.title}</a>

BlogPostモジュールの一部

import type { MarkdownInstance } from "astro";

export const blogParms = (post: MarkdownInstance<Record<string, any>>) => {
  const [_, y, m, d, name] = post.file.match(/_blog\/(\d+)-(\d+)-(\d+)-(.+?).md/) ?? [0, 1,1,1,''];
  return {y, m, d, name};
}

export const lastBlog = (posts: MarkdownInstance<Record<string, any>>[]) => {
  const lastPost = posts[posts.length - 1];
  const p = blogParms(lastPost);
  const firstImageMatch = lastPost.compiledContent().match(/<img\s+src="(.*?)"/)
  const ogImage = firstImageMatch ? firstImageMatch[1] : null;

  return {
    date: `${p.y}-${p.m}-${p.d}`,
    title: lastPost.frontmatter.title,
    ogImage: ogImage
  };