codestage
1.0.0
CodeStage es un generador de sitios estáticos para crear áreas de juego de JavaScript. Implementé esto para generar ejemplos de código para mi proyecto de tutorial WebGPU. CodeStage se inspiró en los siguientes sitios:
Mónaco | Muestras de WebGPU | Chuchería | ir a jugar
Todos estos sitios parecen crear su propia solución. CodeStage, por otro lado, es una solución gratuita y reutilizable.
Para ver una demostración de un sitio CodeStage implementado: Demostración. Algunas muestras utilizadas en esta demostración provienen de webglsamples.
cargo install codestage --version 0.1.1-alpha.2
Cree una carpeta de proyecto y un archivo de proyecto 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
Cada muestra individual debe estar en una carpeta separada. Debajo de cada carpeta, debe haber un archivo index.html . Este será el punto de entrada de la muestra. Cuando un usuario hace clic en el botón Ejecutar, cargaremos y mostraremos este archivo index.html .
Puede haber una carpeta de utilidades que contenga los archivos comunes que comparten todas las muestras.
La estructura de carpetas de un proyecto típico debería verse así:
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.mdNo es necesario desarrollar los ejemplos utilizando el editor CodeStage. Se pueden desarrollar utilizando un editor más familiar y avanzado.
Una vez finalizado el desarrollo, ejecute este comando para construir su proyecto:
codestage --target < target_folder >El sitio estático se genera en <target_folder>
Si el sitio se implementará en una subruta de un dominio, sin la raíz, por ejemplo: https://example.com/my_samples , debemos especificar el prefijo de la ruta ( /my_sample ). Esto se puede hacer con el argumento de la línea de comandos --prefix o con el archivo codestage.toml .
Las opciones de la línea de comandos tienen mayor prioridad que el archivo toml. Si desea realizar cambios ad hoc en la configuración, puede utilizar la línea de comandos.
La carpeta example_project contiene un proyecto de ejemplo. Para construirlo:
cd example_project
codestage El sitio generado estará en example_project/dist
cd frontend
npm i --save
./build
cd cli
cargo build --release
Cuando creamos un proyecto CodeStage, primero validamos el archivo codestage.toml , copiamos todas las carpetas de muestra y utilidades a la carpeta de destino. Luego generamos un archivo json llamado manifest.json , que contiene la estructura del menú del proyecto. También enviamos el código de interfaz a la carpeta de destino. Cuando el proyecto se carga en el navegador, primero buscamos el archivo de manifiesto para completar la estructura del menú. Cuando se hace clic en un elemento del menú, cargamos los files correspondientes como se define en el archivo codestage.toml en el editor. Un usuario puede cambiar libremente el código de muestra utilizando el editor del navegador. Cuando se hace clic en el botón run , utilizamos el siguiente mecanismo para ensamblar el programa:
href que coincida con un archivo css modificado, reemplazaremos su textContent con el código modificado.src que coincida con un archivo js modificado, reemplazaremos su textContent con el código modificado.base en el documento, para que podamos usar la carpeta de la muestra como raíz.El editor del navegador está creado con Monaco.
