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

Pulling most of the page template into a component

This commit is contained in:
Jeff Avallone 2018-02-11 07:28:34 -05:00
parent bdf54945fe
commit 95a6709ec0
4 changed files with 247 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/PageTemplate.js Normal file
View 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
View 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
View 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>
`;

46
src/template.js
View File

@ -2,36 +2,12 @@ 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 } />
<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>
<PageTemplate>
<noscript>
<Message icon={ AlertIcon } heading="JavaScript Required">
<p>You need to enable JavaScript to use Regexper.</p>
@ -40,21 +16,5 @@ module.exports = '<!DOCTYPE html>' + ReactDOMServer.renderToString(
</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>
</PageTemplate>
);