Skip to content

Commit e4580cb

Browse files
leecalcoteleecalcote
authored
Merge pull request #107 from zihanKuang/add-lab
Add new 'Lab' content type and archetype
2 parents 990d4e2 + 6fd40b2 commit e4580cb

File tree

12 files changed

+185
-30
lines changed

12 files changed

+185
-30
lines changed

‎archetypes/challenge-info.md‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎archetypes/challenge-main.md‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎archetypes/chapter.md‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎archetypes/course.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
type: "course"
33
title: '{{ replace .File.ContentBaseName `-` ` ` | title }}'
44
description: "Enter a detailed introduction to the course here..."
5-
weight: 1
6-
# Banner image for the course. Must be a path relative to your static folder (eg images/... ) .without org uuid.
75
banner: ""
6+
weight: 3
7+
tags: []
8+
categories: ""
9+
level: ""
810
---

‎archetypes/lab.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
type: "lab"
3+
title: '{{ replace .File.ContentBaseName `-` ` ` | title }}'
4+
description: ""
5+
weight: 1
6+
7+
# --- Lab Card Settings ---
8+
# Fields for the "Start Your Lab" card. All are optional.
9+
starter_catalog_link: "" # The URL for the main "Clone and Start Lab" button.
10+
starter_embed_link:
11+
src: "" # e.g., "./embeded/starter-design.js"
12+
id: "" # The element ID from the JS file.
13+
14+
# Fields for the "Lab Solution / Reference Answer" card. All are optional.
15+
answer_catalog_link: "" # The URL for the "View Answer" button.
16+
answer_embed_link:
17+
src: "" # e.g., "./embeded/answer-design.js"
18+
id: "" # The element ID from the JS file.
19+
20+
21+
---
22+
23+
{{< lab-intro >}}
24+
# Use this shortcode to add any content you need to display before the lab card.
25+
# Otherwise, if you have specified starter_catalog_link or starter_embed_link, the lab card will be the first content to be shown on the page.
26+
{{< /lab-intro >}}
27+
28+
## Lab Steps
29+
30+
1. **First Step:**
31+
Describe the first action the user needs to take.
32+
33+
2. **Second Step:**
34+
...

‎archetypes/module.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,7 @@ type: "module"
33
title: '{{ replace .File.ContentBaseName `-` ` ` | title }}'
44
description: "Enter a detailed introduction to the module here..."
55
weight: 1
6-
banner: ""
6+
tags: []
7+
categories: ""
8+
level: ""
79
---

‎assets/scss/_content_project.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ h6 {
143143
>.alert,
144144
>.highlight,
145145
>.lead,
146+
>.lab-action-card,
146147
>.td-table,
147148
>blockquote,
148149
>dl dd,

‎assets/scss/_lab.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.lab-action-card {
2+
background-color: $light;
3+
border: 1px solid $border-color;
4+
border-radius: 0.5rem;
5+
padding: 1.5rem 2rem;
6+
margin-top: 2.5rem;
7+
margin-bottom: 2.5rem;
8+
}
9+
10+
.lab-action-header {
11+
display: flex;
12+
align-items: center;
13+
color: $dark;
14+
margin-bottom: 0.5rem;
15+
16+
h2 {
17+
margin-bottom: 0;
18+
font-size: 1.5rem;
19+
}
20+
}
21+
22+
.lab-action-btn {
23+
display: inline-block;
24+
font-weight: 500;
25+
text-align: center;
26+
cursor: pointer;
27+
border: 1px solid $primary;
28+
padding: 0.75rem 1.5rem;
29+
font-size: 1rem;
30+
border-radius: 0.375rem;
31+
text-decoration: none;
32+
transition: all 0.2s ease-in-out;
33+
color: $primary;
34+
background-color: transparent;
35+
36+
&:hover {
37+
color: white;
38+
background-color: $primary;
39+
}
40+
}
41+
42+
.meshery-embed-container {
43+
border: 1px solid $casper;
44+
border-radius: 0.375rem;
45+
margin-top: 1rem;
46+
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
47+
48+
&.full {
49+
width: 100%;
50+
height: 30rem;
51+
}
52+
}

‎assets/scss/_styles_project.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@import "variables_project.scss";
66
@import "tax_project.scss";
77
@import "search_project.scss";
8-
8+
@import "lab.scss";
99

1010
// Page Layout Sections
1111
.td-home {

‎layouts/lab/content.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{{ $p := .Params }}
2+
3+
<div class="td-content">
4+
<h1>{{ .Title }}</h1>
5+
{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
6+
<header class="article-meta{{ if or .Params.categories .Params.tags }} article-meta-bg{{ end }}">
7+
{{ partial "taxonomy_terms_article_wrapper.html" . -}}
8+
{{ if (and (not .Params.hide_readingtime) (.Site.Params.ui.readingtime.enable)) -}}
9+
{{ partial "reading-time.html" . -}}
10+
{{ end -}}
11+
</header>
12+
{{ with .Params.plan }}
13+
{{ partial "plan-info.html" (dict "plan" .) }}
14+
{{ end }}
15+
16+
{{ $mainContent := .Content }}
17+
18+
{{ with .Page.Scratch.Get "lab_intro" }}
19+
{{ . | markdownify }}
20+
{{ end }}
21+
22+
{{ if $p.starter_catalog_link }}
23+
<div class="lab-action-card">
24+
<div class="lab-action-header">
25+
<h2>Start Your Lab</h2>
26+
</div>
27+
<p>Get started with a pre-configured template in Kanvas.</p>
28+
<a href="{{ $p.starter_catalog_link }}" target="_blank" class="lab-action-btn primary mb-4">
29+
Clone and Start Lab
30+
</a>
31+
32+
{{ with $p.starter_embed_link }}
33+
{{ if and .src .id }}
34+
<div id="{{ .id }}" class="meshery-embed-container full"></div>
35+
<script src="{{ .src }}" type="module"></script>
36+
{{ end }}
37+
{{ end }}
38+
</div>
39+
{{ end }}
40+
41+
{{ $mainContent }}
42+
43+
{{ if or $p.answer_embed_link $p.answer_catalog_link }}
44+
<div class="lab-action-card">
45+
<div class="lab-action-header">
46+
<h2>Check Your Work</h2>
47+
</div>
48+
<p>Great job! Use the reference design below to compare with your work.</p>
49+
50+
{{ if $p.answer_catalog_link }}
51+
<a href="{{ $p.answer_catalog_link }}" target="_blank" class="lab-action-btn secondary mb-4">
52+
View Answer Design in Catalog
53+
</a>
54+
{{ end }}
55+
56+
{{ with $p.answer_embed_link }}
57+
{{ if and .src .id }}
58+
<div id="{{ .id }}" class="meshery-embed-container full"></div>
59+
<script src="{{ .src }}" type="module"></script>
60+
{{ end }}
61+
{{ end }}
62+
</div>
63+
{{ end }}
64+
65+
{{ if (.Site.Config.Services.Disqus.Shortname) -}}
66+
<br />
67+
{{- partial "disqus-comment.html" . -}}
68+
{{ end -}}
69+
{{ partial "pager.html" . }}
70+
{{ partial "page-meta-lastmod.html" . }}
71+
</div>

0 commit comments

Comments
 (0)