Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

0aa238a274c2397214b20d6eed58939b?s=47 moomoo-ya
August 26, 2020

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

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

0aa238a274c2397214b20d6eed58939b?s=128

moomoo-ya

August 26, 2020
Tweet

Transcript

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

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

    ◦ 技術イベント司会 • 先月引っ越し ◦ 作業部屋兼サーバールーム確保! ◦ 先週やっとNuro光開通 • 自転車買いました • Fat Project作者 • ポケモンはじめました ◦ 緑→ソード 鈴木 勇 / Isamu Suzuki
  3. #frontendlt 今日のお題 Gatsby.jsのテーマを作った話

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

    ▪ Markdownでコンテンツを作成 ▪ React.jsでテンプレートを作成 • ブログエンジンとしても ◦ 今回は技術ブログを作り直そうと思った
  5. #frontendlt SSGでブログを構築する仕組み Netlify GraphQL transformer plugin remark Gatsby.js template 頑張って記事を書く

  6. #frontendlt Asciidoc 使いたい!!

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

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

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

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

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

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

  13. #frontendlt 世界に平和が訪れた

  14. #frontendlt . . .

  15. #frontendlt わけはなく

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

  17. #frontendlt 何が困る? • グラフが別なので「記事群から取得」ができない ◦ 「mdの記事群」「adocの記事群」に分かれる ◦ 「全ファイル群(条件:ブログ記事)から取得」となる • 記事のデータ構造がtransformer間で統一されていない

    ◦ 変換して共通形式に ▪ asciidocのエイリアス機能を駆使してるけど…… • 「最新10件取得」が困難 ◦ 共通形式にした後マージしてソートして……
  18. #frontendlt つらい

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

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

  21. #frontendlt 宣伝

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

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

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

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