Contribution

6 minute read

This page will provide examples for various documentation features available in this repo / theme.

Examples

Links

External

External links should be created using standard markdown links, i.e.

[GoPro](https://gopro.com/)

GoPro

Note that the https:// is required otherwise the link will be attempted to resolve to a local file.

Internal

Internal links shall be created using the Jekyll link tag with the path to the file from the top of the directory.

For example, to link to this file:

[this file]({% link contribution.md %})

Specific sections can also be linked. For example, to link to this section:

[this section]({% link contribution.md %}#internal):

There is an exception to this when linking to a file in the tutorials. These are handled differently since tutorials is the base directory for all collections. Therefore, the tutorials directory should be omitted from the path. For example, to link to the first python tutorial:

[the first python tutorial]({% link _tutorials/tutorial_1_connect_ble/tutorial.md %})

Callouts

Notes

Blue colored notes via:

{% note %}
This is a note.
{% endnote %}

This is a note.

Successes

Green colored success via:

{% success %}
This is for when something good has happened.
{% endsuccess %}

This is for when something good has happened.

Warnings

Red colored warnings via:

{% warning %}
This is for when something bad has happened.
{% endwarning %}

This is for when something bad has happened.

Tips

Yellow colored tips via:

{% tip %}
This is for tips.
{% endtip %}

This is for tips.

Collapsible Accordion

Collapsible accordion sections can be added, for example with use for FAQ’s via:

{% accordion Question %}
  answer="Answer"
{% endaccordion %}

Here is an example:

answer=”Answer”

Quiz

Multiple choice quizzes via:

{% quiz
    question="What is the question?"
    option="A:::Option 1 (this one is correct)"
    option="B:::Option 2"
    option="C:::Option 3"
    correct="A"
    info="And here is some more info"
%}

What is the question?

A: Option 1 (this one is correct)
B: Option 2
C: Option 3

True or false quizzes can be made from this via:

{% quiz
    question="True or False?"
    option="True:::Option 1(this one is correct)"
    option="False:::Option 2"
    correct="True"
    info="And here is some more info"
%}

True or False?

True: Option 1(this one is correct)
False: Option 2

Tabs

Tabs can be created via:

{% tabs example %}
{% tab example tab1 %}
This is the content of the first tab.
{% endtab %}
{% tab example tab 2 %}
This is the content of the second tab.
{% endtab %}
{% tab example tab3 %}
This is the content of the third tab.
{% endtab %}
{% endtabs %}

This is the content of the first tab.
This is the content of the second tab.
This is the content of the third tab.

Diagrams

You can add Mermaid or PlantUML diagrams. They are centered by default.

Note for the following examples, you need 3 leading backticks instead of 2. We’re only showing 2 here because there is no way to escape this properly. If this is unclear, just look at the .md file.

Mermaid

Mermaid diagrams via:

``mermaid!
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
``

PlantUML

PlantUML diagrams via:

``plantuml!
Bob -> Alice : hello world
``

Icons

Search for them on font awesome. Then add them via html:

<i class="fa fa-tools"></i>

<i class="fa fa-hammer"></i>

Emojis

Any Github emoji can be used:

I give this page two

Happy clown –> 🤡

Variable length / width cell tables

For more information, see the Jekyll Spaceship documentation

Normal markdown tables work but you can also combine lines (via the trailing backslash):

| : Easy Multiline : |        |           |
| :----------------- | :----- | :-------- |
| Apple              | Banana | Orange \  |
| Apple              | Banana | Orange \  |
| Apple              | Banana | Orange    |
| Apple              | Banana | Orange \  |
| Apple              | Banana | Orange    |
| Apple              | Banana | Orange    |

Easy Multiline
Apple Apple Apple	Banana Banana Banana	Orange Orange Orange
Apple Apple	Banana Banana	Orange Orange
Apple	Banana	Orange

or combine individual vertical cells (via ^^) or horizontal cells (via omitting the | separator)

|              Stage | Direct Products | ATP Yields |
| -----------------: | --------------: | ---------: |
|         Glycolysis |           2 ATP              |
|                 ^^ |          2 NADH |   3--5 ATP |
| Pyruvaye oxidation |          2 NADH |      5 ATP |
|  Citric acid cycle |           2 ATP |            |
|                 ^^ |          6 NADH |     15 ATP |
|                 ^^ |          2 FADH |      3 ATP |
|         30--32 ATP |                              |

Stage	Direct Products	ATP Yields
Glycolysis	2 ATP
Glycolysis	2 NADH	3–5 ATP
Pyruvaye oxidation	2 NADH	5 ATP
Citric acid cycle	2 ATP
	6 NADH	15 ATP
	2 FADH	3 ATP
30–32 ATP

Figures

Use the figure include. Optional parameters are:

alt: alternate text if image is not found
size (percentage)
caption

Remote:

{% include figure image_path="https://raw.githubusercontent.com/gopro/gpmf-parser/master/docs/readmegfx/CameraIMUOrientationSM.png" alt="GoPro Logo" size="50%" caption="This is a figure caption." %}

This is a figure caption.

Local:

{% include figure image_path="/assets/images/logos/logo.png" alt="GoPro Logo" size="50%" caption="This is a figure caption." %}

This is a figure caption.

Galleries are also possible