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.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.
