仮サイトをelm-pagesに移行する

[y047aka]

PRチームにて、Webサイトでの elm-pages の採用が決まったので、実際に elm-pages を使った実装に置き換えます。

[yonta]

横長のブラウザ環境にて地図が横方向にいくらでも広がるようです。
以前のページでは地図の横幅に制限がありました。

ページ全体が画像に引いた赤線で強く揃えているので、地図も横を揃えたほうがまとまる気がします。

PR後

変更前

備考

となると、この機会にスタッフ一覧も揃えたほうがいいのか？
ページ下部だしいっぱい参加してる感があってこのままでもいいか？
というのも思いつき悩みました。

[y047aka]

@yonta

横長のブラウザ環境にて地図が横方向にいくらでも広がるようです。
以前のページでは地図の横幅に制限がありました。

ページ全体が画像に引いた赤線で強く揃えているので、地図も横を揃えたほうがまとまる気がします。

確認ありがとうございます。 f282d1e にて修正しました。

となると、この機会にスタッフ一覧も揃えたほうがいいのか？
ページ下部だしいっぱい参加してる感があってこのままでもいいか？
というのも思いつき悩みました。

全てが揃っている必要はないのですが、アンバランスに見えるところは調整したくなりますね。
とはいえ1つのPRで全部をやろうとするとキリがなくなってしまうので、このPRでは elm-pages への移行に焦点を絞りたいと思います。

既存デザインの刷新は後続のPRで取り組みましょう！

[y047aka]

サイトのトップページの内容はこのファイルに記述します。
今は静的なページが出力できれば良いので view のみ。
動的に動かす際には Model や Msg を定義してページ単位のアプリケーションとして機能します（The Elm Architecture）

[y047aka]

行動規範ページの内容はこのファイルに記述します。

elm-pagesでのFile-Based Routingについては、 https://elm-pages.com/docs/file-based-routing を参照してください。

[y047aka]

コンテンツ部分はHugoでの記述を引き継ぐ形でHTMLを記述しています。
後続のPRでMarkdownでの記述をサポート予定です。

[y047aka]

各ページに共通するものは、この Shared モジュールに記述します。
現時点では、この部分でviewの共通レイアウトを定義するのみ。
ダークモードや他言語対応などをサポートする場合には、この Shared モジュールで実装することになります。

[y047aka]

Elmのパッケージ（=ライブラリ）は Elm Packages に公開されています。
このファイルで使用するパッケージを管理します。

npx elm install elm/html

のようにしてインストール可能。
インストールが完了すると、ここに記述が増えます。

[y047aka]

現時点ではCSSファイルにスタイルを記述しています。
PRチームのMTGにて CSS in JS に準じた手法の採用が決まったので、後続PRで作業予定。
https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/ を使います。

[y047aka]

メモ：

• elm-pagesがGithub Pagesのサブディレクトリに対するデプロイで上手く動作しない可能性がある
• このリポジトリでも同様の懸念はあるのですが、ここではカスタムドメインを使っているため実際の問題にはならないはず
  • 昨年まで個人のブログをelm-pagesで同様に運用していたので、おそらく大丈夫
• どうやら issue があるっぽいので、見つけたらリンク追加しておきます。
• これかな Broken elm-pages build --base - only changes outputs partially dillonkearns/elm-pages#404

[y047aka]

マージしてみます。