Generate the navigation

faucet-pipeline · Nov 19, 2018 · ecc1d57 · ecc1d57
1 parent 0312094
commit ecc1d57
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 76 deletions.
diff --git a/lib/generate_layout.js b/lib/generate_layout.js
@@ -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>
@@ -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}`;
-// }
diff --git a/lib/navigation.js b/lib/navigation.js
@@ -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>`;
+	}
+};
diff --git a/lib/site.js b/lib/site.js
@@ -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);
 
@@ -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 => {

diff --git a/test/expectations/atoms/button/index.html b/test/expectations/atoms/button/index.html
@@ -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>

diff --git a/test/expectations/atoms/index.html b/test/expectations/atoms/index.html
@@ -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>

diff --git a/test/expectations/atoms/strong/index.html b/test/expectations/atoms/strong/index.html
@@ -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>

diff --git a/test/expectations/index.html b/test/expectations/index.html
@@ -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>

diff --git a/test/test_navigation.js b/test/test_navigation.js
@@ -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>');
+	});
+});
diff --git a/test/test_site.js b/test/test_site.js
@@ -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);