Academy on Example Academy

Alert

Mon, 01 Jan 0001 00:00:00 +0000

The academy-theme alert shortcode renders a styled alert box. The type parameter controls the color and icon.

{{< alert type="note" title="Note" >}}Alert content with **Markdown** support.{{< /alert >}}

Parameters:

Parameter	Description	Default
`type`	Alert style: `note`, `info`, `danger`, `warning`	(none)
`title`	Optional title above the alert body	(none)

Examples:

Note

A plain alert with a title.

Note

This alert supports a title and Markdown.

Info

This is an informational alert.

Danger

This is a danger alert.

Warning

This is a warning alert.

Alert (Docsy)

Mon, 01 Jan 0001 00:00:00 +0000

The Docsy alert shortcode renders a colored alert box. The academy-theme overrides this shortcode, so invoking alert will use the academy-theme implementation. This page demonstrates the Docsy color parameter syntax.

{{< alert color="info" title="Info alert" >}}Alert content here.{{< /alert >}}

Parameters:

Parameter	Description	Default
`color`	Bootstrap color: `primary`, `secondary`, `success`, `danger`, `warning`, `info`	(none)
`title`	Optional title text	(none)

Example:

Docsy alert

This block uses the Docsy-style color parameter.

Callout

Mon, 01 Jan 0001 00:00:00 +0000

Callouts highlight important information with a colored left border and an icon. Five types are supported: default (green), info (blue), warning (orange), error (red), and important (teal).

{{< hextra/callout type="info" >}}
Your message here. Supports **Markdown**.
{{< /hextra/callout >}}

Parameters:

Parameter	Description	Default
`type`	Callout style: `default`, `info`, `warning`, `error`, `important`	`default`
`emoji`	Optional emoji to replace the icon (e.g., `"🚀"`)	(none)

Examples:

This is a default callout. It uses a light-bulb icon and green styling.

This is an info callout. Use it to surface supplementary context.

This is a warning callout. Draw attention to potential issues.

This is an error callout. Indicate something that went wrong.

This is an important callout. Emphasize critical information.

🚀

You can use an emoji instead of the default icon.

Exam 1

Mon, 01 Jan 0001 00:00:00 +0000

Figure

Mon, 01 Jan 0001 00:00:00 +0000

{{< figure src="/examples/images/exoscale-icon.png" alt="Exoscale icon" caption="Caption text." >}}

Example:

A Hugo figure shortcode rendering a static image.

Cards

Mon, 01 Jan 0001 00:00:00 +0000

Cards display content in a responsive grid. Wrap individual hextra/card shortcodes inside a hextra/cards container.

{{< hextra/cards cols="3" >}}
 {{< hextra/card link="https://example.com" title="Title" subtitle="Description" icon="document-text" >}}
 {{< hextra/card title="No link" subtitle="This card is not clickable." >}}
{{< /hextra/cards >}}

Container parameters (hextra/cards):

Parameter	Description	Default
`cols`	Number of columns at the `lg` breakpoint	`3`

Card parameters (hextra/card):

Parameter	Description	Default
`title`	Card heading	(required)
`subtitle`	Description text below the title	(none)
`link`	URL the card links to	(none)
`icon`	Icon name from `data/hextra/icons.yaml`	(none)
`image`	Image URL or page-bundle path	(none)
`tag`	Badge text shown in the top-right corner	(none)
`tagColor`	Bootstrap color name for the tag badge	`secondary`

Three-column grid:

Highlight

Mon, 01 Jan 0001 00:00:00 +0000

{{< highlight go "linenos=table,hl_lines=3" >}}
package main
import "fmt"
func main() { fmt.Println("hello") }
{{< /highlight >}}

Example:

1
2
3
4
5
6
7


package main

import "fmt"

func main() {
 fmt.Println("hello from the highlight shortcode")
}

Pageinfo (Docsy)

Mon, 01 Jan 0001 00:00:00 +0000

The Docsy pageinfo shortcode renders a colored page-level info box. The academy-theme overrides this shortcode.

