内部リンクを相対リンクで生成する機能 with `settings.USE_RELATIVE_LINK = True` #78

akinomyoga · 2022-05-29T10:14:27Z

cpprefjp/site#917 (comment) で言及されたものです。現在 site_generator, markdown_to_html, crsearch, kunai に変更があります。

背景

現状では site_generator で生成されるコンテンツはトップレベル / に置かれるという想定でリンクが生成されています。このためローカルで閲覧しようとすると毎回新しいWebサーバーを立ち上げる必要が出てきます (特にリモートのマシン上で変換しているとファイヤーウォールやSELinuxやプロキシなどの設定もしなければならずとても面倒)。

内部のリンクを相対リンクにすればローカルで単にブラウザで開いて閲覧することができるので便利。また、単に設定済みの Web サーバーのサブディレクトリに配置すれば閲覧できるようになることを期待。未だ簡単なテストのみしかしていません。

変更 (2022-06-06 09:03 更新)

site_generator - branch relative_link (diff)
markdown_to_html - branch relative_link (diff)
crsearch - branch relative_link (diff)
kunai - branch relative_link (diff)
site - branch relative_link (diff)
image - branch relative_link (diff)
boostjp/site - branch relative_link (diff)
boostjp/image - branch relative_link (diff)

現状の課題

`navbar.css` の `background-image: url(.../cpprefjp-icon-v1.1-transparent.png)`

kunai/css/kunai/site/navbar.css#L51 から絶対URLで参照している cpprefjp アイコン (cpprefjp-icon-v1.1-transparent.png) をどうにかしたい。

→試しに相対リンクにしてみたら ./kunai/docker.sh run build が失敗します。以下エラーメッセージです。どうしたら良いかすぐ分からず。現状の様に https://cpprefjp.github.io から直接取得していても (インターネットに繋がっている限りは) 取り敢えずは動く。

Entrypoint kunai-stage-3 = kunai-stage-3.js
runtime modules 0 bytes 3 modules
built modules 117 bytes (javascript) 404 KiB (unknown) [built]
  cacheable modules 117 bytes
    ./kunai-stage-0.css 39 bytes [built] [code generated]
    ./kunai-stage-2.scss 39 bytes [built] [code generated]
    ./kunai-stage-3.css 39 bytes [built] [code generated] [1 error]
  css modules 404 KiB
    css ../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../node_modules/postcss-loader/src/index.js??ruleSet[1].rules[1].use[2]!./kunai-stage-0.css 1.89 KiB [built] [code generated]
    css ../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!../node_modules/sass-loader/dist/cjs.js!./kunai-stage-2.scss 402 KiB [built] [code generated
]

