Component Library Backend
Creating new Pages
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 this plugin.
npm install in the $moodleroot/admin/tools/componentlibrary folder to fetch all requirements for contributing to this library.
Once all requirements are installed you all you need to do is run
npm run start to create the component library pages.
Location of Markdown files
└── content ├─ bootstrap └─ moodle
HTML output folder
Page setup using the Hugo static site builder
If you have run
npm install the hugo static site builder for creating this library is found in your node_modules folder.
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
Run this command to create a new page called
MYDOCSPAGE. Or simply copy one of the existing markdown files in the /content folder, rename it and start editing it.
./node_modules/hugo-bin/vendor/hugo new -k moodle moodle/testing/MYDOCSPAGE.md
Open your new docs page in your editor and start writing your page. When you are done run this command to see the results.
npm run start