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

Breaking Header and Footer out into components

Browse Source 
For forthcoming i18n setup
This commit is contained in:
Jeff Avallone 2018-02-11 15:58:59 -05:00
parent 4923bbd985
commit 63766e84e9
11 changed files with 168 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/App.js
View File

@ -1,9 +1,15 @@
import React from 'react'; import React from 'react';
import Header from './Header';
import Footer from './Footer';
import Message from './Message'; import Message from './Message';
const App = () => <Message heading="React App"> const App = () => <React.Fragment>
<Header/>
<Message heading="React App">
<p>Placeholder app content</p> <p>Placeholder app content</p>
</Message>; </Message>
<Footer/>
</React.Fragment>;
export default App; export default App;

20
src/components/Footer.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
const Footer = () => (
<footer>
<ul className="inline with-separator">
<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>
);
export default Footer;

13
src/components/Footer.test.js Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
import { shallow } from 'enzyme';
import Footer from './Footer';
test('Footer rendering', () => {
const component = shallow(
<Footer>
<p>Content</p>
</Footer>
);
expect(component).toMatchSnapshot();
});

19
src/components/Header.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import GithubIcon from 'feather-icons/dist/icons/github.svg';
const Header = () => (
<header id="main" data-banner={ process.env.BANNER }>
<h1>
<a href="/">Regexper</a>
</h1>
<ul className="inline">
<li><a href="https://github.com/javallone/regexper-static">
<GithubIcon/>Source on GitHub
</a></li>
</ul>
</header>
);
export default Header;

26
src/components/Header.test.js Normal file
View File

@ -0,0 +1,26 @@
import React from 'react';
import { shallow } from 'enzyme';
import Header from './Header';
const env = { ...process.env };
afterEach(() => {
process.env = env;
});
beforeEach(() => {
process.env = {
...process.env,
BANNER: 'testing'
};
});
test('Header rendering', () => {
const component = shallow(
<Header>
<p>Content</p>
</Header>
);
expect(component).toMatchSnapshot();
});

34
src/components/PageTemplate.js
View File

@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
import pkg from '../../package.json'; import pkg from '../../package.json';
import GithubIcon from 'feather-icons/dist/icons/github.svg'; import Header from '../components/Header';
import Footer from '../components/Footer';
const PageTemplate = ({ title, children }) => ( const PageTemplate = ({ title, children }) => (
<html> <html>
@ -18,34 +19,11 @@ const PageTemplate = ({ title, children }) => (
<title>Regexper{ title && (' - ' + title) }</title> <title>Regexper{ title && (' - ' + title) }</title>
</head> </head>
<body data-build-id={ process.env.BUILD_ID }> <body data-build-id={ process.env.BUILD_ID }>
<header id="main" data-banner={ process.env.BANNER }> <div id="root">
<h1> <Header/>
<a href="/">Regexper</a>
</h1>
<ul className="inline">
<li><a href="https://github.com/javallone/regexper-static">
<GithubIcon/>Source on GitHub
</a></li>
</ul>
</header>
{ children } { children }
<Footer/>
<footer> </div>
<ul className="inline with-separator">
<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> </body>
</html> </html>
); );

1
src/components/PageTemplate.test.js
View File

@ -12,7 +12,6 @@ afterEach(() => {
beforeEach(() => { beforeEach(() => {
process.env = { process.env = {
...process.env, ...process.env,
BANNER: 'testing',
BUILD_ID: 'test-id' BUILD_ID: 'test-id'
}; };
}); });

30
src/components/__snapshots__/Footer.test.js.snap Normal file
View File

@ -0,0 +1,30 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Footer rendering 1`] = `
<footer>
<ul
className="inline with-separator"
>
<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>
`;

28
src/components/__snapshots__/Header.test.js.snap Normal file
View File

@ -0,0 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Header rendering 1`] = `
<header
data-banner="testing"
id="main"
>
<h1>
<a
href="/"
>
Regexper
</a>
</h1>
<ul
className="inline"
>
<li>
<a
href="https://github.com/javallone/regexper-static"
>
<Component />
Source on GitHub
</a>
</li>
</ul>
</header>
`;

108
src/components/__snapshots__/PageTemplate.test.js.snap
View File

@ -25,59 +25,15 @@ exports[`PageTemplate rendering 1`] = `
<body <body
data-build-id="test-id" data-build-id="test-id"
> >
<header <div
data-banner="testing" id="root"
id="main"
> >
<h1> <Header />
<a
href="/"
>
Regexper
</a>
</h1>
<ul
className="inline"
>
<li>
<a
href="https://github.com/javallone/regexper-static"
>
<Component />
Source on GitHub
</a>
</li>
</ul>
</header>
<p> <p>
Content Content
</p> </p>
<footer> <Footer />
<ul </div>
className="inline with-separator"
>
<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> </body>
</html> </html>
`; `;
@ -108,59 +64,15 @@ exports[`PageTemplate rendering with title 1`] = `
<body <body
data-build-id="test-id" data-build-id="test-id"
> >
<header <div
data-banner="testing" id="root"
id="main"
> >
<h1> <Header />
<a
href="/"
>
Regexper
</a>
</h1>
<ul
className="inline"
>
<li>
<a
href="https://github.com/javallone/regexper-static"
>
<Component />
Source on GitHub
</a>
</li>
</ul>
</header>
<p> <p>
Content Content
</p> </p>
<footer> <Footer />
<ul </div>
className="inline with-separator"
>
<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> </body>
</html> </html>
`; `;

2
src/pages/index/template.js
View File

@ -18,7 +18,5 @@ export default renderToString(
<p>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. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.</p> <p>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. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.</p>
</Message> </Message>
</noscript> </noscript>
<div id="root"></div>
</PageTemplate> </PageTemplate>
); );