@@ -11,7 +11,22 @@ import Favicon from './favicon.ico';
11
11
12
12
// Define bundles (previously used `Object.values(locals.assets)`) but
13
13
// can't retrieve from there anymore due to separate compilation.
14
- const bundles = [ '/vendor.bundle.js' , '/index.bundle.js' ] ;
14
+ const bundles = [
15
+ '/vendor.bundle.js' ,
16
+ '/index.bundle.js'
17
+ ] ;
18
+
19
+ const Content = require ( './_content.json' ) ;
20
+
21
+ const paths = Content . children . reduce ( ( paths , page ) => {
22
+ if ( page . type === 'directory' ) {
23
+ page . children . forEach ( child => ( paths [ child . url ] = child . title ) ) ;
24
+ } else {
25
+ paths [ page . url ] = page . title ;
26
+ }
27
+
28
+ return paths ;
29
+ } , { } ) ;
15
30
16
31
// Export method for `StaticSiteGeneratorPlugin`
17
32
// CONSIDER: How high can we mount `Site` into the DOM hierarchy? If
@@ -20,35 +35,35 @@ const bundles = ['/vendor.bundle.js', '/index.bundle.js'];
20
35
// description, etc).
21
36
export default locals => {
22
37
let { assets } = locals . webpackStats . compilation ;
23
- let title = locals . paths [ locals . path ] ;
38
+ let title = paths [ locals . path ] ;
24
39
25
40
return ReactDOMServer . renderToString (
26
41
< StaticRouter location = { locals . path } context = { { } } >
27
42
< html >
28
43
< head >
29
- < meta charset = ' utf-8' />
44
+ < meta charset = " utf-8" />
30
45
< meta name = "theme-color" content = "#2B3A42" />
31
46
< meta name = "viewport" content = "width=device-width, initial-scale=1" />
32
47
< title > { title } | webpack</ title >
33
- < meta
34
- name = "description"
35
- content = "webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."
36
- />
37
- < link rel = "icon" type = "image/x-icon" href = { Favicon } />
38
- { Object . keys ( assets )
39
- . filter ( asset => / \. c s s $ / . test ( asset ) )
40
- . map ( path => < link key = { path } rel = "stylesheet" href = { `/${ path } ` } /> ) }
48
+ < meta name = "description" content = "webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset." />
49
+ < link rel = "icon" type = "image/x-icon" href = { Favicon } />
50
+ { Object . keys ( assets ) . filter ( asset => / \. c s s $ / . test ( asset ) ) . map ( path => (
51
+ < link key = { path } rel = "stylesheet" href = { `/${ path } ` } />
52
+ ) ) }
41
53
</ head >
42
54
< body >
43
55
< div id = "root" >
44
56
< Route
45
57
path = "/"
46
- render = { props => (
47
- < Site { ...props } import = { path => require ( `./content/${ path } ` ) } />
48
- ) }
49
- />
58
+ render = { props => (
59
+ < Site
60
+ { ...props }
61
+ import = { path => require ( `./content/${ path } ` ) } />
62
+ ) } />
50
63
</ div >
51
- { bundles . map ( path => < script key = { path } src = { path } /> ) }
64
+ { bundles . map ( path => (
65
+ < script key = { path } src = { path } />
66
+ ) ) }
52
67
</ body >
53
68
</ html >
54
69
</ StaticRouter >
0 commit comments