Skip to content

Commit a383d5c

Browse files
sarveshpanditsarveshpandit
authored
Merge pull request RedHatQuickCourses#2 from RedHatQuickCourses/main
New Features added
2 parents ca66cef + 9b7f2dd commit a383d5c

14 files changed

Lines changed: 470 additions & 3 deletions

File tree

‎USAGEGUIDE.adoc‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
Above is example of top level heading. This is referenced for navigation (previous/next) of the pages in rendered training content.
44

5-
Use this page (USAGEGUIDE.adoc source file) as reference of the syntax for content drafting.
5+
Use this page (USAGEGUIDE.adoc source file) as reference of the syntax for content drafting.
6+
7+
On published HTML pages, an *estimated reading time* appears below the lesson title automatically; no author markup is required.
68

79
== Second level heading
810

@@ -59,6 +61,33 @@ NOTE: Highlighted text for note Callout
5961

6062
WARNING: Highlighted text for warning Callout
6163

64+
=== Collapsible blocks (Deep dive / Hint)
65+
66+
Use `[%collapsible]` on an *example* block so optional detail stays collapsed until the learner expands it. A title line starting with a dot (`.Title`) sets the clickable label (summary).
67+
68+
[source,asciidoc]
69+
----
70+
.Hint
71+
[%collapsible]
72+
====
73+
Optional extra detail for curious readers.
74+
====
75+
76+
.Deep dive: why this works
77+
[%collapsible]
78+
====
79+
Longer explanation, lists, or source blocks go here.
80+
====
81+
----
82+
83+
To start expanded instead of collapsed, use `[%collapsible%open]` on the example block.
84+
85+
Use *NOTE* and *WARNING* for short callouts everyone should read. Use collapsible blocks for longer hints or deep dives that would clutter the main lesson path.
86+
87+
Collapsible behavior applies to the **HTML site** from Antora. PDF output from `asciidoctor-pdf` is not interactive; readers typically see all block content without expand/collapse.
88+
89+
Live examples: link:./modules/chapter1/pages/collapsible-demo.adoc[Collapsible blocks demo].
90+
6291
Table without header row:
6392

6493
[cols="1,1"]
@@ -91,4 +120,6 @@ Table with header row:
91120

92121
- link:./README.md[Getting started with a new training content repository]
93122
- link:./DEVSPACE.md[Development using devspace]
123+
- link:./modules/chapter1/pages/tabs-demo.adoc[Tabbed code blocks (Asciidoctor Tabs demo)]
124+
- link:./modules/chapter1/pages/collapsible-demo.adoc[Collapsible blocks (Deep dive / Hint demo)]
94125

‎antora-playbook.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ content:
77
- url: ./
88

99
asciidoc:
10+
extensions:
11+
- '@asciidoctor/tabs'
1012
attributes:
1113
page-pagination: true
1214

‎modules/chapter1/nav.adoc‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
* xref:index.adoc[]
22
** xref:section1.adoc[]
33
** xref:section2.adoc[]
4-
** xref:section3.adoc[]
4+
** xref:section3.adoc[]
5+
** xref:tabs-demo.adoc[]
6+
** xref:collapsible-demo.adoc[]

‎modules/chapter1/pages/collapsible-demo.adoc‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
= Collapsible blocks
2+
3+
This page demonstrates https://docs.asciidoctor.org/asciidoc/latest/blocks/collapsible/[collapsible example blocks^] in Antora: use them for optional *Hints*, *Deep dives*, or other detail that should not block the main lesson flow.
4+
5+
No extra Antora extension is required; `[%collapsible]` is built into Asciidoctor.
6+
7+
== Hint (collapsed by default)
8+
9+
.Hint
10+
[%collapsible]
11+
====
12+
Try the exercise first; open this only if you are stuck.
13+
14+
* Check that your environment variables are set.
15+
* Re-read the previous section on configuration.
16+
====
17+
18+
== Deep dive (collapsed by default)
19+
20+
.Deep dive: how the pipeline stages relate
21+
[%collapsible]
22+
====
23+
The build runs *validate*, then *compile*, then *package*. Skipping a stage can leave artifacts out of date; that is why CI always runs the full chain.
24+
25+
[source,bash]
26+
----
27+
./gradlew clean build
28+
----
29+
====
30+
31+
== Starts expanded
32+
33+
.Optional context
34+
[%collapsible%open]
35+
====
36+
This block uses `[%collapsible%open]` so it is expanded on first load. Use sparingly when the extra context is still optional but you want it visible by default.
37+
====

‎modules/chapter1/pages/tabs-demo.adoc‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
= Tabbed code blocks
2+
3+
This page demonstrates https://github.com/asciidoctor/asciidoctor-tabs[`@asciidoctor/tabs`^] in Antora: use tabs for multiple languages, or to separate exercise instructions from solutions.
4+
5+
== Language tabs
6+
7+
[tabs]
8+
====
9+
Java::
10+
+
11+
[source,java]
12+
----
13+
public class Hello {
14+
public static void main(String[] args) {
15+
System.out.println("Hello");
16+
}
17+
}
18+
----
19+
20+
Python::
21+
+
22+
[source,python]
23+
----
24+
def main():
25+
print("Hello")
26+
27+
if __name__ == "__main__":
28+
main()
29+
----
30+
====
31+
32+
== Exercise and solution
33+
34+
[tabs]
35+
====
36+
Exercise::
37+
+
38+
Try writing a function that returns the sum of two integers. Use your language's usual entry point if you need a quick test.
39+
40+
Solution::
41+
+
42+
[source,javascript]
43+
----
44+
function add(a, b) {
45+
return a + b;
46+
}
47+
console.log(add(2, 3));
48+
----
49+
====

