codestage
1.0.0
CodeStage เป็นเครื่องมือสร้างไซต์แบบคงที่สำหรับสร้างสนามเด็กเล่นจาวาสคริปต์ ฉันปรับใช้สิ่งนี้เพื่อสร้างตัวอย่างโค้ดสำหรับโปรเจ็กต์บทช่วยสอน WebGPU ของฉัน CodeStage ได้รับแรงบันดาลใจจากไซต์ต่อไปนี้:
โมนาโก | ตัวอย่าง WebGPU | สิ่งเล็กๆ น้อยๆ | โกเพลย์
ดูเหมือนว่าไซต์ทั้งหมดเหล่านี้จะสร้างโซลูชันของตนเอง ในทางกลับกัน CodeStage เป็นโซลูชันฟรีและสามารถนำมาใช้ซ้ำได้
หากต้องการดูการสาธิตไซต์ CodeStage ที่ใช้งาน: การสาธิต ตัวอย่างบางส่วนที่ใช้ในการสาธิตนี้มาจาก 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 หากคุณต้องการเปลี่ยนแปลงการกำหนดค่า Adhoc คุณสามารถใช้บรรทัดคำสั่งได้
โฟลเดอร์ 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 ซึ่งมีโครงสร้างเมนูสำหรับโปรเจ็กต์ เรายังส่งออกโค้ดส่วนหน้าไปยังโฟลเดอร์เป้าหมายด้วย เมื่อโปรเจ็กต์ถูกโหลดลงในเบราว์เซอร์ เราจะดึงไฟล์ Manifest ก่อนเพื่อเติมโครงสร้างเมนู เมื่อคลิกรายการเมนู เราจะโหลด files ที่เกี่ยวข้องตามที่กำหนดไว้ในไฟล์ codestage.toml ลงในโปรแกรมแก้ไข ผู้ใช้สามารถเปลี่ยนโค้ดตัวอย่างได้อย่างอิสระโดยใช้ตัวแก้ไขในเบราว์เซอร์ เมื่อคลิกปุ่ม run เราจะใช้กลไกต่อไปนี้เพื่อประกอบโปรแกรม:
href ตรงกับไฟล์ css ที่แก้ไข เราจะแทนที่ textContent ด้วยโค้ดที่แก้ไขsrc ตรงกับไฟล์ js ที่แก้ไข เราจะแทนที่ textContent ด้วยโค้ดที่แก้ไขbase ลงในเอกสาร เพื่อให้เราสามารถใช้โฟลเดอร์ของตัวอย่างเป็นรูทได้เครื่องมือแก้ไขในเบราว์เซอร์สร้างขึ้นโดยใช้โมนาโก
