feat: Hono JSXによる静的サイトのUIを刷新

[3w36zj6]

cf. https://github.com/typst-jp/typst-jp.github.io/issues/54

変更点

依存関係

• Tailwind CSSを導入した
  • Tailwind CSS Typographyを導入した
• Alpine.jsを導入した
• Biomeを導入した

機能

• 共通
  • コンポーネント
    • ヘッダー
    • サイドナビゲーション
    • パンくずリスト
    • 本文
    • 目次
    • フッター
  • フォント
  • favicon
  • OG画像
  • 文書メタデータ
• ページ
  • カテゴリ
  • 関数
  • グループ
  • HTML
  • シンボル
  • タイプ

確認事項

• すべてのページが複数の横幅の環境で閲覧可能である
  • -1024px
  • 1024px-1280px
  • 1280px-
• website/に本家リポジトリ及びそれによる生成物以外のhttps://typst.appから取得されたアセットが含まれていない

確認方法

• cd website/で新Webサイトのプロジェクトのルートに移動する
• bun install --frozen-lockfileで依存関係をインストールする
• bun run buildで静的サイトをdist/にビルドする
• bun run previewでdist/の生成物をプレビューするWebサーバーを起動する
• Webブラウザでhttp://localhost:4173/を開く
• DevToolsで画面の横幅を変更して挙動を確認する

このPRで対応しないタスク

• 検索機能
• 継続的デプロイのワークフローの修正

[Copilot]

Pull Request Overview

This PR refreshes the UI of the static site using Hono JSX by introducing new dependencies (Tailwind CSS, Alpine.js, Biome) and updating various components and assets.

• Updated CategoryTemplate to replace dangerouslySetInnerHTML with a dedicated HtmlContent component and adjust list item layout.
• Added numerous SVG icon components for a more consistent UI.
• Removed legacy CSS, scripts, and asset files while updating dependency versions and configuration files.

Reviewed Changes