‎package-lock.json‎

Lines changed: 12 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"devDependencies": {
33
"@antora/cli": "3.1.3",
44
"@antora/site-generator": "3.1.3",
5+
"@asciidoctor/tabs": "1.0.0-beta.6",
56
"http-server": "^14.1.1",
67
"watch": "^0.13.0"
78
},

‎supplemental-ui/css/vendor/collapsible.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/* Supplemental styling for Asciidoctor [%collapsible] example blocks (HTML details/summary) */
2+
3+
.sectionbody > details {
4+
margin: 0 0 1.25em;
5+
border: 1px solid #ccc;
6+
border-radius: 3px;
7+
overflow: hidden;
8+
}
9+
10+
.sectionbody > details > summary.title {
11+
padding: 0.5em 0.75em;
12+
cursor: pointer;
13+
font-weight: 600;
14+
list-style: none;
15+
}
16+
17+
.sectionbody > details > summary.title::-webkit-details-marker {
18+
display: none;
19+
}
20+
21+
.sectionbody > details[open] > summary.title {
22+
border-bottom: 1px solid #ccc;
23+
}
24+
25+
.sectionbody > details > .content {
26+
padding: 0.75em 1em;
27+
}

‎supplemental-ui/css/vendor/reading-time.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* Estimated reading time line (injected below h1.page by reading-time.js) */
2+
3+
.doc .reading-time {
4+
margin: -0.25rem 0 1rem;
5+
font-size: 0.88889rem;
6+
color: #666;
7+
}

‎supplemental-ui/css/vendor/tabs.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/*! Asciidoctor Tabs | Copyright (c) 2018-present Dan Allen | MIT License */
2+
.tabs {
3+
margin-bottom: 1.25em;
4+
}
5+
6+
.tablist > ul {
7+
display: flex;
8+
flex-wrap: wrap;
9+
list-style: none;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
.tablist > ul li {
15+
align-items: center;
16+
background-color: #fff;
17+
cursor: pointer;
18+
display: flex;
19+
font-weight: bold;
20+
line-height: 1.5;
21+
padding: 0.25em 1em;
22+
position: relative;
23+
}
24+
25+
.tablist > ul li:focus-visible {
26+
outline: none;
27+
}
28+
29+
.tablist.ulist,
30+
.tablist.ulist > ul li {
31+
margin: 0;
32+
}
33+
34+
.tablist.ulist > ul li + li {
35+
margin-left: 0.25em;
36+
}
37+
38+
.tabs .tablist li::after {
39+
content: "";
40+
display: block;
41+
height: 1px;
42+
position: absolute;
43+
bottom: -1px;
44+
left: 0;
45+
right: 0;
46+
}
47+
48+
.tabs.is-loading .tablist li:not(:first-child),
49+
.tabs:not(.is-loading) .tablist li:not(.is-selected) {
50+
background-color: #f5f5f5;
51+
}
52+
53+
.tabs.is-loading .tablist li:first-child::after,
54+
.tabs:not(.is-loading) .tablist li.is-selected::after {
55+
background-color: #fff;
56+
}
57+
58+
/*
59+
.tabs:not(.is-loading) .tablist li,
60+
.tabs:not(.is-loading) .tablist li::after {
61+
transition: background-color 200ms ease-in-out;
62+
}
63+
*/
64+
65+
.tablist > ul p {
66+
line-height: inherit;
67+
margin: 0;
68+
}
69+
70+
.tabpanel {
71+
background-color: #fff;
72+
padding: 1.25em;
73+
}
74+
75+
.tablist > ul li,
76+
.tabpanel {
77+
border: 1px solid #dcdcdc;
78+
}
79+
80+
.tablist > ul li {
81+
border-bottom: 0;
82+
}
83+
84+
.tabs.is-loading .tabpanel + .tabpanel,
85+
.tabs:not(.is-loading) .tabpanel.is-hidden {
86+
display: none;
87+
}
88+
89+
.tabpanel > :first-child {
90+
margin-top: 0;
91+
}
92+
93+
/* #content is a signature of the Asciidoctor standalone HTML output */
94+
#content .tabpanel > :last-child,
95+
#content .tabpanel > :last-child > :last-child,
96+
#content .tabpanel > :last-child > :last-child > li:last-child > :last-child {
97+
margin-bottom: 0;
98+
}
99+
100+
.tablecontainer {
101+
overflow-x: auto;
102+
}
103+
104+
#content .tablecontainer {
105+
margin-bottom: 1.25em;
106+
}
107+
108+
#content .tablecontainer > table.tableblock {
109+
margin-bottom: 0;
110+
}

0 commit comments

Comments
 (0)