Adding HTML lang attribute and description metadata
This commit is contained in:
parent
325f01f034
commit
c7ea0659f4
@ -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',
|
||||
|
@ -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>
|
||||
`;
|
||||
|
@ -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);
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`Error Page rendering 1`] = `
|
||||
<Fragment>
|
||||
<Metadata
|
||||
<LoadNamespace(Metadata)
|
||||
title="TRANSLATE(Page Not Found)"
|
||||
/>
|
||||
<Message
|
||||
|
@ -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"
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`Privacy Page rendering 1`] = `
|
||||
<Fragment>
|
||||
<Metadata
|
||||
<LoadNamespace(Metadata)
|
||||
title="TRANSLATE(Privacy Policy)"
|
||||
/>
|
||||
<Message
|
||||
|
@ -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,
|
||||
|
@ -6,6 +6,7 @@ import { IndexPage } from 'pages/index';
|
||||
const queryResult = {
|
||||
site: {
|
||||
siteMetadata: {
|
||||
description: 'Test description',
|
||||
defaultSyntax: 'testJs',
|
||||
syntaxList: [
|
||||
{ id: 'testJS', name: 'Testing JS' },
|
||||
|
Loading…
Reference in New Issue
Block a user