DOP-4815

gatsby-browser.js

@@ -8,7 +8,11 @@ import './src/styles/global-dark-mode.css';
 export const wrapRootElement = ({ element }) => <ThemeProvider theme={theme}>{element}</ThemeProvider>;
 
 export const shouldUpdateScroll = ({ routerProps: { location } }) => {
-  if (location?.state?.preserveScroll) {
+  const { hash, state } = location;
+  if (hash) {
+    return decodeURI(hash.slice(1));
+  }
+  if (state?.preserveScroll) {
     return false;
   }
   return true;

src/components/DefinitionList/DefinitionListItem.js

@@ -2,17 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import ComponentFactory from '../ComponentFactory';
+import { HeaderBuffer } from '../Permalink';
+import { theme } from '../../theme/docsTheme';
 import { findKeyValuePair } from '../../utils/find-key-value-pair';
 
 const DefinitionListItem = ({ nodeData: { children, term }, ...rest }) => {
   const termProps = {};
   const targetIdentifier = findKeyValuePair(term, 'type', 'inline_target');
-  if (targetIdentifier) {
-    termProps.id = targetIdentifier.html_id;
-  }
 
   return (
     <>
+      {targetIdentifier && (
+        <HeaderBuffer id={targetIdentifier.html_id} bufferSpace={`-${theme.header.navbarScrollOffset}`}></HeaderBuffer>
+      )}
       <dt {...termProps}>
         {term.map((child, index) => (
           <ComponentFactory nodeData={child} key={`dt-${index}`} />

src/components/Permalink.js

@@ -20,7 +20,7 @@ const tooltipStyle = css`
   }
 `;
 
-const HeaderBuffer = styled.div`
+export const HeaderBuffer = styled.div`
   margin-top: ${({ bufferSpace }) => bufferSpace};
   position: absolute;
   // Add a bit of padding to help headings be more accurately set as "active" on FF and Safari

src/components/Target.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
+import useHashAnchor from '../hooks/use-hash-anchor';
 import ComponentFactory from './ComponentFactory';
 import Permalink from './Permalink';
 
@@ -36,9 +37,11 @@ const Target = ({ nodeData: { children, html_id, name, options }, ...rest }) =>
   const [, dictList] = partition(children, (elem) => elem.type === 'target_identifier');
   const [[descriptionTerm], descriptionDetails] = partition(dictList, (elem) => elem.type === 'directive_argument');
   const hidden = options && options.hidden ? true : false;
+  const targetRef = useRef();
+  useHashAnchor(html_id, targetRef);
 
   return (
-    <React.Fragment>
+    <div ref={targetRef}>
       {/* Render binary and program targets **and targets with the :hidden: flag
       as empty spans such that their IDs are rendered on the page. */}
       {dictList.length > 0 && !['binary', 'program'].includes(name) && !hidden ? (
@@ -53,7 +56,7 @@ const Target = ({ nodeData: { children, html_id, name, options }, ...rest }) =>
       ) : (
         <span className="header-buffer" id={html_id} />
       )}
-    </React.Fragment>
+    </div>
   );
 };
 

src/hooks/use-hash-anchor.js

@@ -1,17 +1,24 @@
 import { useEffect } from 'react';
 import { useLocation } from '@gatsbyjs/reach-router';
+import { theme } from '../theme/docsTheme';
 
 const useHashAnchor = (id, ref) => {
   const { hash } = useLocation();
 
   useEffect(() => {
     const hashId = hash?.slice(1);
-    if (!hash || id !== hashId) {
+    if (!hash || id !== hashId || !ref.current || !window) {
       return;
     }
     setTimeout(() => {
-      window.scrollTo(0, ref.current.offsetTop);
-    }, 40);
+      const scrollFromTop = ref.current.getBoundingClientRect()?.top + window.scrollY;
+      if (!scrollFromTop || scrollFromTop < 0) {
+        console.log('returning early for id ', hashId);
+        return;
+      }
+      console.log('scrolling for ', hashId);
+      window.scrollTo(0, scrollFromTop - parseInt(theme.header.navbarScrollOffset));
+    }, 100);
   }, [hash, id, ref]);
 };
 

tests/unit/__snapshots__/Target.test.js.snap

@@ -111,101 +111,105 @@ a .emotion-0 {
   text-decoration-color: #E8EDEB;
 }
 
-<dl
-    class="option"
-  >
-    <dt>
-      <code
-        class="emotion-0"
-      >
-        --config &lt;filename&gt;, -f &lt;filename&gt;
-      </code>
-      <a
-        class="headerlink emotion-1"
-        href="#std-option-mongos.--config"
-        title="Permalink to this definition"
-      >
-        <svg
-          aria-label="Link Icon"
-          class="emotion-2"
-          fill="none"
-          height="12"
-          role="img"
-          viewBox="0 0 16 16"
-          width="12"
-          xmlns="http://www.w3.org/2000/svg"
+<div>
+    <dl
+      class="option"
+    >
+      <dt>
+        <code
+          class="emotion-0"
         >
-          <path
-            d="M6.039 9.953a3.596 3.596 0 0 1-.327-.38l1.45-1.445a1.553 1.553 0 0 0 2.496.423l2.885-2.87a1.57 1.57 0 0 0 .01-2.213 1.553 1.553 0 0 0-2.203-.01l-.379.377A.995.995 0 0 1 8.56 3.83a1.005 1.005 0 0 1 .006-1.418l.38-.377a3.542 3.542 0 0 1 5.024.023 3.58 3.58 0 0 1-.022 5.047l-2.884 2.871a3.542 3.542 0 0 1-5.025-.022Z"
-            fill="currentColor"
-          />
-          <path
-            d="M9.961 6.047c.12.12.228.248.327.38l-1.45 1.445a1.553 1.553 0 0 0-2.496-.423l-2.885 2.87a1.57 1.57 0 0 0-.01 2.213 1.553 1.553 0 0 0 2.203.01l.379-.377a.995.995 0 0 1 1.411.006 1.005 1.005 0 0 1-.006 1.418l-.38.377a3.542 3.542 0 0 1-5.024-.023 3.58 3.58 0 0 1 .022-5.047l2.884-2.871a3.542 3.542 0 0 1 5.025.022Z"
-            fill="currentColor"
-          />
-        </svg>
-      </a>
-      <div
-        class="emotion-3 emotion-4"
-        id="std-option-mongos.--config"
-      />
-    </dt>
-    <dd>
-      <p
-        class="emotion-5"
-      >
-        Specifies a configuration file for runtime configuration options. The
-configuration file is the preferred method for runtime configuration of
-
+          --config &lt;filename&gt;, -f &lt;filename&gt;
+        </code>
         <a
-          class="emotion-6"
-          href="/reference/program/mongos/#std-program-mongos"
+          class="headerlink emotion-1"
+          href="#std-option-mongos.--config"
+          title="Permalink to this definition"
         >
-          <code
-            class="emotion-0"
+          <svg
+            aria-label="Link Icon"
+            class="emotion-2"
+            fill="none"
+            height="12"
+            role="img"
+            viewBox="0 0 16 16"
+            width="12"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            mongos
-          </code>
+            <path
+              d="M6.039 9.953a3.596 3.596 0 0 1-.327-.38l1.45-1.445a1.553 1.553 0 0 0 2.496.423l2.885-2.87a1.57 1.57 0 0 0 .01-2.213 1.553 1.553 0 0 0-2.203-.01l-.379.377A.995.995 0 0 1 8.56 3.83a1.005 1.005 0 0 1 .006-1.418l.38-.377a3.542 3.542 0 0 1 5.024.023 3.58 3.58 0 0 1-.022 5.047l-2.884 2.871a3.542 3.542 0 0 1-5.025-.022Z"
+              fill="currentColor"
+            />
+            <path
+              d="M9.961 6.047c.12.12.228.248.327.38l-1.45 1.445a1.553 1.553 0 0 0-2.496-.423l-2.885 2.87a1.57 1.57 0 0 0-.01 2.213 1.553 1.553 0 0 0 2.203.01l.379-.377a.995.995 0 0 1 1.411.006 1.005 1.005 0 0 1-.006 1.418l-.38.377a3.542 3.542 0 0 1-5.024-.023 3.58 3.58 0 0 1 .022-5.047l2.884-2.871a3.542 3.542 0 0 1 5.025.022Z"
+              fill="currentColor"
+            />
+          </svg>
         </a>
-        . The options are equivalent to the command-line
-configuration options. See 
-        <a
-          class="emotion-6"
-          href="/reference/configuration-options/"
+        <div
+          class="emotion-3 emotion-4"
+          id="std-option-mongos.--config"
+        />
+      </dt>
+      <dd>
+        <p
+          class="emotion-5"
         >
-          Configuration File Options
-        </a>
-         for
+          Specifies a configuration file for runtime configuration options. The
+configuration file is the preferred method for runtime configuration of
+
+          <a
+            class="emotion-6"
+            href="/reference/program/mongos/#std-program-mongos"
+          >
+            <code
+              class="emotion-0"
+            >
+              mongos
+            </code>
+          </a>
+          . The options are equivalent to the command-line
+configuration options. See 
+          <a
+            class="emotion-6"
+            href="/reference/configuration-options/"
+          >
+            Configuration File Options
+          </a>
+           for
 more information.
-      </p>
-      <p
-        class="emotion-5"
-      >
-        Ensure the configuration file uses ASCII encoding. The 
-        <a
-          class="emotion-6"
-          href="/reference/program/mongos/#std-program-mongos"
+        </p>
+        <p
+          class="emotion-5"
         >
-          <code
-            class="emotion-0"
+          Ensure the configuration file uses ASCII encoding. The 
+          <a
+            class="emotion-6"
+            href="/reference/program/mongos/#std-program-mongos"
           >
-            mongos
-          </code>
-        </a>
-
+            <code
+              class="emotion-0"
+            >
+              mongos
+            </code>
+          </a>
+
 instance does not support configuration files with non-ASCII encoding,
 including UTF-8.
-      </p>
-    </dd>
-  </dl>
+        </p>
+      </dd>
+    </dl>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`renders correctly with no directive_argument nodes 1`] = `
 <DocumentFragment>
-  <span
-    class="header-buffer"
-    id="std-label-php-language-center"
-  />
+  <div>
+    <span
+      class="header-buffer"
+      id="std-label-php-language-center"
+    />
+  </div>
 </DocumentFragment>
 `;