|
1 | 1 | # ut.code(); 公式ウェブサイト |
2 | 2 |
|
3 | | -## 環境構築 |
| 3 | +## 環境構築・コマンド |
4 | 4 |
|
5 | | -### devcontainer |
| 5 | +`./docs/develop.md` を参照。 |
6 | 6 |
|
7 | | -下のボタンを押すと開発環境が起動します。 |
8 | | -起動までしばらく時間がかかるのでお待ちください。 |
| 7 | +## Guidelines |
9 | 8 |
|
10 | | -[](https://codespaces.new/ut-code/website) |
| 9 | +### 一般 |
11 | 10 |
|
12 | | -### ローカル |
| 11 | +フォーマッタは Prettier を用います。 |
| 12 | +各フロントマッター (トップに書く YAML) のプロパティは `./docs/contents` に説明があります。 |
13 | 13 |
|
14 | | -- (必須) Bun >= v1.1.39 |
15 | | -- 任意のエディタ <https://docs.astro.build/en/editor-setup/> |
| 14 | +### メンバー |
16 | 15 |
|
17 | | -```sh |
18 | | -bun install --frozen-lockfile |
19 | | -``` |
| 16 | +- メンバー画像や名前に本名・顔写真を使う必要はありません。 |
| 17 | +- メンバー画像は、 `faceImage` と `upperBodyImage` の 2 つあります。 |
| 18 | + - どちらも 1:1 にクロップされます。 |
| 19 | + - `faceImage` はアップの、 `upperBodyImage` は引いた画像を使ってください。元となる画像は同じ画像を使ってください。 |
20 | 20 |
|
21 | | -## 開発 |
| 21 | +### 記事 |
22 | 22 |
|
23 | | -```sh |
24 | | -bun dev |
25 | | -``` |
| 23 | +- サムネイルは縦横比 3:5 にクロップされます。 |
26 | 24 |
|
27 | | -<http://localhost:4321/> で開発用サーバーが起動します。 |
| 25 | + - 可能なら 3:5 に近い画像を使い、 |
| 26 | + - できないかつクロップが許容できない場合は、 `fit: contain` と背景色 (`bg_color:`) を指定してください。 |
28 | 27 |
|
29 | | -## ビルド |
| 28 | +- 画像サイズは 1MB 未満に抑えてください。 ffmpeg や ImageMagick を使い、解像度を下げたり、画質 (Quality) を下げたり、WebP (or AVIF) に変換するなどができます。 |
| 29 | + - 参考 <https://stackoverflow.com/questions/7261855/recommendation-for-compressing-jpg-files-with-imagemagick> |
30 | 30 |
|
31 | | -```sh |
32 | | -bun run build |
33 | | -``` |
| 31 | +### プロジェクト |
34 | 32 |
|
35 | | -## ディレクトリ構造 |
36 | | - |
37 | | -- `contents/`: 記事のデータです。Astro の Content Collection を使って `src/pages` から読み込みます。 |
38 | | -- `src/` |
39 | | - - `images/`: 記事ではなくデザインに用いる画像です。 |
40 | | - - `pages/`: Astro の機能によりファイル名がパスに変換されます。 |
41 | | - - `islands/`: Astro で読み込む Island の集合です。 |
42 | | - - `content.config.ts`: Astro の Content Collection の設定を書きます。 |
43 | | - - `global.css`: Tailwind の設定ファイルです。 |
44 | | -- `astro.config.ts`: Astro の設定ファイルです。Vite の設定もここに書きます。 |
45 | | -- `biome.jsonc`: Biome の設定ファイルです。Biome のフォーマット部分は Astro に対応していないので、Lint だけ使っています。対応したら両方 Biome にしましょう。 |
46 | | -- `.prettier{rc,ignore}`: Prettier の設定ファイルです。 Prettier には、 astro と svelte と tailwind のプラグインが入っています。 |
47 | | -- `svelte.config.js`: 最もフィジカルで、最もプリミティブで、そして最もフェティッシュなフレームワークでいかせていただきます。 |
| 33 | +- サムネイルは縦横比 3:5 にクロップされます。 |
0 commit comments