Copilot reviewed 74 out of 74 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
website/src/components/templates/CategoryTemplate.tsx	Updated template using HtmlContent and improved list markup.
website/src/components/icons/*	Added new SVG icon components with accessible titles.
website/public/styles/custom.css	Legacy custom styles removed.
website/public/scripts/analytics.js	Legacy analytics script removed.
website/public/assets/site.webmanifest & index2ja.json	Removed legacy asset files.
website/package.json, website/biome.json, website/.editorconfig	Updated dependency versions and project configuration.

[kimushun1101]

@3w36zj6
ご確認が遅くなりすみません。新しいデザインもキレイで素晴らしいです。

• DevToolsで画面の横幅を変更して挙動を確認する

こちらの確認方法としては、ブラウザで横幅を変えてみて様子を見るという対応でよろしいでしょうか？狭くするとサイドメニューが閉じてくれる挙動を確認しました。問題ないと考えています。

• website/に本家リポジトリ及びそれによる生成物以外のhttps://typst.appから取得されたアセットが含まれていない

こちらは「ないことの確認」は難しいのですが、以下の変更を確認しました。

• Typstロゴ
• アイコン

その他に変えたところなどありましたら、教えていただければ確認いたします。

---

以降、別RPでの対応でも問題ないかと思いますがコメントいたします。

初回だと「情報 / info」がページの上部を覆ってしまうのですが、設計の意図として正しいでしょうか？

現在だと被らず表示される仕様かと思います。

新仕様だと、以下の点が気になりました。

• コンテンツを隠してしまって、☓で閉じないと使いにくい（意図的？）。例えばサイドメニューの「チュートリアル」を選べません。
• 2回目以降は表示されない？（2回目以降も被るように表示されると面倒だが、2回目以降が出なくなるというのは非公式であることをアピールするという観点からよいのか？とりあえずこのまま出して公式から言われたら直したらよい？）

---

スマホでも確認してみようと思ったのですが、うまくいきませんでした。具体的には、同一ネットワークに接続してhttp://localhost:4173/のlocalhostをPCのIPアドレスに変えて、スマホのブラウザで接続しようと試みたのですが、ページ表示がされませんでした。このPRで確認が必要であれば方法を教えていただけますと幸いです。

[3w36zj6]

• DevToolsで画面の横幅を変更して挙動を確認する

こちらの確認方法としては、ブラウザで横幅を変えてみて様子を見るという対応でよろしいでしょうか？

そちらの対応で問題ありません。

こちらは「ないことの確認」は難しいのですが、以下の変更を確認しました。

mainブランチのwebsite/ディレクトリ以下に変更を加えたPR/コミットは現状 https://github.com/typst-jp/typst-jp.github.io/pull/117 のみで、ここでは現行の実装を再現するためにpublic/に従来の静的ファイルをコピーしていました。なので、このPRでpublic/の中身がライセンスの問題のないファイルのみになったことが確認できれば問題ありません。
public/以外の場所にライセンスの問題があるファイルが追加されたことはないという認識です。

[3w36zj6]

コンテンツを隠してしまって、☓で閉じないと使いにくい（意図的？）。例えばサイドメニューの「チュートリアル」を選べません。

2回目以降は表示されない？（2回目以降も被るように表示されると面倒だが、2回目以降が出なくなるというのは非公式であることをアピールするという観点からよいのか？とりあえずこのまま出して公式から言われたら直したらよい？）

ページを移動する度に警告が表示されるのは煩わしいと感じたので、Web Storage APIでバナーを閉じるボタンを押したことを記録し、同じ閲覧環境ではバナーが表示されないように実装しました。階層的に表示するようにしたことで以前よりも邪魔に感じやすくなっていますが、2回目以降は表示されないので利便性の問題はないと考えています。

2回目以降はバナーが出ない旨を明示する、あるいは、「閉じるを押してから24時間以内では再度表示しない」のように時限式にするなどの対応もありえると思います。

[3w36zj6]

同一ネットワークの別端末から閲覧ができない件ですが、他の言語やフレームワークによる開発サーバーはアクセス可能で、Viteの開発サーバーへのアクセスのみができない場合は次の記事が参考になるかもしれません。

https://inoino-web.com/tech-blog/2025/2/26/accessFromAnotherHostInLocalNetwork

[kimushun1101]

mainブランチのwebsite/ディレクトリ以下に変更を加えたPR/コミットは現状 #117 のみで、ここでは現行の実装を再現するためにpublic/に従来の静的ファイルをコピーしていました。なので、このPRでpublic/の中身がライセンスの問題のないファイルのみになったことが確認できれば問題ありません。

ありがとうございます。Typstアイコンはここですね。
他のファイルとしては、

• HKGroteskはOFL
• Cascadia Monoはパブリックドメイン、GPL、OFL

とありますね。問題ないと思います。非常に細かいことを言うとOFLのライセンス文はなくてよいのですかね？

参考までにお聞きしたいのですが、Typstロゴについてはどこにありますでしょうか？

[3w36zj6]

静的ファイルとして同梱しているフォントファイルのライセンスを追加しました。

typst-jpのロゴはmkpoliさんがOrganizationのアイコン用に作成したものをそのまま流用していて、これは厳密にはライセンスが未定義です。

[kimushun1101]

ご対応いただきありがとうございました。

typst-jpのロゴはmkpoliさんがOrganizationのアイコン用に作成したものをそのまま流用していて、これは厳密にはライセンスが未定義です。

著作権は @mkpoli さんにあるので、このOrganizationで使う分には外部から見ても問題ないと思います。

[kimushun1101]

@3w36zj6

同一ネットワークの別端末から閲覧ができない件ですが、他の言語やフレームワークによる開発サーバーはアクセス可能で、Viteの開発サーバーへのアクセスのみができない場合は次の記事が参考になるかもしれません。

https://inoino-web.com/tech-blog/2025/2/26/accessFromAnotherHostInLocalNetwork

マージ後ではありますが、こちらでスマホでの表示も確認できました。vite.config.tsのexport default defineConfig({に以下を足しました。

	server: {
		host: true,
	}

いただいた記事のほうにも

セキュリティ上の問題があるようなので、開発環境に限るらしい

と書いてあり、スマホでの確認も頻度が高いわけではないため、コードへの追記は不要かと思います。
ご助言ありがとうございました。