VTEX Courses is a repo made with the intent of unifying contents of courses to be provided for partners. It's final goal is to build a learning path currently focused on enhancing VTEX IO knowledge.
The project is divided between src and courses.
The src/ is the current script necessary to upload the contents in whichever platform the course is hosted. The idea, therefore, is to not tie the content to a specific platform.
The course/ is where the contents of the courses are located, each child folder is a different course, inside each course there are inner folders that represent steps, the content of the step is in a {language}.md file.
Inside each step there is an answersheet/ folder of which each file represents what you expect from file diffs.
On the root of one course folder there are three specific files: metadata.json, overview.md and summary.json.
- The overview is used for the course landing page;
- The summary is used to control the steps order, title and description;
- The metadata is used to create the learning path assets
|_courses/
|_course-one/
|_step-one/
|_answersheet/
|_file-1-changed.ts
|_file-2-changed.ts
|_pt.md
|_step-two/
|_answersheet/
|_file-1-changed.ts
|_file-2-changed.ts
|_pt.md
To create a new course, you just need to go through the following steps:
-
Create a new folder within the
courses/folder; -
Create the
overview.md, themetadata.jsonand thesummary.jsonfiles:
metadata.json file example:
{
"title": "Layouts Complexos",
"description": "Componha layouts complexos e diversos com os blocos de composição e os blocos básicos.",
"image": "https://appliancetheme.vtexassets.com/assets/app/src/complex_layout_course_icon___dcea05389ebe234d38cc35ec721fa346.svg"
}
summary.json file example:
[
{
"folder": "01_introducing-layout",
"title": {
"pt": "Apresentando blocos de layout"
},
"description": {
"pt": "Vamos criar layouts complexos de forma simples"
}
},
{
"folder": "02_flexlayout",
"title": {
"pt": "Flex layout"
},
"description": {
"pt": "Criando layouts de grid com blocos básicos"
}
}
]
- Create as many folders for steps as you need, within those folders you might create language files for translations of the steps:
|_new-course/
|_step-one/
|_pt.md
|_en.md
|_step-two/
|_pt.md
|_en.md
|_step-three/
|_pt.md
|_en.md
|_step-four/
|_pt.md
|_en.md
- In the end, to add the answersheets to the steps, you need to add an
answersheet/folder with as many files as you need to create the answersheet link:
|_new-course/
|_step-one/
+ |_answersheet/
+ |_one-file.ts
+ |_other-file.ts
|_pt.md
|_en.md
|_step-two/
|_pt.md
|_en.md
|_step-three/
|_pt.md
|_en.md
|_step-four/
|_pt.md
|_en.md- Optional: If you want to, you can create a challenge for your course, that will be displayed at the end of the course, to do so, just create a
challenge.mdfile at the root of a course:
|_new-course/
|_step-one/
|_answersheet/
|_one-file.ts
|_other-file.ts
|_pt.md
|_en.md
|_step-two/
|_pt.md
|_en.md
|_step-three/
|_pt.md
|_en.md
|_step-four/
|_pt.md
|_en.md
+ challenge.md- Finally, add your course to the
course/index.jsonfile in the order you think it fits the best:
[
{
"folder": "basic-blocks",
"isActive": true
},
+ {
+ "folder": "layout-blocks",
+ "isActive": true
+ },
{
"folder": "styles-course",
"isActive": true
},
{
"folder": "content-workflow",
"isActive": true
},
{
"folder": "store-block",
"isActive": true
},
{
"folder": "service-course",
"isActive": true
}
]The script is currently created to distribute the courses on a ReadMe.io portal, it is therefore an integration script that upload the assets to the correct places and creating a learning path user flow.
It is divided in:
clients/responsible for integrating with the services involved;script/responsible for the script submission steps;templates/responsible for creating the markdown and html templates of the steps;utils/mostly used for assets retrieval and slugifying ofcourses/folder
To run and see the results of a new course, you just have to run yarn deploy on the root folder, it'll trigger the index.ts file and run the script steps.
The course will be available at:
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent