Moving supported syntax list to gatsby-config

gatsby-config.js

@@ -9,7 +9,12 @@ const banner = process.env.BANNER || (process.env.NODE_ENV === 'production'
 module.exports = {
   siteMetadata: {
     buildId,
-    banner
+    banner,
+    defaultSyntax: 'js',
+    syntaxList: [
+      { id: 'js', label: 'JavaScript' },
+      { id: 'pcre', label: 'PCRE' }
+    ]
   },
   plugins: [
     'gatsby-plugin-react-helmet',

src/components/App/index.js

@@ -93,7 +93,8 @@ class App extends React.PureComponent {
     const {
       syntax,
       expr,
-      permalinkUrl
+      permalinkUrl,
+      syntaxList
     } = this.props;
     const {
       loading,
@@ -105,7 +106,8 @@ class App extends React.PureComponent {
     const formProps = {
       onSubmit: this.handleSubmit,
       syntax,
-      expr
+      expr,
+      syntaxList
     };
     const actionProps = {
       imageDetails,
@@ -137,7 +139,11 @@ class App extends React.PureComponent {
 App.propTypes = {
   syntax: PropTypes.string,
   expr: PropTypes.string,
-  permalinkUrl: PropTypes.string
+  permalinkUrl: PropTypes.string,
+  syntaxList: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string
+  }))
 };
 
 export default App;

src/components/Form/index.js

@@ -5,11 +5,6 @@ import ExpandIcon from 'react-feather/dist/icons/chevrons-down';
 
 import style from './style.module.css';
 
-const syntaxList = [
-  { id: 'js', label: 'JavaScript' },
-  { id: 'pcre', label: 'PCRE' }
-];
-
 class Form extends React.PureComponent {
   state = {
     expr: this.props.expr,
@@ -36,6 +31,7 @@ class Form extends React.PureComponent {
 
   render() {
     const {
+      syntaxList,
       children
     } = this.props;
     const { expr, syntax } = this.state;
@@ -70,6 +66,10 @@ class Form extends React.PureComponent {
 Form.propTypes = {
   expr: PropTypes.string,
   syntax: PropTypes.string,
+  syntaxList: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string
+  })),
   onSubmit: PropTypes.func.isRequired,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),

src/pages/index.js

@@ -1,13 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'gatsby';
+import { Link, graphql } from 'gatsby';
 import URLSearchParams from '@ungap/url-search-params';
 
 import Metadata from 'components/Metadata';
 import Message from 'components/Message';
 import App from 'components/App';
 
-const readURLHash = location => {
+export const query = graphql`
+  query IndexPageQuery {
+    site {
+      siteMetadata {
+        defaultSyntax
+        syntaxList { id, label }
+      }
+    }
+  }
+`;
+
+const readURLHash = (location, defaultSyntax) => {
   const query = location.hash.slice(1);
   const params = new URLSearchParams(query);
   const permalinkUrl = query ? location.href : null;
@@ -21,14 +32,17 @@ const readURLHash = location => {
   } else {
     // Assuming old-style URL
     return {
-      syntax: 'js',
+      syntax: defaultSyntax,
       expr: query,
       permalinkUrl
     };
   }
 };
 
-export const IndexPage = ({ location }) => <>
+export const IndexPage = ({
+  location,
+  data: { site: { siteMetadata } }
+}) => <>
   <Metadata/>
   <noscript>
     <Message type="error" heading="JavaScript Required">
@@ -37,11 +51,24 @@ export const IndexPage = ({ location }) => <>
         please see the <Link to="/privacy">Privacy Policy</Link>.</p>
     </Message>
   </noscript>
-  <App { ...readURLHash(location) } />
+  <App
+    syntaxList={ siteMetadata.syntaxList }
+    { ...readURLHash(location, siteMetadata.defaultSyntax) } />
 </>;
 
 IndexPage.propTypes = {
-  location: PropTypes.object
+  location: PropTypes.object,
+  data: PropTypes.shape({
+    site: PropTypes.shape({
+      siteMetadata: PropTypes.shape({
+        defaultSyntax: PropTypes.string,
+        syntaxList: PropTypes.arrayOf(PropTypes.shape({
+          id: PropTypes.string,
+          label: PropTypes.string
+        }))
+      })
+    })
+  })
 };
 
 export default IndexPage;