Skip to content

Commit 59b0b72

Browse files
thescientist13thescientist13
committed
add support for app templates
1 parent 396ca5c commit 59b0b72

File tree

8 files changed

+164
-135
lines changed

8 files changed

+164
-135
lines changed

‎packages/cli/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"koa": "^2.13.0",
3838
"livereload": "^0.9.1",
3939
"markdown-toc": "^1.2.0",
40+
"node-html-parser": "^1.2.21",
4041
"puppeteer": "^5.3.0",
4142
"rehype-raw": "^4.0.2",
4243
"rehype-stringify": "^8.0.0",

‎packages/cli/src/config/rollup.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import fs from 'fs';
22
import { promises as fsPromises } from 'fs';
3+
// TODO use node-html-parser
34
import htmlparser2 from 'htmlparser2';
45
import json from '@rollup/plugin-json';
56
import multiInput from 'rollup-plugin-multi-input';

‎packages/cli/src/lifecycles/serve.js

+58-15
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const frontmatter = require('front-matter');
77
const remarkFrontmatter = require('remark-frontmatter');
88
const raw = require('rehype-raw');
99
const html = require('rehype-stringify');
10+
const htmlparser = require('node-html-parser');
1011
const Koa = require('koa');
1112
const path = require('path');
1213
const remark = require('remark-parse');
@@ -33,6 +34,7 @@ function getDevServer(compilation) {
3334
// make sure this only happens for "pages", nor partials or fixtures, templates, et)
3435
if (ctx.request.url.indexOf('.html') >= 0) {
3536
let title = config.title;
37+
3638
const metaOutletContent = config.meta.map(item => {
3739
let metaHtml = '';
3840

@@ -49,22 +51,21 @@ function getDevServer(compilation) {
4951
const barePath = `${userWorkspace}/pages${ctx.request.url.replace('.html', '')}`;
5052
// console.debug('bare path', barePath);
5153

52-
// TODO use default page here if it exists?
5354
let contents = `
54-
<!DOCTYPE html>
55-
<html lang="en" prefix="og:http://ogp.me/ns#">
56-
<head>
57-
<title>${title}</title>
58-
<meta charset='utf-8'>
59-
<meta name='viewport' content='width=device-width, initial-scale=1'/>
60-
<meta-outlet></meta-outlet>
61-
</head>
62-
<body>
63-
<section>
64-
<content-outlet></content-outlet>
65-
</section>
66-
</body>
67-
</html>
55+
<!DOCTYPE html>
56+
<html lang="en" prefix="og:http://ogp.me/ns#">
57+
<head>
58+
<title>${title}</title>
59+
<meta charset='utf-8'>
60+
<meta name='viewport' content='width=device-width, initial-scale=1'/>
61+
<meta-outlet></meta-outlet>
62+
</head>
63+
<body>
64+
<section>
65+
<content-outlet></content-outlet>
66+
</section>
67+
</body>
68+
</html>
6869
`;
6970

7071
if (fs.existsSync(`${barePath}.html`)) {
@@ -104,6 +105,48 @@ function getDevServer(compilation) {
104105

105106
contents = contents.replace('<content-outlet></content-outlet>', processedMarkdown.contents);
106107
}
108+
109+
const appTemplate = `${userWorkspace}/templates/app.html`;
110+
111+
if (fs.existsSync(appTemplate)) {
112+
let appTemplateContents = fs.readFileSync(appTemplate, 'utf-8');
113+
const root = htmlparser.parse(contents, {
114+
script: true,
115+
style: true
116+
});
117+
const body = root.querySelector('body');
118+
const headScripts = root.querySelectorAll('head script');
119+
const headLinks = root.querySelectorAll('head link');
120+
121+
appTemplateContents = appTemplateContents.replace(/<page-outlet><\/page-outlet>/, body);
122+
123+
headScripts.forEach(script => {
124+
if (script.rawAttrs !== '') {
125+
appTemplateContents = appTemplateContents.replace(/<\/script>/, `
126+
</script>\n
127+
<script ${script.rawAttrs}></script>\n
128+
`)
129+
}
130+
131+
if (script.rawAttrs === '') {
132+
appTemplateContents = appTemplateContents.replace(/<\/script>/, `
133+
</script>\n
134+
<script>
135+
${script.text}
136+
</script>\n
137+
`)
138+
}
139+
});
140+
141+
headLinks.forEach(link => {
142+
appTemplateContents = appTemplateContents.replace(/<\/link>/, `
143+
</link>\n
144+
<link ${link.rawAttrs}></link>\n
145+
`)
146+
});
147+
148+
contents = appTemplateContents;
149+
}
107150

108151
// TODO use an HTML parser? https://www.npmjs.com/package/node-html-parser
109152
if (process.env.__GWD_COMMAND__ === 'develop') { // eslint-disable-line no-underscore-dangle

‎www/pages/index.html

+34-53
Original file line numberDiff line numberDiff line change
@@ -2,71 +2,52 @@
22
<html lang="en" prefix="og:http://ogp.me/ns#">
33

44
<head>
5-
<meta charset='utf-8'>
6-
<meta name='viewport' content='width=device-width, initial-scale=1'/>
7-
<meta-outlet></meta-outlet>
8-
9-
<!-- TODO how to import / register a component like below? -->
10-
<script type="module">
11-
import '@evergreen-wc/eve-container';
12-
</script>
5+
<!-- TODO have to use forward slash / for path references? translate on the fly in serve.js? -->
136
<script type="module" src="../components/banner/banner.js"></script>
14-
<script type="module" src="../components/footer/footer.js"></script>
15-
<script type="module" src="../components/header/header.js"></script>
16-
7+
178
<!-- TODO these came from front matter, return to frontmatter? -->
189
<script type="module" src="../components/card/card.js"></script>
1910
<script type="module" src="../components/row/row.js"></script>
2011

21-
<script>
22-
function getOutboundLink() {
23-
console.debug('TODO placeholder for Google Analytics...')
24-
}
25-
</script>
26-
27-
<link rel="stylesheet" href="../styles/theme.css"></link>
2812
<link rel="stylesheet" href="../styles/home.css"></link>
2913
</head>
3014

3115
<body>
3216

33-
<div class='gwd-wrapper'>
34-
<app-header></app-header>
35-
36-
<div class="gwd-content-outlet">
37-
<app-banner></app-banner>
38-
39-
<div class='gwd-content-wrapper'>
40-
<eve-container fluid>
41-
<div class='gwd-page-template gwd-content'>
42-
<div class="message">
43-
<h2>Greenwood is a modern and performant static site generator for Web Component based development.</h2>
44-
45-
<p>Greenwood is focused on providing an intuitive and accessible development workflow supporting modern JavaScript and CSS features like Web Components, FlexBox, CSS Grid, and Modules. Greenwood strives to deliver not only great user experiences, but also great developer experiences. To learn more about the project we encourage everyone to first go through our <a href="/getting-started/">Getting Started</a> guide. You can learn more about the project itself at our <a href="/about">about page</a> or see our <a href="/docs"/>documentation</a> to learn more about how to use Greenwood.</p>
46-
<hr/>
47-
</div>
48-
49-
<div class="cards">
50-
<app-row>
51-
<app-card title="webpack" img="../assets/webpack.svg" size="full" style="width:100%">
52-
To us, webpack is more than a module bundler, it's an entire development ecosystem! We use webpack
53-
under the hood to power the development workflow and to help generate a performant site for you with the power of tools like Babel and PostCSS. The best part? You don't have to know anything about that! Greenwood handles all the configuration and optimizations for you, so you can be sure that your users will get the best experience possible, and as a developer, so will you.
54-
</app-card>
55-
<app-card title="Web Components" img="../assets/webcomponents.svg" size="full" style="width:100%">
56-
Do we love Web Components? You bet we do! In fact, it's one of many things we love about the modern web, including other features like Modules, FlexBox and CSS Grid, Fetch API, and more! It's all there for you in the browser, and with Greenwood, we make sure all those features will work for all your users. Sit back and write the modern code you want and Greenwood will take care of the rest.
57-
</app-card>
58-
<app-card title="NodeJS" img="../assets/nodejs.png" size="full" style="width:100%">
59-
Although Greenwood generates a static site that you can host just about anywhere (Netlify, S3, Apache, etc), for developing and building your site Greenwood requires NodeJS to be available on the command line. This allows us to tap into all the amazing web development tools and libraries available on npm and also means you can use those packages too when developing your own site! Greenwood will aim to support the latest LTS release of NodeJS and the version of npm that comes with.
60-
</app-card>
61-
</app-row>
62-
</div>
17+
<div class="gwd-content-outlet">
18+
<app-banner></app-banner>
19+
20+
<div class='gwd-content-wrapper'>
21+
<eve-container fluid>
22+
23+
<div class='gwd-page-template gwd-content'>
24+
<div class="message">
25+
<h2>Greenwood is a modern and performant static site generator for Web Component based development.</h2>
26+
27+
<p>Greenwood is focused on providing an intuitive and accessible development workflow supporting modern JavaScript and CSS features like Web Components, FlexBox, CSS Grid, and Modules. Greenwood strives to deliver not only great user experiences, but also great developer experiences. To learn more about the project we encourage everyone to first go through our <a href="/getting-started/">Getting Started</a> guide. You can learn more about the project itself at our <a href="/about">about page</a> or see our <a href="/docs"/>documentation</a> to learn more about how to use Greenwood.</p>
28+
<hr/>
6329
</div>
64-
</eve-container>
65-
</div>
30+
31+
<div class="cards">
32+
<app-row>
33+
<app-card title="webpack" img="../assets/webpack.svg" size="full" style="width:100%">
34+
To us, webpack is more than a module bundler, it's an entire development ecosystem! We use webpack
35+
under the hood to power the development workflow and to help generate a performant site for you with the power of tools like Babel and PostCSS. The best part? You don't have to know anything about that! Greenwood handles all the configuration and optimizations for you, so you can be sure that your users will get the best experience possible, and as a developer, so will you.
36+
</app-card>
37+
<app-card title="Web Components" img="../assets/webcomponents.svg" size="full" style="width:100%">
38+
Do we love Web Components? You bet we do! In fact, it's one of many things we love about the modern web, including other features like Modules, FlexBox and CSS Grid, Fetch API, and more! It's all there for you in the browser, and with Greenwood, we make sure all those features will work for all your users. Sit back and write the modern code you want and Greenwood will take care of the rest.
39+
</app-card>
40+
<app-card title="NodeJS" img="../assets/nodejs.png" size="full" style="width:100%">
41+
Although Greenwood generates a static site that you can host just about anywhere (Netlify, S3, Apache, etc), for developing and building your site Greenwood requires NodeJS to be available on the command line. This allows us to tap into all the amazing web development tools and libraries available on npm and also means you can use those packages too when developing your own site! Greenwood will aim to support the latest LTS release of NodeJS and the version of npm that comes with.
42+
</app-card>
43+
</app-row>
44+
</div>
45+
46+
</div>
47+
48+
</eve-container>
6649
</div>
67-
68-
<!-- TODO <lit-route><h1>404 Not found</h1></lit-route> -->
69-
<app-footer></app-footer>
50+
7051
</div>
7152

7253
</body>

‎www/templates/app-template.js

-28
This file was deleted.

‎www/templates/app.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en" prefix="og:http://ogp.me/ns#">
3+
4+
<head>
5+
<meta charset='utf-8'>
6+
<meta name='viewport' content='width=device-width, initial-scale=1'/>
7+
<meta-outlet></meta-outlet>
8+
9+
<!-- TODO how to import / register a component like below? -->
10+
<script type="module">
11+
import '@evergreen-wc/eve-container';
12+
</script>
13+
14+
<!-- TODO have to use / for path references? translate on the fly in serve.js? -->
15+
<script type="module" src="/components/footer/footer.js"></script>
16+
<script type="module" src="/components/header/header.js"></script>
17+
18+
<script>
19+
function getOutboundLink() {
20+
console.debug('TODO placeholder for Google Analytics...')
21+
}
22+
</script>
23+
24+
<link rel="stylesheet" href="/styles/theme.css"></link>
25+
26+
<style>
27+
.gwd-content-outlet {
28+
min-height: 100vh
29+
};
30+
</style>
31+
32+
</head>
33+
34+
<body>
35+
36+
<div class='gwd-wrapper'>
37+
<app-header></app-header>
38+
39+
<page-outlet></page-outlet>
40+
41+
<!-- TODO <lit-route><h1>404 Not found</h1></lit-route> -->
42+
<app-footer></app-footer>
43+
</div>
44+
45+
</body>
46+
47+
</html>

‎www/templates/page.html

+16-39
Original file line numberDiff line numberDiff line change
@@ -2,62 +2,39 @@
22
<html lang="en" prefix="og:http://ogp.me/ns#">
33

44
<head>
5-
<meta charset='utf-8'>
6-
<meta name='viewport' content='width=device-width, initial-scale=1'/>
7-
<meta-outlet></meta-outlet>
8-
9-
<!-- TODO how to import / register a component like below? -->
10-
<script type="module">
11-
import '@evergreen-wc/eve-container';
12-
</script>
13-
<!-- TODO have to use / for path references? translate on the fly in serve.js? -->
14-
<script type="module" src="/components/footer/footer.js"></script>
15-
<script type="module" src="/components/header/header.js"></script>
5+
<!-- TODO have to use forward slash / for path references? translate on the fly in serve.js? -->
166
<script type="module" src="/components/shelf/shelf.js"></script>
177
<script type="module" src="/components/scroll/scroll.js"></script>
188

199
<script>
20-
function getOutboundLink() {
21-
console.debug('TODO placeholder for Google Analytics...')
22-
}
23-
2410
window.onload = () => {
2511
const route = window.location.pathname.split('/')[1];
26-
27-
document.getElementsByTagName('app-shelf')[0].setAttribute('page', route)
12+
13+
document.getElementsByTagName('app-shelf')[0].setAttribute('page', route);
2814
}
2915
</script>
3016

31-
<link rel="stylesheet" href="/styles/theme.css"></link>
32-
<link rel="stylesheet" href="/styles/page.css"></link>
33-
17+
<link rel="stylesheet" href="/styles/page.css"></link>
3418
</head>
3519

3620
<body>
3721

38-
<div class='gwd-wrapper'>
39-
<app-header></app-header>
40-
41-
<div class='gwd-content-wrapper'>
42-
43-
<div class="gwd-sidebar">
44-
<app-shelf .page="${page}"></app-shelf>
45-
</div>
46-
47-
<div class="gwd-content">
48-
<eve-container fluid>
49-
<app-scroll>
50-
<content-outlet></content-outlet>
51-
</app-scroll>
52-
</eve-container>
53-
</div>
22+
<div class='gwd-content-wrapper'>
5423

24+
<div class="gwd-sidebar">
25+
<app-shelf .page="${page}"></app-shelf>
5526
</div>
5627

57-
<!-- TODO <lit-route><h1>404 Not found</h1></lit-route> -->
58-
<app-footer></app-footer>
28+
<div class="gwd-content">
29+
<eve-container fluid>
30+
<app-scroll>
31+
<content-outlet></content-outlet>
32+
</app-scroll>
33+
</eve-container>
34+
</div>
35+
5936
</div>
6037

6138
</body>
62-
39+
6340
</html>

‎yarn.lock

+7
Original file line numberDiff line numberDiff line change
@@ -5643,6 +5643,13 @@ node-gyp@^5.0.2:
56435643
tar "^4.4.12"
56445644
which "^1.3.1"
56455645

5646+
node-html-parser@^1.2.21:
5647+
version "1.2.21"
5648+
resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-1.2.21.tgz#93b074d877007c7148d594968a642cd65d254daa"
5649+
integrity sha512-6vDhgen6J332syN5HUmeT4FfBG7m6bFRrPN+FXY8Am7FGuVpsIxTASVbeoO5PF2IHbX2s+WEIudb1hgxOjllNQ==
5650+
dependencies:
5651+
he "1.2.0"
5652+
56465653
node-releases@^1.1.61:
56475654
version "1.1.61"
56485655
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.61.tgz#707b0fca9ce4e11783612ba4a2fcba09047af16e"

0 commit comments

Comments
 (0)