| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Component Library Backend"
|
|
|
4 |
date: 2021-05-27T15:43:07+01:00
|
|
|
5 |
group: moodle-components
|
|
|
6 |
draft: false
|
|
|
7 |
---
|
|
|
8 |
|
|
|
9 |
## Creating new Pages
|
|
|
10 |
|
|
|
11 |
Pages for the component library are written in [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) and a number of [Hugo](https://gohugo.io) powered tools.
|
|
|
12 |
|
|
|
13 |
To add a page simply create a Markdown file in content/moodle/[foldername]/
|
|
|
14 |
|
|
|
15 |
## Generating the HTML versions of the Markdown files
|
|
|
16 |
|
|
|
17 |
The HTML pages for this library are created in the docs/ folder of the componentlibrary
|
|
|
18 |
|
|
|
19 |
Please run `npm install` in the $moodleroot folder to fetch all requirements for contributing to this library.
|
|
|
20 |
|
|
|
21 |
Once all requirements are installed you all you need to do is run `grunt componentlibrary` to create the component library pages.
|
|
|
22 |
|
|
|
23 |
## Location of Markdown files
|
|
|
24 |
|
|
|
25 |
```
|
|
|
26 |
└── content
|
|
|
27 |
├─ bootstrap
|
|
|
28 |
└─ moodle
|
|
|
29 |
```
|
|
|
30 |
|
|
|
31 |
## HTML output folder
|
|
|
32 |
|
|
|
33 |
```
|
|
|
34 |
├── docs
|
|
|
35 |
```
|
|
|
36 |
|
|
|
37 |
## Page setup using the Hugo static site builder
|
|
|
38 |
|
|
|
39 |
The hugo config file can be found in /admin/tool/componentlibrary/config.yml
|
|
|
40 |
|
|
|
41 |
The HTML and CSS for the component library pages are found here:
|
|
|
42 |
|
|
|
43 |
```
|
|
|
44 |
└─── hugo
|
|
|
45 |
├── archetypes
|
|
|
46 |
├── dist
|
|
|
47 |
├── scss
|
|
|
48 |
└─- site
|
|
|
49 |
```
|
|
|
50 |
|
|
|
51 |
`archetypes` are template markdown files used when creating a new hugo page.
|
|
|
52 |
|
|
|
53 |
`dist` CSS and JavaScript for use in Hugo pages
|
|
|
54 |
|
|
|
55 |
`scss` The SCSS used to generate the docs css for the Component Library.
|
|
|
56 |
|
|
|
57 |
`site` The page templates for hugo that include the left hand menu, navbar etc. And the templates to render example code shown in this component library.
|
|
|
58 |
|
|
|
59 |
|
|
|
60 |
## Creating a new docs page
|
|
|
61 |
|
|
|
62 |
Find the example page in `/admin/tool/componentlibrary/content/moodle/components/example.md` and use it as a template for your new
|
|
|
63 |
page. In the top part of the example.md file you will find the `frontmatter` configuration between the `---` characters. This part is used when hugo generates the page name and description. Change it to describe the new page you are creating.
|
|
|
64 |
|
|
|
65 |
The document setup is not fixed at all, the example page is just there for inspiration when starting to describe a Moodle component.
|