Skip to content

Commit ecc1d57

Browse files
moonglummoonglum
committed
Generate the navigation
1 parent 0312094 commit ecc1d57

File tree

9 files changed

+55
-76
lines changed

9 files changed

+55
-76
lines changed

‎lib/generate_layout.js

+1-34
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
module.exports = (tree, manifest) => {
2-
let navigation = generateNavigation(tree);
3-
1+
module.exports = (navigation, manifest) => {
42
return (page, content) => `<!doctype html>
53
<html lang="${page.language}">
64
<head>
@@ -19,34 +17,3 @@ module.exports = (tree, manifest) => {
1917
</body>
2018
</html>`;
2119
};
22-
23-
// TODO: Implement a real generateNavigation function
24-
function generateNavigation(tree) {
25-
return `<ul>
26-
<li><a href="/">Home</a></li>
27-
<li>
28-
<a href="/atoms">Atoms</a>
29-
<ul>
30-
<li><a href="/atoms/button">Button</a></li>
31-
<li><a href="/atoms/strong">Strong</a></li>
32-
</ul>
33-
</li>
34-
</ul>`;
35-
}
36-
37-
// function generateNavigation(pages) {
38-
// if(pages.length === 0) {
39-
// return "";
40-
// }
41-
42-
// let lis = pages.map(page =>
43-
// `<li>${generateTitle(page)}${generateNavigation(page.children)}</li>`).
44-
// join("\n");
45-
46-
// return `<ul>${lis}</ul>`;
47-
// }
48-
49-
// function generateTitle(page) {
50-
// return page.file ? `<a href="/${page.slug}">${page.heading}</a>` :
51-
// `${page.heading}`;
52-
// }

‎lib/navigation.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
module.exports = class Navigation {
2+
constructor({ baseURI }) {
3+
this.baseURI = baseURI;
4+
}
5+
6+
generate(tree) {
7+
let nodes = tree.children;
8+
if(!nodes) {
9+
return "";
10+
}
11+
12+
let result = [];
13+
14+
for(let element of nodes.values()) {
15+
result.push(this.item(element, this.generate(element)));
16+
}
17+
18+
return this.list(result);
19+
}
20+
21+
// generate the markup for a node and its rendered children, overwrite at will
22+
item(node, children) {
23+
return `<li><a href="${this.baseURI}${node.slug}">${node.title}</a>${children}</li>`;
24+
}
25+
26+
// generate the markup for a list of nodes, overwrite at will
27+
list(renderedNodes) {
28+
return `<ul>${renderedNodes.join("")}</ul>`;
29+
}
30+
};

‎lib/site.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ let path = require("path");
77
let { promisify } = require("util");
88
let PageRenderer = require("./page_renderer");
99
let generateLayout = require("./generate_layout");
10+
let Navigation = require("./navigation");
1011

1112
let writeFile = promisify(fs.writeFile);
1213

@@ -75,7 +76,8 @@ module.exports = class Site {
7576

7677
await Promise.all(preperations);
7778

78-
let layout = generateLayout(tree, this.assetManager.manifest);
79+
let navigation = new Navigation({ baseURI: this.baseURI });
80+
let layout = generateLayout(navigation.generate(tree), this.assetManager.manifest);
7981
let pageRenderer = new PageRenderer({ renderers, layout });
8082

8183
let writes = tree.map(async page => {

‎test/expectations/atoms/button/index.html

+1-10
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,7 @@
88
<link href="/style.css" rel="stylesheet">
99
</head>
1010
<body>
11-
<nav><ul>
12-
<li><a href="/">Home</a></li>
13-
<li>
14-
<a href="/atoms">Atoms</a>
15-
<ul>
16-
<li><a href="/atoms/button">Button</a></li>
17-
<li><a href="/atoms/strong">Strong</a></li>
18-
</ul>
19-
</li>
20-
</ul></nav>
11+
<nav><ul><li><a href="/">My Style Guide</a></li><li><a href="/atoms">Atoms</a><ul><li><a href="/atoms/button">Button</a></li><li><a href="/atoms/strong">strong</a></li></ul></li></ul></nav>
2112
<main>
2213
<h1>Button</h1>
2314
<p>My favorite button:</p>

‎test/expectations/atoms/index.html

+1-10
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,7 @@
88
<link href="/style.css" rel="stylesheet">
99
</head>
1010
<body>
11-
<nav><ul>
12-
<li><a href="/">Home</a></li>
13-
<li>
14-
<a href="/atoms">Atoms</a>
15-
<ul>
16-
<li><a href="/atoms/button">Button</a></li>
17-
<li><a href="/atoms/strong">Strong</a></li>
18-
</ul>
19-
</li>
20-
</ul></nav>
11+
<nav><ul><li><a href="/">My Style Guide</a></li><li><a href="/atoms">Atoms</a><ul><li><a href="/atoms/button">Button</a></li><li><a href="/atoms/strong">strong</a></li></ul></li></ul></nav>
2112
<main>
2213
<h1>Atoms</h1>
2314
<p>indivisible units</p>

‎test/expectations/atoms/strong/index.html

+1-10
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,7 @@
88
<link href="/style.css" rel="stylesheet">
99
</head>
1010
<body>
11-
<nav><ul>
12-
<li><a href="/">Home</a></li>
13-
<li>
14-
<a href="/atoms">Atoms</a>
15-
<ul>
16-
<li><a href="/atoms/button">Button</a></li>
17-
<li><a href="/atoms/strong">Strong</a></li>
18-
</ul>
19-
</li>
20-
</ul></nav>
11+
<nav><ul><li><a href="/">My Style Guide</a></li><li><a href="/atoms">Atoms</a><ul><li><a href="/atoms/button">Button</a></li><li><a href="/atoms/strong">strong</a></li></ul></li></ul></nav>
2112
<main>
2213
<h1>strong</h1>
2314
<p>This is how we <strong>flex</strong> around here.</p>

‎test/expectations/index.html

+1-10
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,7 @@
88
<link href="/style.css" rel="stylesheet">
99
</head>
1010
<body>
11-
<nav><ul>
12-
<li><a href="/">Home</a></li>
13-
<li>
14-
<a href="/atoms">Atoms</a>
15-
<ul>
16-
<li><a href="/atoms/button">Button</a></li>
17-
<li><a href="/atoms/strong">Strong</a></li>
18-
</ul>
19-
</li>
20-
</ul></nav>
11+
<nav><ul><li><a href="/">My Style Guide</a></li><li><a href="/atoms">Atoms</a><ul><li><a href="/atoms/button">Button</a></li><li><a href="/atoms/strong">strong</a></li></ul></li></ul></nav>
2112
<main>
2213
<h1>My Style Guide</h1>
2314
<p>welcome to your style guide</p>

‎test/test_navigation.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/* global describe, it */
2+
let generatePageTree = require("../lib/tree");
3+
let Navigation = require("../lib/navigation");
4+
let { assertSame, fixturesPath, fixturesDir } = require("./util");
5+
6+
describe("navigation", () => {
7+
it("should generate a navigation", async () => {
8+
let descriptors = require(fixturesPath("pages.js"));
9+
let tree = generatePageTree(descriptors, fixturesDir);
10+
await Promise.all(tree.map(async page => page.load()));
11+
12+
let navigation = new Navigation({ baseURI: "/" });
13+
let result = navigation.generate(tree);
14+
assertSame(result, '<ul><li><a href="/">My Style Guide</a></li><li><a href="/atoms">Atoms</a><ul><li><a href="/atoms/button">Button</a></li><li><a href="/atoms/strong">strong</a></li></ul></li></ul>');
15+
});
16+
});

‎test/test_site.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ describe("site model", () => {
2525
it("generates HTML files", async () => {
2626
let config = {
2727
source: require(fixturesPath("./pages.js")),
28-
target: "./dist" // FIXME: use temporary directory instead
28+
target: "./dist"
2929
};
3030

3131
let site = new Site(config, assetManager);

0 commit comments

Comments
 (0)