{{< pageinfo color="primary" >}}Notice content here.{{< /pageinfo >}}

Parameters:

Parameter	Description	Default
`color`	Bootstrap color name	(none)

Example:

This block uses the Docsy implementation of `pageinfo` with `color="primary"`.

Blocks Cover and Link Down

Mon, 01 Jan 0001 00:00:00 +0000

{{< blocks/cover title="Cover Title" subtitle="Subtitle" color="dark" height="min" >}}
Cover content here.
{{< blocks/link-down color="info" >}}
{{< /blocks/cover >}}

Example:

Docsy Cover Block

Hero Example

This cover block uses page resources named background and logo.

Details (Collapsible)

Mon, 01 Jan 0001 00:00:00 +0000

The academy-theme details shortcode renders a collapsible content block.

{{< details summary="Click to expand" open="true" >}}
Collapsed content here. Supports **Markdown**.
{{< /details >}}

Parameters:

Parameter	Description	Default
`summary`	Clickable summary text	(empty)
`open`	Set to `"true"` to start expanded	collapsed

Expanded by default:

Academy theme details (open)

This is the academy-theme implementation of the details shortcode. It starts expanded because open="true" is set.

Supports Markdown formatting
Lists, code, and emphasis all render correctly

Collapsed by default:

Details

Mon, 01 Jan 0001 00:00:00 +0000

A collapsible content block built on the native HTML <details> element with card styling and a rotating chevron indicator.

{{< hextra/details title="Click to expand" >}}
Hidden content here. Supports **Markdown**.
{{< /hextra/details >}}

Parameters:

Parameter	Description	Default
`title`	Summary text (supports Markdown)	(empty)
`closed`	Set to `"true"` to render collapsed	open

Open by default:

Click to expand this section

Here is the hidden content revealed when the summary is clicked.

Hugo Details

Mon, 01 Jan 0001 00:00:00 +0000

{{% details summary="Click to expand" open=true %}}
Collapsible content here.
{{% /details %}}

Example:

Hugo built-in details

This content is rendered through the built-in Hugo details behavior.

Blocks Lead

Mon, 01 Jan 0001 00:00:00 +0000

{{< blocks/lead color="primary" height="min" >}}
Lead section content here.
{{< /blocks/lead >}}

Example:

This is a live `blocks/lead` example.

Pageinfo

Mon, 01 Jan 0001 00:00:00 +0000

The academy-theme pageinfo shortcode renders a page-level notice box.

{{< pageinfo >}}Notice content with **Markdown** support.{{< /pageinfo >}}

Example:

This block uses the academy-theme implementation of `pageinfo`. It is useful for rendering page-level status notices, such as deprecation warnings or draft indicators.

Param

Mon, 01 Jan 0001 00:00:00 +0000

{{< param "title" >}}

Example:

Current page title from front matter: Param

Steps

Mon, 01 Jan 0001 00:00:00 +0000

Numbered step lists rendered with CSS counters. Place h3–h6 headings inside the shortcode body — each heading becomes a numbered step.

{{< hextra/steps >}}

### First step
Description of the first step.

### Second step
Description of the second step.

{{< /hextra/steps >}}

Example:

Clone the repository 🔗

git clone https://github.com/layer5io/academy-example.git

Install dependencies 🔗

npm install

Start the development server 🔗

hugo server -D

Blocks Section and Feature

Mon, 01 Jan 0001 00:00:00 +0000

{{< blocks/section color="light" type="container" >}}
 {{< blocks/feature icon="fa-layer-group" title="Title" >}}Description.{{< /blocks/feature >}}
{{< /blocks/section >}}

Example:

Reusable

Use shortcodes to compose reusable content patterns.

Declarative

Keep formatting examples inside Markdown instead of hard-coding HTML everywhere.

Documented

This page shows how each shortcode behaves when rendered.

Chapterstyle

Mon, 01 Jan 0001 00:00:00 +0000

The chapterstyle shortcode wraps content in a <div> with custom inline styles, useful for visually distinguishing chapter or section blocks.

{{% chapterstyle style="padding: 1rem; border: 1px solid #d0d7de; border-radius: 0.75rem; background: #f8fafc;" %}}
Your styled content here.
{{% /chapterstyle %}}

Parameters:

Parameter	Description	Default
`style`	CSS style string applied to the wrapper `<div>`	(none)

Example:

This content is wrapped by the chapterstyle shortcode. The border, padding, and background color are applied via the style parameter. This shortcode is useful for visually grouping related content into a styled container.

Comment

Mon, 01 Jan 0001 00:00:00 +0000

The comment shortcode hides content from the rendered output. It acts as an invisible annotation — useful for leaving notes in Markdown that readers won’t see.

{{< comment >}}This text is hidden from the rendered page.{{< /comment >}}

Example:

Visible text before the comment. Visible text after the comment.

The text between the comment shortcode tags above is not rendered. View the page source to confirm.

QR

Mon, 01 Jan 0001 00:00:00 +0000

{{< qr text="https://example.com" alt="QR code description" />}}

Example:

Tabs

Mon, 01 Jan 0001 00:00:00 +0000

Tabbed interfaces powered by Bootstrap 5 nav-tabs. Each hextra/tab is nested inside a hextra/tabs container. Tabs support cross-page sync via localStorage when tabs share the same names.

{{< hextra/tabs >}}
 {{< hextra/tab name="Tab One" >}}Content for tab one.{{< /hextra/tab >}}
 {{< hextra/tab name="Tab Two" >}}Content for tab two.{{< /hextra/tab >}}
{{< /hextra/tabs >}}

Tab parameters (hextra/tab):

Parameter	Description	Default
`name`	Tab label	`Tab <N>`
`selected`	Set to `"true"` to pre-select this tab	`false`

Code samples across languages:

Card

Mon, 01 Jan 0001 00:00:00 +0000

{{% card header="Card Header" title="Card title" footer="Card footer" %}}
Card body content here.
{{% /card %}}

Example:

Docsy Card

Single card example

This is a rendered Docsy card shortcode.

Card footer

Conditional Text

Mon, 01 Jan 0001 00:00:00 +0000

The conditional-text shortcode renders content only when the include-if value matches the site’s params.buildCondition. This is useful for showing content specific to certain build environments or feature flags.

{{< conditional-text include-if="examples" >}}
This text only appears when buildCondition is set to "examples".
{{< /conditional-text >}}

Parameters:

Parameter	Description	Default
`include-if`	Condition string to match against `params.buildCondition`	(required)

Example:

If the text above is not visible, the site’s params.buildCondition does not match "examples".

File Tree

Mon, 01 Jan 0001 00:00:00 +0000

An interactive file tree with expandable/collapsible folders. Compose three shortcodes: hextra/filetree/container, hextra/filetree/folder, and hextra/filetree/file.

{{< hextra/filetree/container >}}
 {{< hextra/filetree/folder name="src" >}}
 {{< hextra/filetree/file name="main.go" >}}
 {{< /hextra/filetree/folder >}}
 {{< hextra/filetree/file name="README.md" >}}
{{< /hextra/filetree/container >}}

Folder parameters:

Parameter	Description	Default
`name`	Folder name	(required)
`state`	`"open"` or `"closed"`	`open`

Example:

- - _index.md
  - getting-started.md
- - _index.md
  - first-post.md
- baseof.html
- index.html
hugo.yaml
package.json

Image

Mon, 01 Jan 0001 00:00:00 +0000

{{< image src="/examples/images/exoscale-icon.png" alt="Alt text" title="Title" width="140px" radius="12%" >}}

Example:

Theme image shortcode

Exoscale icon displayed with the academy-theme image shortcode

Ref

Mon, 01 Jan 0001 00:00:00 +0000

[Link text]({{< ref "/content-formatting-examples" >}})

Example:

Absolute link to this section: Content formatting examples

Badge

Mon, 01 Jan 0001 00:00:00 +0000

Inline badges with color variants. Supports both positional and named parameter forms.

{{< hextra/badge "Simple badge" >}}
{{< hextra/badge content="Styled" color="green" link="https://example.com" icon="document-text" >}}

Parameters:

Parameter	Description	Default
`content`	Badge text (or use positional param)	(required)
`color`	Color: `gray`, `green`, `blue`, `yellow`, `red`, `purple`, `orange`, `indigo`, `amber`	`gray`
`link`	Optional URL to wrap the badge as a link	(none)
`icon`	Optional icon name from `data/hextra/icons.yaml`	(none)

Color variants:

Default Success Info Warning Error Important Amber

Cardpane

Mon, 01 Jan 0001 00:00:00 +0000

{{% cardpane %}}
 {{% card header="Step 1" %}}First card content.{{% /card %}}
 {{% card header="Step 2" %}}Second card content.{{% /card %}}
{{% /cardpane %}}

Example:

Step 1

Install prerequisites.

Step 2

Configure the environment.

Step 3

Run the validation command.

Relref

Mon, 01 Jan 0001 00:00:00 +0000

[Link text]({{< relref "/content-formatting-examples" >}})

Example:

Relative link to this section: Content formatting examples

SVG

Mon, 01 Jan 0001 00:00:00 +0000

The svg shortcode renders an inline SVG icon from assets/icons/{name}.svg.

{{< svg name="layer5-academy-icon" >}}

Parameters:

Parameter	Description	Default
`name`	SVG file name (without extension) from `assets/icons/`	(required)

Example:

The icon renders inline:

Icon

Mon, 01 Jan 0001 00:00:00 +0000

Renders an inline SVG icon from data/hextra/icons.yaml. Useful for embedding icons in running text.

{{< hextra/icon "light-bulb" >}}

Available icons:

Here are a few icons inline: light-bulb, information-circle, exclamation, folder, document-text.

Iframe

Mon, 01 Jan 0001 00:00:00 +0000

{{< iframe src="/examples/frame-example.html" style="min-height: 18rem;" >}}

Example:

Your browser can not display embedded frames. You can access the embedded page via the following link: /examples/frame-example.html

Version

Mon, 01 Jan 0001 00:00:00 +0000

The version shortcode renders a styled version label.

{{< version color="Theme version label:" >}} academy-theme sample output{{< /version >}}

Example:

Theme version label: academy-theme sample output

Vimeo

Mon, 01 Jan 0001 00:00:00 +0000

{{< vimeo 19899678 >}}

Example:

YouTube

Mon, 01 Jan 0001 00:00:00 +0000

{{< youtube 0RKpf3rK57I >}}

Example:

CSV Table

Mon, 01 Jan 0001 00:00:00 +0000

The csvtable shortcode reads static/data/csv/keys-backup.csv and renders a permissions table grouped by category. Each role column shows a check or cross indicator.

{{< csvtable >}}

The CSV file must be located at static/data/csv/keys-backup.csv and contain columns for Category, Function, Feature, and various role names.

Example:

Designs Permissions

Designs	Design	Create and edit cloud native designs	X	X	X	X	X	X	X	KC001	K001	2024-01-01	true
Designs	Design	Delete designs	✅	❌	✅	❌	✅	❌	✅	KC001	K002	2024-01-01	true
Designs	Design	Share designs with team	✅	✅	✅	✅	✅	✅	✅	KC001	K003	2024-01-01	true

Environments Permissions

Designs	Design	Create and edit cloud native designs	X	X	X	X	X	X	X	KC001	K001	2024-01-01	true
Environments	Environment	Create environments	✅	✅	✅	❌	✅	❌	✅	KC002	K004	2024-01-15	true
Environments	Environment	Delete environments	✅	❌	✅	❌	✅	❌	✅	KC002	K005	2024-01-15	true
Environments	Environment	View environment details	✅	✅	✅	✅	✅	✅	✅	KC002	K006	2024-01-15	true

Connections Permissions

Designs	Design	Create and edit cloud native designs	X	X	X	X	X	X	X	KC001	K001	2024-01-01	true
Connections	Connection	Register connections	✅	❌	✅	❌	✅	❌	✅	KC003	K007	2024-02-01	true
Connections	Connection	Test connections	✅	✅	✅	✅	✅	✅	✅	KC003	K008	2024-02-01	true
Connections	Connection	Delete connections	✅	❌	✅	❌	✅	❌	✅	KC003	K009	2024-02-01	true

Imgproc

Mon, 01 Jan 0001 00:00:00 +0000

{{< imgproc "logo" Resize "160x" >}}Caption text.{{< /imgproc >}}

Example:

This image was processed from a page resource using the Docsy `imgproc` shortcode.

PDF

Mon, 01 Jan 0001 00:00:00 +0000

Embeds a PDF file in a responsive iframe.

{{< hextra/pdf "sample.pdf" >}}

Parameters:

Parameter	Description	Default
positional	Path to the PDF file (page resource, asset, or absolute path)	(required)

Example:

X (Twitter)

Mon, 01 Jan 0001 00:00:00 +0000

{{< x user="SanDiegoZoo" id="1453110110599868418" >}}

Example:

Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC
— San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021

CSV Table Roles

Mon, 01 Jan 0001 00:00:00 +0000

The csvtable-roles shortcode reads static/data/csv/keys-backup.csv and renders per-role permission tables showing which functions each role has access to.

{{< csvtable-roles >}}

The CSV file must be located at static/data/csv/keys-backup.csv with the same format used by csvtable.

Example:

X Role

Permission	Description

KC001 Role

Permission	Description

K001 Role

Permission	Description

2024-01-01 Role

Permission	Description

true Role

Permission	Description

Include

Mon, 01 Jan 0001 00:00:00 +0000

Includes the rendered content of another page inline. This shortcode must use the percent-delimiter syntax.

{{% hextra/include "include-snippet" %}}

Parameters:

Parameter	Description	Default
positional	Page path relative to the content directory	(required)

Example (included from a separate page):

This paragraph was pulled in from a separate page using the hextra/include shortcode. It demonstrates how you can compose content from multiple sources into a single page.

Included content supports full Markdown formatting.
Lists, code, and emphasis all render correctly.

Instagram

Mon, 01 Jan 0001 00:00:00 +0000

{{< instagram CxOWiQNP2MO >}}

Example:

View this post on Instagram

Redoc

Mon, 01 Jan 0001 00:00:00 +0000

{{< redoc "examples/openapi/example.json" >}}

Example:

Lab Intro

Mon, 01 Jan 0001 00:00:00 +0000

The lab-intro shortcode captures its inner content and stores it on the page scratch pad under the key lab_intro. This allows layout templates to retrieve and display lab introduction text in a dedicated section of the page.

{{% lab-intro %}}
Welcome to this hands-on lab. In this exercise, you will learn how to deploy a cloud native application using Kubernetes. By the end of this lab, you will be able to create a cluster, deploy workloads, and expose services.
{{% /lab-intro %}}

Example:

SwaggerUI

Mon, 01 Jan 0001 00:00:00 +0000

{{< swaggerui src="/examples/openapi/example.json" >}}

Example:

Term

Mon, 01 Jan 0001 00:00:00 +0000

Wraps a glossary term in an <abbr> tooltip. Hover over the highlighted terms below to see their definitions. Definitions are sourced from data/<lang>/termbase.yaml.

{{< hextra/term "API" >}}

Parameters:

Parameter	Description	Default
`entry`	Glossary abbreviation or full term (named or positional)	(required)

To use this shortcode, create a termbase data file at data/en/termbase.yaml:

- abbr: API
 term: Application Programming Interface
 definition: A set of protocols for building software.

Examples:

Hugo is an SSG that can be controlled via its CLI . Configuration is written in YAML and sites are commonly served through a CDN . Most projects use a CI/CD pipeline to deploy changes automatically. The theme exposes a rich API of shortcodes and partials.

Jupyter

Mon, 01 Jan 0001 00:00:00 +0000

Renders a Jupyter Notebook (.ipynb) as code blocks and Markdown cells.

{{% hextra/jupyter "example-notebook.ipynb" %}}

Parameters:

Parameter	Description	Default
positional	Path or URL to the `.ipynb` file	(required)
`allowUnsafeHTML`	Set to `"true"` to render raw HTML from notebook outputs	`false`
`filename`	Optional filename to display as a header	(none)

Example:

Sample Notebook 🔗

This Jupyter notebook demonstrates how the hextra/jupyter shortcode renders notebook cells. It supports Markdown cells, code cells with syntax highlighting, and cell outputs.

Meshery Design Embed

Mon, 01 Jan 0001 00:00:00 +0000

{{< meshery-design-embed
 id="embedded-design-c811e9f4-2522-4eb6-b775-7475545356d8"
 src="./embedded-design-deploy-meshery-using-meshery.js"
>}}

Example:

Open Design

Tabpane and Tab

Mon, 01 Jan 0001 00:00:00 +0000

{{< tabpane text=true >}}
 {{% tab header="Tab 1" lang="en" %}}Tab content.{{< /tab >}}
 {{% tab header="Tab 2" lang="en" %}}More content.{{< /tab >}}
{{< /tabpane >}}

Example:

This is the first rendered tab.

Asciinema

Mon, 01 Jan 0001 00:00:00 +0000

Embeds an asciinema terminal recording player. The player CSS/JS is loaded from CDN automatically when this shortcode is used.

{{< hextra/asciinema file="demo.cast" >}}

Parameters:

Parameter	Description	Default
`file`	Path or URL to the `.cast` file (also accepts positional param)	(required)
`theme`	Player color theme	`asciinema`
`speed`	Playback speed multiplier	`1`
`autoplay`	Auto-play on load	`false`
`loop`	Loop playback	`false`
`poster`	Poster/thumbnail specification	(none)
`markers`	Comma-separated time markers (e.g., `"5:Intro,10:Demo"`)	(none)
`filename`	Optional filename to display as a header	(none)

Example:

TabPanel

Mon, 01 Jan 0001 00:00:00 +0000

{{< tabpane text=true >}}
 {{% tab header="Example 1" lang="en" active="true" %}}
 First tab content.
 {{< /tab >}}
 {{% tab header="Example 2" lang="en" %}}
 Second tab content.
 {{< /tab >}}
{{< /tabpane >}}

Example:

Tabs help organize related content.

Code

Mon, 01 Jan 0001 00:00:00 +0000

This is a code block.

Code block with filename 🔗

package main
import "fmt"
func main() { fmt.Println("hello") }

Inline code like var foo = "bar"; is supported.

Course Test

Mon, 01 Jan 0001 00:00:00 +0000

Course Test

Mon, 01 Jan 0001 00:00:00 +0000

Embedded Design

Mon, 01 Jan 0001 00:00:00 +0000

The meshery-design-embed shortcode renders an interactive Meshery design diagram.

{{< meshery-design-embed
 id="embedded-design-c811e9f4-2522-4eb6-b775-7475545356d8"
 src="./embedded-design-deploy-meshery-using-meshery.js"
>}}

The rendered output is shown below:

Open Design

Learn more about embedded designs.

Footnotes

Mon, 01 Jan 0001 00:00:00 +0000

This is a superscript number for your footnote. ¹

This is a footnote. ↩︎

Image Styling

Mon, 01 Jan 0001 00:00:00 +0000

By default, Markdown images are written like this:

![Alt text](/path/to/image.png)

These are rendered with:

max-width: 70% of the viewport
max-height: 80vh of the viewport height
centered block layout

This default styling works well for most landscape (horizontal) images. However, if an image is very tall, narrow, or otherwise looks awkward, you can override the default by embedding raw HTML and specifying a custom size:

<img src="./images/example.png" alt="Example description"
style="max-width: 40vw; max-height: 60vh; display: block; margin: 1rem auto;" />

Learning Path Exam

Mon, 01 Jan 0001 00:00:00 +0000

Lists

Mon, 01 Jan 0001 00:00:00 +0000

Unordered:

Liverpool F.C.
Chelsea F.C.
Manchester United F.C.

Ordered:

Michael Brecker
Seamus Blake
Branford Marsalis

Task list:

Create a Hugo theme
Add task lists to it
Take a vacation

Local Video

Mon, 01 Jan 0001 00:00:00 +0000

The local-video shortcode embeds an HTML5 <video> player for a locally hosted video file.

{{< local-video src="/path/to/video.mp4" muted="true" autoplay="true" loop="true" >}}

Parameters:

Parameter	Description	Default
`src`	Path to the video file	(required)
`muted`	Mute the video	`false`
`autoplay`	Auto-play the video	`false`
`loop`	Loop playback	`false`

Sample video not included

This shortcode requires a locally hosted .mp4 video file. Add your video to static/examples/ and update the src path.

Markdown Basics

Mon, 01 Jan 0001 00:00:00 +0000

Text can be bold, italic, or ~~strikethrough~~. Links have no underline (unless hovered).

Blockquotes are lighter with a left border.

Module Quiz

Mon, 01 Jan 0001 00:00:00 +0000

Module Quiz

Mon, 01 Jan 0001 00:00:00 +0000

Readfile

Mon, 01 Jan 0001 00:00:00 +0000

The readfile shortcode includes the contents of a file inline. When code="true" is set, the contents are rendered inside a code block.

{{< readfile file="/static/examples/openapi/example.json" code="true" lang="json" >}}

{
 "openapi": "3.0.0",
 "info": {
 "title": "Example Academy API",
 "version": "1.0.0",
 "description": "A sample API specification for demonstrating the Redoc and SwaggerUI shortcodes."
 },
 "paths": {
 "/api/courses": {
 "get": {
 "summary": "List courses",
 "description": "Returns a list of all available courses.",
 "responses": {
 "200": {
 "description": "A list of courses.",
 "content": {
 "application/json": {
 "schema": {
 "type": "array",
 "items": {
 "$ref": "#/components/schemas/Course"
 }
 }
 }
 }
 }
 }
 }
 },
 "/api/courses/{id}": {
 "get": {
 "summary": "Get a course",
 "description": "Returns a single course by ID.",
 "parameters": [
 {
 "name": "id",
 "in": "path",
 "required": true,
 "schema": { "type": "string" }
 }
 ],
 "responses": {
 "200": {
 "description": "A course object.",
 "content": {
 "application/json": {
 "schema": { "$ref": "#/components/schemas/Course" }
 }
 }
 },
 "404": { "description": "Course not found." }
 }
 }
 }
 },
 "components": {
 "schemas": {
 "Course": {
 "type": "object",
 "properties": {
 "id": { "type": "string", "example": "cloud-101" },
 "title": { "type": "string", "example": "Cloud Fundamentals" },
 "description": { "type": "string", "example": "An introduction to cloud computing concepts." },
 "duration": { "type": "string", "example": "2 hours" }
 }
 }
 }
 }
}

Responsive Images

Mon, 01 Jan 0001 00:00:00 +0000

Small images should be shown at their actual size.

Large images should always scale down and fit in the content container.

The photo above of the Spruce Picea abies shoot with foliage buds: Bjørn Erik Pedersen, CC-BY-SA.

Tables

Mon, 01 Jan 0001 00:00:00 +0000

Artist	Album	Year
Michael Jackson	Thriller	1982
Prince	Purple Rain	1984
Beastie Boys	License to Ill	1986

Inline code inside table cells:

Language	Code
JavaScript	`var foo = "bar";`
Ruby	`foo = "bar"`

Usestatic

Mon, 01 Jan 0001 00:00:00 +0000

The usestatic shortcode resolves a tenant-scoped static file path, prefixing it with the organization UUID configured in params.defined_org.

{{< usestatic "images/exoscale-icon.png" >}}

Resolved tenant-scoped static path: /academy-theme/images/exoscale-icon.png