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 构建的。
