codestage
1.0.0
CodeStage は、JavaScript プレイグラウンドを作成する静的サイト ジェネレーターです。これを実装して、WebGPU チュートリアル プロジェクトのコード サンプルを生成しました。 CodeStage は次のサイトからインスピレーションを受けました。
モナコ | WebGPU サンプル |安物の宝石 |ゴープレイ
これらのサイトはすべて独自のソリューションを構築しているようです。一方、CodeStage は無料で再利用可能なソリューションです。
デプロイされた CodeStage サイトのデモを見るには: Demo.このデモで使用されているサンプルの一部は、webglsamples から取得されています。
cargo install codestage --version 0.1.1-alpha.2
プロジェクトフォルダーとプロジェクトファイル codestage.toml を作成します。
# Title of the project (must have).
title = " CodeStage example "
# Link to the repository (optional).
repo = " xxx "
# If not deployed under the root directory, this will be needed. The first slash is required (optional).
prefix = " /codestage "
# Specify the output folder (optional).
target = " dist "
# Link to the deployed site, this will be used for meta tags (optional).
url = " https://shi-yan.github.io/codestage/ "
# Image used for meta tags (optional).
meta_image = " meta.png "
# Description used for meta tags (optional).
description = """
CodeStage is a static site generator to build JS playground demos. """
# Utility folders are shared by all samples in the project (optional).
utilities = [ " utility_folder_1 " , " utility_folder_2 " ]
# An optional folder to put a readme, the index.html inside the readme folder will be displayed when code is not running
readme_folder = " readme "
# The following is the table of content, which will be rendered in the menu area.
# The content field is an array of chapters.
# Each chapter must have a title
# A chapter can have a folder. When a folder is provided and when the menu item is clicked, we will load the sample in the folder. If no folder is provided, this menu item will not be clickable.
[[ content ]]
title = " chapter 1 "
folder = " test_base "
# A list of files we want to load into the editor. All files in the above folder will be deployed, but only these files in that folder will be loaded into the editor.
[[ content . files ]]
# Each folder must have an index.html, this file is the entrypoint.
filename = " index.html "
# is_readonly will make a file immutable (optional).
is_readonly = true
# Chapters can be nested by using the sub_chapters field. This field is an array, its format is the same as the content field.
[[ content . sub_chapters ]]
title = " chapter 1.1 "
folder = " test_base "
[[ content . sub_chapters . files ]]
filename = " index.html "
# Another level of nested chapter
[[ content . sub_chapters . sub_chapters ]]
title = " chapter 1.1.1 "
folder = " test_base "
[[ content . sub_chapters . sub_chapters . files ]]
filename = " index.html "
[[ content ]]
title = " chapter 2 "
folder = " test_base "
[[ content . files ]]
filename = " index.html "
is_readonly = true
個々のサンプルはそれぞれ別のフォルダーに存在する必要があります。各フォルダーの下に、 index.htmlファイルが存在する必要があります。これがサンプルのエントリポイントになります。ユーザーが実行ボタンをクリックすると、このindex.htmlファイルがロードされて表示されます。
すべてのサンプルで共有される共通ファイルを格納するユーティリティ フォルダーが存在する場合があります。
一般的なプロジェクトのフォルダー構造は次のようになります。
my-codestage-project/
├─ sample_1/
│ ├─ favicon.ico
│ ├─ index.html
│ ├─ style.css
├─ sample_2/
│ ├─ index.html
├─ sample_3/
│ ├─ index.html
│ ├─ index.css
│ ├─ index.js
├─ utility_folder/
│ ├─ utility_script.js
├─ utility_folder_2/
│ ├─ test.png
├─ codestage.toml
├─ meta_image.png
├─ README.mdCodeStage エディターを使用してサンプルを開発する必要はありません。より使い慣れた高度なエディタを使用して開発できます。
開発が完了したら、次のコマンドを実行してプロジェクトをビルドします。
codestage --target < target_folder >静的サイトは <target_folder> の下に生成されます
サイトがルートではなくドメインのサブパスにデプロイされる場合 (例: https://example.com/my_samples )、パス プレフィックス ( /my_sample ) を指定する必要があります。これは、コマンドライン引数--prefixまたはcodestage.tomlファイルのいずれかを使用して実行できます。
コマンドライン オプションは、toml ファイルよりも優先されます。アドホック構成変更を行う場合は、コマンドラインを使用できます。
example_project フォルダーにはサンプル プロジェクトが含まれています。構築するには:
cd example_project
codestage生成されたサイトはexample_project/distの下にあります
cd frontend
npm i --save
./build
cd cli
cargo build --release
CodeStage プロジェクトをビルドするときは、まずcodestage.tomlファイルを検証し、すべてのサンプル フォルダーとユーティリティ フォルダーをターゲット フォルダーにコピーします。次に、プロジェクトのメニュー構造を含む、 manifest.jsonという json ファイルを生成します。フロントエンド コードもターゲット フォルダーに出力します。プロジェクトがブラウザにロードされると、最初にマニフェスト ファイルをフェッチしてメニュー構造を設定します。メニュー項目をクリックすると、 codestage.tomlファイルで定義されている対応するfilesがエディターにロードされます。ユーザーはブラウザ内のエディタを使用してサンプルコードを自由に変更できます。 runボタンをクリックすると、次のメカニズムを使用してプログラムがアセンブルされます。
href属性を持つすべてのリンク タグについて、そのtextContent変更されたコードで置き換えます。src属性を持つすべてのスクリプト タグについて、そのtextContent変更されたコードで置き換えます。baseタグを挿入します。ブラウザ内エディタは Monaco を使用して構築されています。
