Skip to content

Commit 96fe7bf

Browse files
ShukantPalShukantPal
committed
Previous/next navigation for tutorials
1 parent b66682f commit 96fe7bf

File tree

7 files changed

+140
-14
lines changed

7 files changed

+140
-14
lines changed

‎packages/webdoc-default-template/publish.js‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -335,20 +335,28 @@ function outTutorials(
335335
config /*: WebdocConfig */,
336336
docTree /*: RootDoc */,
337337
) {
338-
function out(tutorial /*: TutorialDoc */) {
339-
const uri = linker.getURI(tutorial, true);
340-
341-
pipeline.render("tutorial.tmpl", {
342-
appBar: {current: "tutorials"},
343-
document: tutorial,
344-
title: tutorial.title,
345-
env: config,
346-
}, {
347-
outputFile: path.join(outDir, uri),
348-
});
338+
function out(parent /*: ?TutorialDoc */) {
339+
return function renderRecursive(tutorial /*: TutorialDoc */, i /*: number */) {
340+
const uri = linker.getURI(tutorial, true);
341+
342+
pipeline.render("tutorial.tmpl", {
343+
appBar: {current: "tutorials"},
344+
document: tutorial,
345+
title: tutorial.title,
346+
env: config,
347+
navigation: {
348+
next: parent && parent.members[i + 1],
349+
previous: parent && parent.members[i - 1],
350+
},
351+
}, {
352+
outputFile: path.join(outDir, uri),
353+
});
349354

350-
tutorial.members.forEach((out /*: any */));
355+
if (tutorial.members.length > 0) {
356+
tutorial.members.forEach((out(tutorial) /*: any */));
357+
}
358+
};
351359
}
352360

353-
docTree.tutorials.forEach(out);
361+
docTree.tutorials.forEach((out(null) /*: any */));
354362
}

‎packages/webdoc-default-template/src/styles/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
@import "members-explorer";
1212
@import "snippets";
1313
@import "footer";
14+
@import "tutorial";
1415

1516
// @import "pages/api-index";
1617

‎packages/webdoc-default-template/src/styles/themes/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ $colorPrimaryDark : var(--color-primary-dark);
66

77
$colorPrimaryText : var(--color-primary-text);
88
$colorText : var(--color-text);
9+
$colorSecondaryText : var(--color-secondary-text);
910

1011
$colorSecondary : var(--color-secondary);
1112
$colorSecondaryLight: var(--color-secondary-light);

‎packages/webdoc-default-template/src/styles/themes/light.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
--color-primary-text : #212121;
77
--color-text : #333;
8+
--color-secondary-text : #333;
89

910
--color-secondary : #ffb74d;
1011
--color-secondary-light: #ffe97d;

‎packages/webdoc-default-template/src/styles/tutorial.scss‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@import "themes";
2+
3+
.tutorial {
4+
&--navigation {
5+
display: flex;
6+
margin-top: 24px;
7+
padding-bottom: 16px;
8+
9+
> a {
10+
cursor: pointer;
11+
color: $colorSecondaryText;
12+
13+
&:hover {
14+
text-decoration: none;
15+
}
16+
}
17+
18+
&-previous {
19+
display: flex;
20+
21+
> section:last-child {
22+
display: flex;
23+
flex-direction: column;
24+
25+
> *:first-child {
26+
margin-bottom: 6px;
27+
}
28+
}
29+
30+
svg {
31+
margin-right: 14px;
32+
}
33+
}
34+
35+
&-next {
36+
display: block;
37+
38+
> section:first-child {
39+
display: flex;
40+
margin-bottom: 6px;
41+
}
42+
43+
svg {
44+
margin-left: 14px;
45+
}
46+
}
47+
48+
> hr {
49+
border: 1px solid $colorSecondaryText;
50+
height: 41px;
51+
margin: 0 28px;
52+
}
53+
54+
&-arrow {
55+
stroke: $colorSecondaryText;
56+
stroke-width: 2px;
57+
width: 27px;
58+
height: 14px;
59+
}
60+
}
61+
}

‎packages/webdoc-default-template/static/styles/index.css‎

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

‎packages/webdoc-default-template/tmpl/tutorial.tmpl‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,64 @@
11
<?js
22
/** Tutorial rendering component */
33
const document = obj.document;
4+
5+
// Navigation to next, previous tutorials (if any)
6+
const { next, previous } = obj.navigation;
47
?>
58
<div class="page-content">
69
<div class="document">
710
<?js /* Simplicity, at its finest! */ ?>
811
<?js= document.content ?>
912
</div>
13+
<?js if (next || previous) { ?>
14+
<div class="tutorial--navigation">
15+
<?js if (previous) { ?>
16+
<a class="tutorial--navigation-previous" href="<?js= this.getPlugin("linker").getURI(previous) ?>">
17+
<section>
18+
<svg
19+
class="tutorial--navigation-arrow"
20+
version="1.1" xmlns="http://www.w3.org/2000/svg"
21+
xmlns:xlink="http://www.w3.org/1999/xlink"
22+
x="0px"
23+
y="0px"
24+
viewBox="0 0 23 14"
25+
xml:space="preserve"
26+
>
27+
<line x1="0" y1="7" x2="6" y2="1" />
28+
<line x1="0" y1="7" x2="6" y2="13" />
29+
<line x1="0" y1="7" x2="23" y2="7" />
30+
</svg>
31+
</section>
32+
<section>
33+
<span>PREVIOUS GUIDE</span>
34+
<?js= previous.title ?>
35+
</section>
36+
</a>
37+
<?js } ?>
38+
<?js if (previous && next) { ?>
39+
<hr />
40+
<?js } ?>
41+
<?js if (next) { ?>
42+
<a class="tutorial--navigation-next" href="<?js= this.getPlugin("linker").getURI(next) ?>">
43+
<section>
44+
<span>NEXT GUIDE</span>
45+
<svg
46+
class="tutorial--navigation-arrow"
47+
version="1.1" xmlns="http://www.w3.org/2000/svg"
48+
xmlns:xlink="http://www.w3.org/1999/xlink"
49+
x="0px"
50+
y="0px"
51+
viewBox="0 0 23 14"
52+
xml:space="preserve"
53+
>
54+
<line x1="22" y1="7" x2="16" y2="1" />
55+
<line x1="22" y1="7" x2="16" y2="13" />
56+
<line x1="0" y1="7" x2="23" y2="7" />
57+
</svg>
58+
</section>
59+
<section><?js= next.title ?></section>
60+
</a>
61+
<?js } ?>
62+
</div>
63+
<?js } ?>
1064
</div>

0 commit comments

Comments
 (0)