MDL-61460 tool_componentlibrary: removed white space.
[moodle.git] / admin / tool / componentlibrary / content / library / adding-pages.md
1 ---
2 layout: docs
3 title: "Adding pages"
4 date: 2020-03-02T10:13:29+01:00
5 draft: false
6 weight: 2
7 ---
9 ## Adding or editing a page in the component library
11 In 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.
13 To 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
16 ```
17 └── content
18     └── moodle
19        └── components
20           └── breadcrumbs.md
21 ```
23 Open the file in your favourite editor and start it with some metadata, we call this syntax [frontmatter](https://gohugo.io/content-management/front-matter/).
25 ```
26 ---
27 layout: docs
28 title: "Breadcrumb navigation"
29 date: 2020-03-02T10:13:29+01:00
30 draft: false
31 ---
32 ```
34 Make sure you add these characters `---` before and after your metadata. You can change the title and date to match your document.
36 ## Run the component library Grunt task.
38 In 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.
41 The output should be similar to this:
43 ```
44 Running "componentlibrary:docsBuild" task
45 Building sites …
46                    | EN
47 +------------------+-----+
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
57 Total in 913 ms
58 Running "componentlibrary:cssBuild" task
59 Rendering Complete, saving .css file...
60 Wrote CSS to /var/www/repositories/cl_master/moodle/admin/tool/componentlibrary/hugo/dist/css/docs.css
61 Wrote Source Map to /var/www/repositories/cl_master/moodle/admin/tool/componentlibrary/hugo/dist/css/docs.css.map
62 Running "componentlibrary:indexBuild" task
64 Done.
66 ```
68 The 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.