Gatsby.jsで.md／.adocが混在できるテンプレートを作ったときの苦しみ / Pain-to-create-gatsby-template-that-supports-markdown-and-asciidoc

#frontendlt Gatsby.jsで.md/.adocが混在できるテンプレートを作ったときの苦しみ 2020.08.26 フロントエンドLT会 vol.1 -2020夏祭り Isamu Suzuki,
Rakus

#frontendlt • 株式会社ラクス ◦ ガンプラ部部長 ◦ 先行技術検証 ◦ アーキテクチャ選定
◦ 技術イベント司会 • 先月引っ越し ◦ 作業部屋兼サーバールーム確保！ ◦ 先週やっとNuro光開通 • 自転車買いました • Fat Project作者 • ポケモンはじめました ◦ 緑→ソード鈴木勇 / Isamu Suzuki

#frontendlt 今日のお題 Gatsby.jsのテーマを作った話

#frontendlt Gatsby.js？ • React.jsベースのWebページ／SPA作成用フレームワーク ◦ いわゆるSSG : Static Site Generator
▪ Markdownでコンテンツを作成 ▪ React.jsでテンプレートを作成 • ブログエンジンとしても ◦ 今回は技術ブログを作り直そうと思った

#frontendlt SSGでブログを構築する仕組み Netlify GraphQL transformer plugin remark Gatsby.js template 頑張って記事を書く

#frontendlt Asciidoc 使いたい!!

#frontendlt • かんたんに書けるけど表現力がない ◦ 注釈とか（文中に）カンタンに入れたい ◦ 定義リスト使いたい ◦ 吹き出し付きブロック要素使いたい Markdownの不満点

#frontendlt すべて出来ます Asciidocならね

#frontendlt Asciidoc • 軽量マークアップ言語という意味だとMarkdownと同じカテゴリ • 電子書籍を構造化対象に含む構造化言語 • オライリーからもAsciidocで組版された書籍が出版されているつまり「技術書が書ける」

#frontendlt SSGでブログを構築する仕組み Netlify GraphQL transformer plugin remark Gatsby.js template 頑張って記事を書く
ここの……

#frontendlt これをこうする transformerプラグインの追加でいけそう

#frontendlt Asciidoc用のtransformer自体はある transformerの追加はnpm installして、設定ファイルへの追記で OK

#frontendlt 世界に平和が訪れた

#frontendlt . . .

#frontendlt わけはなく

#frontendlt マルチtransformerは考慮されていない？ • 多分Gatsby.jsの設計思想 • 複数のtransformerで取り込んだデータは別グラフ Markdownの記事群 Asciidocの記事群

#frontendlt 何が困る？ • グラフが別なので「記事群から取得」ができない ◦ 「mdの記事群」「adocの記事群」に分かれる ◦ 「全ファイル群（条件：ブログ記事）から取得」となる • 記事のデータ構造がtransformer間で統一されていない
◦ 変換して共通形式に ▪ asciidocのエイリアス機能を駆使してるけど…… • 「最新10件取得」が困難 ◦ 共通形式にした後マージしてソートして……

#frontendlt つらい

#frontendlt どうするのが正解だったのか • （おそらく）１概念＝1 transfer にするべき • MarkdownとAsciidocを混在させるためには両対応のtransformerをつくるべきなのではないか誰かいい方法知ってたら教えて下さい……m(_
_)m

#frontendlt 苦労の跡 https://github.com/moomoo-ya/gatsby-starter-ts-asciidoc

#frontendlt 宣伝

#frontendlt 次回の司会担当イベントは9/9(水)

#frontendlt Thank ☺ you • Asciidocで技術書が書ける • Gatsby.jsでMarkdown/Asciidocの混在はつらい？ • 「ブログ記事」の統一構造が定義されてほしい

#frontendlt Thank ☺ you • Asciidocで技術書が書ける • Gatsby.jsでMarkdown/Asciidocの混在はつらい？ • 「ブログ記事」の統一構造が定義されてほしい
• Asciidocで技術書が書ける • Gatsby.jsでMarkdown/Asciidocの混在はつらい？ • 「ブログ記事」の統一構造が定義されてほしい • Asciidocもっと流行れ

Gatsby.jsで.md／.adocが混在できるテンプレートを作ったときの苦しみ / Pain-to-create-gatsby-template-that-supports-markdown-and-asciidoc

Gatsby.jsで.md／.adocが混在できるテンプレートを作ったときの苦しみ / Pain-to-create-gatsby-template-that-supports-markdown-and-asciidoc

moomoo-ya

More Decks by moomoo-ya

Other Decks in Programming

Featured

Transcript

#frontendlt Gatsby.jsで.md/.adocが混在できるテンプレートを作ったときの苦しみ 2020.08.26 フロントエンドLT会 vol.1 -2020夏祭り Isamu Suzuki,

#frontendlt • 株式会社ラクス ◦ ガンプラ部部長 ◦ 先行技術検証 ◦ アーキテクチャ選定

#frontendlt 今日のお題 Gatsby.jsのテーマを作った話

#frontendlt Gatsby.js？ • React.jsベースのWebページ／SPA作成用フレームワーク ◦ いわゆるSSG : Static Site Generator

#frontendlt SSGでブログを構築する仕組み Netlify GraphQL transformer plugin remark Gatsby.js template 頑張って記事を書く

#frontendlt Asciidoc 使いたい!!

#frontendlt • かんたんに書けるけど表現力がない ◦ 注釈とか（文中に）カンタンに入れたい ◦ 定義リスト使いたい ◦ 吹き出し付きブロック要素使いたい Markdownの不満点

#frontendlt すべて出来ます Asciidocならね

#frontendlt Asciidoc • 軽量マークアップ言語という意味だとMarkdownと同じカテゴリ • 電子書籍を構造化対象に含む構造化言語 • オライリーからもAsciidocで組版された書籍が出版されているつまり「技術書が書ける」

#frontendlt SSGでブログを構築する仕組み Netlify GraphQL transformer plugin remark Gatsby.js template 頑張って記事を書く

#frontendlt これをこうする transformerプラグインの追加でいけそう

#frontendlt Asciidoc用のtransformer自体はある transformerの追加はnpm installして、設定ファイルへの追記で OK

#frontendlt 世界に平和が訪れた

#frontendlt . . .

#frontendlt わけはなく

#frontendlt マルチtransformerは考慮されていない？ • 多分Gatsby.jsの設計思想 • 複数のtransformerで取り込んだデータは別グラフ Markdownの記事群 Asciidocの記事群

#frontendlt つらい

#frontendlt どうするのが正解だったのか • （おそらく）１概念＝1 transfer にするべき • MarkdownとAsciidocを混在させるためには両対応のtransformerをつくるべきなのではないか誰かいい方法知ってたら教えて下さい……m(_

#frontendlt 苦労の跡 https://github.com/moomoo-ya/gatsby-starter-ts-asciidoc

#frontendlt 宣伝

#frontendlt 次回の司会担当イベントは9/9(水)

#frontendlt Thank ☺ you • Asciidocで技術書が書ける • Gatsby.jsでMarkdown/Asciidocの混在はつらい？ • 「ブログ記事」の統一構造が定義されてほしい

#frontendlt Thank ☺ you • Asciidocで技術書が書ける • Gatsby.jsでMarkdown/Asciidocの混在はつらい？ • 「ブログ記事」の統一構造が定義されてほしい