react-md/docs/src/server/utils/renderHtmlPage.js at master · iporaitech/react-md · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import Helmet from 'react-helmet';
import serialize from 'serialize-javascript';
import { DEFAULT_DESCRIPTION } from 'state/helmet/meta';

let manifest;
try {
  if (!__SSR__) {
    throw new Error('Server side rendering must be enabled for inlining manifiest.');
  }

  /* eslint-disable global-require */
  const manifestJSON = require('../../../public/assets/manifest.json');

  manifest = `<script>
//<![CDATA[
window.webpackManifest = ${JSON.stringify(manifestJSON)}
//]]>
</script>`;
} catch (e) {
  manifest = '';
}

const META = [{
  charset: 'utf-8',
}, {
  name: 'viewport',
  content: 'width=device-width, initial-scale=1, shrink-to-fit=no',
}, {
  'http-equiv': 'X-UA-Compatible',
  content: 'IE=edge',
}, {
  property: 'og:title',
  content: 'react-md - Accessible React Material Design Components',
}, {
  property: 'og:url',
  content: 'https://react-md.mlaursen.com',
}, {
  property: 'og:type',
  content: 'website',
}, {
  property: 'og:description',
  content: DEFAULT_DESCRIPTION,
}, {
  property: 'og:image',
  content: '/react-md.png',
}, {
  property: 'og:image:alt',
  content: 'The landing page for react-md. It describes the purpose of the library and what it tries to accomplish.',
}, {
  name: 'twitter:site',
  content: 'react-md',
}, {
  name: 'twitter:creator',
  content: 'Mikkel Laursen',
}, {
  name: 'twitter:title',
  content: 'react-md - Accessible React Material Design Components',
}, {
  name: 'twitter:image',
  content: '/react-md.png',
}].reduce((allMeta, meta) => `${allMeta}<meta${Object.keys(meta).reduce((s, key) => `${s} ${key}="${meta[key]}"`, '')}>`, '');

export default function renderHtmlPage(store, bundles = [], html = '') {
  const head = Helmet.renderStatic();
  const assets = global.webpackIsomorphicTools.assets();

  let page = `<!DOCTYPE html><html ${head.htmlAttributes.toString()}>`;
  page += '<head>';
  page += head.base.toString();
  page += head.title.toString();
  page += head.meta.toString();
  page += META;
  page += head.link.toString();
  if (!__DEV__) {
    // manifest is only prod
    page += '<link rel="manifest" href="/manifest.json">';
  }

  page += '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">';

  const styleKeys = Object.keys(assets.styles).reverse();
  if (__DEV__ && !styleKeys.length) {
    // this should really be every scss file, but I just need the base styles
    // const styles = require('../../client/styles.scss')._style;
    // page += `<style>${styles}</style>`;

    // Can also do this for faster page loads, but have to reload page if styles get removed
    // const styles = require('../../client/styles.scss')._style
    //   + require('../../components/App/Footer/_styles.scss')._style
    //   + require('../../components/Customization/Colors/_styles.scss')._style
    //   + require('../../components/Customization/Themes/ThemeBuilder/_styles.scss')._style
    //   + require('../../components/DiscoverMore/Showcases/_styles.scss')._scss
    //   + require('../../components/DocumentationTabs/_styles.scss')._style
    //   + require('../../components/ExamplesPage/_styles.scss')._style
    //   + require('../../components/ExpandableSource/_styles.scss')._style
    //   + require('../../components/Home/_styles.scss')._style
    //   + require('../../components/SassDocPage/_styles.scss')._style
    //   + require('../../components/Search/_styles.scss')._style;

    // page += `<style>${styles}</style>`;
  }

  page += styleKeys.map(style =>
    `<link href="${assets.styles[style]}" rel="stylesheet" type="text/css">`
  ).join('');
  page += manifest;

  page += `</head><body ${head.bodyAttributes.toString()}><div id="app">${html}</div>`;
  page += `<script>window.__WEBPACK_BUNDLES__=${serialize(bundles)};`;
  if (store) {
    page += `window.__INITIAL_STATE__=${serialize(store.getState())};`;
  }
  page += '</script>';

  page += Object.keys(assets.javascript).reverse().map(script =>
    `<script src="${assets.javascript[script]}"></script>`
  ).join('');
  page += head.script.toString();
  if (!__DEV__) {
    // google analytics
    page += '<script>';
    page += '(function(i,s,o,g,r,a,m){i[\'GoogleAnalyticsObject\']=r;i[r]=i[r]||function(){';
    page += '(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),';
    page += 'm=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)';
    page += '})(window,document,\'script\',\'//www.google-analytics.com/analytics.js\',\'ga\');';
    page += `ga('create', '${process.env.GOOGLE_ANALYTICS_CODE || 'UA-76079335-1'}', 'auto');`;
    page += 'ga(\'send\', \'pageview\');';
    page += '</script>';
  }
  page += '</body></html>';

  return page;
}