| Commit | Line | Data |
|---|---|---|
| 3de68ad4 BB |
1 | --- |
| 2 | layout: docs | |
| 3 | title: "Adding pages" | |
| 4 | date: 2020-03-02T10:13:29+01:00 | |
| 5 | draft: false | |
| 6 | weight: 2 | |
| 7 | --- | |
| 8 | ||
| 9 | ## Adding or editing a page in the component library | |
| 10 | ||
| 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. | |
| 12 | ||
| 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 | |
| 14 | ||
| 15 | ||
| 16 | ``` | |
| 17 | └── content | |
| 18 | └── moodle | |
| 19 | └── components | |
| 20 | └── breadcrumbs.md | |
| 21 | ``` | |
| 22 | ||
| 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/). | |
| 24 | ||
| 25 | ``` | |
| 26 | --- | |
| 27 | layout: docs | |
| 28 | title: "Breadcrumb navigation" | |
| 29 | date: 2020-03-02T10:13:29+01:00 | |
| 30 | draft: false | |
| 31 | --- | |
| 32 | ``` | |
| 33 | ||
| 34 | Make 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 | ||
| 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. | |
| 39 | ||
| 40 | ||
| 41 | The output should be similar to this: | |
| 42 | ||
| 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 | |
| 56 | ||
| 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 | |
| 63 | ||
| 64 | Done. | |
| 65 | ||
| 66 | ``` | |
| 67 | ||
| 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. |
