UI Component library
Adding or editing a page in the component library
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.
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
└── content └── moodle └── components └── breadcrumbs.md
Open the file in your favourite editor and start it with some metadata, we call this syntax frontmatter.
--- layout: docs title: "Breadcrumb navigation" date: 2020-03-02T10:13:29+01:00 draft: false ---
Make sure you add these characters
--- before and after your metadata. You can change the title and date to match your document.
Run the component library Grunt task.
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 to learn how to get a working setup.
The output should be similar to this:
Running "componentlibrary:docsBuild" task Building sites … | EN +------------------+-----+ Pages | 113 Paginator pages | 0 Non-page files | 18 Static files | 18 Processed images | 0 Aliases | 7 Sitemaps | 1 Cleaned | 0 Total in 913 ms Running "componentlibrary:cssBuild" task Rendering Complete, saving .css file... Wrote CSS to /var/www/repositories/cl_master/moodle/admin/tool/componentlibrary/hugo/dist/css/docs.css Wrote Source Map to /var/www/repositories/cl_master/moodle/admin/tool/componentlibrary/hugo/dist/css/docs.css.map Running "componentlibrary:indexBuild" task Done.
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.