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,36 +2,12 @@ import 'babel-register';
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOMServer from 'react-dom/server';
|
import ReactDOMServer from 'react-dom/server';
|
||||||
|
|
||||||
import pkg from '../package.json';
|
import PageTemplate 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';
|
||||||
import GithubIcon from 'feather-icons/dist/icons/github.svg';
|
|
||||||
|
|
||||||
module.exports = '<!DOCTYPE html>' + ReactDOMServer.renderToString(
|
module.exports = '<!DOCTYPE html>' + ReactDOMServer.renderToString(
|
||||||
<html>
|
<PageTemplate>
|
||||||
<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>
|
|
||||||
</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>
|
<noscript>
|
||||||
<Message icon={ AlertIcon } heading="JavaScript Required">
|
<Message icon={ AlertIcon } heading="JavaScript Required">
|
||||||
<p>You need to enable JavaScript to use Regexper.</p>
|
<p>You need to enable JavaScript to use Regexper.</p>
|
||||||
@ -40,21 +16,5 @@ module.exports = '<!DOCTYPE html>' + ReactDOMServer.renderToString(
|
|||||||
</noscript>
|
</noscript>
|
||||||
|
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
</PageTemplate>
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user