鏡

この部屋は鏡をサイト自身に向けます。比喩ではなく、いま読んでいるこのページを生成したビルドから実際に測定された数値、そしてサイトが何と通信し、いくらかかるのかについての率直な説明です。

何で作られているか

React 18、TypeScript、Vite。手書きコードで、サイトビルダーもテンプレートも使用していません。
スタイリングにはTailwind、ホバーで展開するナビゲーションと本の扇形ヒーローには`motion`を使用しており、他のアニメーションライブラリは使っていません。
three.jsと@react-three/fiber、@react-three/dreiを、ちょうど1つの部屋(Brain)でのみ使用しています。War Room自身のコンステレーションは3Dではなく単純なSVGで、232体のエージェントを描画する際の意図的な軽量化の選択です。
@noble/ed25519と@noble/hashesは、Heartbeat、Sketch、Verifier、Treにおける訪問ごとの一時的な署名鍵に使われています。
フォント(Inter、Newsreader、IBM Plex Mono)はセルフホストされ、文字体系ごとにサブセット化されています。Google Fontsやその他のサードパーティフォントへのリクエストは一切ありません。

何と通信しているか

api.drand.sh、League of Entropyの公開ランダム性ビーコン。鍵は不要で読み取り専用です。
api.open-meteo.com、フッターとTreの部屋にあるオスロとバリのリアルタイム気温のためのもの。鍵は不要で読み取り専用です。
それ以外は何もありません。アナリティクスもトラッキングピクセルも広告ネットワークもクッキーバナーもありません、そもそも管理すべきクッキー自体が存在しないからです。この一文を書く前に、想定ではなく、ソースツリー全体を実際に検索して確認済みです。

どのようにレンダリングされるか

すべてのEstateページとすべての部屋は、クローラーや低速な接続がJavaScriptを1行でも実行する前に、ルートごと、言語ごとに本物の静的HTMLへ事前レンダリングされます。インタラクティブ層はその後、変更されることなくその下で起動し、実行可能なブラウザを持つ訪問者に提供されます。

各部屋の重さ

Gzip圧縮されたJavaScriptで、各部屋固有のコード分割チャンクです。訪問者はEstateのシェルを一度だけ支払い、その後は実際に開いた部屋の分だけを支払います。これはCONSTELLATION-SCAFFOLDのコード分割ルールに従っています。

Estate shell (every page pays this once)108.99 kB

Heartbeat2.42 kB

Tre3.06 kB

Gravity4.39 kB

Appendix3.23 kB

Sketch3.82 kB

Verifier5.94 kB

War Room5.74 kB

Brain232.68 kB

three.js/R3F, by far the heaviest room. Only paid by a visitor who actually opens /brain, never by anyone else.

その部屋に触れた直近のビルド時点の値で、ライブ取得ではありません。

かかる費用

現時点では何もかかりません、まだ本番公開されていないからです。これはステージング用のリポジトリ(buge4/bjornvhauge-com)であり、ドメインではありません。実際に公開された場合の正直な見積もりは、通常運用コスト0ドルです:CDN上の静的ファイル、サーバープロセスなし、データベースなし、上記スタックのどこにも有料APIキーはありません。もしそれが変われば、この部屋もそれに合わせて変わります、その逆ではありません。