Adding HTML lang attribute and description metadata

gatsby-config.js

@@ -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',

src/components/Metadata/__snapshots__/test.js.snap

@@ -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>
 `;

src/components/Metadata/index.js

@@ -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 }) => (
+class Metadata extends React.PureComponent {
-  <Helmet>
+  static propTypes = {
-    <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
+    title: PropTypes.string,
-  </Helmet>
+    description: PropTypes.string,
-);
+    i18n: PropTypes.shape({
+      language: PropTypes.string.isRequired
+    }).isRequired
+  }
 
-Metadata.propTypes = {
+  render() {
-  title: PropTypes.string
+    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);

src/components/Metadata/test.js

@@ -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();
   });

src/pages/__snapshots__/404.test.js.snap

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

src/pages/__snapshots__/index.test.js.snap

@@ -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"

src/pages/__snapshots__/privacy.test.js.snap

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

src/pages/index.js

@@ -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,

src/pages/index.test.js

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