Merge pull request #119 from layer5io/examples

Shortcode examples

Author: carlosriosilva

.github/build/Makefile.core.mk

@@ -23,10 +23,9 @@ GIT_STRIPPED_VERSION=$(shell git describe --tags `git rev-list --tags --max-coun
 REMOTE_PROVIDER="Layer5"
 
 LOCAL_PROVIDER="None"
-GOVERSION = 1.23
+GOVERSION = 1.24.5
 GOPATH = $(shell go env GOPATH)
 GOBIN  = $(GOPATH)/bin
-KEYS_PATH="../../server/permissions/keys.csv"
 
 SHELL := /usr/bin/env bash -o pipefail
 
@@ -36,7 +35,7 @@ SHELL := /usr/bin/env bash -o pipefail
 # All Adapters
 # ADAPTER_URLS := "localhost:10000 localhost:10001 localhost:10002 localhost:10004 localhost:10005 localhost:10006 localhost:10007 localhost:10009 localhost:10010 localhost:10012"
 # No Adapters
-ADAPTER_URLS := "localhost:10000 localhost:10001 localhost:10012 localhost:10013"
+# ADAPTER_URLS := "localhost:10000 localhost:10001 localhost:10012 localhost:10013"
 
 #-----------------------------------------------------------------------------
 # Providers (Add your provider here. See https://docs.meshery.io/extensibility/providers)

.gitignore

@@ -24,3 +24,4 @@ public/
 resources/
 node_modules/
 .hugo_build.lock
+.DS_Store

assets/icons/exoscale-demo.svg

@@ -0,0 +1,43 @@
+---
+title: Content Formatting Examples
+weight: 5
+description: A collection of examples for formatting content, from basic Markdown text to advanced custom components and shortcodes.
+draft: true
+---
+
+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. They come from four sources:
+
+1. **Academy Theme** — custom shortcodes built specifically for the Academy platform.
+2. **Hextra** — shortcodes ported from the [Hextra](https://imfing.github.io/hextra/docs/guide/shortcodes/) Hugo theme, namespaced under `hextra/` to avoid conflicts.
+3. **Docsy Theme** — shortcodes inherited from the [Google Docsy](https://www.docsy.dev/) documentation theme.
+4. **Hugo Built-in** — shortcodes included with the [Hugo](https://gohugo.io/) static site generator.
+
+For guidance on creating your own shortcodes, see [Extending the Academy](/cloud/academy/creating-content/extending-the-academy/).
+
+{{< alert type="note" title="Example Page: Not for Production" >}}
+This page will not be published in the [production version](https://cloud.layer5.io/academy/) of the site. It is only visible for local preview and serves as a reference. You can safely delete this page from your repository at any time.
+{{< /alert >}}
+
+## Browse by category
+
+Each example lives in its own page so you can inspect and reuse it independently. Use the sidebar or the links below to navigate.
+
+### [Markdown](./markdown/)
+
+Standard Markdown formatting: text styles, code blocks, lists, tables, images, and footnotes.
+
+### [Hugo Built-in Shortcodes](./hugo-builtins/)
+
+Shortcodes included with Hugo: `figure`, `highlight`, `ref`, `relref`, `param`, `qr`, `details`, and embedded media (`youtube`, `vimeo`, `instagram`, `x`).
+
+### [Docsy Shortcodes](./docsy/)
+
+Shortcodes from the Google Docsy theme: alerts, page info, blocks (cover, lead, section, feature), cards, tabs, comments, conditional text, iframe, imgproc, readfile, and API docs (Redoc, SwaggerUI).
+
+### [Hextra Shortcodes](./hextra/)
+
+Shortcodes ported from the Hextra theme: callouts, cards, details, steps, tabs, file tree, badges, icons, PDF embed, page include, glossary terms, Jupyter notebooks, and asciinema recordings.
+
+### [Academy Theme Shortcodes](./academy-theme/)
+
+Custom shortcodes for the Academy platform: alerts, details, pageinfo, chapterstyle, image, SVG, local video, version labels, CSV tables, Meshery design embeds, and usestatic path resolution.

assets/icons/layer5-academy-icon.svg

@@ -0,0 +1,9 @@
+---
+title: Academy Theme Shortcodes
+linkTitle: Academy Theme
+description: Custom shortcodes built specifically for the Layer5 Academy platform.
+weight: 5
+draft: true
+---
+
+These shortcodes are built specifically for the [Layer5 Academy](https://github.com/layer5io/academy-theme) platform.

content/content-formatting-examples/_index.md

@@ -0,0 +1,32 @@
+---
+title: Alert
+linkTitle: Alert
+weight: 1
+description: Academy theme alert shortcode with multiple type variants.
+draft: true
+---
+
+The academy-theme `alert` shortcode renders a styled alert box. The `type` parameter controls the color and icon.
+
+```text
+{{</* 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:**
+
+{{< 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/academy-theme/_index.md

@@ -0,0 +1,27 @@
+---
+title: Chapterstyle
+linkTitle: Chapterstyle
+weight: 5
+description: Academy theme chapterstyle shortcode for custom section styling.
+draft: true
+---
+
+The `chapterstyle` shortcode wraps content in a `<div>` with custom inline styles, useful for visually distinguishing chapter or section blocks.
+
+```text
+{{%/* 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:**
+
+{{% chapterstyle style="padding: 1rem; border: 1px solid #d0d7de; border-radius: 0.75rem; background: #f8fafc;" %}}
+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.
+{{% /chapterstyle %}}

content/content-formatting-examples/academy-theme/alerts.md

@@ -0,0 +1,19 @@
+---
+title: CSV Table Roles
+linkTitle: CSV Table Roles
+weight: 10
+description: Academy theme csvtable-roles shortcode for role-specific permissions tables.
+draft: true
+---
+
+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.
+
+```text
+{{</* csvtable-roles */>}}
+```
+
+The CSV file must be located at `static/data/csv/keys-backup.csv` with the same format used by `csvtable`.
+
+**Example:**
+
+{{< csvtable-roles >}}

content/content-formatting-examples/academy-theme/chapterstyle.md

@@ -0,0 +1,19 @@
+---
+title: CSV Table
+linkTitle: CSV Table
+weight: 9
+description: Academy theme csvtable shortcode for rendering permissions tables from CSV data.
+draft: true
+---
+
+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.
+
+```text
+{{</* 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:**
+
+{{< csvtable >}}