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.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 , копируем все папки примеров и утилит в целевую папку. Затем мы создаем json-файл с именем manifest.json , который содержит структуру меню проекта. Мы также выводим код внешнего интерфейса в целевую папку. Когда проект загружается в браузер, мы сначала извлекаем файл манифеста, чтобы заполнить структуру меню. При нажатии на пункт меню мы загружаем в редактор соответствующие files , как определено в файле codestage.toml . Пользователь может свободно изменять пример кода с помощью редактора в браузере. При нажатии кнопки run мы используем следующий механизм для сборки программы:
href которых соответствует измененному файлу CSS, мы заменим их textContent измененным кодом.src которых соответствует измененному файлу js, мы заменим их textContent измененным кодом.base тег, чтобы можно было использовать папку с образцом в качестве корневой.Редактор в браузере создан с использованием Monaco.
