Creating separate templates for each page
This commit is contained in:
parent
95a6709ec0
commit
84df219d7f
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import ReactDOMServer from 'react-dom/server';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import pkg from '../../package.json';
|
||||
@ -54,4 +55,7 @@ PageTemplate.propTypes = {
|
||||
children: PropTypes.element
|
||||
};
|
||||
|
||||
const renderToString = content => '<!DOCTYPE html>' + ReactDOMServer.renderToString(content);
|
||||
|
||||
export default PageTemplate;
|
||||
export { renderToString };
|
||||
|
@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import '../style.css';
|
||||
|
||||
import Message from '../components/Message';
|
||||
import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
||||
|
||||
ReactDOM.render(
|
||||
<Message icon={ ErrorIcon } heading="404 Page Not Found">
|
||||
<p>The page you have requested could not be found</p>
|
||||
</Message>,
|
||||
document.getElementById('root'));
|
1
src/pages/404/index.js
Normal file
1
src/pages/404/index.js
Normal file
@ -0,0 +1 @@
|
||||
import '../../style.css';
|
14
src/pages/404/template.js
Normal file
14
src/pages/404/template.js
Normal file
@ -0,0 +1,14 @@
|
||||
import 'babel-register';
|
||||
import React from 'react';
|
||||
|
||||
import PageTemplate, { renderToString } from '../../components/PageTemplate';
|
||||
import Message from '../../components/Message';
|
||||
import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
||||
|
||||
export default renderToString(
|
||||
<PageTemplate>
|
||||
<Message icon={ AlertIcon } heading="404 Page Not Found">
|
||||
<p>The page you have requested could not be found</p>
|
||||
</Message>
|
||||
</PageTemplate>
|
||||
);
|
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import App from '../components/App';
|
||||
import App from '../../components/App';
|
||||
|
||||
import '../style.css';
|
||||
import '../service-worker';
|
||||
import '../../style.css';
|
||||
import '../../service-worker';
|
||||
|
||||
ReactDOM.render(<App/>, document.getElementById('root'));
|
@ -1,12 +1,11 @@
|
||||
import 'babel-register';
|
||||
import React from 'react';
|
||||
import ReactDOMServer from 'react-dom/server';
|
||||
|
||||
import PageTemplate from './components/PageTemplate';
|
||||
import Message from './components/Message';
|
||||
import PageTemplate, { renderToString } from '../../components/PageTemplate';
|
||||
import Message from '../../components/Message';
|
||||
import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
||||
|
||||
module.exports = '<!DOCTYPE html>' + ReactDOMServer.renderToString(
|
||||
export default renderToString(
|
||||
<PageTemplate>
|
||||
<noscript>
|
||||
<Message icon={ AlertIcon } heading="JavaScript Required">
|
@ -10,8 +10,8 @@ const pkg = require('./package.json');
|
||||
|
||||
const pages = fs.readdirSync(path.resolve(__dirname, 'src/pages'));
|
||||
const pagePlugins = pages.map(name => new HtmlPlugin({
|
||||
template: './src/template.js',
|
||||
filename: name.replace(/\.js$/, '.html'),
|
||||
template: `./src/pages/${ name }/template.js`,
|
||||
filename: `${ name }.html`,
|
||||
chunks: ['common', name],
|
||||
minify: {
|
||||
removeComments: true,
|
||||
|
Loading…
Reference in New Issue
Block a user