Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gatsby.jsで.md/.adocが混在できるテンプレートを作ったときの苦しみ / Pai...
Search
moomoo-ya
August 26, 2020
Programming
0
630
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が混在できるテンプレートを作ったときの苦しみ」
moomoo-ya
August 26, 2020
Tweet
Share
More Decks by moomoo-ya
See All by moomoo-ya
サービスを陳腐化させない組織だった技術刷新 / Technology Renewal Initiatives
moomooya
0
1.4k
はじめてのオンラインイベント配信 with COVID-19 バグ修正版 / Online-Event-bugfixed
moomooya
0
120
一番安い子だーれだ?~黒字化のための無慈悲なタスク配分~ / Distribute tasks
moomooya
1
3.1k
はじめてのオンラインイベント配信 with COVID-19 バグあり版 / Online-Event-includes-bug
moomooya
0
830
やはり俺のLT登壇はまちがっている。 / my-lightning-talk-is-wrong-as-i-expected
moomooya
4
2.4k
LADRのすすめ&先行技術検証PRJの紹介 / Introducing-LADR-and-Technology-verification
moomooya
5
2.5k
技術書へのアクセスを劇的に向上させた話 / oreilly-safari-and-acm-membership
moomooya
2
7.5k
モノリスにおけるビジネスロジックの設計 ~アグリゲートパターン~ / aggregate-pattern-for-domain-modeling-on-monolithic
moomooya
2
1.6k
オブジェクト指向を学んでから20年間でモヤったこと / Object-Oriented-groomy-in-20-years
moomooya
0
530
Other Decks in Programming
See All in Programming
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
380
AI時代のUIはどこへ行く?
yusukebe
16
8.5k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
210
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
150
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
Namespace and Its Future
tagomoris
6
700
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
130
はじめてのMaterial3 Expressive
ym223
2
160
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
160
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
100
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Scaling GitHub
holman
463
140k
A Tale of Four Properties
chriscoyier
160
23k
Producing Creativity
orderedlist
PRO
347
40k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Invisible Side of Design
smashingmag
301
51k
The Cult of Friendly URLs
andyhume
79
6.6k
Building Applications with DynamoDB
mza
96
6.6k
GitHub's CSS Performance
jonrohan
1032
460k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Docker and Python
trallard
45
3.5k
Transcript
#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概念=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もっと流行れ