【自作ブログ #12】一覧ページの改善(1) - スマレジエンジニアyushiのブログ

自作ブログを作っています。

yushi-dev.hatenablog.com

技術スタック

TypeScript
React
Next.js
Styled Components
GitHub Pages

今回は記事一覧ページをいい感じにします。
今回は前半です。

作りたいもの

現状の記事一覧ページは単にファイル名で並べているだけです。

ブログタイトル、公開日、記事内容の一部を表示するように改修します。
重要度順にフォントサイズをタイトル、記事内容、公開日としました。
記事内容については冒頭の一部を表示します。
ぶつ切りな見た目にならないように、フェードアウトするようにさせます。

ダミー記事作成

記事をダミーで作成するためのshスクリプトを作成します。
簡易なもので良いため、用意したサンプルファイルをコピーします。

.PHONY: seed-posts
seed-posts:
  echo posts/sample{3,4,5,6,7,8,9,10,11,12,13,14,15}.md | xargs -n 1 cp posts/sample.md

既存の posts/{sample1,sample2}.md に加えて、3〜15のナンバリングのファイルを自動生成します。

Markdownファイルの内容を読み出す

現状ではファイル名のみを一覧表示にしていましたが、ファイルの中身を利用します。
まずはファイル内容を読み出し、一覧にします。

matter一覧を元に、その作成日順に並べます。
次にファイル本文の内最初の300文字のみを読み出します。

// pages/index.tsx

export async function getStaticProps() {
  const posts = await Promise.all(
    (
      await postService.getMatters()
    )
      .slice()
      .sort((a, b) => (a.date < b.date ? 1 : -1))
      .map(async (matter) => ({
        content: (
          await postService.loadMarkdown(matter.slug)
        ).content.slice(0, 300),
        matter,
      }))
  )
}