生成される github.io のページのレイアウトがおかしい

[fura2]

Summary / 概要

verification-helper によって生成される github.io のページのレイアウトが画面中央に寄ってしまいます。
https://fura2.github.io/competitive-programming-library/
一ヶ月ほど前はこのような問題はなく正常に表示されていたと記憶しています。

また、手元で

$ oj-verify docs
$ cd .verify-helper/markdown/
$ bundle exec jekyll serve --incremental

とした時には正常に表示されます。

Steps to reproduce / 再現方法

1. いつものように git commit, git push を実行しました。

environments:

• macOS Big Sur バージョン 11.4
• Google Chrome バージョン: 91.0.4472.164（Official Build） （x86_64）

下記のスクリーンショットもこの環境で撮影したものです。
他に何が関係するか分からないので、pip list したときの出力を載せます。

Package                           Version
--------------------------------- ---------
appdirs                           1.4.4
astroid                           2.6.4
attrs                             21.2.0
backports.entry-points-selectable 1.1.0
beautifulsoup4                    4.9.3
certifi                           2021.5.30
chardet                           4.0.0
charset-normalizer                2.0.3
colorama                          0.4.4
colorlog                          5.0.1
decorator                         5.0.9
diff-match-patch                  20200713
distlib                           0.3.2
filelock                          3.0.12
idna                              3.2
importlab                         0.6.1
iniconfig                         1.1.1
isort                             5.9.2
jsonschema                        3.2.0
lazy-object-proxy                 1.6.0
llvmlite                          0.36.0
lxml                              4.6.3
mccabe                            0.6.1
mypy                              0.910
mypy-extensions                   0.4.3
networkx                          2.5.1
numba                             0.53.1
numpy                             1.21.1
online-judge-api-client           10.9.0
online-judge-tools                11.4.0
online-judge-verify-helper        5.6.0
opencv-python                     4.5.3.56
packaging                         21.0
pip                               21.1.3
platformdirs                      2.0.2
pluggy                            0.13.1
py                                1.10.0
pylint                            2.9.4
pyparsing                         2.4.7
pyrsistent                        0.18.0
pytest                            6.2.4
PyYAML                            5.4.1
requests                          2.26.0
scipy                             1.7.0
setuptools                        57.4.0
six                               1.16.0
soupsieve                         2.2.1
toml                              0.10.2
torch                             1.9.0
typing-extensions                 3.10.0.0
urllib3                           1.26.6
virtualenv                        20.6.0
wrapt                             1.12.1

Expected behavior / 期待される挙動

https://kmyk.github.io/competitive-programming-library/ のように、レイアウトが画面中央に寄らないようにしたい。

Actual behavior / 実際の挙動

次の画像のように表示されます。

Other notes / その他

• Will you try to create a pull request?
  • yes

自分で出来そうなら解決してプルリクを送ってみたいと思いますが、web 技術に詳しくなく、原因を調べるにも現状どこから手をつけていいのかわかっていません。

[kmyk]

@fura2 できそうならプルリクを送ってください (だめそうならこちらで処理するのでそう伝えてほしい)。こちらで調べた経緯等は以下のようになります

背景

• verification-helper が生成したドキュメントは GitHub Pages というのを使って表示されています。
• GtiHub Pages は Jekyll というブログエンジンに対応していて、これが利用されています。
• Jekyll のプラグインは Gem (Ruby のパッケージ) として管理されています。
• pages-gem という Gem は GitHub Pages で使われる Gem をまとめてインストールしてくれます。
• Jekyll にはブログテーマ機能があります。テーマも Gem で管理されています。
• verification-helper は minimal というテーマを使っています。(

  verification-helper/onlinejudge_verify_resources/_config.yml

  Line 5 in 54e07a6

  theme: jekyll-theme-minimal

  )
• minimal テーマはデフォルトだと横幅が狭いので、verification-helper では追加の CSS でパッチを当ててこれを広げています。(https://github.com/online-judge-tools/verification-helper/blob/master/onlinejudge_verify_resources/_includes/theme_fix.html#L3-L13)

原因

pages-gem が v216 から minimal の Gem を含まないようになりました (https://github.com/github/pages-gem/pull/772)。
代わりに jekyll-remote-theme という仕組みを使うのが推奨になり、GitHub Pages 上だと自動で remote theme に変換されるようです。これにより minimal のバージョンが v1.1.0 から GitHub の master に更新されたはずです。すると minimal の HTML の構成が変化し、verification-helper 側で当てていたパッチが効かなくなったのだと思います。

解決方法

1. jekyll-remote-theme を使えということなので _config.yml を更新する。
2. onlinejudge_verify_resources/_includes/theme_fix.html を修正して横幅を広げ直す。

[fura2]

丁寧に対応していただきありがとうございます。やってみます。

[fura2]

ゆっくり作業しているうちに、pages-gem の変更が巻き戻されて minimal が再び使えるようになっていました (github/pages-gem#781)。
私の環境で verification-helper が正常に動いていることも確認しました。

[kmyk]

せっかく作業を頑張ってもらってたのが使われないままになってしまうのはすこし残念ですが、ともあれ直ったならよかったです。バグ報告から修正までいろいろありがとうございました