codestage
1.0.0
CodeStage는 자바스크립트 플레이그라운드를 생성하는 정적 사이트 생성기입니다. 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.mdCodeStage 편집기를 사용하여 샘플을 개발할 필요는 없습니다. 보다 친숙하고 고급 편집기를 사용하여 개발할 수 있습니다.
개발이 완료되면 다음 명령을 실행하여 프로젝트를 빌드합니다.
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를 사용하여 구축되었습니다.
