Skip to content

Commit

Permalink
Generate the navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@moonglum
moonglum committed Nov 19, 2018
1 parent 0312094 commit ecc1d57
Show file tree
Hide file tree
Showing 9 changed files with 55 additions and 76 deletions.
35 changes: 1 addition & 34 deletions lib/generate_layout.js
View file
@@ -1,6 +1,4 @@
module.exports = (tree, manifest) => {
let navigation = generateNavigation(tree);

module.exports = (navigation, manifest) => {
return (page, content) => `<!doctype html>
<html lang="${page.language}">
<head>
Expand All @@ -19,34 +17,3 @@ module.exports = (tree, manifest) => {
</body>
</html>`;
};

// TODO: Implement a real generateNavigation function
function generateNavigation(tree) {
return `<ul>
<li><a href="/">Home</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>`;
}

// function generateNavigation(pages) {
// if(pages.length === 0) {
// return "";
// }

// let lis = pages.map(page =>
// `<li>${generateTitle(page)}${generateNavigation(page.children)}</li>`).
// join("\n");

// return `<ul>${lis}</ul>`;
// }

// function generateTitle(page) {
// return page.file ? `<a href="/${page.slug}">${page.heading}</a>` :
// `${page.heading}`;
// }
30 changes: 30 additions & 0 deletions lib/navigation.js
View file
@@ -0,0 +1,30 @@
module.exports = class Navigation {
constructor({ baseURI }) {
this.baseURI = baseURI;
}

generate(tree) {
let nodes = tree.children;
if(!nodes) {
return "";
}

let result = [];

for(let element of nodes.values()) {
result.push(this.item(element, this.generate(element)));
}

return this.list(result);
}

// generate the markup for a node and its rendered children, overwrite at will
item(node, children) {
return `<li><a href="${this.baseURI}${node.slug}">${node.title}</a>${children}</li>`;
}

// generate the markup for a list of nodes, overwrite at will
list(renderedNodes) {
return `<ul>${renderedNodes.join("")}</ul>`;
}
};
4 changes: 3 additions & 1 deletion lib/site.js
View file
Expand Up @@ -7,6 +7,7 @@ let path = require("path");
let { promisify } = require("util");
let PageRenderer = require("./page_renderer");
let generateLayout = require("./generate_layout");
let Navigation = require("./navigation");

let writeFile = promisify(fs.writeFile);

Expand Down Expand Up @@ -75,7 +76,8 @@ module.exports = class Site {

await Promise.all(preperations);

let layout = generateLayout(tree, this.assetManager.manifest);
let navigation = new Navigation({ baseURI: this.baseURI });
let layout = generateLayout(navigation.generate(tree), this.assetManager.manifest);
let pageRenderer = new PageRenderer({ renderers, layout });

let writes = tree.map(async page => {
Expand Down
11 changes: 1 addition & 10 deletions test/expectations/atoms/button/index.html
View file
Expand Up @@ -8,16 +8,7 @@
<link href="/style.css" rel="stylesheet">
</head>
<body>
<nav><ul>
<li><a href="/">Home</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>
<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>
<main>
<h1>Button</h1>
<p>My favorite button:</p>
Expand Down
11 changes: 1 addition & 10 deletions test/expectations/atoms/index.html
View file
Expand Up @@ -8,16 +8,7 @@
<link href="/style.css" rel="stylesheet">
</head>
<body>
<nav><ul>
<li><a href="/">Home</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>
<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>
<main>
<h1>Atoms</h1>
<p>indivisible units</p>
Expand Down
11 changes: 1 addition & 10 deletions test/expectations/atoms/strong/index.html
View file
Expand Up @@ -8,16 +8,7 @@
<link href="/style.css" rel="stylesheet">
</head>
<body>
<nav><ul>
<li><a href="/">Home</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>
<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>
<main>
<h1>strong</h1>
<p>This is how we <strong>flex</strong> around here.</p>
Expand Down
11 changes: 1 addition & 10 deletions test/expectations/index.html
View file
Expand Up @@ -8,16 +8,7 @@
<link href="/style.css" rel="stylesheet">
</head>
<body>
<nav><ul>
<li><a href="/">Home</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>
<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>
<main>
<h1>My Style Guide</h1>
<p>welcome to your style guide</p>
Expand Down
16 changes: 16 additions & 0 deletions test/test_navigation.js
View file
@@ -0,0 +1,16 @@
/* global describe, it */
let generatePageTree = require("../lib/tree");
let Navigation = require("../lib/navigation");
let { assertSame, fixturesPath, fixturesDir } = require("./util");

describe("navigation", () => {
it("should generate a navigation", async () => {
let descriptors = require(fixturesPath("pages.js"));
let tree = generatePageTree(descriptors, fixturesDir);
await Promise.all(tree.map(async page => page.load()));

let navigation = new Navigation({ baseURI: "/" });
let result = navigation.generate(tree);
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>');
});
});
2 changes: 1 addition & 1 deletion test/test_site.js
View file
Expand Up @@ -25,7 +25,7 @@ describe("site model", () => {
it("generates HTML files", async () => {
let config = {
source: require(fixturesPath("./pages.js")),
target: "./dist" // FIXME: use temporary directory instead
target: "./dist"
};

let site = new Site(config, assetManager);
Expand Down

0 comments on commit ecc1d57

Please sign in to comment.