Skip to content

Commit 2fdb31b

Browse files
Merge branch 'master' into chore/fix-dockerfile-lint
2 parents 56c585c + 0a0cc1b commit 2fdb31b

File tree

6 files changed

+230
-40
lines changed

6 files changed

+230
-40
lines changed

content/en/cloud/academy/creating-your-learning-path/images/embedded-design-academy-content-publishing-workflow.js

Lines changed: 150 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

content/en/cloud/academy/creating-your-learning-path/index.md

Lines changed: 76 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ categories: [Academy]
77
tags: [Designer]
88
---
99

10-
This guide provides a step-by-step walkthrough for creating and organizing a new learning path in the [Layer5 Academy](https://cloud.layer5.io/academy/overview). You'll learn how to set up your content repository, structure your courses, add assets, preview your work, and publish it for your organization.
10+
This guide provides a step-by-step walkthrough for creating and organizing a new learning path in the [Layer5 Academy](https://cloud.layer5.io/academy/content). You'll learn how to set up your content repository, structure your courses, add assets, preview your work, and publish it for your organization.
1111

1212
### Prerequisites
1313

@@ -74,10 +74,8 @@ You can find and copy your Organization UUID from your organization page on [Lay
7474
7575
1. `content/learning-paths/<your-organization-uid>/`
7676
This `content` directory is where all your written material lives. The folder hierarchy you create here directly defines the navigation and organization of your learning paths.
77-
2. `static/<your-organization-uid>/`
78-
This `static` directory is for all your assets, such as images, diagrams, and so on.
79-
3. `layouts/shortcodes/<your-organization-uid>/`
80-
This `layouts` directory is for advanced use. You can place custom **Hugo Shortcodes** here if you need special reusable components in your Chapters.
77+
2. `layouts/shortcodes/<your-organization-uid>/`
78+
This `layouts` directory is for advanced use. You can place custom **Hugo Shortcodes** here if you need special reusable components.
8179
8280
3. **Build the Content Hierarchy**
8381
@@ -97,6 +95,7 @@ You can find and copy your Organization UUID from your organization page on [Lay
9795
├── _index.md
9896
├── 01-pods.md // <-- Chapter 1
9997
└── 02-services.md // <-- Chapter 2
98+
└── arch.png // <-- Image
10099
```
101100
102101
Each folder represents a level in the hierarchy, and the `_index.md` file within a folder defines the metadata (like title and description) for that level. The final `.md` files are your individual Chapter.
@@ -109,48 +108,48 @@ You can find and copy your Organization UUID from your organization page on [Lay
109108
110109
```yaml
111110
---
112-
title: "Mastering Kubernetes for Engineers"
113-
description: "Learn how to configure your Kubernetes clusters and manage the lifecycle of your workloads"
114-
banner: null # Optional, URL to banner image
111+
title: "Advanced Course"
112+
description: "This ADVANCED - Course is where to get the technical knowledge."
113+
weight: 5
114+
banner: "images/exoscale-icon.svg"
115+
id: "754627a3-7993-4b01-a7f0-c66c0212a1a1"
116+
tags: [orchestration]
117+
categories: [introductory]
115118
---
116119
```
117120
118121
> Place this frontmatter in the Markdown file that represents the learning path index page.
119122
120123
**Course Frontmatter (Optional Individual Course Pages)**
121124
122-
If each course has its own markdown page, you can use this frontmatter:
125+
If each course has its own markdown page, you can use this frontmatter:
123126
124127
```yaml
125128
---
126-
title: "Kubernetes Basics"
127-
description: "Learn the basics of Kubernetes"
128-
weight: 1
129-
banner: null # Optional
129+
id: "Networks"
130+
title: "Networks"
131+
description: "This course clear your Network concept"
132+
weight: 2
133+
banner: "images/kubernetes-icon.svg"
134+
tags: [network]
135+
categories: [introductory]
130136
---
131137
```
132138
133139
**Summary of Required Fields**
134140
135-
| Type | Field | Required | Notes |
136-
| ------------- | ------------- | -------- | --------------------------- |
137-
| Learning Path | `title` | ✅ | |
138-
| | `description` | ✅ | |
139-
| | `weight` | ✅ | Order in path, lower first |
140-
| | `banner` | ❌ | Optional image URI |
141-
| Course | `title` | ✅ | |
142-
| | `description` | ✅ | |
143-
| | `weight` | ✅ | Order in path |
144-
| | `banner` | ❌ | Optional image URI |
145-
| | `prerequisites` | ❌ | Optional List of prerequisites for the course |
146-
| | `draft` | ❌ | Skips build, won't appear|
147-
| | `tags` | ❌ | Keywords for content |
148-
| | `categories` | ❌ | Main content categories |
149-
150-
151-
{{< alert type="warning" title="Banner Image Paths" >}}
152-
When using the `banner` field in your frontmatter, always provide the full, static path to your image. This path must start with your Organization UUID; for example: `/org_id/images/kubernetes-icon.svg`.
153-
{{< /alert >}}
141+
| Applicable To | Field | Required | Notes |
142+
| --------------- | ------------- | :------: | -------------------------------------------------------------------------- |
143+
| All | `title` | ✅ | The main display title. |
144+
| All | `description` | ✅ | A brief summary of the content. |
145+
| All | `weight` | ✅ | Controls the display order (lower numbers appear first). |
146+
| All | `banner` | ❌ | Path to an image in the `static` folder, e.g., `images/icon.svg`. |
147+
| All | `tags` | ❌ | Keywords for content discovery. |
148+
| All | `categories` | ❌ | The main categories for the content. |
149+
| All | `draft` | ❌ | If `true`, the page will not be published. |
150+
| **Learning Path** | `id` | ✅ | **Crucial.** A stable UUID for tracking progress. **Do not change.** [^1]|
151+
| **Course** | `id` | ❌ | A simple, human-readable string identifier for the course. |
152+
| **Course** | `prerequisites` | ❌ | Optional list of prerequisites for the course. |
154153
155154
> For a complete list of all predefined variables and advanced usage, please refer to the official [Hugo Front Matter documentation](https://gohugo.io/content-management/front-matter/).
156155
@@ -173,7 +172,7 @@ For all assets, please use the Page Bundling method. It simplifies asset managem
173172
```
174173
175174
{{< alert type="warning" title="Legacy Method: Do Not Use" >}}
176-
The `usestatic` shortcode is **deprecated** and should not be used for new courses.
175+
The `usestatic` shortcode is **deprecated** and should not be used!
177176
{{< /alert >}}
178177
179178
**How to Add a Video**
@@ -200,14 +199,20 @@ This will start a local development server, where you can view your learning pat
200199
![Preview site](./images/preview-site.png)
201200
202201
{{< alert type="info" title="Local Previews" >}}
203-
The local preview uses a generic theme to show the structure and content of your learning path. It **will not** display your organization's specific branding, such as custom logos or color schemes. The full, branded experience will only be visible after your content is published to the Layer5 Academy platform.
202+
The local preview uses a generic theme to show the structure and content of your learning path. It **will not** display your organization's specific branding, such as custom logos or color schemes.
204203

205204
You can configure your organization's branding in the [Layer5 Cloud Organization Settings](https://cloud.layer5.io/identity/organizations).
206205
{{< /alert >}}
207206
208207
## 5. Publishing Your Learning Path
209208
210-
Once you have tested your content locally, you can publish it to the [Layer5 Academy](https://cloud.layer5.io/academy/overview) through our automated workflow. The process involves a one-time setup of secrets and then creating a GitHub Release to publish each new version.
209+
Once you have tested your content locally, you can publish it to the [Layer5 Academy](https://cloud.layer5.io/academy/content) through our automated workflow.
210+
211+
To help you visualize how your content goes from a local file to a live learning path, the diagram below illustrates the entire end-to-end publishing workflow. It shows which components you will interact with directly and how the CI/CD pipeline handles the rest automatically.
212+
213+
{{< meshery-design-embed src="..//creating-your-learning-path/images/embedded-design-academy-content-publishing-workflow.js" id="embedded-design-37c37d14-be76-487a-90aa-5ada0c1c115f" size="full" >}}
214+
215+
The process involves a one-time setup of secrets in your repository, followed by creating a GitHub Release to publish each new version of your content.
211216
212217
### Stage 1: Configure the Publishing Workflow (One-Time Setup)
213218
@@ -265,7 +270,7 @@ With the setup complete, you can publish your content anytime by creating a new
265270
5. Provide a title and description for your release.
266271
6. Click **"Publish release"**.
267272
268-
This action will automatically trigger the workflow, and your content will be deployed to the [Layer5 Academy](https://cloud.layer5.io/identity/overview).
273+
This action will automatically trigger the workflow, and your content will be deployed to the [Layer5 Academy](https://cloud.layer5.io/academy/content).
269274
270275
- Your content will be available in the [staging environment](https://staging-cloud.layer5.io/) within approximately 10 minutes.
271276
- Your content will go fully live to the production Academy platform during the next scheduled cloud release.
@@ -274,6 +279,39 @@ This action will automatically trigger the workflow, and your content will be de
274279
275280
![Release Example](./images/release-publish.gif)
276281
282+
## 6. Ongoing Maintenance and Updates
283+
284+
Once your learning path is live, you may need to perform routine tasks to keep your local environment and dependencies up-to-date.
285+
286+
### Updating the Academy Theme
287+
The [`academy-theme`](https://github.com/layer5io/academy-theme) provides the core layout, style, and features for your learning path. Regularly updating it ensures you benefit from the latest improvements and bug fixes.
288+
289+
To upgrade to the latest theme version, run:
290+
```bash
291+
make theme-upgrade
292+
```
293+
294+
You will see output similar to this as Hugo fetches the new modules:
295+
```bash
296+
hugo mod get -u
297+
hugo: collected modules in 1707 ms
298+
go: downloading github.com/layer5io/academy-theme v0.1.6
299+
go: upgraded github.com/layer5io/academy-theme v0.1.5 => v0.1.6
300+
go: upgraded github.com/twbs/bootstrap v5.3.6+incompatible => v5.3.7+incompatible
301+
```
302+
303+
{{< alert type="info" title="When to Update?" >}}
304+
It's a good practice to update the theme before creating a new release or when you notice that your local preview is missing recent design changes.
305+
{{< /alert >}}
306+
307+
### Clearing the Local Cache for Troubleshooting
308+
309+
If you encounter unexpected formatting issues or your content doesn't update correctly during local development, your build cache might be stale. Use the `make clean` command to resolve this.
310+
This command first deletes the local build cache (`public` directory) and then restarts the development server, ensuring you are previewing a fresh build of your content.
311+
```bash
312+
make clean
313+
```
314+
277315
## Frequently Asked Questions
278316
279317
1. **Why is my workflow failing with a `401 Unauthorized` or `user must be logged in` error?**
@@ -295,3 +333,5 @@ This action will automatically trigger the workflow, and your content will be de
295333
5. **How do I structure multiple courses under one learning path?**
296334
297335
The structure is defined by your folder hierarchy. A learning path is a directory, and each course is a sub-directory within that path. This folder structure in your `content` directory directly maps to the learning path structure presented to users.
336+
337+
[^1]: The auto-generated learning path ID feature will be launched soon.

content/en/cloud/academy/extending-the-academy/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ categories: [Academy]
77
tags: [Designer]
88
---
99

10-
The [Layer5 Cloud Academy](https://cloud.layer5.io/academy/overview) is a modular learning management system (LMS) designed for building learning paths and interactive, hands-on challenges. It is deeply integrated into the Layer5 cloud ecosystem and **[Kanvas](https://kanvas.new/)** — a visual designer for cloud native infrastructure. This integration allows you to embed live visualizations, interactive designs, and contextual experiences directly into your courses.
10+
The [Layer5 Cloud Academy](https://cloud.layer5.io/academy/content) is a modular learning management system (LMS) designed for building learning paths and interactive, hands-on challenges. It is deeply integrated into the Layer5 cloud ecosystem and **[Kanvas](https://kanvas.new/)** — a visual designer for cloud native infrastructure. This integration allows you to embed live visualizations, interactive designs, and contextual experiences directly into your courses.
1111

1212
This approach transforms learning from passive reading into active, hands-on practice.
1313

data/kanvas_discuss.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

layouts/partials/navbar.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
<div class="dropdown-menu dropdown-menu--col" aria-labelledby="resourcesDropdown" style="visibility:hidden;">
4040
<a
4141
class="dropdown-item dropdown-item--row"
42-
href="https://cloud.layer5.io/academy/overview"
42+
href="https://cloud.layer5.io/academy/content"
4343
target="_blank"
4444
>
4545
<div class="logo-container">

static/data/csv/pricing-list.csv

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang="en"><head><meta name="description" content="Web word processing, presentations and spreadsheets"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"><link rel="shortcut icon" href="//docs.google.com/favicon.ico"><title>Page Not Found</title><meta name="referrer" content="origin"><link href="//fonts.googleapis.com/css?family=Product+Sans" rel="stylesheet" type="text/css" nonce="2uErKxLJLJPGeasywEcn7g"><style nonce="2uErKxLJLJPGeasywEcn7g">.goog-inline-block{position:relative;display:-moz-inline-box;display:inline-block}* html .goog-inline-block{display:inline}*:first-child+html .goog-inline-block{display:inline}#drive-logo{margin:18px 0;position:absolute;white-space:nowrap}.docs-drivelogo-img{background-image:url(//ssl.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_116x41dp.png);-webkit-background-size:116px 41px;background-size:116px 41px;display:inline-block;height:41px;vertical-align:bottom;width:116px}.docs-drivelogo-text{color:#000;display:inline-block;opacity:.54;text-decoration:none;font-family:"Product Sans",Arial,Helvetica,sans-serif;font-size:32px;text-rendering:optimizeLegibility;position:relative;top:-6px;left:-7px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){.docs-drivelogo-img{background-image:url(//ssl.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_116x41dp.png)}}sentinel{}</style><style type="text/css" nonce="2uErKxLJLJPGeasywEcn7g">body {background-color: #fff; font-family: Arial,sans-serif; font-size: 13px; margin: 0; padding: 0;}a, a:link, a:visited {color: #112ABB;}</style><style type="text/css" nonce="2uErKxLJLJPGeasywEcn7g">.errorMessage {font-size: 12pt; font-weight: bold; line-height: 150%;}</style></head><body><div id="outerContainer"><div id="innerContainer"><div style="position: absolute; top: -80px;"><div style="margin: 18px 0; position: absolute; white-space: nowrap;"><a href="//support.google.com/docs/"><img height="35px" src="//ssl.gstatic.com/docs/common/product/spreadsheets_lockup2.png" alt="Google logo"/></a></div></div><div align="center"><p class="errorMessage" style="padding-top: 50px">Sorry, unable to open the file at this time.</p><p> Please check the address and try again. </p><div style="background: #F0F6FF; border: 1px solid black; margin-top: 35px; padding: 10px 125px; width: 300px;"><p><strong>Get stuff done with Google Drive</strong></p><p>Apps in Google Drive make it easy to create, store and share online documents, spreadsheets, presentations and more.</p><p>Learn more at <a href="https://drive.google.com/start/apps">drive.google.com/start/apps</a>.</p></div></div></div></div></body><style nonce="2uErKxLJLJPGeasywEcn7g">html {height: 100%; overflow: auto;}body {height: 100%; overflow: auto;}#outerContainer {margin: auto; max-width: 750px;}#innerContainer {margin-bottom: 20px; margin-left: 40px; margin-right: 40px; margin-top: 80px; position: relative;}</style></html>
1+
<!DOCTYPE html><html lang="en"><head><meta name="description" content="Web word processing, presentations and spreadsheets"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"><link rel="shortcut icon" href="//docs.google.com/favicon.ico"><title>Page Not Found</title><meta name="referrer" content="origin"><link href="//fonts.googleapis.com/css?family=Product+Sans" rel="stylesheet" type="text/css" nonce="jBw4na7OduchJrB4r88iGQ"><style nonce="jBw4na7OduchJrB4r88iGQ">.goog-inline-block{position:relative;display:-moz-inline-box;display:inline-block}* html .goog-inline-block{display:inline}*:first-child+html .goog-inline-block{display:inline}#drive-logo{margin:18px 0;position:absolute;white-space:nowrap}.docs-drivelogo-img{background-image:url(//ssl.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_116x41dp.png);-webkit-background-size:116px 41px;background-size:116px 41px;display:inline-block;height:41px;vertical-align:bottom;width:116px}.docs-drivelogo-text{color:#000;display:inline-block;opacity:.54;text-decoration:none;font-family:"Product Sans",Arial,Helvetica,sans-serif;font-size:32px;text-rendering:optimizeLegibility;position:relative;top:-6px;left:-7px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){.docs-drivelogo-img{background-image:url(//ssl.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_116x41dp.png)}}sentinel{}</style><style type="text/css" nonce="jBw4na7OduchJrB4r88iGQ">body {background-color: #fff; font-family: Arial,sans-serif; font-size: 13px; margin: 0; padding: 0;}a, a:link, a:visited {color: #112ABB;}</style><style type="text/css" nonce="jBw4na7OduchJrB4r88iGQ">.errorMessage {font-size: 12pt; font-weight: bold; line-height: 150%;}</style></head><body><div id="outerContainer"><div id="innerContainer"><div style="position: absolute; top: -80px;"><div style="margin: 18px 0; position: absolute; white-space: nowrap;"><a href="//support.google.com/docs/"><img height="35px" src="//ssl.gstatic.com/docs/common/product/spreadsheets_lockup2.png" alt="Google logo"/></a></div></div><div align="center"><p class="errorMessage" style="padding-top: 50px">Sorry, unable to open the file at this time.</p><p> Please check the address and try again. </p><div style="background: #F0F6FF; border: 1px solid black; margin-top: 35px; padding: 10px 125px; width: 300px;"><p><strong>Get stuff done with Google Drive</strong></p><p>Apps in Google Drive make it easy to create, store and share online documents, spreadsheets, presentations and more.</p><p>Learn more at <a href="https://drive.google.com/start/apps">drive.google.com/start/apps</a>.</p></div></div></div></div></body><style nonce="jBw4na7OduchJrB4r88iGQ">html {height: 100%; overflow: auto;}body {height: 100%; overflow: auto;}#outerContainer {margin: auto; max-width: 750px;}#innerContainer {margin-bottom: 20px; margin-left: 40px; margin-right: 40px; margin-top: 80px; position: relative;}</style></html>

0 commit comments

Comments
 (0)