How to use @mapbox/batfish - 10 common examples

}

PageShell.propTypes = {
  meta: PropTypes.object,
  frontMatter: PropTypes.shape({
    title: PropTypes.string.isRequired,
    description: PropTypes.string.isRequired
  }).isRequired,
  children: PropTypes.node.isRequired,
  // From withLocation
  location: PropTypes.shape({
    pathname: PropTypes.string.isRequired
  }).isRequired
};

export default withLocation(PageShell);

import { scrollToFragment } from './scroll-to-fragment';
import { getWindow } from './get-window';
import { changePage } from './change-page';
import { getCurrentLocation } from './get-current-location';

const {
  siteBasePath,
  siteOrigin,
  manageScrollRestoration,
  hijackLinks
} = batfishContext.selectedConfig;

// See explanation for this weirdness in prefix-url.js.
// This happens outside the component lifecycle so it can be used during
// rendering of HTML.
prefixUrl._configure(siteBasePath, siteOrigin);

type Props = {
  startingPath: string,
  startingComponent: React$ComponentType<*>,
  startingProps: Object
};

export type RouterState = {
  path: string,
  PageComponent: React$ComponentType<*>,
  pageProps: Object,
  location: BatfishLocation
};

class Router extends React.PureComponent {
  constructor(props: Props) {

export function changePage(
  nextLocation: BatfishLocation,
  setRouterState: (state: RouterState, callback: () => void) => void,
  options: { pushState?: boolean, scrollToTop?: boolean } = {},
  onFinish?: () => mixed
): Promise {
  const win = getWindow();
  const matchingRoute = findMatchingRoute(nextLocation.pathname);
  const nextUrl = [
    nextLocation.pathname,
    nextLocation.hash,
    nextLocation.search
  ].join('');
  // Call the change-start callbacks immediately, not after the page chunk
  // has already been fetched.
  const startChange = _invokeRouteChangeStartCallbacks(nextLocation.pathname);
  return matchingRoute
    .getPage()
    .then((pageModule) => {
      return startChange.then(() => pageModule);
    })
    .then((pageModule) => {
      if (options.pushState) {
        win.history.pushState({}, null, nextUrl);
      }
      const nextState = {
        path: matchingRoute.path,
        PageComponent: pageModule.component,
        pageProps: pageModule.props,
        location: getCurrentLocation()
      };
      setRouterState(nextState, () => {

const renderedCardContainers = Object.keys(tags).map((topic) => {
            const cardsForTopic = examples
                .filter(example => example.tags.indexOf(topic) > -1)
                .map((example, index) => {
                    const filename = example.pathname.split('/')[3];
                    return (
                        
                            }

description: blah blah blah
---*/
import React from 'react';
import {
  addRouteChangeStartListener,
  addRouteChangeEndListener
} from '@mapbox/batfish/modules/route-change-listeners';
import { PageShell } from '../../components/page-shell';
import { sharedImport } from '../../components/shared-import';
sharedImport();

addRouteChangeStartListener('/about/security/', pathname => {
  console.log(`${pathname} starting to load`);
});

addRouteChangeEndListener('/about/security/', pathname => {
  console.log(`${pathname} ending its load`);
});

class Security extends React.Component {
  render() {
    return security;
  }
}

export default Security;

/*---
title: Security
description: blah blah blah
---*/
import React from 'react';
import {
  addRouteChangeStartListener,
  addRouteChangeEndListener
} from '@mapbox/batfish/modules/route-change-listeners';
import { PageShell } from '../../components/page-shell';
import { sharedImport } from '../../components/shared-import';
sharedImport();

addRouteChangeStartListener('/about/security/', pathname => {
  console.log(`${pathname} starting to load`);
});

addRouteChangeEndListener('/about/security/', pathname => {
  console.log(`${pathname} ending its load`);
});

class Security extends React.Component {
  render() {
    return security;
  }
}

export default Security;

<div>
          <ul>
            <li>
              <a href="{prefixUrl('/markdown-react/plugins')}">
                Remark and Rehype Plugins
              </a>
            </li>
            <li>
              <a href="{prefixUrl('/markdown-react/unpublished')}">
                Unpublished React Page
              </a>
            </li>
            <li>
              <a href="{prefixUrl('/markdown-react/route-to-home')}">
                Route to Home
              </a>
            </li>
          </ul>
        </div>
        <div>
          <span>Here's page-specific CSS</span></div>

render() {
    return (
      <div>
        <a href="{prefixUrl('/')}">
          Home
        </a>
        <a href="{prefixUrl('/sample')}">
          Sample
        </a>
        <a href="{prefixUrl('/layouts')}">
          Layouts
        </a>
        </div>

<div>
        
          </div>