Add anchors to h1's in docs (#3892)

* Add anchors to h1's in docs * Manually add some anchors
gatsbyjs · Feb 7, 2018 · fc71785 · fc71785
1 parent 7b8c0b9
commit fc71785
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 9 deletions.
diff --git a/www/gatsby-node.js b/www/gatsby-node.js
@@ -6,6 +6,13 @@ const fs = require(`fs-extra`)
 const slash = require(`slash`)
 const slugify = require(`limax`)
 
+// convert a string like `/some/long/path/name-of-docs/` to `name-of-docs`
+const slugToAnchor = slug =>
+  slug
+    .split(`/`) // split on dir separators
+    .filter(item => item !== ``) // remove empty values
+    .pop() // take last item
+
 exports.createPages = ({ graphql, boundActionCreators }) => {
   const { createPage } = boundActionCreators
   return new Promise((resolve, reject) => {
@@ -170,6 +177,7 @@ exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
       createNodeField({ node, name: `package`, value: true })
     }
     if (slug) {
+      createNodeField({ node, name: `anchor`, value: slugToAnchor(slug) })
       createNodeField({ node, name: `slug`, value: slug })
     }
   } else if (node.internal.type === `AuthorYaml`) {

diff --git a/www/src/pages/docs/bound-action-creators.js b/www/src/pages/docs/bound-action-creators.js
@@ -12,7 +12,9 @@ class ActionCreatorsDocs extends React.Component {
         <Helmet>
           <title>Bound Action Creators</title>
         </Helmet>
-        <h1 css={{ marginTop: 0 }}>Bound Action Creators</h1>
+        <h1 id="bound-action-creators" css={{ marginTop: 0 }}>
+          Bound Action Creators
+        </h1>
         <p>
           Gatsby uses
           {` `}

diff --git a/www/src/pages/docs/browser-apis.js b/www/src/pages/docs/browser-apis.js
@@ -12,7 +12,9 @@ class BrowserAPIDocs extends React.Component {
         <Helmet>
           <title>Browser APIs</title>
         </Helmet>
-        <h1 css={{ marginTop: 0 }}>Gatsby Browser APIs</h1>
+        <h1 id="browser-apis" css={{ marginTop: 0 }}>
+          Gatsby Browser APIs
+        </h1>
         <h2 css={{ marginBottom: rhythm(1 / 2) }}>Usage</h2>
         <p css={{ marginBottom: rhythm(1) }}>
           Implement any of these APIs by exporting them from a file named{` `}

diff --git a/www/src/pages/docs/index.js b/www/src/pages/docs/index.js
@@ -14,13 +14,15 @@ class IndexRoute extends React.Component {
         <Helmet>
           <title>Docs</title>
         </Helmet>
-        <h1 css={{ marginTop: 0 }}>Get started</h1>
+        <h1 id="get-started" css={{ marginTop: 0 }}>
+          Get started
+        </h1>
         <p>Gatsby is a blazing-fast static site generator for React.</p>
         <h2>Install Gatsby{`'`}s command line tool</h2>
         <p>
           <code>npm install --global gatsby-cli</code>
         </p>
-        <h2>Using the Gatsby CLI</h2>
+        <h2 id="using-the-gatsby-cli">Using the Gatsby CLI</h2>
         <ol>
           <li>
             Create a new site.
@@ -48,7 +50,7 @@ class IndexRoute extends React.Component {
             testing your built site.
           </li>
         </ol>
-        <h2>Using other starters</h2>
+        <h2 id="using-other-starters">Using other starters</h2>
         <p>
           Running <code>gatsby new</code> installs the default Gatsby starter.
           There are{` `}
@@ -58,7 +60,7 @@ class IndexRoute extends React.Component {
           {` `}
           you can use to kickstart building your Gatsby site.
         </p>
-        <h2>Work through the tutorial</h2>
+        <h2 id="work-through-the-tutorial">Work through the tutorial</h2>
         <p>
           It walks you through building a Gatsby site from scratch to a finished
           polished site.

diff --git a/www/src/pages/docs/node-apis.js b/www/src/pages/docs/node-apis.js
@@ -12,7 +12,9 @@ class NodeAPIDocs extends React.Component {
         <Helmet>
           <title>Node APIs</title>
         </Helmet>
-        <h1 css={{ marginTop: 0 }}>Gatsby Node APIs</h1>
+        <h1 id="gatsby-node-apis" css={{ marginTop: 0 }}>
+          Gatsby Node APIs
+        </h1>
         <p>
           Gatsby gives plugins and site builders many APIs for controlling your
           site.

diff --git a/www/src/pages/docs/ssr-apis.js b/www/src/pages/docs/ssr-apis.js
@@ -12,7 +12,9 @@ class SSRAPIs extends React.Component {
         <Helmet>
           <title>SSR APIs</title>
         </Helmet>
-        <h1 css={{ marginTop: 0 }}>Gatsby Server Rendering APIs</h1>
+        <h1 id="gatsby-server-rendering-apis" css={{ marginTop: 0 }}>
+          Gatsby Server Rendering APIs
+        </h1>
         <h2 css={{ marginBottom: rhythm(1 / 2) }}>Usage</h2>
         <p css={{ marginBottom: rhythm(1) }}>
           Implement any of these APIs by exporting them from a file named{` `}

diff --git a/www/src/templates/template-docs-markdown.js b/www/src/templates/template-docs-markdown.js
@@ -20,7 +20,9 @@ class DocsTemplate extends React.Component {
           <meta name="twitter.label1" content="Reading time" />
           <meta name="twitter:data1" content={`${page.timeToRead} min read`} />
         </Helmet>
-        <h1 css={{ marginTop: 0 }}>{page.frontmatter.title}</h1>
+        <h1 id={page.fields.anchor} css={{ marginTop: 0 }}>
+          {page.frontmatter.title}
+        </h1>
         <div
           dangerouslySetInnerHTML={{
             __html: page.html,
@@ -40,6 +42,10 @@ export const pageQuery = graphql`
       html
       excerpt
       timeToRead
+      fields {
+        slug
+        anchor
+      }
       frontmatter {
         title
       }