キルトプロジェクトのウェブサイト。
このサイトは、Astro、MDX、およびI18Nextで構築されました。 CloudFlareページでホストされています。 Astroに精通したい場合は、そのドキュメントを読むことができます。
立ち往生している場合や質問がある場合は、Discordサーバーの#Websiteスレッドにご参加ください。
使用する最も単純なエディターは、AstroとMDXの公式言語拡張機能を備えているため、Visual Studioコード(VSCODE)です。 VSCODEでリポジトリを開くと、右下隅にポップアップが表示され、推奨される拡張機能がインストールされます。また、 @recommendedを拡張検索バーに入力して、推奨される拡張機能を閲覧し、必要な拡張機能を手動でインストールすることもできます。

VSCODEを使用しない場合は、次のツールのサブセットをサポートするエディタを使用できます。
前述のように、WebサイトはTypeScriptで記述されているAstroを使用して構築されているため、開発のために構築および実行するには、node.js互換JavaScriptランタイムが必要になります。互換性のないMODやブログ投稿などの簡単な貢献のみを行っている場合、開発環境を設定することは不可欠ではありません。すべてが予想どおりに機能することを確認するためにプルリクエストを送信すると、サイトのプレビューバージョンが構築されます。
node.jsは、クロスプラットフォームJavaScriptランタイムです。直接インストールするか、お気に入りのパッケージマネージャーが利用できる可能性があります。
PNPMをnode.jsパッケージマネージャーとして使用します。次の方法でインストールできます。
npm install -g pnpmその他のオプションについては、PNPMのドキュメントを参照してください。
プロジェクト内で、PNPMを使用して必要なすべてのパッケージをインストールします。
pnpm iAstroには、プロジェクト内のファイルを変更すると自動的にリロードする開発サーバーが含まれています。開始するには、 pnpm devを実行します。
> pnpm dev
15:05:32 [types] Generated 1ms
astro v4.15.2 ready in 702 ms
┃ Local http://localhost:4321/
┃ Network use --host to expose
15:05:32 watching for file changes...
DEVサーバーは、訪問するときにページを構築して開始時間を短縮するため、そのパフォーマンスは完全に構築されたサイトよりも悪化します。
最終サイトの完全なコピーを構築するには:
pnpm build
サイトはdist/フォルダーに組み込まれます。サイトを構築することは、気付かずに何も壊れていないことを確認するための便利な方法です。
pnpm astro previewを使用してビルドサイトをプレビューできますが、ほとんどの場合、これが開発サーバーよりも有効なのはパフォーマンスです。
CloudFlareページ固有の機能( functions/ディレクトリ内のものなど)をテストする必要がある場合は、CloudFlareのWrangler Clitoを使用してサイトをプレビューできます。CloudFlareページの展開をエミュレートできます。
まず、ラングラーをインストールします
pnpm install -g wranglerサイトを構築します:
pnpm buildラングラーを使用して出力distフォルダーを実行します。
wrangler pages dev dist
Astroの開発サーバーとは異なり、Wranglerは完全に構築されたサイトのみをプレビューできます。
リポジトリのレイアウトの詳細については、 ARCHITECTURE.md参照してください。
さまざまな一般的な貢献をするための指示。
public/api/v1/incompatible-mods.jsonでincompatible-mods.jsonファイルを開き、リストの下部に新しいエントリを追加します。
エントリには次のフィールドが必要です。
"ids": - 影響を受けるMOD IDのリスト。"Name": - 影響を受けるmodのフルネーム。"type": - 非互換性の種類。次のいずれかになることができます。"GAME" - バニラゲームをクラッシュまたは破壊します。"OTHERS" - 他の1つ以上のMODを破ります。"SELF" - 自分自身を壊します。"WORKAROUND" - 適切に機能できる回避策があります。"Status": - 非互換性が固定されていることはどれほど近いか。次のいずれかになることができます。"BLOCKED" - MOD著者はこの問題を認識していますが、修正は外部要因によってブロックされます。"IN_PROGRESS" - mod著者は修正を実装しています。"NO_ANSWER" - 問題が報告されていますが、MODの著者は応答していません。"ON_HOLD" - modの著者は、修正の実装またはリリースを待っています。"UNKNOWN" - この問題はMOD著者に報告されていないか、レポートを見つけることができません。"WONT_FIX" - 問題が報告されていますが、mod著者はそれを修正することを拒否します。"tracking": - 互換性を追跡するレポートへのリンク、たとえばGitHubの問題。わからない場合は"UNKNOWN"に設定します。"notes":オプション) - 他のノート、たとえば、既知の回避策。 現在の日付とタイトルの短縮バージョンに名前が付けられたsrc/pages/en/blogで新しいMarkDownファイルを作成します。日付はyyyy-mm-dd形式である必要があり、タイトルは小文字で、たとえば2024-03-09-example-post.mdなど、ハイフン( - )で分離する必要があります。
ファイルの上部では、YAMLで書かれたメタデータであるFront Matterを追加する必要があります。ブログ投稿の最前線は次のようになります:
---
title : " An Example Title " # The full title of the post
date : 2024-09-03 20:00:00 -00:00 # The date, time, and timezone that the post was written, relative to UTC. It is best practice to give the time in UTC and use an offset of -00:00, as shown.
authors : # A list of one or more authors
- Pineapple
layout : /src/layouts/Post.astro # This tells Astro what layout to use for the page, and should always be the same.
---短い最初の段落を書いてから、2行を挿入し、 <!-- MORE --> 、さらに2行を入れます。例えば:
A succinct first paragraph.
<!-- MORE -->
More text here.
これは、ホームページとブログ投稿のリストにある短いプレビューに何を含めるかをウェブサイトに伝えます。ここから、あなたの心のコンテンツにマークダウンを書き続けることができます。コードブロックでの強調表示もサポートされています。
あなたがキルトの開発者またはコミュニティチームの一人である場合、ウェブサイトのチームリストページにカードがある可能性があります。このページのカード内のデータはsrc/data/のTeamData.mjsファイルから構築されています。
各チームメンバーには、このファイルに関するデータに関するオブジェクトがあります。リストされているページのセクションは、GitHubに参加しているチームに基づいています。
次のデータを変更して、カードをカスタマイズできます。
name: - カードの一番上の名前。それはあなたが望むものなら何でもかもしれません。discord: - あなたの不一致のユーザー名。github: -githubユーザー名。これは、GitHubでどのチームにいるかを識別するために使用されます。avatar: - これは、好きな画像のURLです。最良の結果を得るには、正方形であり、大きすぎないはずです。ファイルをpublic/assets/team/imagesに配置して、Webサイトでホストするか、好きな他の画像URLを使用できます。description:オプション) - あなたが誰であるかについての文または小さな段落。links:オプション) - さまざまなWebページまたはソーシャルメディアプロファイルへのリンクのリスト。各リンクは、次のオブジェクトで表されます。icon :リンクを表すアイコン。アイコンセットCoreUIブランド( cib: 、マテリアルデザインアイコン( mdi: :)、またはマテリアルシンボル( material-symbols: :)から選択できます。または、Curseforge( curseforge )とModrinth( modrinth-small )にカスタムアイコンを使用します。 (カスタムセットとは対照的に)アイコンセットからアイコンを使用する場合、アイコン名をアイコンセットの名前に接頭する必要があります。たとえば、 cib:youtube Coreuiブランドのyoutubeアイコンを使用します。url :Webページへのリンク。systemMembers:オプション) - このフィールドは、各メンバーを表示する複数のシステムを目的としています。いくつかの可能な値があります:"---"メンバーが隠された複数のシステムであるとあなたを示します。name:システムメンバーの名前。icon: - メンバーのアバター。任意のURLを使用するか、このサイトでpublic/assets/team/images/<your-system-name>/で画像をホストすることができます。