Skip to main content

Modules and how to use them

Local images​

Steps​

  1. Create a folder for your course in /assets
  2. Import the image using the following syntax:
    ![<alt>](assets/<file_name>)

Example​

    ![Kalvi Logo](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/sample-lesson/kalvi-logo.png)

Result​

Kalvi Logo

Collapsible​

Steps​

  1. 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​

  1. Import the DocsViewer component at the top of the file using:
import DocsViewer from "@site/src/components/DocsViewer";
  1. 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

PDF

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​

  1. Create a link with the syntax [<link text>](<url after /courseware>)

Example​

[Check out adding submodules](/Contribution-Guide/docs/Adding-Submodules)

Result​

Check out adding submodules