mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-02 16:29:47 +02:00
refactor(v2): use ejs for SSR HTML template (#1322)
This commit is contained in:
parent
afed949136
commit
43e0221b56
7 changed files with 57 additions and 32 deletions
|
@ -8,8 +8,7 @@
|
|||
"@docusaurus/utils": "^1.0.0",
|
||||
"classnames": "^2.2.6",
|
||||
"fs-extra": "^7.0.1",
|
||||
"globby": "^9.1.0",
|
||||
"react": "^16.8.5"
|
||||
"globby": "^9.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@docusaurus/core": "^2.0.0"
|
||||
|
|
|
@ -88,7 +88,10 @@ module.exports = async function start(siteDir, cliOptions = {}) {
|
|||
{
|
||||
inject: false,
|
||||
hash: true,
|
||||
template: path.resolve(__dirname, '../core/index.html.template.ejs'),
|
||||
template: path.resolve(
|
||||
__dirname,
|
||||
'../core/templates/index.html.template.ejs',
|
||||
),
|
||||
filename: 'index.html',
|
||||
title: siteConfig.title,
|
||||
},
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import ejs from 'ejs';
|
||||
import React from 'react';
|
||||
import {StaticRouter} from 'react-router-dom';
|
||||
import ReactDOMServer from 'react-dom/server';
|
||||
|
@ -17,6 +18,7 @@ import webpackClientStats from '@build/client.stats.json'; //eslint-disable-line
|
|||
import routes from '@generated/routes'; // eslint-disable-line
|
||||
import preload from './preload';
|
||||
import App from './App';
|
||||
import ssrTemplate from './templates/ssr.html.template';
|
||||
|
||||
// Renderer for static-site-generator-webpack-plugin (async rendering via promises)
|
||||
export default function render(locals) {
|
||||
|
@ -39,40 +41,31 @@ export default function render(locals) {
|
|||
helmet.meta.toString(),
|
||||
helmet.link.toString(),
|
||||
];
|
||||
const metaHtml = metaStrings.filter(Boolean).join('\n ');
|
||||
const metaAttributes = metaStrings.filter(Boolean);
|
||||
|
||||
const bundles = getBundles(reactLoadableStats, modules);
|
||||
const assets = [
|
||||
...webpackClientStats.assetsByChunkName.main,
|
||||
...bundles.map(b => b.file),
|
||||
...bundles.map(bundle => bundle.file),
|
||||
];
|
||||
const jsFiles = assets.filter(value => value.match(/\.js$/));
|
||||
const cssFiles = assets.filter(value => value.match(/\.css$/));
|
||||
const scripts = assets.filter(value => value.match(/\.js$/));
|
||||
const stylesheets = assets.filter(value => value.match(/\.css$/));
|
||||
const {baseUrl} = locals;
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html${htmlAttributes ? ` ${htmlAttributes}` : ''}>
|
||||
<head>
|
||||
${metaHtml}
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
${cssFiles
|
||||
.map(
|
||||
cssFile =>
|
||||
`<link rel="stylesheet" type="text/css" href="${baseUrl}${cssFile}" />`,
|
||||
)
|
||||
.join('\n')}
|
||||
</head>
|
||||
<body${bodyAttributes ? ` ${bodyAttributes}` : ''}>
|
||||
<div id="__docusaurus">${appHtml}</div>
|
||||
${jsFiles
|
||||
.map(
|
||||
jsFile =>
|
||||
`<script type="text/javascript" src="${baseUrl}${jsFile}"></script>`,
|
||||
)
|
||||
.join('\n')}
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
return ejs.render(
|
||||
ssrTemplate.trim(),
|
||||
{
|
||||
appHtml,
|
||||
baseUrl,
|
||||
htmlAttributes: htmlAttributes || '',
|
||||
bodyAttributes: bodyAttributes || '',
|
||||
metaAttributes,
|
||||
scripts,
|
||||
stylesheets,
|
||||
},
|
||||
{
|
||||
rmWhitespace: true,
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
|
|
30
packages/docusaurus/lib/core/templates/ssr.html.template.js
Normal file
30
packages/docusaurus/lib/core/templates/ssr.html.template.js
Normal file
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
module.exports = `
|
||||
<!DOCTYPE html>
|
||||
<html <%= htmlAttributes %>>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<% metaAttributes.forEach((metaAttribute) => { %>
|
||||
<%- metaAttribute %>
|
||||
<% }); %>
|
||||
<% stylesheets.forEach((stylesheet) => { %>
|
||||
<link rel="stylesheet" type="text/css" href="<%= baseUrl %><%= stylesheet %>" />
|
||||
<% }); %>
|
||||
</head>
|
||||
<body <%= bodyAttributes %>>
|
||||
<div id="__docusaurus">
|
||||
<%- appHtml %>
|
||||
</div>
|
||||
<% scripts.forEach((script) => { %>
|
||||
<script type="text/javascript" src="<%= baseUrl %><%= script %>"></script>
|
||||
<% }); %>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
|
@ -102,7 +102,7 @@ module.exports = async function load(siteDir, cliOptions = {}) {
|
|||
// Generate contents metadata.
|
||||
const metadataTemplateFile = path.resolve(
|
||||
__dirname,
|
||||
'../core/metadata.template.ejs',
|
||||
'../core/templates/metadata.template.ejs',
|
||||
);
|
||||
const metadataTemplate = fs.readFileSync(metadataTemplateFile).toString();
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue