Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme files/dirs in entryContextDir should be preserved in the output #160

Open
MurakamiShinyu opened this issue Mar 26, 2021 · 3 comments

Comments

@MurakamiShinyu
Copy link
Member

MurakamiShinyu commented Mar 26, 2021

vivliostyle.config.js で entryContextDir を指定した場合、entry と toc と cover の path は entryContextDir からの相対パスになります。
しかし、theme の path だけは vivliostyle.config.js からの相対として扱われるようになっています。これも entryContextDir からの相対パスに変更することを提案します。

また、 ローカル theme について、いま行っている theme のファイルのコピーを行わないで、そのままの相対 URL で HTML からリンクされるようにすることを提案します。
entryContextDir から workspaceDir への theme のファイルのコピーは、通常の assets のコピー (copyAssets()) で行えるように src/config.ts の DEFAULT_ASSETS'**/*.css' を加えます。

関連 Issue: CSS file linked from HTML entry is not copied to workspaceDir and ignored in the output (#152)

この変更により、vivliostyle.config.js ファイル内で指定されたリソースの相対パスの基準が entryContextDir に統一されて分かりやすくなり、また、 スタイルシート(css)とコンテンツ(html, md)から同じリソース(画像ファイルなど)にアクセスできるようになるメリットがあります。

検討・注意点

  • entryContextDir の外側にある theme が指定された場合
    • workspaceDir が指定されていて entryContextDir と異なる場合のみ theme を workspaceDir/themes ディレクトリ内にコピーする
  • コマンドラインで指定する theme の相対パスの基準はカレントディレクトリのままとする
    • コマンドラインで markdown 原稿が指定された場合その場所が entryContextDir になるが、それはコマンドラインでの theme の相対パスの解釈には使わない
@MurakamiShinyu
Copy link
Member Author

この変更は breaking change ともいえますが、 entryContextDir と local theme の指定があるときだけ影響があります。

entryContextDir はその指定をしたときの動作があまりよく分からなかったのでドキュメントに載せていません:
https://docs.vivliostyle.org/#/vivliostyle-cli#configuration-settings

いまのうちであれば、マイナーバージョナップでの変更でも問題は少ないと思います。

@spring-raining
Copy link
Member

entryContextDir は、原稿ファイルのディレクトリとスタイルシートなどそれ以外のファイルを分離するためのもので、例えば原稿だけGitの管理外にするなどの目的で使うものと認識していました。entryとthemeを同じ階層で使いたい場合は、entryContextDirを設定せずその位置に vivliostyle.config.js を移動させれば問題ないのではないでしょうか?

目的について勘違いをしていたらすみません。スタイルシートとコンテンツから同じファイルにアクセスしたく、なおかつ entryContextDir を設定したいユースケースについて教えてもらえると助かります。

@MurakamiShinyu
Copy link
Member Author

entryContextDir は、原稿ファイルのディレクトリとスタイルシートなどそれ以外のファイルを分離するためのもので、例えば原稿だけGitの管理外にするなどの目的で使うものと認識していました。entryとthemeを同じ階層で使いたい場合は、entryContextDirを設定せずその位置に vivliostyle.config.js を移動させれば問題ないのではないでしょうか?

なるほど、 entryContextDir の役割が entry と theme を分離するためということであれば theme のパスを entryContextDir からの相対パスとはしないことに意味がありますね。私が疑問だったことのひとつは、config の中で entry 以外にも toc と cover が entryContextDir からの相対パスなのに theme はなぜ違うのかということでしたが、toc や cover は entry 内容とセットであり1つの出版物に固有であるのに対して、theme は複数の出版物で共通に使えるものだから扱いが違うということですね。

しかしそれでも、スタイルシートを原稿ファイルと同じ場所に置いて、その場所に entryContextDir を設定するという使われ方はあると思います。リポジトリのルートには成果物のWeb出版物には含めない雑多なファイルがあるので、原稿やWeb出版物に含めることになるスタイルシートや画像類はそれらをまとめたサブディレクトリに入れて、そこを entryContextDir にするという使われ方です。
テストケースにある entryContext.config.js がまさにそのような例になっていました。

module.exports = {
title: 'title',
author: 'author',
theme: 'manuscript/sample-theme.css',
entry: ['soda.md'],
entryContext: 'manuscript',
output: ['output1.pdf'],
workspaceDir: '.vs-entryContext',
toc: 't-o-c.html',
cover: 'cover.png',
};

この例では、 entryContextDir に設定された 'manuscript' ディレクトリ内に原稿ファイルもtocファイルもcover画像ファイルもあり、そして theme の 'sample-theme.css' もあります。

これで build すると、次の結果になります:

expect([...fileList]).toEqual([
'cover.png',
'manuscript',
'manuscript/sample-theme.css',
'publication.json',
'soda.html',
't-o-c.html',
]);

生成されたWeb出版物の中で、HTMLや画像ファイルはルートにあるのに、CSSファイルだけ 'manuscript' ディレクトリにあります ('manuscript/sample-theme.css')。この仕様は理解されにくいし、以下の問題があります:

  • entry の中に HTML 原稿がある場合、その HTML からのスタイルシートのリンクは同じディレクトリ内にあるCSSへのリンクなので <link rel="stylesheet" href="sample-theme.css"> と書くと生成されたWeb出版物ではリンクエラーになりスタイルシートが反映されない。そのため <link rel="stylesheet" href="manuscript/sample-theme.css"> と書かなくてはならないのだが、それでは原稿の HTML をブラウザで確認するときスタイルシートが反映されないので不便。
  • CSSファイル内から同じディレクトリにある画像ファイルへの参照がある場合(background-image など)、生成されたWeb出版物の中ではCSSファイルだけ場所が変わっているために、画像が表示されない。

提案の修正

元のissueタイトルの "Local theme path should be relative to the entryContextDir" は取り消して、次の提案のみとします:

ローカル theme について、いま行っている theme のファイルのコピーを行わないで、そのままの相対 URL で HTML からリンクされるようにすることを提案します。
entryContextDir から workspaceDir への theme のファイルのコピーは、通常の assets のコピー (copyAssets()) で行えるように src/config.ts の DEFAULT_ASSETS'**/*.css' を加えます。

ただし、theme の場所が entryContextDir の外にある場合はこれまでどおりとする。

どうでしょう?

@MurakamiShinyu MurakamiShinyu changed the title Local theme path should be relative to the entryContextDir Theme files/dirs in entryContextDir should be preserved in the output Mar 27, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants