Add example OpenAPI document, iframe example, video file, and keys backup CSV

Makefile

@@ -37,6 +37,7 @@ build-preview:
 ## Empty build cache and run on your local machine.
 clean: 
 	hugo --cleanDestinationDir
+	make setup
 	make site
 
 ## Fix Markdown linting issues

content/content-formatting-examples/_index.md

@@ -0,0 +1,105 @@
+---
+title: Content Formatting Examples
+weight: 5
+description: A collection of shortcode examples for formatting content, from basic Markdown text to advanced custom components.
+draft: true
+---
+
+{{< alert type="danger" title="Example Page: Not for Production" >}}
+This page will not be published in the [production version](https://cloud.layer5.io/academy/) of your Academy site. It is only visible for local preview (`draft: true`) and serves as a reference. You can safely delete this page from your repository at any time.
+{{< /alert >}}
+
+The Layer5 Academy platform supports a wide range of shortcodes for enriching your learning content. Shortcodes are reusable template snippets you invoke in Markdown files to generate HTML output.
+
+Using a shortcode looks like this:
+
+```code
+  { {% shortcode-name %}}
+```
+
+Shortcodes come from three sources:
+
+1. **Academy Theme** — shortcodes built specifically for the Layer5 Academy ([academy-theme repo](https://github.com/layer5io/academy-theme)).
+2. **Docsy Theme** — shortcodes inherited from the [Google Docsy](https://www.docsy.dev/) documentation theme.
+3. **Hugo Built-in** — shortcodes included with the [Hugo](https://gohugo.io/) static site generator.
+
+For guidance on creating your own custom shortcodes, see [Extending the Academy](/cloud/academy/creating-content/extending-the-academy/).
+
+The shortcode name is the file name (minus the `.html`) in `layouts/shortcodes/your-org-uuid`.
+
+## Browse examples
+
+Each example now lives in its own content file so you can inspect and reuse it independently.
+
+The academy theme overrides the Docsy `alert` and `pageinfo` shortcodes, and it also overrides Hugo's built-in `details` shortcode. The dedicated example pages for those overridden implementations use local demo aliases: `docsy-alert`, `docsy-pageinfo`, and `hugo-details`.
+
+The `lab-intro` shortcode stores content for lab layouts instead of writing output directly, so its dedicated example page uses a small local helper to preview the stored value.
+
+### Hugo built-in shortcodes
+
+* [Hugo Details](./hugo-details/)
+* [Figure](./figure/)
+* [Highlight](./highlight/)
+* [Instagram](./instagram/)
+* [Param](./param/)
+* [QR](./qr/)
+* [Ref](./ref/)
+* [Relref](./relref/)
+* [Vimeo](./vimeo/)
+* [X](./x/)
+* [YouTube](./youtube/)
+
+### Docsy shortcodes
+
+* [Docsy Alert](./docsy-alert/)
+* [Blocks Cover and Link Down](./blocks-cover-link-down/)
+* [Blocks Lead](./blocks-lead/)
+* [Blocks Section and Feature](./blocks-section-feature/)
+* [Card](./card/)
+* [Cardpane](./cardpane/)
+* [Comment](./comment/)
+* [Conditional Text](./conditional-text/)
+* [Iframe](./iframe/)
+* [Imgproc](./imgproc/)
+* [Docsy Pageinfo](./docsy-pageinfo/)
+* [Readfile](./readfile/)
+* [Redoc](./redoc/)
+* [SwaggerUI](./swaggerui/)
+* [Tabpane and Tab](./tabpane-tab/)
+
+### Layer5 Academy theme shortcodes
+
+* [Theme Alert](./theme-alert/)
+* [Chapterstyle](./chapterstyle/)
+* [CSV Table](./csvtable/)
+* [CSV Table Roles](./csvtable-roles/)
+* [Theme Details](./theme-details/)
+* [Image](./image/)
+* [Lab Intro](./lab-intro/)
+* [Local Video](./local-video/)
+* [Meshery Design Embed](./meshery-design-embed/)
+* [Theme Pageinfo](./theme-pageinfo/)
+* [SVG](./svg/)
+* [Usestatic](./usestatic/)
+* [Version](./version/)
+
+### Repository-local organization shortcode
+
+* [Custom Organization Shortcode](./custom-org-shortcode/)
+
+## Markdown
+
+* [Markdown Basics](./markdown-basics/)
+* [Image Styling](./image-styling/)
+* [Code](./code/)
+* [Lists](./lists/)
+* [Tables](./tables/)
+* [Responsive Images](./responsive-images/)
+
+## Components
+
+* [Embedded Design](./embedded-design/)
+* [Alerts](./alerts/)
+* [TabPanel](./tabpanel/)
+* [Collapsible](./collapsible/)
+* [Footnotes](./footnotes/)

content/content-formatting-examples/alerts.md

@@ -0,0 +1,13 @@
+---
+title: Alerts
+linkTitle: Alerts
+weight: 345
+description: Examples of the alert shortcode variants.
+draft: true
+---
+
+{{< alert title="Note" >}}A plain alert with a title.{{< /alert >}}
+{{< alert type="note" title="Note" >}}This alert supports a title and **Markdown**.{{< /alert >}}
+{{< alert type="info" title="Info" >}}This is an informational alert.{{< /alert >}}
+{{< alert type="danger" title="Danger" >}}This is a danger alert.{{< /alert >}}
+{{< alert type="warning" title="Warning" >}}This is a warning alert.{{< /alert >}}

content/content-formatting-examples/blocks-cover-link-down/index.md

@@ -0,0 +1,13 @@
+---
+title: Blocks Cover and Link Down
+linkTitle: Blocks Cover + Link Down
+weight: 115
+description: Render the Docsy blocks/cover shortcode together with blocks/link-down.
+draft: true
+---
+
+{{< blocks/cover title="Docsy Cover Block" subtitle="Hero Example" color="dark" height="min" >}}
+This cover block uses page resources named `background` and `logo`.
+
+{{< blocks/link-down color="info" >}}
+{{< /blocks/cover >}}

content/content-formatting-examples/blocks-lead.md

@@ -0,0 +1,11 @@
+---
+title: Blocks Lead
+linkTitle: Blocks Lead
+weight: 120
+description: Render the Docsy blocks/lead shortcode.
+draft: true
+---
+
+{{< blocks/lead color="primary" height="min" >}}
+This is a live `blocks/lead` example.
+{{< /blocks/lead >}}

content/content-formatting-examples/blocks-section-feature.md

@@ -0,0 +1,13 @@
+---
+title: Blocks Section and Feature
+linkTitle: Blocks Section + Feature
+weight: 125
+description: Render the Docsy blocks/section and blocks/feature shortcodes together.
+draft: true
+---
+
+{{< blocks/section color="light" type="container" >}}
+{{< blocks/feature icon="fa-layer-group" title="Reusable" >}}Use shortcodes to compose reusable content patterns.{{< /blocks/feature >}}
+{{< blocks/feature icon="fa-code" title="Declarative" >}}Keep formatting examples inside Markdown instead of hard-coding HTML everywhere.{{< /blocks/feature >}}
+{{< blocks/feature icon="fa-book" title="Documented" >}}This page shows how each shortcode behaves when rendered.{{< /blocks/feature >}}
+{{< /blocks/section >}}

content/content-formatting-examples/card.md

@@ -0,0 +1,11 @@
+---
+title: Card
+linkTitle: Card
+weight: 130
+description: Render the Docsy card shortcode.
+draft: true
+---
+
+{{% card header="Docsy Card" title="Single card example" footer="Card footer" %}}
+This is a rendered Docsy `card` shortcode.
+{{% /card %}}

content/content-formatting-examples/cardpane.md

@@ -0,0 +1,19 @@
+---
+title: Cardpane
+linkTitle: Cardpane
+weight: 135
+description: Render the Docsy cardpane shortcode with nested cards.
+draft: true
+---
+
+{{% cardpane %}}
+{{% card header="Step 1" %}}
+Install prerequisites.
+{{% /card %}}
+{{% card header="Step 2" %}}
+Configure the environment.
+{{% /card %}}
+{{% card header="Step 3" %}}
+Run the validation command.
+{{% /card %}}
+{{% /cardpane %}}

content/content-formatting-examples/chapterstyle.md

@@ -0,0 +1,11 @@
+---
+title: Chapterstyle
+linkTitle: Chapterstyle
+weight: 215
+description: Render the academy-theme chapterstyle shortcode.
+draft: true
+---
+
+{{% chapterstyle style="padding: 1rem; border: 1px solid #d0d7de; border-radius: 0.75rem; background: #f8fafc;" %}}
+This content is wrapped by the `chapterstyle` shortcode.
+{{% /chapterstyle %}}

content/content-formatting-examples/code.md

@@ -0,0 +1,13 @@
+---
+title: Code
+linkTitle: Code
+weight: 320
+description: Code block and inline code examples.
+draft: true
+---
+
+```text
+This is a code block.
+```
+
+Inline code like `var foo = "bar";` is supported.

content/content-formatting-examples/collapsible.md

@@ -0,0 +1,17 @@
+---
+title: Collapsible
+linkTitle: Collapsible
+weight: 355
+description: Example of a collapsible details block.
+draft: true
+---
+
+{{< details summary="This is a collapsible title" >}}
+
+This is the collapsed content.
+
+It can be a list:
+
+* First item
+* Second item
+{{< /details >}}

content/content-formatting-examples/comment.md

@@ -0,0 +1,9 @@
+---
+title: Comment
+linkTitle: Comment
+weight: 140
+description: Render the Docsy comment shortcode.
+draft: true
+---
+
+Visible text before the comment shortcode. {{< comment >}}This sentence is intentionally hidden by the Docsy `comment` shortcode.{{< /comment >}} Visible text after the comment shortcode.

content/content-formatting-examples/conditional-text.md

@@ -0,0 +1,11 @@
+---
+title: Conditional Text
+linkTitle: Conditional Text
+weight: 145
+description: Render the Docsy conditional-text shortcode.
+draft: true
+---
+
+{{< conditional-text include-if="examples" >}}
+This sentence is rendered because `params.buildCondition` is set to `examples`.
+{{< /conditional-text >}}

content/content-formatting-examples/csvtable-roles.md

@@ -0,0 +1,9 @@
+---
+title: CSV Table Roles
+linkTitle: CSV Table Roles
+weight: 225
+description: Render the academy-theme csvtable-roles shortcode.
+draft: true
+---
+
+{{< csvtable-roles >}}

content/content-formatting-examples/csvtable.md

@@ -0,0 +1,9 @@
+---
+title: CSV Table
+linkTitle: CSV Table
+weight: 220
+description: Render the academy-theme csvtable shortcode.
+draft: true
+---
+
+{{< csvtable >}}

content/content-formatting-examples/custom-org-shortcode.md

@@ -0,0 +1,9 @@
+---
+title: Custom Organization Shortcode
+linkTitle: Custom Org Shortcode
+weight: 280
+description: Render the repository-local organization shortcode.
+draft: true
+---
+
+{{< 1e2a8e46-937c-47ea-ab43-5716e3bcab2e/custom-org-shortcode names="Exoscale Academy" >}}

content/content-formatting-examples/docsy-alert.md

@@ -0,0 +1,9 @@
+---
+title: Docsy Alert
+linkTitle: Docsy Alert
+weight: 110
+description: Render the Docsy alert shortcode through the local demo alias.
+draft: true
+---
+
+{{< docsy-alert color="info" title="Docsy alert" >}}This block uses the Docsy implementation of the `alert` shortcode.{{< /docsy-alert >}}

content/content-formatting-examples/docsy-pageinfo.md

@@ -0,0 +1,9 @@
+---
+title: Docsy Pageinfo
+linkTitle: Docsy Pageinfo
+weight: 160
+description: Render the Docsy pageinfo shortcode through the local demo alias.
+draft: true
+---
+
+{{< docsy-pageinfo color="primary" >}}This block uses the Docsy implementation of `pageinfo`.{{< /docsy-pageinfo >}}

content/content-formatting-examples/embedded-design.md

@@ -0,0 +1,23 @@
+---
+title: Embedded Design
+linkTitle: Embedded Design
+weight: 340
+description: Example of the meshery-design-embed component shortcode.
+draft: true
+---
+
+```code
+{{</* meshery-design-embed
+  id="embedded-design-c811e9f4-2522-4eb6-b775-7475545356d8"
+  src="/content-formatting-examples/embedded-design-deploy-meshery-using-meshery.js"
+*/>}}
+```
+
+The rendered output is shown below:
+
+{{< meshery-design-embed
+  id="embedded-design-c811e9f4-2522-4eb6-b775-7475545356d8"
+  src="/content-formatting-examples/embedded-design-deploy-meshery-using-meshery.js"
+>}}
+
+Learn more about embedded designs: [Meshery design embedding documentation](https://docs.layer5.io/kanvas/designer/embedding-designs/).

content/content-formatting-examples/figure.md

@@ -0,0 +1,9 @@
+---
+title: Figure
+linkTitle: Figure
+weight: 15
+description: Render the Hugo figure shortcode.
+draft: true
+---
+
+{{< figure src="/1e2a8e46-937c-47ea-ab43-5716e3bcab2e/images/exoscale-icon.png" alt="Exoscale icon" caption="A Hugo figure shortcode rendering a static image." >}}

content/content-formatting-examples/footnotes.md

@@ -0,0 +1,11 @@
+---
+title: Footnotes
+linkTitle: Footnotes
+weight: 360
+description: Example of Markdown footnotes.
+draft: true
+---
+
+This is a superscript number for your footnote. [^1]
+
+[^1]: This is a footnote.

content/content-formatting-examples/highlight.md

@@ -0,0 +1,17 @@
+---
+title: Highlight
+linkTitle: Highlight
+weight: 20
+description: Render the Hugo highlight shortcode.
+draft: true
+---
+
+{{< highlight go "linenos=table,hl_lines=3" >}}
+package main
+
+import "fmt"
+
+func main() {
+    fmt.Println("hello from the highlight shortcode")
+}
+{{< /highlight >}}

content/content-formatting-examples/hugo-details.md

@@ -0,0 +1,11 @@
+---
+title: Hugo Details
+linkTitle: Hugo Details
+weight: 10
+description: Render the Hugo built-in details shortcode.
+draft: true
+---
+
+{{% hugo-details summary="Hugo built-in details" open=true %}}
+This content is rendered through the built-in Hugo `details` behavior.
+{{% /hugo-details %}}