ERROR in ./kunai-stage-3.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../../original-icons/cpprefjp-icon-v1.1-transparent.png' in '/var/src/css'
    at /var/src/node_modules/webpack/lib/Compilation.js:2011:28
    at /var/src/node_modules/webpack/lib/NormalModuleFactory.js:795:13
    at eval (eval at create (/var/src/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
    at /var/src/node_modules/webpack/lib/NormalModuleFactory.js:275:22
    at eval (eval at create (/var/src/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at /var/src/node_modules/webpack/lib/NormalModuleFactory.js:431:22
    at /var/src/node_modules/webpack/lib/NormalModuleFactory.js:124:11
    at /var/src/node_modules/webpack/lib/NormalModuleFactory.js:667:25
    at /var/src/node_modules/webpack/lib/NormalModuleFactory.js:852:8
    at /var/src/node_modules/webpack/lib/NormalModuleFactory.js:972:5

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.64.4 compiled with 2 errors in 6073 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `rm -rf dist/ && webpack --config webpack.prod.js --mode production --env production && rm -f dist/kunai-stage-*.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-05-29T10_07_47_968Z-debug.log

追記: ローカルで閲覧しようとすると crsearch.json の読み込みで CORS (Cross-origin resource sharing) エラー

Access to XMLHttpRequest at 'file:///.../static/crsearch/crsearch.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

結局Webサーバーは必要になってしまう? https://cpprefjp.github.io/static/crsearch/crsearch.json を読ませれば動くが…。

→現状は取り敢えず、ローカルで動いているとき (file:///.... のとき) は https://cpprefjp.github.io/ から crsearch.json を取得するようにしています (852c5074 @ kunai)。

根本的に解決するためには XHR ではなく <script> で取得 (JSONP) するなど???

追記: `crsearch.json/run.py` にハードコードされている `base_url` を何とかする

site_generator/crsearch.json/run.py

Line 429 in af55908

'base_url': '/',

そもそも crsearch.json に base_url を格納する必要性はあるのだろうか?

→相対リンクにするとそもそも base_url はファイルによって . だったり .. だったり ../.. だったりで動的に変わるので、crsearch.json に含めても仕方がない。CRSearch の初期化オプションで base_url を動的に指定できるようにすることにしています (d1eb6a47 @ crsearch, 852c5074 @ kunai)。

追記: raw.githubusercontent.com/cpprefjp/image にあるデータもサイトの中に含めるべきでは

そうでないとオフラインで閉じて閲覧できるようにはならない。

yumetodo · 2022-06-01T10:50:01Z

追記: raw.githubusercontent.com/cpprefjp/image にあるデータもサイトの中に含めるべきでは

開発用repoとdeploy用repoが別なので難しいのではないでしょうか

akinomyoga · 2022-06-01T11:15:33Z

追記: raw.githubusercontent.com/cpprefjp/image にあるデータもサイトの中に含めるべきでは

開発用repoとdeploy用repoが別なので難しいのではないでしょうか

うーん。どういうことですか。あー…上で書いたのは「cpprefjp/image にあるデータもサイト (cpprefjp/cpprefjp.github.io) の中に含めるべきでは」ということでした (そういうことじゃないかもですが)。

現状 site, kunai, crsearch の出力結果を cpprefjp.github.io に全部くっつけて入れているのだから、image のデータも deploy 時に cpprefjp.github.io の中に入れて良いのではないかということです (実際 Web ページの画像を開発用 repository の一つである cpprefjp/image から raw.githubusercontent.com を通して直接持ってくるのは何か変な感じがする)。

akinomyoga · 2022-06-01T11:38:41Z

課題について改めて今の考えを書いておきますね。

navbar.css の background-image: url(.../cpprefjp-icon-v1.1-transparent.png)

これは、相対リンクで参照するのが枠組み上不可能ならば、base64 で直接埋め込むという手もあるなぁと思っています。画像サイズは 512x512 10 kB

追記: → data スキームによる埋込に対応しました。cpprefjp/static/static/original-icons/cpprefjp-icon-v1.1.svgにSVGがあったので、それを data スキームで埋め込んでみました。

akinomyoga/cpprefjp-kunai@d01805d

追記: ローカルで閲覧しようとすると crsearch.json の読み込みで CORS (Cross-origin resource sharing) エラー

現状のPRではローカルファイル (file:///～) からは直接 https://cpprefjp.github.io から XHR で取得していますが、オフラインで閲覧できるためには、閲覧者がブラウザのセキュリティ設定をoffにするか、<script> 経由で読み込むように変更しなければなりません (他に手が思いつかなければ)。

追記: 対応しました。file:// の時に (JSON through XHR の代わりに) JSONP through <script> を使います。

追記: crsearch.json/run.py にハードコードされている base_url を何とかする

現状のPRでは base_url を動的に指定できるように書き換えてしまっているので、crsearch.json に埋め込まれている base_url は最早使われていません。この際 crsearch.json の中から削除してしまっても良いかもしれません。

追記 → これは取り敢えずは残しておいて良いかなと思っています。

akinomyoga · 2022-06-30T05:05:15Z

あー! すみません! こっちの PR じゃなくてこっち #79 です!

akinomyoga · 2022-06-30T05:08:53Z

ええと、どうしましょうか。相対リンクに関する機能は markdown_to_html の別ブランチにあるので、この状態で site の生成が走るとエラーになります。一旦 site の PR は Draft にしてマージをブロックしますね。

faithandbrave · 2022-06-30T05:12:46Z

すいません、一旦PRをrevertしました…。

akinomyoga · 2022-06-30T05:13:26Z

承知です。

faithandbrave · 2022-06-30T05:13:32Z

マージしちゃったからreopenできない…。

akinomyoga · 2022-06-30T05:23:19Z

うーん。調べてみたのですけれど方法なさそうですね。。

https://stackoverflow.com/questions/12674304/github-reopening-a-merged-pull-request

Revert の revert の PR にするということで宜しいでしょうか…と思ったけれどそれもできないっぽい

あとで手許で revert の revert commit を作って conflict resolution してから PR をまた作りますね。

faithandbrave · 2022-06-30T07:36:36Z

すいません…よろしくお願いします。

akinomyoga · 2022-06-30T09:21:14Z

こちらこそすみません。元はと言えばこちらが #79 を Draft PR にしたまま忘れていたために混乱させてしまったのが原因のように思うのでお気になさらないで下さい。

yumetodo · 2022-06-30T10:08:16Z

今更なんですが直ちにforce pushするほうが丸かったのかも・・・

akinomyoga · 2022-06-30T10:20:52Z

た、確かに…。このリポジトリは一般ユーザーがクローンして使うものじゃないですし、cpprefjp 編集者も普通は弄らないですしね。

akinomyoga marked this pull request as draft May 29, 2022 12:57

USE_RELATIVE_LINK に対応

9651af9

akinomyoga force-pushed the relative_link branch from cceb9d9 to 9651af9 Compare May 29, 2022 22:11

boostjp/templates/base: "file:" の時のため "https:" を明示指定

f697e94

akinomyoga marked this pull request as ready for review May 29, 2022 22:20

akinomyoga mentioned this pull request May 30, 2022

キーワード自動リンク (GLOBAL_DEFINED_WORDS.json) cpprefjp/site#977

Merged

akinomyoga added 3 commits June 6, 2022 01:52

crsearch.json: JSONPに対応

187bfd5

run: imageリポジトリの内容をstatic/imageにコピー

ffe59b7

template/base: サイトトップへの相対リンクにindex.htmlを明示

079b1c2

akinomyoga force-pushed the relative_link branch from 37c9977 to 079b1c2 Compare June 5, 2022 23:58

cpprefjp/template: manifest.jsonのパスを修正

b99a8c2

faithandbrave merged commit 61156b4 into cpprefjp:master Jun 30, 2022

akinomyoga deleted the relative_link branch June 30, 2022 05:02

akinomyoga restored the relative_link branch June 30, 2022 05:05

faithandbrave mentioned this pull request Jun 30, 2022

Revert "内部リンクを相対リンクで生成する機能 with settings.USE_RELATIVE_LINK = True" #80

Merged

akinomyoga deleted the relative_link branch June 30, 2022 09:18

akinomyoga restored the relative_link branch June 30, 2022 09:21

akinomyoga mentioned this pull request Jun 30, 2022

Redo "内部リンクを相対リンクで生成する機能 with settings.USE_RELATIVE_LINK = True" #81

Merged

akinomyoga mentioned this pull request Jan 27, 2023

cpprefjpプロジェクトとしてスポンサーを受ける方法を検討したい cpprefjp/site#1116

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

内部リンクを相対リンクで生成する機能 with `settings.USE_RELATIVE_LINK = True` #78

内部リンクを相対リンクで生成する機能 with `settings.USE_RELATIVE_LINK = True` #78

akinomyoga commented May 29, 2022 •

edited

Loading

yumetodo commented Jun 1, 2022

akinomyoga commented Jun 1, 2022

akinomyoga commented Jun 1, 2022 •

edited

Loading

`navbar.css` の `background-image: url(.../cpprefjp-icon-v1.1-transparent.png)`

追記: ローカルで閲覧しようとすると crsearch.json の読み込みで CORS (Cross-origin resource sharing) エラー

追記: crsearch.json/run.py にハードコードされている base_url を何とかする

akinomyoga commented Jun 30, 2022

akinomyoga commented Jun 30, 2022 •

edited

Loading

faithandbrave commented Jun 30, 2022

akinomyoga commented Jun 30, 2022

faithandbrave commented Jun 30, 2022

akinomyoga commented Jun 30, 2022

faithandbrave commented Jun 30, 2022

akinomyoga commented Jun 30, 2022

yumetodo commented Jun 30, 2022

akinomyoga commented Jun 30, 2022

内部リンクを相対リンクで生成する機能 with settings.USE_RELATIVE_LINK = True #78

内部リンクを相対リンクで生成する機能 with settings.USE_RELATIVE_LINK = True #78

Conversation

akinomyoga commented May 29, 2022 • edited Loading

背景

変更 (2022-06-06 09:03 更新)

現状の課題

navbar.css の background-image: url(.../cpprefjp-icon-v1.1-transparent.png)

追記: ローカルで閲覧しようとすると crsearch.json の読み込みで CORS (Cross-origin resource sharing) エラー

追記: crsearch.json/run.py にハードコードされている base_url を何とかする

追記: raw.githubusercontent.com/cpprefjp/image にあるデータもサイトの中に含めるべきでは

yumetodo commented Jun 1, 2022

akinomyoga commented Jun 1, 2022

akinomyoga commented Jun 1, 2022 • edited Loading

navbar.css の background-image: url(.../cpprefjp-icon-v1.1-transparent.png)

追記: ローカルで閲覧しようとすると crsearch.json の読み込みで CORS (Cross-origin resource sharing) エラー

追記: crsearch.json/run.py にハードコードされている base_url を何とかする

akinomyoga commented Jun 30, 2022

akinomyoga commented Jun 30, 2022 • edited Loading

faithandbrave commented Jun 30, 2022

akinomyoga commented Jun 30, 2022

faithandbrave commented Jun 30, 2022

akinomyoga commented Jun 30, 2022

faithandbrave commented Jun 30, 2022

akinomyoga commented Jun 30, 2022

yumetodo commented Jun 30, 2022

akinomyoga commented Jun 30, 2022

内部リンクを相対リンクで生成する機能 with `settings.USE_RELATIVE_LINK = True` #78

内部リンクを相対リンクで生成する機能 with `settings.USE_RELATIVE_LINK = True` #78

akinomyoga commented May 29, 2022 •

edited

Loading

`navbar.css` の `background-image: url(.../cpprefjp-icon-v1.1-transparent.png)`

追記: `crsearch.json/run.py` にハードコードされている `base_url` を何とかする

akinomyoga commented Jun 1, 2022 •

edited

Loading

`navbar.css` の `background-image: url(.../cpprefjp-icon-v1.1-transparent.png)`

akinomyoga commented Jun 30, 2022 •

edited

Loading