This package is the open source UI that is used for the courses on hungrimind.com.
It takes in a JSON file as an input, and handles everything courses related within the component. Inside the GitHub repo in the test
folder you can find a test.json
file.
The JSON file is a course id followed by a list of lessons. There are 3 lesson types, and each lesson type has specific fields. Below are the possible lesson types and fields
Lesson Type (defined by sectionType in JSON) |
Field Name | Field Description |
---|---|---|
"header" | sectionType |
Has to be "header". |
id |
Identifier for that lesson. | |
image |
Main promo image for the course. | |
links |
List of links to showcase. Need to contain type and url fields. Currently only "github" and "discord" types are available. |
|
content |
Markdown section describing the course or persuading them to take it. Or it can contain whatever markdown you desire. | |
headline |
Name of the course. | |
subheadline |
Subtitle of the course. | |
"slide" | sectionType |
Has to be "slide". |
id |
Identifier for that lesson. | |
type |
Can contain either image or code. Currently "image", "flutter", "yaml", "md" are supported. | |
content |
Markdown explaining the section topic. | |
value |
Depending on the type can be either a link to image or code. |
|
heading |
Title for the slide. Used for table of contents as well. | |
file |
Name of the file for code snippets. optional, and only for code types | |
highlight |
Which lines should be highlighted in the code snippets. optional, and only for code types | |
previewImage |
A preview image of what UI should look like for the code. optional, and only for code types | |
"md" | sectionType |
Has to be "md". |
id |
Identifier for that lesson. | |
content |
Markdown. | |
heading |
Title. Used for table of contents as well. |
- Clone this repository
- run
make link
- run
make install
- run
make watch
- run either
make astro
ormake next
depending on which framework you want to use.
Run step 4 and 5 from the above list.