codestage
1.0.0
CodeStage adalah generator situs statis untuk membuat taman bermain javascript. Saya menerapkan ini untuk menghasilkan contoh kode untuk proyek tutorial WebGPU saya. CodeStage terinspirasi oleh situs-situs berikut:
Monako | Sampel WebGPU | perhiasan | Mainkan
Semua situs ini sepertinya membangun solusinya sendiri. CodeStage, di sisi lain, adalah solusi gratis dan dapat digunakan kembali.
Untuk melihat demo situs CodeStage yang diterapkan: Demo. Beberapa sampel yang digunakan dalam demo ini berasal dari webglsamples.
cargo install codestage --version 0.1.1-alpha.2
Buat folder proyek dan file proyek 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
Setiap sampel individu harus berada dalam folder terpisah. Di bawah setiap folder pasti ada file index.html . Ini akan menjadi titik masuk untuk sampel. Ketika pengguna mengklik tombol run, kami akan memuat dan menampilkan file index.html ini.
Mungkin ada folder utilitas yang menampung file-file umum yang dibagikan oleh semua sampel.
Struktur folder proyek pada umumnya akan terlihat seperti ini:
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.mdTidak perlu mengembangkan sampel menggunakan editor CodeStage. Mereka dapat dikembangkan menggunakan editor yang lebih familiar dan canggih.
Setelah pengembangan selesai, jalankan perintah ini untuk membangun proyek Anda:
codestage --target < target_folder >Situs statis dibuat di bawah <target_folder>
Jika situs akan disebarkan ke subjalur domain, selain root, misalnya: https://example.com/my_samples , Kita perlu menentukan awalan jalur ( /my_sample ). Hal ini dapat dilakukan dengan argumen baris perintah --prefix atau file codestage.toml .
Opsi baris perintah memiliki prioritas lebih tinggi daripada file toml. Jika Anda ingin melakukan perubahan konfigurasi adhoc, Anda dapat menggunakan baris perintah.
Folder example_project berisi proyek contoh. Untuk membangunnya:
cd example_project
codestage Situs yang dihasilkan akan berada di bawah example_project/dist
cd frontend
npm i --save
./build
cd cli
cargo build --release
Saat kita membangun proyek CodeStage, pertama-tama kita memvalidasi file codestage.toml , menyalin semua folder sampel dan utilitas ke folder target. Kami kemudian membuat file json bernama manifest.json , yang berisi struktur menu untuk proyek tersebut. Kami juga menampilkan kode frontend ke dalam folder target. Saat proyek dimuat ke browser, kami mengambil file manifes terlebih dahulu untuk mengisi struktur menu. Ketika item menu diklik, kami memuat files terkait seperti yang didefinisikan dalam file codestage.toml ke dalam editor. Pengguna dapat dengan bebas mengubah kode contoh menggunakan editor dalam browser. Ketika tombol run diklik, kami menggunakan mekanisme berikut untuk merakit program:
href yang cocok dengan file css yang dimodifikasi, kami akan mengganti textContent dengan kode yang dimodifikasi.src yang cocok dengan file js yang dimodifikasi, kami akan mengganti textContent dengan kode yang dimodifikasi.base ke dalam dokumen, sehingga kami dapat menggunakan folder sampel sebagai root.Editor dalam browser dibuat menggunakan Monaco.
