root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Creating separate templates for each page

Browse Source
This commit is contained in:
Jeff Avallone 2018-02-11 07:42:52 -05:00
parent 95a6709ec0
commit 84df219d7f
7 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/PageTemplate.js
View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import ReactDOMServer from 'react-dom/server';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import pkg from '../../package.json'; import pkg from '../../package.json';
@ -54,4 +55,7 @@ PageTemplate.propTypes = {
children: PropTypes.element children: PropTypes.element
}; };
const renderToString = content => '<!DOCTYPE html>' + ReactDOMServer.renderToString(content);
export default PageTemplate; export default PageTemplate;
export { renderToString };

13
src/pages/404.js
View File

@ -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
View File

@ -0,0 +1 @@
import '../../style.css';

14
src/pages/404/template.js Normal file
View 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>
);

6
src/pages/index.js → src/pages/index/index.js
View File

@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import App from '../components/App'; import App from '../../components/App';
import '../style.css'; import '../../style.css';
import '../service-worker'; import '../../service-worker';
ReactDOM.render(<App/>, document.getElementById('root')); ReactDOM.render(<App/>, document.getElementById('root'));

7
src/template.js → src/pages/index/template.js
View File

@ -1,12 +1,11 @@
import 'babel-register'; import 'babel-register';
import React from 'react'; import React from 'react';
import ReactDOMServer from 'react-dom/server';
import PageTemplate from './components/PageTemplate'; import PageTemplate, { renderToString } from '../../components/PageTemplate';
import Message from './components/Message'; import Message from '../../components/Message';
import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg'; import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
module.exports = '<!DOCTYPE html>' + ReactDOMServer.renderToString( export default renderToString(
<PageTemplate> <PageTemplate>
<noscript> <noscript>
<Message icon={ AlertIcon } heading="JavaScript Required"> <Message icon={ AlertIcon } heading="JavaScript Required">

4
webpack.common.js
View File

@ -10,8 +10,8 @@ const pkg = require('./package.json');
const pages = fs.readdirSync(path.resolve(__dirname, 'src/pages')); const pages = fs.readdirSync(path.resolve(__dirname, 'src/pages'));
const pagePlugins = pages.map(name => new HtmlPlugin({ const pagePlugins = pages.map(name => new HtmlPlugin({
template: './src/template.js', template: `./src/pages/${ name }/template.js`,
filename: name.replace(/\.js$/, '.html'), filename: `${ name }.html`,
chunks: ['common', name], chunks: ['common', name],
minify: { minify: {
removeComments: true, removeComments: true,