codestage
1.0.0
CodeStage 是一個靜態網站產生器，用於建立 JavaScript 遊樂場。我實現它是為了為我的 WebGPU 教程專案生成程式碼範例。 CodeStage 的靈感來自以下網站：
摩納哥 | WebGPU 範例 |小玩意|去玩
所有這些網站似乎都建立了自己的解決方案。另一方面，CodeStage 是一個免費且可重複使用的解決方案。
若要查看已部署的 CodeStage 網站的示範：示範。本示範中使用的一些範例來自 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.md無需使用 CodeStage 編輯器來開發範例。可以使用更熟悉和更高級的編輯器來開發它們。
開發完成後，請執行以下命令來建置您的專案：
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 建構的。
