search

vivliostyle / vfm

⬇️ Open and extendable Markdown syntax and toolchain.
https://vivliostyle.github.io/vfm/#/vfm
Other
69 stars 12 forks source link

spec: Generate body and above HTML from metadata #130

Closed akabekobeko closed 2 years ago

akabekobeko commented 2 years ago

Goals

Generate <body> and above HTML from metadata.

When developing SSG (Static Site Generator) using VFM, I want HTML that composite the metadata of the entire site and the page.

  1. <body> The above hierarchy is generated from metadata (composite of entire site and individual pages)
  2. Content is generated by partial mode
  3. Insert 2 inside 1 to generate the final HTML

Prior Art

GatsbyJS

Discussion

None.

akabekobeko commented 2 years ago

以下のイベントにおける「Vivliostyle 開発会議」で VFM ドッグフーディングの一環として vivliostyle-ssg というツールを作ることになった。現在、私の個人プライベート リポジトリーで試験版を開発中。

その開発において GatsbyJS のようにサイト全体と Markdown 単位の個別ページ Frontmatter に定義されたメタデータを合成したくなった。例えば Title | Site Name のように。これを実現する場合、現在は VFM でフル HTML を生成してからテキスト置換で加工するか readMetadata で得られたものを加工して自前で <body> 以上の HTML を生成、それを partial で部分 HTML にしたコンテンツと合成する必要がある。

メタデータ取得用の readMetadata とコンテンツの partial があるのだから前者から <body> 以上の HTML を生成する機能も欲しく、ちょうど vivliostyle-ssg で利用したくなったので実装を検討する。

akabekobeko commented 2 years ago

HTML を生成する機能だと <body> にコンテンツ HTML をどう挿入するかが課題になる。文字列化された HTML では AST にようにプログラミング言語から直に処理可能な構造が失わているため、安全性を欠くテキスト置換に頼らなければならない。

そのため stringify 関数のオプションにメタデータを追加して、これを元にフル HTML を生成するモードを付けるほうがよさそう。VFM を利用するプログラム名を ssg とした場合の想定処理。

  1. ssg は readMetadata により Markdown からメタデータを読み込む
  2. ssg はメタデータにサイト全体の情報を反映 (合成) させる
  3. ssg は加工したメタデータを指定して stringify を呼び出す

既に VFM はこのような設計となっている。stringify にメタデータを指定して上書き可能にすればよさそう。