Pulling most of the page template into a component
This commit is contained in:
Jeff Avallone
parent
bdf54945fe
commit
95a6709ec0
57
src/components/PageTemplate.js
Normal file
57
src/components/PageTemplate.js
Normal file
@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import pkg from '../../package.json';
|
||||
|
||||
import GithubIcon from 'feather-icons/dist/icons/github.svg';
|
||||
|
||||
const PageTemplate = ({ title, children }) => (
|
||||
<html>
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="description" content={ pkg.description } />
|
||||
|
||||
<link rel="author" href="/humans.txt" />
|
||||
|
||||
<title>Regexper{ title && (' - ' + title) }</title>
|
||||
</head>
|
||||
<body>
|
||||
<header id="main">
|
||||
<h1>
|
||||
<a href="/">Regexper</a>
|
||||
</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://github.com/javallone/regexper-static">
|
||||
<GithubIcon/>Source on GitHub
|
||||
</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
{ children }
|
||||
|
||||
<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>
|
||||
);
|
||||
|
||||
PageTemplate.propTypes = {
|
||||
title: PropTypes.string,
|
||||
children: PropTypes.element
|
||||
};
|
||||
|
||||
export default PageTemplate;
|
||||
24
src/components/PageTemplate.test.js
Normal file
24
src/components/PageTemplate.test.js
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
import PageTemplate from './PageTemplate';
|
||||
|
||||
test('PageTemplate rendering', () => {
|
||||
const component = renderer.create(
|
||||
<PageTemplate>
|
||||
<p>Content</p>
|
||||
</PageTemplate>
|
||||
);
|
||||
let tree = component.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('PageTemplate rendering with title', () => {
|
||||
const component = renderer.create(
|
||||
<PageTemplate title="Example">
|
||||
<p>Content</p>
|
||||
</PageTemplate>
|
||||
);
|
||||
let tree = component.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
156
src/components/__snapshots__/PageTemplate.test.js.snap
Normal file
156
src/components/__snapshots__/PageTemplate.test.js.snap
Normal file
@ -0,0 +1,156 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`PageTemplate rendering 1`] = `
|
||||
<html>
|
||||
<head>
|
||||
<meta
|
||||
charSet="utf-8"
|
||||
/>
|
||||
<meta
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
name="viewport"
|
||||
/>
|
||||
<meta
|
||||
content="Regular expression visualization tool using railroad diagrams"
|
||||
name="description"
|
||||
/>
|
||||
<link
|
||||
href="/humans.txt"
|
||||
rel="author"
|
||||
/>
|
||||
<title>
|
||||
Regexper
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header
|
||||
id="main"
|
||||
>
|
||||
<h1>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
Regexper
|
||||
</a>
|
||||
</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/javallone/regexper-static"
|
||||
>
|
||||
mock SVG
|
||||
Source on GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<footer>
|
||||
<ul
|
||||
className="inline-list"
|
||||
>
|
||||
<li>
|
||||
Created by
|
||||
<a
|
||||
href="mailto:jeff.avallone@gmail.com"
|
||||
>
|
||||
Jeff Avallone
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Generated images licensed:
|
||||
<a
|
||||
href="http://creativecommons.org/licenses/by/3.0/"
|
||||
rel="license"
|
||||
>
|
||||
<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>
|
||||
`;
|
||||
|
||||
exports[`PageTemplate rendering with title 1`] = `
|
||||
<html>
|
||||
<head>
|
||||
<meta
|
||||
charSet="utf-8"
|
||||
/>
|
||||
<meta
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
name="viewport"
|
||||
/>
|
||||
<meta
|
||||
content="Regular expression visualization tool using railroad diagrams"
|
||||
name="description"
|
||||
/>
|
||||
<link
|
||||
href="/humans.txt"
|
||||
rel="author"
|
||||
/>
|
||||
<title>
|
||||
Regexper
|
||||
- Example
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header
|
||||
id="main"
|
||||
>
|
||||
<h1>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
Regexper
|
||||
</a>
|
||||
</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/javallone/regexper-static"
|
||||
>
|
||||
mock SVG
|
||||
Source on GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<footer>
|
||||
<ul
|
||||
className="inline-list"
|
||||
>
|
||||
<li>
|
||||
Created by
|
||||
<a
|
||||
href="mailto:jeff.avallone@gmail.com"
|
||||
>
|
||||
Jeff Avallone
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Generated images licensed:
|
||||
<a
|
||||
href="http://creativecommons.org/licenses/by/3.0/"
|
||||
rel="license"
|
||||
>
|
||||
<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,59 +2,19 @@ import 'babel-register';
|
||||
import React from 'react';
|
||||
import ReactDOMServer from 'react-dom/server';
|
||||
|
||||
import pkg from '../package.json';
|
||||
|
||||
import PageTemplate from './components/PageTemplate';
|
||||
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={ pkg.description } />
|
||||
<PageTemplate>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<div id="root"></div>
|
||||
</PageTemplate>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user