From 1de5079aa9470b783b4ccc49ccc7a466a90cd4d1 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Sun, 11 Feb 2018 06:53:34 -0500 Subject: [PATCH] Rendering page template using React Allows for using components (like Message) when rendering the base page template --- package.json | 1 + src/style.css | 21 +++++++---------- src/template.html | 49 ---------------------------------------- src/template.js | 57 +++++++++++++++++++++++++++++++++++++++++++++++ webpack.common.js | 2 +- 5 files changed, 67 insertions(+), 63 deletions(-) delete mode 100644 src/template.html create mode 100644 src/template.js diff --git a/package.json b/package.json index af68754..7adda20 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", + "babel-register": "^6.26.0", "copy-webpack-plugin": "^4.4.1", "css-loader": "^0.28.9", "extract-text-webpack-plugin": "^3.0.2", diff --git a/src/style.css b/src/style.css index a33dc93..4dceb0e 100644 --- a/src/style.css +++ b/src/style.css @@ -59,6 +59,14 @@ body { text-decoration: underline; } +#main li img { + display: inline-block; + width: 1em; + height: 1em; + margin-right: 0.5rem; + vertical-align: text-top; +} + footer { margin: var(--spacing-margin) 0; } @@ -97,19 +105,6 @@ li { content: ''; } -[icon] { - display: inline-block; - width: 1em; - height: 1em; - background-size: 1em 1em; - margin-right: 0.5rem; - vertical-align: text-top; -} - -[icon="github"] { - background-image: url('~feather-icons/dist/icons/github.svg'); -} - .message { background: var(--color-tan); padding: var(--spacing-margin); diff --git a/src/template.html b/src/template.html deleted file mode 100644 index dfb3a80..0000000 --- a/src/template.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - - Regexper - - -
-

- Regexper -

- - -
- - - -
- - - - diff --git a/src/template.js b/src/template.js new file mode 100644 index 0000000..299e76c --- /dev/null +++ b/src/template.js @@ -0,0 +1,57 @@ +import 'babel-register'; +import React from 'react'; +import ReactDOMServer from 'react-dom/server'; + +import Message from './components/Message'; +import alertIcon from 'feather-icons/dist/icons/alert-octagon.svg'; +import githubIcon from 'feather-icons/dist/icons/github.svg'; + +module.exports = '' + ReactDOMServer.renderToString( + + + + + + + + + Regexper + + +
+

+ Regexper +

+ + +
+ + + +
+ + + + +); diff --git a/webpack.common.js b/webpack.common.js index 4c46dd8..5817f7a 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -10,7 +10,7 @@ const pkg = require('./package.json'); const pages = fs.readdirSync(path.resolve(__dirname, 'src/pages')); const pagePlugins = pages.map(name => new HtmlPlugin({ - template: './src/template.html', + template: './src/template.js', filename: name.replace(/\.js$/, '.html'), chunks: ['common', name], minify: {