Adding HTML lang attribute and description metadata

This commit is contained in:
Jeff Avallone 2019-01-16 06:35:43 -05:00
parent 325f01f034
commit c7ea0659f4
9 changed files with 64 additions and 19 deletions

View File

@ -1,3 +1,5 @@
const pkg = require('./package.json');
const buildId = [
process.env.CI_COMMIT_REF_SLUG || 'prerelese',
(process.env.CI_COMMIT_SHA || 'gitsha').slice(0, 7)
@ -8,6 +10,7 @@ const banner = process.env.BANNER || (process.env.NODE_ENV === 'production'
module.exports = {
siteMetadata: {
description: pkg.description,
buildId,
banner,
defaultSyntax: 'js',

View File

@ -4,6 +4,11 @@ exports[`Metadata rendering 1`] = `
<HelmetWrapper
defer={true}
encodeSpecialCharacters={true}
htmlAttributes={
Object {
"lang": "test-lang",
}
}
>
<title>
Regexper
@ -11,13 +16,22 @@ exports[`Metadata rendering 1`] = `
</HelmetWrapper>
`;
exports[`Metadata rendering with a title 1`] = `
exports[`Metadata rendering with a title and description 1`] = `
<HelmetWrapper
defer={true}
encodeSpecialCharacters={true}
htmlAttributes={
Object {
"lang": "test-lang",
}
}
>
<title>
Regexper - Testing
</title>
<meta
content="Test description"
name="description"
/>
</HelmetWrapper>
`;

View File

@ -1,15 +1,29 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withNamespaces } from 'react-i18next';
import { Helmet } from 'react-helmet';
const Metadata = ({ title }) => (
<Helmet>
<title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
</Helmet>
);
class Metadata extends React.PureComponent {
static propTypes = {
title: PropTypes.string,
description: PropTypes.string,
i18n: PropTypes.shape({
language: PropTypes.string.isRequired
}).isRequired
}
Metadata.propTypes = {
title: PropTypes.string
};
render() {
const { title, description, i18n } = this.props;
const htmlAttributes = {
lang: i18n.language
};
export default Metadata;
return <Helmet htmlAttributes={ htmlAttributes }>
<title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
{ description && <meta name="description" content={ description } /> }
</Helmet>;
}
}
export { Metadata };
export default withNamespaces()(Metadata);

View File

@ -1,19 +1,26 @@
import React from 'react';
import { shallow } from 'enzyme';
import Metadata from 'components/Metadata';
import { Metadata } from 'components/Metadata';
const commonProps = {
i18n: { language: 'test-lang' }
};
describe('Metadata', () => {
test('rendering', () => {
const component = shallow(
<Metadata />
<Metadata { ...commonProps } />
);
expect(component).toMatchSnapshot();
});
test('rendering with a title', () => {
test('rendering with a title and description', () => {
const component = shallow(
<Metadata title="Testing" />
<Metadata
title="Testing"
description="Test description"
{ ...commonProps } />
);
expect(component).toMatchSnapshot();
});

View File

@ -2,7 +2,7 @@
exports[`Error Page rendering 1`] = `
<Fragment>
<Metadata
<LoadNamespace(Metadata)
title="TRANSLATE(Page Not Found)"
/>
<Message

View File

@ -2,7 +2,9 @@
exports[`Index Page rendering 1`] = `
<Fragment>
<Metadata />
<LoadNamespace(Metadata)
description="Test description"
/>
<noscript>
<Message
heading="JavaScript Required"
@ -44,7 +46,9 @@ exports[`Index Page rendering 1`] = `
exports[`Index Page rendering with an expression on the URL 1`] = `
<Fragment>
<Metadata />
<LoadNamespace(Metadata)
description="Test description"
/>
<noscript>
<Message
heading="JavaScript Required"

View File

@ -2,7 +2,7 @@
exports[`Privacy Page rendering 1`] = `
<Fragment>
<Metadata
<LoadNamespace(Metadata)
title="TRANSLATE(Privacy Policy)"
/>
<Message

View File

@ -11,6 +11,7 @@ export const query = graphql`
query IndexPageQuery {
site {
siteMetadata {
description
defaultSyntax
syntaxList { id, label }
}
@ -43,7 +44,7 @@ export const IndexPage = ({
location,
data: { site: { siteMetadata } }
}) => <>
<Metadata/>
<Metadata description={ siteMetadata.description } />
<noscript>
<Message type="error" heading="JavaScript Required">
<p>You need JavaScript to use Regexper.</p>
@ -61,6 +62,7 @@ IndexPage.propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
description: PropTypes.string,
defaultSyntax: PropTypes.string,
syntaxList: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,

View File

@ -6,6 +6,7 @@ import { IndexPage } from 'pages/index';
const queryResult = {
site: {
siteMetadata: {
description: 'Test description',
defaultSyntax: 'testJs',
syntaxList: [
{ id: 'testJS', name: 'Testing JS' },