gatsby やってみる

ssg
Creating Tags Pages for Blog Posts | Gatsby
Creating tag pages for your blog post is a way to let visitors browse related content. To add tags to your blog posts, you will first want…
Creating Tags Pages for Blog Posts | Gatsby favicon https://www.gatsbyjs.com/docs/adding-tags-and-categories-to-blog-posts/
Creating Tags Pages for Blog Posts | Gatsby
  • mdx はおもしろそう。カスタマイズはの記法は hugo や jinja よりも素直で簡単そうに見えた
  • GraphQL もわりと素直で簡単そうに見える

が、既存の markdown がわりとエラーになる。

  • frontmatter が yaml 必要。toml 食えない。
  • <url> 記法 とか。エラーがあると全部失敗になる。

ということで、 python のスクリプトで既存の markdown を改変して様式を合わせることにした。

  • frontmatter の yaml 変換
  • 正規表現で <url> 記法 除去
  • frontmatter.title が無い場合に先頭の見出しを title に付け替える(sphinx の myst 向けの記事？)

MDXRenderer 無くなっているぽい

breaking change w

gatsby-plugin-mdx が 3 から 4 になるときに変更があって、 MDXRenderer が無くなって MDXprovider を使う方式に変わったぽい？

見よう見まねでセットアップしてなんとなく動いたのだが、 ちょっと変えたら動かなくなって、 調べていくとどうも最近のバージョンで MDXRenderer が無くなったぽい。

Element type is invalid: expected a string

というエラーメッセージが出て全然意味がわからなかったのだが、 MDXRenderer が無くなっていて、import 失敗の結果出たエラーだったぽい。 わからねー。

import { MDXRenderer } from "gatsby-plugin-mdx";

いまバージョンはどうも Rendering 済みの children を引数で受ける作法になっているぽい。

// post template
function PostTemplate({ data: { mdx }, children }) {}

chidren を受けるには createPages を以下のようにする。

gatsby-node.js
data.allMdx.nodes.forEach((node) => {
  actions.createPage({
    path: node.frontmatter.slug,
    // 👇 この記述により template に children を供給できるぽい
    component: `${postTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
    context: {
      id: node.id,
    },
  });
});

要するにドキュメントに書いてあるとおりにする必要があるのだが、 内容を理解していないのと、古い情報との混在で難航したのであった。

gatsby-plugin-page-creator 無用

無くても動く。 というか createPages を変わりにやってくれるものぽい。

exports.createPages = async ({ graphql, actions }) => {};

かくして、白いサイトに戻った。

はまったおかげで gatsby のデータの流れがわかってきた。 適当に組み立てて行こう。

prism-react-renderer (syntax highlight) 導入

の３ステップ。 これも難航したが、MDX v2 の情報を見分けることが重要。 MDXProvider 探索するべし。

layout

list

post

tags

tag できた。 gatsby の component システム、jinja や hugo の template と比べて わかりやすくてパワーがあるね。 nvim で作業しているのだけど、 LanguageServer の支援が受けられてすごい快適だ。

/tags/tag

各 tag から post へのリンク

/tags

tag の一覧

/posts/post to tag

各 post から tag へのリンク。 これだけ難易度が一個上。

gfm

gatsby-transform-json

tag 同士の関連付け実験。

👈新

nvim 整備

nvim

motion_conv

repository python