Updated gatsby and added a function in gatsby-browser.js to enable scroll to hashtag

content/docs/glossary/testnet.mdx

@@ -33,7 +33,7 @@ Keep in mind that you can always run your own test network for use cases that do
 
 ### Surge Pricing on the Testnet
 
-The testnet has a capacity limit of **100 operations per ledger**. When more than 100 operations are submitted to a given ledger, the network enters [surge pricing mode](./fees.mdx#surge-pricing, which uses market dynamics to decide which submissions are included. It works exactly the same way as surge pricing on the public network.
+The testnet has a capacity limit of **100 operations per ledger**. When more than 100 operations are submitted to a given ledger, the network enters [surge pricing mode](./fees.mdx#surge-pricing), which uses market dynamics to decide which submissions are included. It works exactly the same way as surge pricing on the public network.
 
 If you are having trouble submitting transactions to the testnet, you may need to offer a higher fee. You can also take the opportunity to develop a fee strategy, which may prove useful when you move your project into production.
 

content/docs/run-core-node/configuring.mdx

@@ -19,7 +19,7 @@ This doc works best in conjunction with concrete config examples, so as you read
 
 - If you want to connect to the tesnet, check out the [example test network config](https://github.com/stellar/docker-stellar-core-horizon/blob/master/testnet/core/etc/stellar-core.cfg). As you can see, most of the fields from the [complete example config](https://github.com/stellar/stellar-core/blob/master/docs/stellar-core_example.cfg) are omitted since the default settings work fine. You can easily tailor this config to meet your testnet needs.
 
-- If you want to connet to the public network, check out this [public network config for a Full Validator](https://github.com/stellar/packages/blob/master/docs/examples/pubnet-validator-full/stellar-core.cfg). It includes a properly crafted quorum set with all the current [Tier 1 validators](./tier-1-orgs.mdx), which is a good place to start for most configurations. This node is set up to both [validate](#Validating) and write history to a [public archive](./publishing-history-archives.mdx), but you can disable either feature to adjust this config so it's a little lighter.
+- If you want to connect to the public network, check out this [public network config for a Full Validator](https://github.com/stellar/packages/blob/master/docs/examples/pubnet-validator-full/stellar-core.cfg). It includes a properly crafted quorum set with all the current [Tier 1 validators](./tier-1-orgs.mdx), which is a good place to start for most configurations. This node is set up to both [validate](#validating) and write history to a [public archive](./publishing-history-archives.mdx), but you can disable either feature to adjust this config so it's a little lighter.
 
 - Here's a config for a [pubnet watcher](https://github.com/stellar/packages/blob/master/docs/stellar-core_pubnet_watcher.cfg). It's a little out of date — it still uses the old method for quorum set generation — but we'll fix it soon.
 
@@ -201,7 +201,6 @@ Once you add validators to your configuration, stellar core automatically genera
 - The combined weight of MEDIUM quality entities equals a single HIGH quality entity
 - The combined weight of LOW quality entities equals a single MEDIUM quality entity
 
-
 ### Quorum and Overlay Network
 
 It is generally a good idea to give information to your validator on other validators that you rely on. This is achieved by configuring `KNOWN_PEERS` and `PREFERRED_PEERS` with the addresses of your dependencies.

gatsby-browser.js

@@ -34,9 +34,32 @@ export const onInitialClientRender = () => {
 const isApiReference = (routerProps) =>
   /\/api/.test(routerProps.location.pathname);
 
+const getTargetOffset = (hash) => {
+  const offsetY = 0;
+  const id = window.decodeURI(hash.replace("#", ""));
+
+  if (id) {
+    const element = document.getElementById(id);
+
+    if (element) {
+      return element.offsetTop - offsetY;
+    }
+  }
+  return null;
+};
+
 export const shouldUpdateScroll = ({ routerProps }) => {
   if (isApiReference(routerProps)) {
     return routerProps.location.pathname;
   }
+
+  const offset = getTargetOffset(location.hash);
+
+  if (offset) {
+    window.scrollTo(0, offset);
+
+    return false;
+  }
+
   return true;
 };

package.json

@@ -55,23 +55,23 @@
     "eslint-plugin-react-hooks": "2.x",
     "execa": "^1.0.0",
     "fetch-jsonp": "^1.1.3",
-    "gatsby": "^2.21.28",
-    "gatsby-image": "^2.4.3",
-    "gatsby-link": "^2.4.2",
+    "gatsby": "^2.23.11",
+    "gatsby-image": "^2.4.9",
+    "gatsby-link": "^2.4.8",
     "gatsby-plugin-eslint": "^2.0.8",
-    "gatsby-plugin-mdx": "^1.2.7",
-    "gatsby-plugin-react-helmet": "^3.3.1",
+    "gatsby-plugin-mdx": "^1.2.18",
+    "gatsby-plugin-react-helmet": "^3.3.6",
     "gatsby-plugin-react-svg": "^3.0.0",
-    "gatsby-plugin-sharp": "^2.6.3",
-    "gatsby-plugin-sitemap": "^2.4.2",
-    "gatsby-plugin-styled-components": "^3.3.1",
-    "gatsby-react-router-scroll": "^3.0.0",
-    "gatsby-remark-images": "^3.3.3",
+    "gatsby-plugin-sharp": "^2.6.14",
+    "gatsby-plugin-sitemap": "^2.4.7",
+    "gatsby-plugin-styled-components": "^3.3.6",
+    "gatsby-react-router-scroll": "^3.0.7",
+    "gatsby-remark-images": "^3.3.13",
     "gatsby-remark-mermaid": "^2.0.0",
-    "gatsby-remark-smartypants": "^2.3.1",
-    "gatsby-source-filesystem": "^2.3.3",
-    "gatsby-transformer-remark": "^2.8.8",
-    "gatsby-transformer-sharp": "^2.5.2",
+    "gatsby-remark-smartypants": "^2.3.6",
+    "gatsby-source-filesystem": "^2.3.14",
+    "gatsby-transformer-remark": "^2.8.19",
+    "gatsby-transformer-sharp": "^2.5.7",
     "gsap": "^2.1.3",
     "hast-to-hyperscript": "^7.0.0",
     "husky": "^2.1.0",

src/basics/Text.js

@@ -79,6 +79,8 @@ export const H6 = styled.h6`
 `;
 
 export const LinkedH2 = makeLinkedHeader(H2);
+export const LinkedH3 = makeLinkedHeader(H3);
+export const LinkedH4 = makeLinkedHeader(H4);
 
 export const Quote = styled.blockquote`
   margin: 1rem 0;

src/constants/docsComponentMapping.js

@@ -62,7 +62,7 @@ export const components = {
       }
     }
   `,
-  h3: styled(TextComponents.H3)`
+  h3: styled(TextComponents.LinkedH3)`
     a {
       color: ${({ theme }) => theme.text};
       @media (${MEDIA_QUERIES.canHover}) {
@@ -72,11 +72,20 @@ export const components = {
       }
     }
   `,
-  h4: styled(TextComponents.H4)`
+  h4: styled(TextComponents.LinkedH4)`
     color: ${PALETTE.darkGrey};
     font-weight: ${FONT_WEIGHT.medium};
     font-size: 1.125rem;
     line-height: 1.5;
+
+    a {
+      color: ${({ theme }) => theme.text};
+      @media (${MEDIA_QUERIES.canHover}) {
+        &:hover {
+          color: ${({ theme }) => theme.darkGrey};
+        }
+      }
+    }
   `,
   h5: TextComponents.H5,
   h6: TextComponents.H6,

src/templates/Documentation.js

@@ -49,7 +49,7 @@ import DevelopersPreview from "assets/images/og_developers.jpg";
 import { MobileLeftNav } from "components/Documentation/MobileLeftNav";
 
 const contentId = "content";
-const { h1: H1, h2: H2, td: TD } = components;
+const { h1: H1, h2: H2, h3: H3, h4: H4, td: TD } = components;
 
 const RightNavEl = styled.div`
   font-size: 0.875rem;
@@ -168,10 +168,21 @@ const componentMapping = {
     has a <Code/> to highlight "/info" */
     const id = slugify(loopAndExtractString(children));
 
-    // eslint-disable-next-line react/prop-types
     return <H2 id={id}>{children}</H2>;
   },
   // eslint-disable-next-line react/prop-types
+  h3: ({ children }) => {
+    const id = slugify(loopAndExtractString(children));
+
+    return <H3 id={id}>{children}</H3>;
+  },
+  // eslint-disable-next-line react/prop-types
+  h4: ({ children }) => {
+    const id = slugify(loopAndExtractString(children));
+
+    return <H4 id={id}>{children}</H4>;
+  },
+  // eslint-disable-next-line react/prop-types
   td: ({ children }) => {
     if (children === ":heavy_check_mark:") {
       return (