MDL-61460 tool_componentlibrary: removed white space.
[moodle.git] / admin / tool / componentlibrary / content / library / adding-pages.md
CommitLineData
3de68ad4
BB
1---
2layout: docs
3title: "Adding pages"
4date: 2020-03-02T10:13:29+01:00
5draft: false
6weight: 2
7---
8
9## Adding or editing a page in the component library
10
11In this step-by-step guide you will create a new page called Breadcrumb navigation and compile it from a markdown text file to a HTML page in the component library.
12
13To add a page to the component library on your local machine navigate open your editor or file manager and create a new markdown text file in folder /content/moodle/components/breadcrumbs.md
14
15
16```
17└── content
18 └── moodle
19 └── components
20 └── breadcrumbs.md
21```
22
23Open the file in your favourite editor and start it with some metadata, we call this syntax [frontmatter](https://gohugo.io/content-management/front-matter/).
24
25```
26---
27layout: docs
28title: "Breadcrumb navigation"
29date: 2020-03-02T10:13:29+01:00
30draft: false
31---
32```
33
34Make sure you add these characters `---` before and after your metadata. You can change the title and date to match your document.
35
36## Run the component library Grunt task.
37
38In your terminal run the command `npm install` and then `grunt componentlibrary` in your Moodle root folder. This will install all required resources and compile the componentlibrary pages. If you do not have npm installed on your system please visit [npmjs.com](https://www.npmjs.com/get-npm) to learn how to get a working setup.
39
40
41The output should be similar to this:
42
43```
44Running "componentlibrary:docsBuild" task
f03a7146
AG
45Building sites …
46 | EN
3de68ad4 47+------------------+-----+
f03a7146
AG
48 Pages | 113
49 Paginator pages | 0
50 Non-page files | 18
51 Static files | 18
52 Processed images | 0
53 Aliases | 7
54 Sitemaps | 1
55 Cleaned | 0
3de68ad4
BB
56
57Total in 913 ms
58Running "componentlibrary:cssBuild" task
59Rendering Complete, saving .css file...
60Wrote CSS to /var/www/repositories/cl_master/moodle/admin/tool/componentlibrary/hugo/dist/css/docs.css
61Wrote Source Map to /var/www/repositories/cl_master/moodle/admin/tool/componentlibrary/hugo/dist/css/docs.css.map
62Running "componentlibrary:indexBuild" task
63
64Done.
65
66```
67
68The grunt watch task will pick up changes in the componentlibrary Markdown files and Scss files. So run `grunt watch` if you want to edit the pages.