codestage
1.0.0
CodeStage ist ein statischer Site-Generator zum Erstellen von Javascript-Spielplätzen. Ich habe dies implementiert, um Codebeispiele für mein WebGPU-Tutorialprojekt zu generieren. CodeStage wurde von den folgenden Websites inspiriert:
Monaco | WebGPU-Beispiele | Kugel | Goplay
Alle diese Websites scheinen ihre eigene Lösung zu entwickeln. CodeStage hingegen ist eine kostenlose und wiederverwendbare Lösung.
So sehen Sie eine Demo einer bereitgestellten CodeStage-Site: Demo. Einige in dieser Demo verwendete Beispiele stammen von webglsamples.
cargo install codestage --version 0.1.1-alpha.2
Erstellen Sie einen Projektordner und eine Projektdatei 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
Jede einzelne Probe sollte in einem separaten Ordner liegen. Unter jedem Ordner muss sich eine index.html Datei befinden. Dies ist der Einstiegspunkt für das Beispiel. Wenn ein Benutzer auf die Schaltfläche „Ausführen“ klickt, laden wir diese index.html Datei und zeigen sie an.
Es kann einen Dienstprogrammordner geben, der die gemeinsamen Dateien enthält, die von allen Beispielen gemeinsam genutzt werden.
Die Ordnerstruktur eines typischen Projekts sollte wie folgt aussehen:
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.mdEs ist nicht erforderlich, die Beispiele mit dem CodeStage-Editor zu entwickeln. Sie können mit einem vertrauteren und fortgeschritteneren Editor entwickelt werden.
Sobald die Entwicklung abgeschlossen ist, führen Sie diesen Befehl aus, um Ihr Projekt zu erstellen:
codestage --target < target_folder >Die statische Site wird unter <target_folder> generiert
Wenn die Site in einem Unterpfad einer Domäne und nicht im Stammverzeichnis bereitgestellt wird, zum Beispiel: https://example.com/my_samples , müssen wir das Pfadpräfix ( /my_sample ) angeben. Dies kann entweder mit dem Befehlszeilenargument --prefix oder der Datei codestage.toml erfolgen.
Die Befehlszeilenoptionen haben eine höhere Priorität als die Toml-Datei. Wenn Sie Ad-hoc-Konfigurationsänderungen vornehmen möchten, können Sie die Befehlszeile verwenden.
Der Ordner example_project enthält ein Beispielprojekt. Um es zu bauen:
cd example_project
codestage Die generierte Site befindet sich unter example_project/dist
cd frontend
npm i --save
./build
cd cli
cargo build --release
Wenn wir ein CodeStage-Projekt erstellen, validieren wir zunächst die Datei codestage.toml und kopieren alle Beispiel- und Dienstprogrammordner in den Zielordner. Anschließend generieren wir eine JSON-Datei namens manifest.json , die die Menüstruktur für das Projekt enthält. Wir geben den Frontend-Code auch in den Zielordner aus. Wenn das Projekt in den Browser geladen wird, rufen wir zuerst die Manifestdatei ab, um die Menüstruktur zu füllen. Wenn auf einen Menüpunkt geklickt wird, laden wir die entsprechenden files wie in der Datei codestage.toml definiert, in den Editor. Ein Benutzer kann den Beispielcode mithilfe des Browser-Editors frei ändern. Wenn auf die Schaltfläche run geklickt wird, verwenden wir den folgenden Mechanismus, um das Programm zusammenzustellen:
href Attribut mit einer geänderten CSS-Datei übereinstimmt, ersetzen wir deren textContent durch den geänderten Code.src Attribut mit einer geänderten js-Datei übereinstimmt, ersetzen wir deren textContent durch den geänderten Code.base -Tag in das Dokument ein, damit wir den Ordner des Beispiels als Stammverzeichnis verwenden können.Der In-Browser-Editor wurde mit Monaco erstellt.
