Fix your-badge link (#3058)

Fix #1954

.eslintrc.yml

@@ -11,6 +11,12 @@ parserOptions:
   # though that setting is only for ES6 modules, not CommonJS modules.
   sourceType: 'script'
 
+overrides:
+  files:
+    - gatsby-browser.js
+  parserOptions:
+    sourceType: 'module'
+
 plugins:
   - mocha
   - no-extension-in-require

frontend/components/usage.js

@@ -170,7 +170,7 @@ export default class Usage extends React.PureComponent {
       <section>
         <H2 id="your-badge">Your Badge</H2>
 
-        <H3 id="static-badge">Static</H3>
+        <H3>Static</H3>
         <StaticBadgeMaker baseUrl={baseUrl} />
 
         <VerticalSpace />
@@ -215,7 +215,7 @@ export default class Usage extends React.PureComponent {
           />
         </p>
 
-        <H3 id="endpoint">Endpoint (Beta)</H3>
+        <H3>Endpoint (Beta)</H3>
 
         <p>
           <Snippet

frontend/pages/endpoint.js

@@ -87,7 +87,7 @@ const EndpointPage = () => (
     <GlobalStyle />
     <Meta />
     <Header />
-    <H3 id="static-badge">Endpoint (Beta)</H3>
+    <H3>Endpoint (Beta)</H3>
     <Snippet snippet={`${baseUrl}/badge/endpoint.svg?url=...&style=...`} />
     <p>Endpoint response:</p>
     <JsonExample

gatsby-browser.js

@@ -0,0 +1,16 @@
+// Adapted from https://github.com/gatsbyjs/gatsby/issues/8413
+
+function scrollToElementId(id) {
+  const el = document.querySelector(id)
+  if (el) {
+    return window.scrollTo(0, el.offsetTop - 20)
+  } else {
+    return false
+  }
+}
+
+export function onRouteUpdate({ location: { hash } }) {
+  if (hash) {
+    window.setTimeout(() => scrollToElementId(hash), 10)
+  }
+}