UI Component library
Component Library Backend
Creating new Pages
Pages for the component library are written in Markdown and a number of Hugo powered tools.
To add a page simply create a Markdown file in content/moodle/[foldername]/
Generating the HTML versions of the Markdown files
The HTML pages for this library are created in the docs/ folder of the componentlibrary
npm install in the $moodleroot folder to fetch all requirements for contributing to this library.
Once all requirements are installed you all you need to do is run
grunt componentlibrary to create the component library pages.
Location of Markdown files
└── content ├─ bootstrap └─ moodle
HTML output folder
Page setup using the Hugo static site builder
The hugo config file can be found in /admin/tool/componentlibrary/config.yml
The HTML and CSS for the component library pages are found here:
└─── hugo ├── archetypes ├── dist ├── scss └─- site
archetypes are template markdown files used when creating a new hugo page.
scss The SCSS used to generate the docs css for the Component Library.
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.
Creating a new docs page
Find the example page in
/admin/tool/componentlibrary/content/moodle/components/example.md and use it as a template for your new
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.
The document setup is not fixed at all, the example page is just there for inspiration when starting to describe a Moodle component.