From bc523e3aae0a7f53477ecf62ba8ff7b438f8fca2 Mon Sep 17 00:00:00 2001
From: Paul Melnikow <github@paulmelnikow.com>
Date: Wed, 20 Feb 2019 16:34:50 -0500
Subject: [PATCH] Fix your-badge link (#3058)

Fix #1954
---
 .eslintrc.yml                |  6 ++++++
 frontend/components/usage.js |  4 ++--
 frontend/pages/endpoint.js   |  2 +-
 gatsby-browser.js            | 16 ++++++++++++++++
 4 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 gatsby-browser.js

diff --git a/.eslintrc.yml b/.eslintrc.yml
index cef16c65f0..bb4c8a916c 100644
--- a/.eslintrc.yml
+++ b/.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
diff --git a/frontend/components/usage.js b/frontend/components/usage.js
index 427353dd6c..363c7d333f 100644
--- a/frontend/components/usage.js
+++ b/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
diff --git a/frontend/pages/endpoint.js b/frontend/pages/endpoint.js
index 71cc07282d..0fdaafe7f8 100644
--- a/frontend/pages/endpoint.js
+++ b/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
diff --git a/gatsby-browser.js b/gatsby-browser.js
new file mode 100644
index 0000000000..ad8b86ab07
--- /dev/null
+++ b/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)
+  }
+}