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

Rendering page template using React

Browse Source 
Allows for using components (like Message) when rendering the base page
template
This commit is contained in:
Jeff Avallone 2018-02-11 06:53:34 -05:00
parent 810b37aa47
commit 1de5079aa9
5 changed files with 67 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

21
src/style.css
View File

@ -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);

49
src/template.html
View File

@ -1,49 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Regular expression visualizer using railroad diagrams" />
<link rel="author" href="/humans.txt" />
<title>Regexper</title>
</head>
<body>
<header id="main">
<h1>
<a href="/">Regexper</a>
</h1>
<ul>
<li><a href="https://github.com/javallone/regexper-static">
<i icon="github"></i>Source on GitHub
</a></li>
</ul>
</header>
<noscript>
<div class="message">
<h2><i icon="error"></i>JavaScript Required</h2>
<p>You need to enable JavaScript to use Regexper.</p>
<p>Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source by following the GitHub link in the header. There are two data collection tools integrated in the app: Google Analytics and Sentry.io. Google Analytics is used to track browser usage data and application performance. Sentry.io is a tool used to capture and report client-side JavaScript errors. Most popular ad blockers will prevent these tools from sending any tracking data, and doing so will <b>not</b> impact the performance of this app. Regexper is not supported by ad revenue or sales of any kind.</p>
</div>
</noscript>
<div id="root"></div>
<footer>
<ul class="inline-list">
<li>
Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a>
</li>
<li>
Generated images licensed:
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img
alt="Creative Commons CC-BY-3.0 License"
src="https://licensebuttons.net/l/by/3.0/80x15.png" /></a>
</li>
</ul>
</footer>
</body>
</html>

57
src/template.js Normal file
View File

@ -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 = '<!DOCTYPE html>' + ReactDOMServer.renderToString(
<html>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Regular expression visualizer using railroad diagrams" />
<link rel="author" href="/humans.txt" />
<title>Regexper</title>
</head>
<body>
<header id="main">
<h1>
<a href="/">Regexper</a>
</h1>
<ul>
<li><a href="https://github.com/javallone/regexper-static">
<img src={ githubIcon }/>Source on GitHub
</a></li>
</ul>
</header>
<noscript>
<Message icon={ alertIcon } heading="JavaScript Required">
<p>You need to enable JavaScript to use Regexper.</p>
<p>Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source by following the GitHub link in the header. There are two data collection tools integrated in the app: Google Analytics and Sentry.io. Google Analytics is used to track browser usage data and application performance. Sentry.io is a tool used to capture and report client-side JavaScript errors. Most popular ad blockers will prevent these tools from sending any tracking data, and doing so will <b>not</b> impact the performance of this app. Regexper is not supported by ad revenue or sales of any kind.</p>
</Message>
</noscript>
<div id="root"></div>
<footer>
<ul className="inline-list">
<li>
Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a>
</li>
<li>
Generated images licensed:
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img
alt="Creative Commons CC-BY-3.0 License"
src="https://licensebuttons.net/l/by/3.0/80x15.png" /></a>
</li>
</ul>
</footer>
</body>
</html>
);

2
webpack.common.js
View File

@ -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: {