⚡️ 4.0.0 (#431)

* Prepare 4.0.0 changelog * Make code toggles in test cases interactive or label if they are not (#432) * Update dependencies (#433) * Update dependencies * Update package-lock.json * Update rehype-slug * Fix links * Update page-layout.md * Update snapshots * Replace stateless components with pure components (#414) * Use PureComponent on stateless components * Update package-lock.json * 4.0.0-alpha.0 * Use PureComponents where components do not require rerenders * 4.0.0-alpha.1 * prefer-const * Update CHANGELOG.md * Make more components pure * 4.0.0-alpha.2 * 4.0.0-alpha.3 * Improve color contrast on code and anchor elements (#434) * Expand a code color contrast improvement * Increase color contrast on .color-gray code * Increase color contrast for prism's .token.regex,.token.important * Clean up test cases * Update CHANGELOG.md * Clean up test cases * Clean up test cases * Update docs/src/pages/guides/a11y.md Co-authored-by: Colleen McGinnis <colleen.mcginnis@mapbox.com> * Reduce changes Co-authored-by: Colleen McGinnis <colleen.mcginnis@mapbox.com> * 🔧 Run prettier * Add eslint-plugin-jsx-a11y (#435) * Add eslint-plugin-jsx-a11y * Fix props * Update CHANGELOG.md * Update search.test.js.snap * Update eslint * Update eslint * Create `prepareSitemap` Batfish helper to improve sitemap (#427) * Create prepareSitemap Batfish helper * Update CHANGELOG.md * Clean up, add `docsPath`, and `outputDirectory` * Exclude `splitPage` from sitemap * Assert sitemap * Extract urls * Sort sitemap * Remove snapshot * Update sitemap.test.js * Update batfish-helpers.md * Update batfish-helpers.md * Copyedit * Update package-lock.json * Replace `id` with `aria-label` in VimeoPlayImage (#438) * Replace `id` with aria-label to prevent duplicated id * Update CHANGELOG.md * Make `filename` optional for `CodeSnippetTitle` * Make "With token" `DemoIframe` a no render test case (#440) * Make "With token" `DemoIframe` a no render test case * Rename * Use passive event listeners on `Search`, `NumberedCodeSnippet`, and `OnThisPage` to improve performance (#437) * Use passive event listeners on `Search`, `NumberedCodeSnippet`, and `OnThisPage` to improve performance. * Update CHANGELOG.md * Reconfigure `Video` options to optimize for user's settings around autoplay (#276) * show video controls on hover; show play button for browsers with disabled autoplay * Merge branch 'main' into video-controls * main: Add the catalog site (#137) Delete dependabot.yml Only direct dependencies Create dependabot.yml (#296) Update Travis bad Update devDependencies (#294) * Add example * More comments * Reduce changes * eslint and fix button styles * Clean up button * Set playsInline to true if autoPlay is true; make `muted` a prop * Update test cases description to indicate the autoplay state * Update description * Update snapshots * Update CHANGELOG.md * Create `playsInline` prop * Append hash to src to enable preview on iOS * Update video.js * Adds optional `poster` prop * Remove hack * Add poster example * Fix paths * Update descriptions * Apply suggestions from code review * Load Search with a facade (#430) * Load Search with a facade * Add @loadable/babel-plugin * Update CHANGELOG.md * Fix logic * Update search.test.js.snap * Define development babel env to prevent `@loadable/babel-plugin` from loading on start (because it fails) * Adjusting snapshots * Revert "Adjusting snapshots" This reverts commit d2e7fd9. * Clean up props * Comments * Reduce changes * Reduce changes * Reduce changes * Reduce changes * Clean up props * Use SearchInput in SearchBox * Use SearchButton in SearchBox * Reduce changes * Add missing props * Consolidate wrapper * 4.0.0-alpha.4 * Try dynamic import * Update package-lock.json * 4.0.0-alpha.5 * Update package-lock.json * Reduce changes * Reorganize files * 4.0.0-alpha.6 * Switch to noRenderCase * Reduce changes * Add passive event listener * Allow autofocus * Enable react/jsx-no-bind (#442) * jsx-no-bind * Update CHANGELOG.md * Simplify, reduce changes * The `NumberedCodeSnippet` prop `onCopy` is deprecated and will automatically send a track event to Segment * Remove unused onCopy * Simplify * Add onCopy * Create onCopy function * Update src/components/code-snippet/on-copy.js * Update dependencies * Update caniuse * Update devDependencies * Update CHANGELOG.md * Fix NavigationAccordion tests (#443) * 4.0.0-alpha.7 * Fix prepareSitemap: append index.html to files ending in index.js (#444) * 4.0.0-alpha.8 * Update batfish * Update caniuse-lite * Fix props on search toggle (#448) * Fix props on search toggle * 4.0.0-alpha.9 * For searches with no results, retry if Swiftype thinks there is a spelling error (#451) * pass through swiftype API spelling option * move prettier'd comment * Update search-ui, downshift * Update caniuse-lite * Update @sentry/browser * Send search results with no queries to Sentry (#452) * Send search results with no queries to Sentry * Update CHANGELOG.md * Update prettier * Fix Sentry test * 4.0.0-alpha.10 * Switch Sentry environment back to `main` * Fix Search/Sentry, only send when results change * 4.0.0 * Clean up Co-authored-by: Colleen McGinnis <colleen.mcginnis@mapbox.com> Co-authored-by: Dan Swick <dan.swick@gmail.com>
mapbox · May 11, 2021 · d35b4d6 · d35b4d6
1 parent afb31b9
commit d35b4d6
Show file tree

Hide file tree

Showing 181 changed files with 5,886 additions and 3,951 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -6,3 +6,5 @@ notifications:
 scripts:
   - npm test
   - npm run build-docs
+  # run sitemap tests after build to assert sitemap is correct
+  - jest src/helpers/batfish/__tests__/sitemap.test.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,31 @@
 # Changelog
 
+## 4.0.0
+
+- Enforce use of React PureComponents to improve performance. [#414](https://github.com/mapbox/dr-ui/pull/414)
+- Improve color contrast on code and anchor elements. [#434](https://github.com/mapbox/dr-ui/pull/434)
+- Enable eslint-plugin-jsx-a11y. [#435](https://github.com/mapbox/dr-ui/pull/435)
+- Enable react/jsx-no-bind. [#442](https://github.com/mapbox/dr-ui/pull/442)
+- Replace `id` with `aria-label` in `VimeoPlayImage` to prevent duplicated `id`s when more than one instance is on the same page. [#438](https://github.com/mapbox/dr-ui/pull/438)
+- Make `filename` optional for `CodeSnippetTitle`.
+- Use passive event listeners on `Search`, `NumberedCodeSnippet`, and `OnThisPage` to improve performance. [#437](https://github.com/mapbox/dr-ui/pull/437)
+- Make `Video` disable autoplay by default. [#276](https://github.com/mapbox/dr-ui/pull/276)
+- Load the `Search` component with a facade to improve performance. [#430](https://github.com/mapbox/dr-ui/pull/430)
+- 🚨 The `NumberedCodeSnippet` prop `onCopy` is deprecated and will automatically send a track event to Segment. [#442](https://github.com/mapbox/dr-ui/pull/442)
+- 🚨 The `CodeSnippet` prop `highlighter` no longer accepts an arrow function. [#442](https://github.com/mapbox/dr-ui/pull/442)
+  - Before: `highlighter={() => highlightJson}`
+  - After: `highlighter={highlightJson}`
+- Update devDependencies.
+- Configure `Search` to use the [Swiftype API's `spelling` option](https://swiftype.com/documentation/site-search/searching/spelling) to retry in cases where a typo is suspected.
+- Send issue to Sentry when a search query does not return a result in the `Search` component. [#452](https://github.com/mapbox/dr-ui/pull/452)
+- Create `prepareSitemap` Batfish helper to improve sitemap. [#427](https://github.com/mapbox/dr-ui/pull/427). See [`prepareSitemap`](https://mapbox.github.io/dr-ui/guides/batfish-helpers/#prepare-sitemap) for instructions on how to add the `dataSelector` to your Batfish configuration. You will also want to add the following to the top of any redirect files so that they will be excluded from the sitemap:
+
+```js
+/*---
+hideFromSearchEngines: true
+---*/
+```
+
 ## 3.3.1
 
 - The `edit.css` prop is optional when displaying `Edit` in `CodeSnippet`. [#421](https://github.com/mapbox/dr-ui/pull/421)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -67,6 +67,6 @@ Once all changes are on the main branch and the CHANGELOG is updated, follow the
 1. From the `main` branch, make sure you pulled the latest.
 2. Run `npm version <major|minor|patch>` to increment the version number in package.json and package-lock.json. This will automatically create a commit and tag for the release.
 3. Push your commit.
-5. Run `npm ci` and then `npm run build`.
-6. Run `cd pkg/` to change into the pkg directory and then publish the new version on npm: `mbx npm publish`.
-7. `cd` back to the root directory and run `npm run deploy-docs` to deploy the catalog site.
+4. Run `npm ci` and then `npm run build`.
+5. Run `cd pkg/` to change into the pkg directory and then publish the new version on npm: `mbx npm publish`.
+6. `cd` back to the root directory and run `npm run deploy-docs` to deploy the catalog site.
diff --git a/docs/batfish.config.js b/docs/batfish.config.js
@@ -2,7 +2,8 @@ const path = require('path');
 const {
   buildNavigation,
   buildFilters,
-  buildSplitPages
+  buildSplitPages,
+  prepareSitemap
 } = require('../src/helpers/batfish/index.js');
 
 const siteBasePath = '/dr-ui';
@@ -22,6 +23,7 @@ const addPages = [
 
 module.exports = () => {
   return {
+    siteOrigin: 'https://mapbox.github.io',
     siteBasePath: siteBasePath,
     outputDirectory: path.join(__dirname, '_site/'),
     temporaryDirectory: path.join(__dirname, '_site_tmp/'),
@@ -47,10 +49,16 @@ module.exports = () => {
         require('../src/plugins/make-table-scroll')
       ]
     },
+    sitemap: {
+      // generated by the sitemapIgnore dataSelector
+      ignoreFile: 'docs/_site_tmp/data/sitemap-ignore.js'
+    },
     dataSelectors: {
       navigation: (data) => buildNavigation({ siteBasePath, data, addPages }),
       filters: (data) => buildFilters(data),
       splitPages: (data) => buildSplitPages(data),
+      sitemapIgnore: ({ pages }) =>
+        prepareSitemap({ pages, siteBasePath, docsPath: 'docs' }),
       sync: (data) => {
         /* syncs data to fixtures to properly test batfish selectors */
         const sortBy = (key) => {

diff --git a/docs/src/components/component-example.js b/docs/src/components/component-example.js
@@ -24,7 +24,7 @@ export default class ComponentExample extends React.Component {
       <div className="border border--gray-light round-tl">
         <CodeSnippet
           code={decodeJsx(this.props.code)}
-          highlighter={() => highlightJsx}
+          highlighter={highlightJsx}
         />
       </div>
     );

diff --git a/docs/src/components/frontmatter.js b/docs/src/components/frontmatter.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import components from '../data/components';
 
-export default class FrontMatter extends React.Component {
+export default class FrontMatter extends React.PureComponent {
   render() {
     const { frontMatter } = components.find(
       (f) => f.name === 'PageLayout'

diff --git a/docs/src/components/layout-usage.js b/docs/src/components/layout-usage.js
@@ -2,7 +2,7 @@ import React from 'react';
 import components from '../data/components';
 import layoutConfig from '../../../src/components/page-layout/layout.config.js';
 
-export default class LayoutUsage extends React.Component {
+export default class LayoutUsage extends React.PureComponent {
   render() {
     const layouts = components
       .find((f) => f.name === 'PageLayout')

diff --git a/docs/src/components/other-props.js b/docs/src/components/other-props.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import components from '../data/components';
 
-export default class OtherProps extends React.Component {
+export default class OtherProps extends React.PureComponent {
   render() {
     const { props } = components.find((f) => f.name === 'PageLayout');
     const exclude = [

diff --git a/docs/src/components/page-shell.js b/docs/src/components/page-shell.js
@@ -26,7 +26,7 @@ const componentHeadings = Object.keys(categories).reduce((arr, category) => {
   return arr;
 }, []);
 
-class PageShell extends React.Component {
+class PageShell extends React.PureComponent {
   render() {
     const { children, location, frontMatter, headings } = this.props;
 

diff --git a/docs/src/components/split-page-shell.js b/docs/src/components/split-page-shell.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import SplitPage from '../../../src/components/page-layout/split-page';
 import constants from '../constants.json';
 
-export default class SplitPageShell extends React.Component {
+export default class SplitPageShell extends React.PureComponent {
   render() {
     const { children } = this.props;
     return (

diff --git a/docs/src/components/wrapper.js b/docs/src/components/wrapper.js
@@ -21,7 +21,7 @@ addRouteChangeEndListener(() => {
   pageLoadingIndicator.end();
 });
 
-class ApplicationWrapper extends React.Component {
+class ApplicationWrapper extends React.PureComponent {
   render() {
     return (
       <div>

diff --git a/docs/src/pages/guides/a11y.md b/docs/src/pages/guides/a11y.md
@@ -41,6 +41,26 @@ A `code` element. A [link](#) element.
 
 {{</Note>}}
 
+## `code a` has accessible contrast
+
+<code class="color-gray">(<a href="/dr-ui/guides/a11y/#test-cases">string</a>)</code>
+
+## `color-gray code` has accessible contrast
+
+{{<div className="color-gray">}}
+_Optional [number](/dr-ui/guides/a11y/#test-cases) between `0` and `1000` inclusive. Defaults to `1`. Supports [`interpolate`](/dr-ui/guides/a11y/#test-cases) expressions._
+{{</div>}}
+
+## regex syntax highlighting has accessible contrast
+
+```html
+<script>
+  var matches = query.match(
+    /^[ ]*(?:Lat: )?(-?\d+\.?\d*)[, ]+(?:Lng: )?(-?\d+\.?\d*)[ ]*$/i
+  );
+</script>
+```
+
 ## Heading with `code` element
 
 The `code` element in the heading above should not be blue. But this [`code`](#) element should be blue.
diff --git a/docs/src/pages/guides/batfish-helpers.md b/docs/src/pages/guides/batfish-helpers.md
@@ -10,6 +10,7 @@ prependJs:
   - "import navigation from '@mapbox/batfish/data/navigation'; // eslint-disable-line"
   - "import topics from '@mapbox/batfish/data/filters'; // eslint-disable-line"
   - "import splitPages from '@mapbox/batfish/data/split-pages'; // eslint-disable-line"
+  - "import sitemapIgnore from '@mapbox/batfish/data/sitemap-ignore'; // eslint-disable-line"
 ---
 
 Dr. UI has two functions that are used in `dataSelectors` in `batfish.config.js` to help build page metadata and site hierarchy. Each data selector has tests to assert the shape of the data.
@@ -18,7 +19,7 @@ These dataset functions often use the page's relative pathname as a unique ident
 
 ## Navigation
 
-`navigation` builds data for the dr-ui navigation components like [`NavigationAccordion`](/dr-ui/#navigationaccordion).
+`navigation` builds data for the dr-ui navigation components like [`NavigationAccordion`](/dr-ui/components/#navigationaccordion).
 
 ### Arguments
 
@@ -81,7 +82,7 @@ class PageShell extends React.Component {
 
 ### Output
 
-- `navTabs`. Provides the top-level navigation for the site and is powered by the `navOrder` field in the frontMatter of those pages. Provides the data for [`NavigationAccordion`](/dr-ui/#navigationaccordion).
+- `navTabs`. Provides the top-level navigation for the site and is powered by the `navOrder` field in the frontMatter of those pages. Provides the data for [`NavigationAccordion`](/dr-ui/components/#navigationaccordion).
 - `hierarchy`. Provides the parent path for each page.
 
 #### Sample
@@ -152,7 +153,7 @@ class PageShell extends React.Component {
 
 - `path` (required) string. Top-level folder in `src/pages`.
 - `title` (required) string. Title of the product.
-- `tag` (optional) string. Name of tag to add to [`ProductMenu`](/dr-ui/#productmenu).
+- `tag` (optional) string. Name of tag to add to [`ProductMenu`](/dr-ui/components/#productmenu).
 - - `addPages`, array. Pages, usually external to the site, to be appended to navigation. See [Shape of appended pages](#shape-of-appended-pages).
 
 ### Example
@@ -252,6 +253,69 @@ class PageShell extends React.Component {
 {{JSON.stringify(splitPages, null,2)}}
 ```
 
+## Prepare sitemap
+
+`prepareSitemap` creates a data file that lists all files with `hideFromSearchEngines: true` or `splitPage: true` set in the page's frontMatter. Use this generated file with Batfish's [`sitemap.ignoreFile`](https://github.com/mapbox/batfish/blob/main/docs/configuration.md#sitemap) option to generate a sitemap that excludes any paths in the prepared file.
+
+### Arguments
+
+- `data`, object. Provided by the data selector.
+- `siteBasePath`, string. The site's `siteBasePath` as defined in the Batfish config.
+- `outputDirectory`, string. Batfish's `outputDirectory`. Default `_site`.
+- `docsPath`, string. The directory that `batfish.config.js` lives in, if not in the root. (It's unlikely that you will use this option.)
+
+### Set up in batfish.config.js
+
+```js
+const { prepareSitemap } = require('@mapbox/dr-ui/helpers/batfish/index.js');
+
+module.exports = () => {
+  return {
+    sitemap: {
+      // generated by the sitemapIgnore dataSelector
+      ignoreFile: '_site_tmp/data/sitemap-ignore.js'
+    },
+    dataSelectors: {
+      sitemapIgnore: ({ pages }) => prepareSitemap({ pages, siteBasePath })
+    }
+  };
+};
+```
+
+#### Advanced usage
+
+For sites that generate demos, like mapbox-gl-js and mts-docs, you can exclude the assets folder:
+
+```js
+const { prepareSitemap } = require('@mapbox/dr-ui/helpers/batfish/index.js');
+
+module.exports = () => {
+  return {
+    sitemap: {
+      // generated by the sitemapIgnore dataSelector
+      ignoreFile: '_site_tmp/data/sitemap-ignore.js'
+    },
+    dataSelectors: {
+      sitemapIgnore: ({ pages }) => [
+        ...prepareSitemap({ pages, siteBasePath }),
+        // exclude demos generated by webpack loader
+        `${process.cwd()}/_site/assets/`
+      ]
+    }
+  };
+};
+```
+
+### Output
+
+- The shape is an array of paths that should be excluded from the sitemap.
+
+#### Sample
+
+```json
+{{JSON.stringify(sitemapIgnore, null,2)}}
+```
+
 ## Troubleshooting
 
 If data is not building as you expect:

diff --git a/docs/src/pages/guides/multi-structured.md b/docs/src/pages/guides/multi-structured.md
@@ -103,7 +103,7 @@ Most subsites include:
 
 - An `overview/` folder that contains a collection of guides and the homepage for the subsite
   - For example: `src/maps/overview/index.md`.
-  - The homepage usually includes the [`OverviewHeader`](/dr-ui/#overviewheader) component at the top of the page to define the product for that subsite.
+  - The homepage usually includes the [`OverviewHeader`](/dr-ui/components/#overviewheader) component at the top of the page to define the product for that subsite.
 - The `index.js` in the subsite's root folder is usually a redirect to the overview homepage:
 
 ```js

diff --git a/docs/src/pages/guides/page-layout.md b/docs/src/pages/guides/page-layout.md
@@ -17,13 +17,13 @@ prependJs:
   - "import { filterOptions } from '../../../../src/components/page-layout/components/example-index';"
 ---
 
-The [`PageLayout`](/dr-ui/#pagelayout) component is the main controller for building pages with Dr. UI and offers five layout options. `PageLayout` provides everything from the site's navigation, to the sidebar contents, and main content area. It also includes common components like Search and Feedback.
+The [`PageLayout`](/dr-ui/components/#pagelayout) component is the main controller for building pages with Dr. UI and offers five layout options. `PageLayout` provides everything from the site's navigation, to the sidebar contents, and main content area. It also includes common components like Search and Feedback.
 
 While the [docs-starter-kit](https://github.com/mapbox/docs-starter-kit) configures `PageLayout` with the most common setup, this guide describes all available options to working and customizing the component.
 
 ## Layouts
 
-The [`PageLayout`](/dr-ui/#pagelayout) component comes with several layouts that you define in your page's frontmatter. Each layout is a set of opinionated configurations, but you have the option to customize the layout by setting additional frontmatter fields.
+The [`PageLayout`](/dr-ui/components/#pagelayout) component comes with several layouts that you define in your page's frontmatter. Each layout is a set of opinionated configurations, but you have the option to customize the layout by setting additional frontmatter fields.
 
 {{<LayoutUsage data={{
   page:
@@ -56,7 +56,7 @@ You can set any of the following `frontMatter` props from the frontmatter in you
 
 ### How can I set defaults for multiple pages or an entire site?
 
-When you create your [`PageLayout`](/dr-ui/#pagelayout) component in your site's page shell, you can define or redefine the frontmatter object.
+When you create your [`PageLayout`](/dr-ui/components/#pagelayout) component in your site's page shell, you can define or redefine the frontmatter object.
 
 The example below will turn off the feedback component for every page:
 
@@ -66,7 +66,7 @@ The example below will turn off the feedback component for every page:
 
 ## Filters and navigation
 
-The [`PageLayout`](/dr-ui/#pagelayout) component accepts `filters` and `navigation` props to define all the filters for examples and the site's navigation system, respectively.
+The [`PageLayout`](/dr-ui/components/#pagelayout) component accepts `filters` and `navigation` props to define all the filters for examples and the site's navigation system, respectively.
 
 In most cases, you can use Batfish helpers to automatically generate this dataset. See the following resources on how to install these functions and use them with `PageLayout`:
 
@@ -91,19 +91,19 @@ Available values for `showFilters`: {{ filterOptions.join(', ') }}
 
 Most docs.mapbox.com sites use a single structure, which means it documents a single product. But [iOS](https://docs.mapbox.com/ios/maps/overview/) and [Android](https://docs.mapbox.com/android/maps/overview/) use a multi-structure to document maps, navigation, and search.
 
-The [navigation](/dr-ui/guides/batfish-helpers/#navigation) Batfish helper function can handle multi-structured sites and build the `navigation` dataset required for [`PageLayout`](/dr-ui/#pagelayout) automatically. You will need to include a configuration object to define each part of the site. See [shape of multi-structured sections](/dr-ui/guides/batfish-helpers/#shape-of-multi-structured-sections) for how to write a configuration object.
+The [navigation](/dr-ui/guides/batfish-helpers/#navigation) Batfish helper function can handle multi-structured sites and build the `navigation` dataset required for [`PageLayout`](/dr-ui/components/#pagelayout) automatically. You will need to include a configuration object to define each part of the site. See [shape of multi-structured sections](/dr-ui/guides/batfish-helpers/#shape-of-multi-structured-sections) for how to write a configuration object.
 
 **See the [Multi-structured guide](/dr-ui/guides/multi-structured/) for steps on building a new site.**
 
 ## Other `PageLayout` props
 
-The [`PageLayout`](/dr-ui/#pagelayout) component accepts the following props for you to further customize your site:
+The [`PageLayout`](/dr-ui/components/#pagelayout) component accepts the following props for you to further customize your site:
 
 {{<OtherProps />}}
 
 ## Site navigation
 
-The site navigation appears at the left side of every page. It uses [`ProductMenu`](/dr-ui/#productmenu) to show the site title, and [`NavigationAccordion`](/dr-ui/#NavigationAccordion) to display all navigation links for the site starting with top-level pages.
+The site navigation appears at the left side of every page. It uses [`ProductMenu`](/dr-ui/components/#productmenu) to show the site title, and [`NavigationAccordion`](/dr-ui/components/#NavigationAccordion) to display all navigation links for the site starting with top-level pages.
 
 ### What are top-level pages?
 
@@ -142,12 +142,12 @@ The frontmatter props `navOrder` and `order` have different functions.
 - `navOrder` identifies a top-level page and its position in the `NavigationAccordion` across the top of the page.
 - `order` sets the order for all pages in a section that uses the `page` layout.
 
-For top-level pages using the `page` layout, besides setting `navOrder`, you will also set `order: 1` to make sure that the top-level page appears first in the [`NavigationAccordion`](/dr-ui/#navigationaccordion)
+For top-level pages using the `page` layout, besides setting `navOrder`, you will also set `order: 1` to make sure that the top-level page appears first in the [`NavigationAccordion`](/dr-ui/components/#navigationaccordion)
 {{</Note>}}
 
 ## Overview header
 
-The main page for each docs site displays the [`OverviewHeader`](/dr-ui/#overviewheader) to orient the user to the product.
+The main page for each docs site displays the [`OverviewHeader`](/dr-ui/components/#overviewheader) to orient the user to the product.
 
 To add `OverviewHeader` to your page, pass the props of the component in the frontMatter under `overviewHeader`.
 
@@ -173,7 +173,7 @@ The following example is the value of the `frontMatter` prop which overrides the
       overviewHeader: {
         ...frontMatter.overviewHeader,
         version: myVariable,
-        image: <AppropriateImage id="documentation-astronaut" />
+        image: <AppropriateImage alt="" id="documentation-astronaut" />
       }
     }
   })
@@ -184,7 +184,7 @@ This technique may also be used by multi-structured sites, although you'll need
 
 ## Custom aside
 
-Sites like Mapbox GL JS require custom asides since the data is derived from multiple sources. Similarly, the [Dr. UI components page](/dr-ui/) also uses a custom aside, see the example below for how to conditionally display a custom sidebar:
+Sites like Mapbox GL JS require custom asides since the data is derived from multiple sources. Similarly, the [Dr. UI components page](/dr-ui/components/) also uses a custom aside, see the example below for how to conditionally display a custom sidebar:
 
 ```jsx
 import Aside from './aside';

diff --git a/docs/src/pages/guides/split-pages/index.js b/docs/src/pages/guides/split-pages/index.js
@@ -19,7 +19,7 @@ import PageShell from '../../../components/page-shell';
 // Import splitPage function
 import splitPages from '@mapbox/batfish/data/split-pages'; // eslint-disable-line
 
-export default class Page extends React.Component {
+export default class Page extends React.PureComponent {
   render() {
     const { location } = this.props;
     // Override the combines headings in the sidebar