Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reboot with TDD to get this up to speed #13

Merged
merged 23 commits into from
Nov 19, 2018
Merged

Reboot with TDD to get this up to speed #13

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
e2a50a8
Simplify pages' configuration format
FND Nov 7, 2018
264cf4b
Simplify internals by avoiding excessive asset-manager references
FND Nov 7, 2018
328b26b
Add support for JavaScript modules as pages' configuration format
FND Nov 7, 2018
d069aea
Create abstraction for page hierarchies
FND Nov 8, 2018
ac689aa
Create abstraction for sites (i.e. styleguide instances)
FND Nov 9, 2018
b5143e3
Generate site structure
FND Nov 10, 2018
d051bb9
Replace obsolete implementation
FND Nov 12, 2018
508fe5c
Restoring functionality
moonglum Nov 14, 2018
2e95dba
Delete generated files in node
moonglum Nov 14, 2018
268326f
Move acorn to dev dependencies
moonglum Nov 14, 2018
dcafccf
Renamed examples to snippets
moonglum Nov 14, 2018
a5f6992
Adjust package*json to .editorconfig
moonglum Nov 14, 2018
29bf668
Rename file
moonglum Nov 14, 2018
20c6e72
Report writing files
moonglum Nov 14, 2018
6db1f5e
Provide the correct path to style.css
moonglum Nov 14, 2018
7a189f8
Switch to released version of faucet-pipeline-sass
moonglum Nov 15, 2018
7cc4466
Preparation: Users need to require their pages themselves
moonglum Nov 15, 2018
c10ccbd
Another library that doesn't bother to put a newline at the end of a …
moonglum Nov 15, 2018
c7bebc8
Cleanup
moonglum Nov 15, 2018
e23054c
Cleanup faucet.config.js
moonglum Nov 15, 2018
d323188
Add tests for PageRenderer
moonglum Nov 15, 2018
eab05ef
Preparatory Refactoring: Load all pages before starting the rendering
moonglum Nov 16, 2018
270fadf
Generate the navigation
moonglum Nov 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
35 changes: 1 addition & 34 deletions lib/generate_layout.js
View file
Open in desktop
@@ -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
Open in desktop
@@ -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>`;
moonglum marked this conversation as resolved.
Show resolved Hide resolved
}

// 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
Open in desktop
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 {

moonglum marked this conversation as resolved.
Show resolved Hide resolved
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
@@ -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()));
moonglum marked this conversation as resolved.
Show resolved Hide resolved

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
Open in desktop
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