Modules and how to use them
Local images
Steps
- Create a folder for your course in
/assets
- Import the image using the following syntax:

Example

Result
Collapsible
Steps
- Use the
<detail>
element to wrap collapsible content.
Example
<details>
<summary>Click to expand!</summary>
This is some content
</details>
Result
Click to expand!
This is some content
Docs Viewer
Steps
- Import the DocsViewer component at the top of the file using:
import DocsViewer from "@site/src/components/DocsViewer";
- Use the component as follows:
<DocsViewer toc={toc} src="<Google Docs/ PDF URL>" />
Example
Passing in a Google Docs/ Slides/ Sheets URL
<DocsViewer
toc={toc}
src="https://docs.google.com/document/d/1Gp5MINDu_HL-zOoRL0Di7JbDJpMe9EtnP-a8dmNbemQ/edit"
/>
Passing in a PDF
<DocsViewer
toc={toc}
src="https://www.unicef.org/media/122921/file/State%20of%20Learning%20Poverty%202022.pdf"
/>
Result
Google Docs
Notes
Passing in the toc={toc}
option automatically detects if there is other content on the page. If not, the docs viewer takes up the whole page.
Linking to other pages
Steps
- Create a link with the syntax
[<link text>](<url after /courseware>)
Example
[Check out adding submodules](/Contribution-Guide/docs/Adding-Submodules)