(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{871:function(e,n,t){__NEXT_REGISTER_PAGE("/doc",function(){return e.exports=t(918),{page:e.exports.default}})},887:function(e,n,t){var o={"./api/ossus-components/breadcrumbs.md":888,"./api/ossus/config-provider.md":889,"./api/ossus/markdown-renderer.md":890,"./api/ossus/toc-util.md":891,"./fortellis-docs/documentation/api/ossus-components/breadcrumbs.md":892,"./fortellis-docs/documentation/api/ossus/config-provider.md":893,"./fortellis-docs/documentation/api/ossus/markdown-renderer.md":894,"./fortellis-docs/documentation/api/ossus/toc-util.md":895,"./fortellis-docs/documentation/overview/advanced/custom-components.md":896,"./fortellis-docs/documentation/overview/advanced/scaling.md":897,"./fortellis-docs/documentation/overview/getting-started/blog.md":898,"./fortellis-docs/documentation/overview/getting-started/configuration.md":899,"./fortellis-docs/documentation/overview/getting-started/documentation.md":900,"./fortellis-docs/documentation/overview/getting-started/installation.md":901,"./fortellis-docs/documentation/overview/getting-started/publishing.md":902,"./fortellis-docs/documentation/overview/getting-started/theme.md":903,"./overview/advanced/custom-components.md":904,"./overview/advanced/scaling.md":905,"./overview/getting-started/blog.md":906,"./overview/getting-started/configuration.md":907,"./overview/getting-started/documentation.md":908,"./overview/getting-started/installation.md":909,"./overview/getting-started/publishing.md":910,"./overview/getting-started/theme.md":911};function r(e){var n=i(e);return t(n)}function i(e){var n=o[e];if(!(n+1)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return n}r.keys=function(){return Object.keys(o)},r.resolve=i,e.exports=r,r.id=887},888:function(e,n){e.exports="---\ntitle: BreadCrumbs\nauthor: Jared Jones\nlast updated: 1/16/19\n---\n\nThe `<BreadCrumbs />` is a component exposed by the `ossus-components` package for dynamically creating clickable navigation breadcrumbs for docs pages.\n\n## Props\n\nThe `<BreadCrumbs />` component requires the `config` prop injected from the `ConfigProvider` so it must live underneath either a custom `ConfigProvider` or the `<Layout />` component.\n\n| prop | type | required | description |\n| ---- | ---- | -------- | ----------- |\n| `divider` |  `string` or `element` | no | A string or element that is used to divide the breadcrumbs. The default is the `right_chevron` from [feather icons](https://feathericons.com/) |\n\n## Theming\n\nThe `<BreadCrumbs />` component is themed through the `ThemeProvider` so it must live underneath the `<Layout />` component.\n\n| variable | description | default |\n| -------- | ----------- | ------- |\n| `spacing` | Determines the distance applied to the margin of the `divider` | `10px` |\n| `color.bg` | The background color of the breadcrumbs | The global `color.bg` |\n| `color.fg` | The foreground color of the breadcrumbs, including the text and the default divider | The global `color.fg` |\n| `font.size` | The size of the font used for the breadcrumb links | The global `font.size.body` |\n| `font.family` | The family of the font used for the breadcrumb links | The global `font.family.body` |\n| `font.weight` | The weight of the font used for the breadcrumb links | The global `font.weight.regular` |"},889:function(e,n){e.exports="---\ntitle: Config Provider\nauthor: Jared Jones\nlast updated: 1/11/19\n---\n\nOssus comes equiped with the ability to consume the configuration of the site at any level using the React context API. By providing the `ConfigProvider` component and the `withConfig` HOC you can easily access the table of contents, theme, and site configuration in your own components.\n\n## Config Provider\n\nThe `ConfigProvider` is a component that takes in the site config, table of contents, and theme as props. It is typically best to include this as the top level of your application as context can only be injected into components beneath it in the DOM tree.\n\n> `ConfigProvider` is built into the `ossus-components` [Layout](/docs/api/ossus-components/layout) component, which also handles merging your given theme and the defaults so for most applications it is recommended to use that component instead.\n\n```js\nimport React from 'react';\nimport { ConfigProvider } from 'ossus';\nimport { site, theme } from '../config/config';\nimport toc from '../config/tableOfContents.js';\n\nfunction App() {\n    return (\n        <ConfigProvider site={site} theme={theme} toc={toc}>\n            <div>My app</div>\n        </ConfigProvider>\n    );\n}\n\nexport default App;\n```\n\n## withConfig\n\nThe `withConfig` HOC wraps the given component in a configuration consumer, injecting the config in as a prop.\n\n```js\nimport React from 'react';\nimport { withConfig } from 'ossus';\n\nfunction ColoredButton({ config, children, ...rest }) {\n    const color = config.theme.color.primary;\n    return (\n        <button\n            style={{  backgroundColor: color }}\n            { ...rest }\n        >\n            {children}\n        </button>\n    );\n}\n\nexport default withConfig(ColoredButton);\n```"},890:function(e,n){e.exports="---\ntitle: MarkdownRenderer\nauthor: Jared Jones\nlast updated: 1/8/2019\n---\n\nThe `<MarkdownRenderer />` is a component exposed by the `ossus` package for generating react renderable JSX from a given markdown string.\n\n## Props\n\n| prop | type | required | description |\n| ---- | ---- | -------- | ----------- |\n| `content` |  `string` | yes | A string of markdown formatted text that will be rendered. |\n| `menuCallback` | `func` | no | A function that can be used to extract menu data from the markdown file. `MarkdownRenderer` will call this function after on mount and update when `content` has changed. The function will be passed a [`menu`](#menu) as an arg |\n| `watchScroll` | `func` | no | A function that will be called when the scroll position is updated. It will be passed one arg: the `id` of the heading element scrolled to |\n| `components` | `object` | no | A mapping of react components to native HTML elements (i.e `p`, `li`, etc...) to custom React components to use when rendering |\n\n## Menu\n\nThe `menu` argument passed back to the `menuCallback` prop is an array of `menuItems`. Each `menuItem` contains a `depth` which is the level of heading in the document (`h1`, `h2`, etc...), a `value`\n\n> Uses [remark-outer-toc](https://github.com/Jaredk3nt/remark-outer-toc) to generate this menu\n\n| Key | Description |\n| --- | ----------- |\n| `depth` | the level of heading in the document (`h1`, `h2`, etc...) |\n| `value` | The string value of the contents of the heading |\n| `id` | The id of the HTML element, this can be used for linking within the page |\n\nExample:\n\n```js\n[\n    { depth: 2, value: 'Header', id: 'header' },\n    { depth: 3, value: 'Nested Header', id: 'nested-header' }\n]\n```"},891:function(e,n){e.exports="---\ntitle: Toc Util\nauthor: Jared Jones\nlast updated: 1/10/2019\n---\n\n`tocUtil` is a utility that can perform common actions against the auto-generated table of contents for your site. `tocUtil` requires the table of contents as an argument. The table of contents is avaliable to all components as a prop when used with the HOC `withConfig`, when using it outside of the component context you can manually require the table of contents.\n\n```js\nconst { tocUtil } = require('ossus');\nconst toc = require('<path-to-config>/tableOfContents');\n\nconst TocUtil = tocUtil(toc);\nconst pages = TocUtil.getTopPages();\n```\n\n## Utility Functions\n\n### `getDoc`\n\n`getDoc` takes a page and a doc string and returns the metadata for the given doc with the section and page appended.\n\n```js\nconst doc = tocUtil(toc).getDoc('example', 'getting-started');\n/*\n{\n    doc: 'getting-started',\n    label: 'Getting Started',\n    page: 'example',\n    section: 'overview'\n}\n*/\n```\n\n### `getSurroundingDocs`\n\n`getSurroundingDocs` is used primary for paging between the documents. It takes a page and doc and returns a `nextDoc` and `prevDoc` with the metadata for each with the section and page appended. If there is no doc on one or both sides of the given doc then it will return null.\n\n```js\nconst doc = tocUtil(toc).getSurroundingDocs('example', 'getting-started');\n/*\n{\n    nextDoc: null,\n    prevDoc: {\n        doc: 'getting-started2',\n        label: 'Getting Started 2',\n        page: 'example',\n        section: 'overview'\n    }\n}\n*/\n```\n\n### `getPage`\n\n`getPage` returns the full table of contents tree for a given page including it's metadata and all of it's sections and documents.\n\n```js\nconst doc = tocUtil(toc).getPage('example');\n/*\n{\n    description: '',\n    label: 'Example',\n    sections: [\n        {\n            route: 'overview',\n            label: 'Overview',\n            children: [\n                {\n                    doc: 'getting-started',\n                    label: 'Getting Started'\n                }\n            ]\n        }\n    ]\n}\n*/\n```\n\n### `getPageDocs`\n\n`getPageDocs` returns an array of all docs in a page and appends the page and section to the docs metadata.\n\n```js\nconst doc = tocUtil(toc).getPageDocs('example');\n/*\n[\n    {\n        doc: 'getting-started',\n        label: 'Getting Started',\n        page: 'example',\n        section: 'overview'\n    }\n]\n*/\n```\n\n### `getFirstDoc`\n\n`getFirstDoc` returns the first doc by defined order in a given page. This is helpful when creating links to the pages themselves as the internal routing requires `doc`, `page`, and `section` in the `params`.\n\n```js\nconst doc = tocUtil(toc).getFirstDoc('example');\n/*\n{\n    doc: 'getting-started',\n    label: 'Getting Started',\n    page: 'example',\n    section: 'overview'\n}\n*/\n```\n\n### `getTopPages`\n\n`getTopPages` returns an array of all pages defined in `/documentation` and their table of contents tree.\n\n```js\nconst doc = tocUtil(toc).getTopPages('example');\n/*\n[\n    {\n        description: '',\n        label: 'Example',\n        sections: [\n            {\n                route: 'overview',\n                label: 'Overview',\n                children: [\n                    {\n                        doc: 'getting-started',\n                        label: 'Getting Started'\n                    }\n                ]\n            }\n        ]\n    }\n]\n*/\n```"},892:function(e,n){e.exports="---\ntitle: BreadCrumbs\nauthor: Jared Jones\nlast updated: 1/16/19\n---\n\nThe `<BreadCrumbs />` is a component exposed by the `ossus-components` package for dynamically creating clickable navigation breadcrumbs for docs pages.\n\n## Props\n\nThe `<BreadCrumbs />` component requires the `config` prop injected from the `ConfigProvider` so it must live underneath either a custom `ConfigProvider` or the `<Layout />` component.\n\n| prop | type | required | description |\n| ---- | ---- | -------- | ----------- |\n| `divider` |  `string` or `element` | no | A string or element that is used to divide the breadcrumbs. The default is the `right_chevron` from [feather icons](https://feathericons.com/) |\n\n## Theming\n\nThe `<BreadCrumbs />` component is themed through the `ThemeProvider` so it must live underneath the `<Layout />` component.\n\n| variable | description | default |\n| -------- | ----------- | ------- |\n| `spacing` | Determines the distance applied to the margin of the `divider` | `10px` |\n| `color.bg` | The background color of the breadcrumbs | The global `color.bg` |\n| `color.fg` | The foreground color of the breadcrumbs, including the text and the default divider | The global `color.fg` |\n| `font.size` | The size of the font used for the breadcrumb links | The global `font.size.body` |\n| `font.family` | The family of the font used for the breadcrumb links | The global `font.family.body` |\n| `font.weight` | The weight of the font used for the breadcrumb links | The global `font.weight.regular` |"},893:function(e,n){e.exports="---\ntitle: Config Provider\nauthor: Jared Jones\nlast updated: 1/11/19\n---\n\nOssus comes equiped with the ability to consume the configuration of the site at any level using the React context API. By providing the `ConfigProvider` component and the `withConfig` HOC you can easily access the table of contents, theme, and site configuration in your own components.\n\n## Config Provider\n\nThe `ConfigProvider` is a component that takes in the site config, table of contents, and theme as props. It is typically best to include this as the top level of your application as context can only be injected into components beneath it in the DOM tree.\n\n> `ConfigProvider` is built into the `ossus-components` [Layout](/docs/api/ossus-components/layout) component, which also handles merging your given theme and the defaults so for most applications it is recommended to use that component instead.\n\n```js\nimport React from 'react';\nimport { ConfigProvider } from 'ossus';\nimport { site, theme } from '../config/config';\nimport toc from '../config/tableOfContents.js';\n\nfunction App() {\n    return (\n        <ConfigProvider site={site} theme={theme} toc={toc}>\n            <div>My app</div>\n        </ConfigProvider>\n    );\n}\n\nexport default App;\n```\n\n## withConfig\n\nThe `withConfig` HOC wraps the given component in a configuration consumer, injecting the config in as a prop.\n\n```js\nimport React from 'react';\nimport { withConfig } from 'ossus';\n\nfunction ColoredButton({ config, children, ...rest }) {\n    const color = config.theme.color.primary;\n    return (\n        <button\n            style={{  backgroundColor: color }}\n            { ...rest }\n        >\n            {children}\n        </button>\n    );\n}\n\nexport default withConfig(ColoredButton);\n```"},894:function(e,n){e.exports="---\ntitle: MarkdownRenderer\nauthor: Jared Jones\nlast updated: 1/8/2019\n---\n\nThe `<MarkdownRenderer />` is a component exposed by the `ossus` package for generating react renderable JSX from a given markdown string.\n\n## Props\n\n| prop | type | required | description |\n| ---- | ---- | -------- | ----------- |\n| `content` |  `string` | yes | A string of markdown formatted text that will be rendered. |\n| `menuCallback` | `func` | no | A function that can be used to extract menu data from the markdown file. `MarkdownRenderer` will call this function after on mount and update when `content` has changed. The function will be passed a [`menu`](#menu) as an arg |\n| `watchScroll` | `func` | no | A function that will be called when the scroll position is updated. It will be passed one arg: the `id` of the heading element scrolled to |\n| `components` | `object` | no | A mapping of react components to native HTML elements (i.e `p`, `li`, etc...) to custom React components to use when rendering |\n\n## Menu\n\nThe `menu` argument passed back to the `menuCallback` prop is an array of `menuItems`. Each `menuItem` contains a `depth` which is the level of heading in the document (`h1`, `h2`, etc...), a `value`\n\n> Uses [remark-outer-toc](https://github.com/Jaredk3nt/remark-outer-toc) to generate this menu\n\n| Key | Description |\n| --- | ----------- |\n| `depth` | the level of heading in the document (`h1`, `h2`, etc...) |\n| `value` | The string value of the contents of the heading |\n| `id` | The id of the HTML element, this can be used for linking within the page |\n\nExample:\n\n```js\n[\n    { depth: 2, value: 'Header', id: 'header' },\n    { depth: 3, value: 'Nested Header', id: 'nested-header' }\n]\n```"},895:function(e,n){e.exports="---\ntitle: Toc Util\nauthor: Jared Jones\nlast updated: 1/10/2019\n---\n\n`tocUtil` is a utility that can perform common actions against the auto-generated table of contents for your site. `tocUtil` requires the table of contents as an argument. The table of contents is avaliable to all components as a prop when used with the HOC `withConfig`, when using it outside of the component context you can manually require the table of contents.\n\n```js\nconst { tocUtil } = require('ossus');\nconst toc = require('<path-to-config>/tableOfContents');\n\nconst TocUtil = tocUtil(toc);\nconst pages = TocUtil.getTopPages();\n```\n\n## Utility Functions\n\n### `getDoc`\n\n`getDoc` takes a page and a doc string and returns the metadata for the given doc with the section and page appended.\n\n```js\nconst doc = tocUtil(toc).getDoc('example', 'getting-started');\n/*\n{\n    doc: 'getting-started',\n    label: 'Getting Started',\n    page: 'example',\n    section: 'overview'\n}\n*/\n```\n\n### `getSurroundingDocs`\n\n`getSurroundingDocs` is used primary for paging between the documents. It takes a page and doc and returns a `nextDoc` and `prevDoc` with the metadata for each with the section and page appended. If there is no doc on one or both sides of the given doc then it will return null.\n\n```js\nconst doc = tocUtil(toc).getSurroundingDocs('example', 'getting-started');\n/*\n{\n    nextDoc: null,\n    prevDoc: {\n        doc: 'getting-started2',\n        label: 'Getting Started 2',\n        page: 'example',\n        section: 'overview'\n    }\n}\n*/\n```\n\n### `getPage`\n\n`getPage` returns the full table of contents tree for a given page including it's metadata and all of it's sections and documents.\n\n```js\nconst doc = tocUtil(toc).getPage('example');\n/*\n{\n    description: '',\n    label: 'Example',\n    sections: [\n        {\n            route: 'overview',\n            label: 'Overview',\n            children: [\n                {\n                    doc: 'getting-started',\n                    label: 'Getting Started'\n                }\n            ]\n        }\n    ]\n}\n*/\n```\n\n### `getPageDocs`\n\n`getPageDocs` returns an array of all docs in a page and appends the page and section to the docs metadata.\n\n```js\nconst doc = tocUtil(toc).getPageDocs('example');\n/*\n[\n    {\n        doc: 'getting-started',\n        label: 'Getting Started',\n        page: 'example',\n        section: 'overview'\n    }\n]\n*/\n```\n\n### `getFirstDoc`\n\n`getFirstDoc` returns the first doc by defined order in a given page. This is helpful when creating links to the pages themselves as the internal routing requires `doc`, `page`, and `section` in the `params`.\n\n```js\nconst doc = tocUtil(toc).getFirstDoc('example');\n/*\n{\n    doc: 'getting-started',\n    label: 'Getting Started',\n    page: 'example',\n    section: 'overview'\n}\n*/\n```\n\n### `getTopPages`\n\n`getTopPages` returns an array of all pages defined in `/documentation` and their table of contents tree.\n\n```js\nconst doc = tocUtil(toc).getTopPages('example');\n/*\n[\n    {\n        description: '',\n        label: 'Example',\n        sections: [\n            {\n                route: 'overview',\n                label: 'Overview',\n                children: [\n                    {\n                        doc: 'getting-started',\n                        label: 'Getting Started'\n                    }\n                ]\n            }\n        ]\n    }\n]\n*/\n```"},896:function(e,n){e.exports="---\ntitle: Custom Components\nauthor: Jared Jones\nlast updated: 1/8/2019\n---\n\nOssus provides a set of components through the `ossus-components` package that have access to the powerful theming options of Ossus. However if you require even more personalization Ossus is all just React so you can write your own components and use them right in your Ossus site.\n\n## Using Ossus Config\n\nOne of the reasons Ossus components are powerful is their access to the config and theming capabilities provided. You can also use this config with the `withConfig` HOC provided by `ossus`.\n\n> Ossus components are built around emotions \"styled\" components and it's theming tools so if you are using emotion js theming works out of the box with Ossus\n\nLets look at an example `PrimaryButton` component using Ossus config.\n\n```js\nimport React from 'react';\nimport { withConfig } from 'ossus';\n\nfunction PrimaryButton({ config, children, ...rest }) {\n    return (\n        <button\n            style={{\n                // Pull the primary color out of the theme\n                backgroundColor: config.theme.color.primary\n            }}\n            {...rest}\n        >\n            { children }\n        </button>\n    );\n}\n\nexport default withConfig(Button);\n```\n\n> Note: The config and theme providers are set up by the `Layout` component from `ossus-components` so you will need to keep that on your `_app.js` to keep config working."},897:function(e,n){e.exports="---\ntitle: Scaling Your Docs\nauthor: Jared Jones\nlast updated: 1/10/2019\n---\n\nOssus is built with scalability at heart, rather than keep your site constrained into a single documentation page you can organize your documentation into multiple pages and sections to keep flows separated and concrete.\n\n## Modularizing Your Documentation\n\nDocumentation is more often than not a living thing. It changes all the time and tons of people will contribute to it (dev-savy and not). One of the best things you can do to keep your documentation scalable is modularize it out of the your docs-site and into their own repositories. Since the goal of Ossus is to export static documentation sites, everytime something changes you will need to rebuild the site and deploy. You can take advantage of this by setting up your build plans to pull your documentation repositories in before your builds. As long as the structure stays the same it will build!"},898:function(e,n){e.exports="---\ntitle: Adding a Blog\nauthor: Jared Jones\nlast updated: 1/15/19\n---\n\nOssus also supports markdown based blogs out of the box. To add a blog to your site all you have to do is add a folder at the root level called `blog`. Once this folder exists `ossus-scripts` will automatically bundle all markdown files created and add them to the table of contents. You will need to add a `blog.js` page under `/pages` so we know how to render blog posts on your site, here is a sample to get you started:\n\n```js\nimport React, { Component } from 'react';\nimport ErrorPage from 'next/error';\nimport {\n    MarkdownRenderer,\n    withConfig,\n} from 'ossus';\nimport Components, {\n    CodeHighlight,\n    FrontMatter,\n    BlogLayout,\n    BlogContent,\n    BlogSidebar\n} from 'ossus-components';\n\nimport getBlog from '../src/getBlog';\n\nconst componentMap = { // ...add the component map }\n\nclass Blog extends Component {\n    render() {\n        const {\n            content,\n            statusCode,\n        } = this.props;\n\n        if (statusCode === 404) return <ErrorPage statusCode={statusCode} />;\n\n        return (\n            <BlogLayout>\n                <BlogSidebar limit={5} />\n                <BlogContent>\n                    <MarkdownRenderer\n                        content={content}\n                        components={componentMap}\n                        FrontMatter={FrontMatter}\n                    />\n                </BlogContent>\n            </BlogLayout>\n        );\n    }\n}\n\nexport default withConfig(getBlog(Blog));\n```\n\nYou will also need to add the `getBlog` HOC to the `/core` directory:\n\n```js\nimport React, { Component } from 'react';\n\nfunction getBlog(WrappedComponent) {\n    return class ComponentWithDocRouting extends Component {\n        static getInitialProps = async context => {\n            const { post } = context.query;\n            let props = {};\n            try {\n                const content = await require(`../blog/${post}.md`);\n                props = { statusCode: 200, content, post };\n            } catch (err) {\n                props = { statusCode: 404, content: '', post };\n            }\n            // Call the wrapped components getInitialProps and add to props passed down\n            if (WrappedComponent.hasOwnProperty('getInitialProps')) {\n                return { ...props, ...WrappedComponent.getInitialProps(context) };\n            }\n            return props;\n        }\n\n        render() {\n            return <WrappedComponent {...this.props} />;\n        }\n    }\n}\n\nexport default getBlog;\n```\n\n> If you already have your documentation setup you may notice that the setup for blogs is very similar. You can setup any content by following the pattern of this content setup.\n\nOnce you have the directory `/blog`, set up the `blog.js` page, and have added some posts as markdown files you will be able to route to these posts by going to `/blog/<post-file-name>`. If you used the sample code above it will already be styled for you with a sidebar that shows recent posts.\n\n> The ordering of blog posts is based on the last updated field in the files frontmatter so make sure you add that with a date format that can be ingested into JavaScripts `Date` object."},899:function(e,n){e.exports="---\ntitle: Configuration\nauthor: Jared Jones\nlast updated: 2/15/2019\n---\n\nThe site is built in such a way that it can be customized and configured without writing any code. The styles, links, and some of the layout is configurable through the `config/config.js` file.\n\n## Site Variables\n\nCertain global variables can be set through the site configuration object:\n\n- Site name\n- Site tagline\n\n```js\nconst site = {\n    name: 'Ossus',\n    tagline: 'Simple yet customizable documentation sites fast'\n}\n```\n\n### Header Links\n\nYou can define the links that appear in the header nav. If you just want to link to a non-docs page all you have to give is the route. If you want to route to a document you must give the page it belongs to, the section it is in, and the name of the document file.\n\n```js\nconst headerLinks = [\n    { route: '/', label: 'Home' },\n    { route: 'about', params: {}, label: 'About' },\n    { route: 'docs', params: {\n        page: 'developer-docs',\n        section: 'overview',\n        doc: 'getting-started'\n    }, label: 'Docs' },\n];\n```\n\n### Social Links\n\nIn the footer it adds links to your social media which you can define here. It doesn't care what you put so any link and label will work!\n\n### Footer Links\n\nIn the footer Next Docs allows you to define link sections so you can display groups of links. you define each section as an object in the footerLinks array and then give the links in that objects links array.\n\n```js\nconst footerLinks = [{\n        title: 'DEVELOPERS',\n        links: [{\n                route: '',\n                label: 'Getting Started'\n            },\n            {\n                route: '',\n                label: 'API Reference'\n            },\n            {\n                route: '',\n                label: 'Vehicle Sales APIs'\n            },\n            {\n                route: '',\n                label: 'Vehicle Service APIs'\n            }\n        ]\n    },\n    {\n        title: 'DEVELOPERS 2',\n        links: [{\n                route: '',\n                label: 'Getting Started'\n            },\n            {\n                route: '',\n                label: 'API Reference'\n            }\n        ]\n    }\n]\n```\n\n## Theming\n\nOssus has a robust and simple theming engine for `ossus-components` to let you quickly and easily style your site. Learn more about this configuration on the next document."},900:function(e,n){e.exports='---\ntitle: Documentation\nauthor: Jared Jones\nlast updated: 1/8/2019\n---\n\nThe documentation of the site is held under the `/documentation` directory and requires some specific structure to ensure that all of the automagic greatness happens when you run the site.\n\nThe sites structure is dynamically created by the structure of your documentation *(any files under `/documentation`)*. It is important to remember this because Ossus uses automated scripts to generate your file structure, so if a file falls where it isn\'t supposed to be it won\'t be picked up. To give you more fine grained control over the layout of the site each folder under documentation must have an `index.json`. This file allows for you to determine the order of files and folders and the human readable names that will be displayed in the table of contents and the breadcrumbs. It\'s also important to note that if a file or directory is not defined in your `index.json` file it won\'t get displayed on the site.\n\nYour site structure is controlled by three main concepts, and the `index.json` will be just a bit different for each one:\n\n### Pages\n\nPages are top level folders that define a single page on your site that can contain multiple sections and documents about a topic.\n\nThere is only one `index.json` for the pages and it is directly under `/documentation`. Here you can add meta-data like \'label\' to the pages which will give them human readable names.\n\n```js\n{\n    "developer-docs": {\n        "label": "Developer Docs"\n    },\n    // ... any other pages you want\n}\n```\n\n### Sections\n\nInside of each page there are sections which are the folders nested directly underneath the page folder. These sections have no content themselves but allow us to divide the content displayed to the user in the table of contents.\n\nIn the sections the order matters because they will be displayed in the table of contents so we will define the order we want for the documents. If we don\'t define this order sections will appear in alphabetical order.\n\n```js\n{\n    "order": [\n        {\n            "route": "overview", // MUST COORESPOND TO A SECTION FOLDER NAME\n            "label": "Overview"\n        },\n        {\n            "route": "concepts",\n            "label": "Core Concepts"\n        }\n    ]\n}\n```\n\n### Documents\n\nLastly there are the documents, documents are markdown files (.md extension) and are dynamically rendered into HTML on the documentation site.\n\nLike the sections the order of the documents on the page is very important so we will define the order we want. In this case though we only need to put the name of the document because we can define things like title, author, and lastupdated in the frontmatter.\n\n```js\n{\n    "order": [\n        "getting-started.md", // MUST COORESPOND TO A DOCUMENT FILE NAME\n        "some-other-doc.md"\n    ]\n}\n```\n\n## Inside a .md file\n\nOssus supports all avaliable [markdown](https://en.wikipedia.org/wiki/Markdown) syntax and HTML. If you need help with the syntax used to style markdown documents check out this handy resource: [markdown cheat sheet](https://www.markdownguide.org/cheat-sheet/). The only thing Next Docs suggests that you do is avoid h1 (#) tags. An h1 is automatically generated from the document title and the right menu that is automatically generated based on the content of the doc expects h2 to be the highest h tag on the page. H1 tags won\'t break the page but they will display as on the same level as h2\'s in the menu.\n\nIf you want to link images that you upload, simply add them to the `static/` directory and reference them the same as external images: `![image](static/image.jpg)`\n\nOssus also supports a special syntax called *frontmatter* that allows for you to define document metadata like:\n\n- title\n- author\n- last updated date\n\nDefine it at the top of your markdown files like so:\n\n```yaml\n---\ntitle: Page Title\nauthor: Your Name\nlast updated: 1/9/1996\n---\n```\n'},901:function(e,n){e.exports="---\ntitle: Getting Started\nauthor: Jared Jones\nlast updated: 1/8/2019\n---\n\n## Welcome to Ossus\n\nOssus is a documentation for getting your documentation off the ground quickly without sacrificing customization and power.\n\n### Installation\n\nOssus can be set up easily with the `create-ossus` package. `create-ossus` automatically generates a sample app with boiler plate that can get you writing documentation immediately.\n\n1. Make sure you have [Node](https://nodejs.org/en/) installed on your machine\n2. Create a new directory on your computer (ex: `my-docs`) and enter that directory on the command line\n3. Run the Ossus boilerplate script `npx create-ossus`\n4. Install the required packages `npm install`\n5. Run the site with `npm run dev`\n\nOnce you have it started, go to <http://localhost:3000> to view your new documentation site. Now that the site is running any changes you make to files will automatically cause the site to reload. However if you add, remove, or rename documentation files you may need to run the site again.\n\nIn your Ossus documenation site you will have a `/pages`, `/config`, `/src`, and a `/documentation` directory. The overall structure should look like this:\n\n```text\nroot\n|-- config\n|-- documentation\n| |-- example-page\n| | |-- example-section\n| | | |-- example.md\n| | | |-- index.json\n| | |-- index.json\n| |-- index.json\n|-- pages\n| |-- _app.js\n| |-- doc.js\n| |-- index.js\n|-- src\n| |-- getDoc.js\n|-- static\n```"},902:function(e,n){e.exports="---\ntitle: Publishing\nauthor: Jared Jones\nlast updated: 1/8/2019\n---\n\nNow that you have created a sample Ossus site with `create-ossus`, written your documentation, and customized it to your brands needs, you will want to be able to publish it so others can see your awesome documentation. Using the Next.js framework Ossus can easily export your whole site to static HTML so that you can host a lightning fast site easily.\n\n## Building\n\nTo get started you need to build your site, simply run:\n\n```bash\nnpm run build\n```\n\nIf you don't want to create a fully static version of your site, you can run a production grade SSR app with:\n\n```bash\nnpm run start\n```\n\n## Exporting\n\nIf your goal is to get a static site you have one extra step, to run:\n\n```bash\nnpm run export\n```\n\nThis will export your site as static HTML files to the `/out` directory. Creating a static site will give you fast loads, great SEO, and the ability to host cheaper. Here are a couple of great hosting platforms that allow you to host static sites:\n\n- [Github Pages](https://pages.github.com/)\n- [Now](https://zeit.co/now)\n- [Netlify](https://www.netlify.com/)\n- [AWS S3](https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html)\n\nIf you want to see your static site locally you can use the npm package [serve](https://www.npmjs.com/package/serve):\n\n1. Download `serve` globally: `npm install -g serve`\n2. Change into the `/out` directory\n3. Run `serve`\n4. A static version of your site is now avaliable at <http://localhost:5000>"},903:function(e,n){e.exports="---\ntitle: Theming\nauthor: Jared Jones\nlast updated: 2/15/2019\n---\n\nNext Docs uses a css-in-js solution called Emotion.js to theme the site. This theme injects your configuration values into the stylesheets allowing you to personalize easily. Change any of the values in the theme and the site will automatically update.\n\n> You must use emotion >= 10.0.0 to get automatic theme injection into styled components\n\nWhen using the `Layout` component from `ossus-components` you are given a default theme that can be overwritten by adding json to the theme variable in `config.js`. Each of these sections falls under the theme object in `config.js` and can be defined like so:\n\n```js\nconst theme = {\n    color: { ... },\n    font: { ... },\n    size: { ... },\n    header: { ... },\n    code: { ... },\n    breadcrumbs: { ... },\n    toc: {\n        title: { ... },\n        item: { ... }\n    },\n    menu: { ... },\n    button: { ... },\n    paging: { ... },\n    type: {\n        list: { ... },\n        a: { ... },\n        p: { ... },\n        heading: {\n            one: { ... },\n            two: { ... },\n            three: { ... },\n            four: { ... }\n        }\n    },\n}\n```\n\nEach of the objects are defined below respectively:\n\n## Color\n\nThe top level color block is used to define the default colors for the rest of the components. Changing a color in this object will override it for the whole site unless it has been defined at a more granular level. These colors can be any string value of a color that css will accept: `#fff`, `#ffffff`, `rgb(255,255,255)`, etc...\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `primary` | string | `'#82c600'` | The primary color used to accent your site. |\n| `secondary` | string | `'#000'` | The secondary color used to accent your site. |\n| `grey` | string | `'#ccc'` | The default grey used for lighter elements like borders and dividers. |\n| `bg` | string | `'#fff'` | The background color for your site. |\n| `bgDark` | string | `'#202020'` | A dark background color used for darker areas like the footer. |\n| `fg` | string | `'#82c600'` | The foreground color for your site. Used to define default text color. |\n| `fgOnDark` | string | `'#fff'` | The foreground color for your site on dark areas. |\n| `fgOnPrimary` | string | `'#fff'` | The foreground color for your site on primary colored areas. |\n\n## Font\n\nThe font block defines the default font values for the rest of the components. Change a font value in this object will override it for the entire site unless it has been defined at a more granular level. The font object is made up of three other objects: family, size, and weight to fully define the style for fonts on the site.\n\n### Family\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `title` | string | `'Montserrat, sans-serif'` | The default font to be used for 'title' elements like headings and toc title |\n| `body` | string | `'Raleway, sans-serif'` | The default font to be used for 'body' elements like paragraphs and list items |\n| `mono` | string | `'monospace'` | The default font to be used for 'code' elements like pre and code blocks |\n\n### Size\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `unit` | string | `'rem'` | The default font unit to be used for calculating font sizes (can be: 'px', 'rem', 'em') |\n| `body` | number | `.95` | The default font size for 'body' elements like paragraphs and list items |\n\n### Weight\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `regular` | number | `400` | Defines the weight used for 'regular' items like paragraphs and list items |\n| `semibold` | number | `500` | Defines the weight used for 'semibold' items like titles and active items |\n| `bold` | number | `600` | Defines the weight used for 'bold' items like headings |\n\n## Size\n\nThe size object defines some important size variables to layout your site including page width, menu/toc widths, etc. At the top level you can define:\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `unit` | string | `'px'` | The unit used to define these sizes in css (the values are given as numbers not strings so operations can be performed on them) |\n| `radius` | number | `4` | The default border radius value |\n\n### Width\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `page` | number | `1360` | The width of the page that holds the site content. |\n| `toc` | number | `260` | The width of the table of contents component that displays on docs. |\n| `menu` | number | `160` | The width of the right menu that shows document heading links. |\n| `blogSidebar` | number | `250` | The width of the blog side bar that shows recent blog posts. |\n| `blog` | number | `900` | The width of the blog post on the page within the `page` size. |\n\n### Height\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `header` | number | `60` | The height of the header on the site. |\n| `headerMobile` | number | `90` | The height of the header after the mobile breakpoint. |\n| `breadcrumbs` | number | `60` | The height of the breadcrumbs. (Set to `0` if you are not using the breadcrumbs component) |\n\n### Responsive\n\nDefine your responsive breakpoints:\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `unit` | string | `'px'` | The unit used to define these sizes in css (the values are given as numbers not strings so operations can be performed on them) |\n| `mobile` | number | `720` | The default mobile breakpoint for the site. |\n\n## Header\n\nThe header variables override the more general values above for the header component. At the top level you can define:\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `sticky` | boolean | `true` | Define whether or not the header stays at the top of the screen even when scrolling. |\n| `color` | string | `color.primary` | The background color for the header. |\n\n### Title\n\nSpecific style values for the 'title' or 'logo' on the header.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fgOnPrimary` | The font color for the header title. |\n| `font.family` | string | `font.family.title` | The font family of the title. |\n| `font.weight` | number | `font.weight.bold` | The font weight of the title. |\n| `font.size` | string | `1.5rem` | The font size of the title. |\n| `font.sizeMobile` | string | `1.2rem` | The font weight of the title on mobile. |\n\n### Link\n\nSpecific style values for the 'links' on the header.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fgOnPrimary` | The font color for the header links. |\n| `font.family` | string | `font.family.body` | The font family of the links. |\n| `font.weight` | number | `font.weight.regular` | The font weight of the links. |\n| `font.size` | string | `.9rem` | The font size of the links. |\n\n## Code\n\nThe code variables override the more general values above for the code blocks on your site.\n\n### Color\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `inlineBg` | string | `#efefef` | The background color for inline code. |\n| `blockBg` | string | `color.bgDark` | The background color for block code. |\n\n### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.mono` | The font family of the code blocks. |\n| `size` | string | `font.size.body` | The font size of the code blocks. |\n\n## Breadcrumbs\n\nTheme definitions for the breadcrumbs component to override global definitions like `color` and `font`.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `spacing` | string | `'10px'` | The spacing between the breadcrumb links. |\n\n### Color\n\nColor value definitions for the breadcrumbs component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `bg` | string | `color.bg` | The background color for the breadcrumbs. |\n| `fg` | string | `color.fg` | The foreground color for breadcrumbs text. |\n| `border` | string | `color.grey` | The border color for breadcrumbs container. |\n\n### Font\n\nFont value definitions for the breadcrumbs component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.mono` | The font family of the breadcrumbs text. |\n| `size` | string | `font.size.body` | The font size of the breadcrumbs text. |\n| `weight` | number | `font.size.body` | The font weight of the breadcrumbs text. |\n\n### Divider\n\nTheme values for the icons used to separate the links within the breadcrumbs.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `height` | string | `font.size.body` | The height of the icons used as dividers between breadcrumb links. |\n\n## Toc\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n\n## Menu\n\nTheme definitions for the menu component that displays header links on docs.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `borderRadius` | string | `'0px'` | The border radius of the menu component. |\n\n### Color\n\nColor value definitions for the menu component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `bg` | string | `color.bg` | The background color for the breadcrumbs. |\n| `fg` | string | `color.fg` | The foreground color for breadcrumbs text. |\n| `border` | string | `color.grey` | The border color for breadcrumbs container. |\n| `fgHover` | string | `color.primary` | The foreground color for breadcrumbs text when hovered. |\n| `fgActive` | string | `color.primary` | The foreground color for breadcrumbs text when active. |\n| `divider` | string | `color.fg` | The color of the divider between the menu and the doc. |\n\n### Font\n\nFont value definitions for the menu component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.body` | The font family of the menu text. |\n| `size` | string | `font.size.body` | The font size of the menu text. |\n| `weight` | number | `font.size.regular` | The font weight of the menu text. |\n\n### Divider\n\nTheme values for the line used to divide the menu from the doc. If given `false` instead of an object value it will remove the divider from the menu component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `width` | string | `2px` | The width of the line divider. |\n\n## Button\n\nThe theme variables for the button component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `borderRadius` | string | `size.radius` | The border radius of the button component. |\n| `borderWidth` | string | `'1.5px'` | The width of the border around the button component. |\n\n### Color\n\nColor value definitions for the menu component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `bg` | string | `color.bg` | The background color for the button. |\n| `fg` | string | `color.primary` | The foreground color for button text. |\n| `border` | string | `color.primary` | The border color for button container. |\n| `bgHover` | string | `color.primary` | The background color for button when hovered. |\n| `fgHover` | string | `color.fgOnPrimary` | The foreground color for button text when hovered. |\n| `borderHover` | string | `color.primary` | The border color for button when hovered. |\n\n### Font\n\nFont value definitions for the menu component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.body` | The font family of the button text. |\n| `size` | string | `font.size.body` | The font size of the button text. |\n| `weight` | number | `font.size.regular` | The font weight of the button text. |\n\n## Paging\n\nThe theme variables for the Paging component. The paging component uses the same definition as the button component above with the only difference that the border default is `color.grey`.\n\n## Type\n\n### Frontmatter\n\nTheme overrides for the frontmatter element used at the top of documentation markdown to show metadata.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n| `borderColor` | string | `color.grey` | The border color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.body` | The font family of the text. |\n| `size` | string | `font.size.body` | The font size of the text. |\n| `weight` | number | `font.size.regular` | The font weight of the text. |\n\n### List\n\nTheme overrides for the list element used in documentation markdown.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n| `padLeft` | string | `'20px'` | The left padding of the list indentation. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.body` | The font family of the text. |\n| `size` | string | `font.size.body` | The font size of the text. |\n| `weight` | number | `font.size.regular` | The font weight of the text. |\n\n### A (link)\n\nTheme overrides for the link element used in documentation markdown.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.body` | The font family of the text. |\n| `size` | string | `font.size.body` | The font size of the text. |\n| `weight` | number | `font.size.regular` | The font weight of the text. |\n| `lineHeight` | string | `1.5` | The line height of the text. |\n\n### P (paragraph)\n\nTheme overrides for the paragraph element used in documentation markdown.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.body` | The font family of the text. |\n| `size` | string | `font.size.body` | The font size of the text. |\n| `weight` | number | `font.size.regular` | The font weight of the text. |\n| `lineHeight` | string | `1.5` | The line height of the text. |\n\n### Heading\n\nOssus has default definitions for Headings 1 - 4 that can be overwritten through the theme config.\n\n#### H1\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.title` | The font family of the text. |\n| `size` | string | `2rem` | The font size of the text. |\n| `weight` | number | `font.size.bold` | The font weight of the text. |\n\n#### H2\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.title` | The font family of the text. |\n| `size` | string | `1.75rem` | The font size of the text. |\n| `weight` | number | `font.size.bold` | The font weight of the text. |\n\n#### H3\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.title` | The font family of the text. |\n| `size` | string | `1.25rem` | The font size of the text. |\n| `weight` | number | `font.size.semibold` | The font weight of the text. |\n\n#### H4\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.title` | The font family of the text. |\n| `size` | string | `1.1rem` | The font size of the text. |\n| `weight` | number | `font.size.bold` | The font weight of the text. |\n"},904:function(e,n){e.exports="---\ntitle: Custom Components\nauthor: Jared Jones\nlast updated: 1/8/2019\n---\n\nOssus provides a set of components through the `ossus-components` package that have access to the powerful theming options of Ossus. However if you require even more personalization Ossus is all just React so you can write your own components and use them right in your Ossus site.\n\n## Using Ossus Config\n\nOne of the reasons Ossus components are powerful is their access to the config and theming capabilities provided. You can also use this config with the `withConfig` HOC provided by `ossus`.\n\n> Ossus components are built around emotions \"styled\" components and it's theming tools so if you are using emotion js theming works out of the box with Ossus\n\nLets look at an example `PrimaryButton` component using Ossus config.\n\n```js\nimport React from 'react';\nimport { withConfig } from 'ossus';\n\nfunction PrimaryButton({ config, children, ...rest }) {\n    return (\n        <button\n            style={{\n                // Pull the primary color out of the theme\n                backgroundColor: config.theme.color.primary\n            }}\n            {...rest}\n        >\n            { children }\n        </button>\n    );\n}\n\nexport default withConfig(Button);\n```\n\n> Note: The config and theme providers are set up by the `Layout` component from `ossus-components` so you will need to keep that on your `_app.js` to keep config working."},905:function(e,n){e.exports="---\ntitle: Scaling Your Docs\nauthor: Jared Jones\nlast updated: 1/10/2019\n---\n\nOssus is built with scalability at heart, rather than keep your site constrained into a single documentation page you can organize your documentation into multiple pages and sections to keep flows separated and concrete.\n\n## Modularizing Your Documentation\n\nDocumentation is more often than not a living thing. It changes all the time and tons of people will contribute to it (dev-savy and not). One of the best things you can do to keep your documentation scalable is modularize it out of the your docs-site and into their own repositories. Since the goal of Ossus is to export static documentation sites, everytime something changes you will need to rebuild the site and deploy. You can take advantage of this by setting up your build plans to pull your documentation repositories in before your builds. As long as the structure stays the same it will build!"},906:function(e,n){e.exports="---\ntitle: Adding a Blog\nauthor: Jared Jones\nlast updated: 1/15/19\n---\n\nOssus also supports markdown based blogs out of the box. To add a blog to your site all you have to do is add a folder at the root level called `blog`. Once this folder exists `ossus-scripts` will automatically bundle all markdown files created and add them to the table of contents. You will need to add a `blog.js` page under `/pages` so we know how to render blog posts on your site, here is a sample to get you started:\n\n```js\nimport React, { Component } from 'react';\nimport ErrorPage from 'next/error';\nimport {\n    MarkdownRenderer,\n    withConfig,\n} from 'ossus';\nimport Components, {\n    CodeHighlight,\n    FrontMatter,\n    BlogLayout,\n    BlogContent,\n    BlogSidebar\n} from 'ossus-components';\n\nimport getBlog from '../src/getBlog';\n\nconst componentMap = { // ...add the component map }\n\nclass Blog extends Component {\n    render() {\n        const {\n            content,\n            statusCode,\n        } = this.props;\n\n        if (statusCode === 404) return <ErrorPage statusCode={statusCode} />;\n\n        return (\n            <BlogLayout>\n                <BlogSidebar limit={5} />\n                <BlogContent>\n                    <MarkdownRenderer\n                        content={content}\n                        components={componentMap}\n                        FrontMatter={FrontMatter}\n                    />\n                </BlogContent>\n            </BlogLayout>\n        );\n    }\n}\n\nexport default withConfig(getBlog(Blog));\n```\n\nYou will also need to add the `getBlog` HOC to the `/core` directory:\n\n```js\nimport React, { Component } from 'react';\n\nfunction getBlog(WrappedComponent) {\n    return class ComponentWithDocRouting extends Component {\n        static getInitialProps = async context => {\n            const { post } = context.query;\n            let props = {};\n            try {\n                const content = await require(`../blog/${post}.md`);\n                props = { statusCode: 200, content, post };\n            } catch (err) {\n                props = { statusCode: 404, content: '', post };\n            }\n            // Call the wrapped components getInitialProps and add to props passed down\n            if (WrappedComponent.hasOwnProperty('getInitialProps')) {\n                return { ...props, ...WrappedComponent.getInitialProps(context) };\n            }\n            return props;\n        }\n\n        render() {\n            return <WrappedComponent {...this.props} />;\n        }\n    }\n}\n\nexport default getBlog;\n```\n\n> If you already have your documentation setup you may notice that the setup for blogs is very similar. You can setup any content by following the pattern of this content setup.\n\nOnce you have the directory `/blog`, set up the `blog.js` page, and have added some posts as markdown files you will be able to route to these posts by going to `/blog/<post-file-name>`. If you used the sample code above it will already be styled for you with a sidebar that shows recent posts.\n\n> The ordering of blog posts is based on the last updated field in the files frontmatter so make sure you add that with a date format that can be ingested into JavaScripts `Date` object."},907:function(e,n){e.exports="---\ntitle: Configuration\nauthor: Jared Jones\nlast updated: 2/15/2019\n---\n\nThe site is built in such a way that it can be customized and configured without writing any code. The styles, links, and some of the layout is configurable through the `config/config.js` file.\n\n## Site Variables\n\nCertain global variables can be set through the site configuration object:\n\n- Site name\n- Site tagline\n\n```js\nconst site = {\n    name: 'Ossus',\n    tagline: 'Simple yet customizable documentation sites fast'\n}\n```\n\n### Header Links\n\nYou can define the links that appear in the header nav. If you just want to link to a non-docs page all you have to give is the route. If you want to route to a document you must give the page it belongs to, the section it is in, and the name of the document file.\n\n```js\nconst headerLinks = [\n    { route: '/', label: 'Home' },\n    { route: 'about', params: {}, label: 'About' },\n    { route: 'docs', params: {\n        page: 'developer-docs',\n        section: 'overview',\n        doc: 'getting-started'\n    }, label: 'Docs' },\n];\n```\n\n### Social Links\n\nIn the footer it adds links to your social media which you can define here. It doesn't care what you put so any link and label will work!\n\n### Footer Links\n\nIn the footer Next Docs allows you to define link sections so you can display groups of links. you define each section as an object in the footerLinks array and then give the links in that objects links array.\n\n```js\nconst footerLinks = [{\n        title: 'DEVELOPERS',\n        links: [{\n                route: '',\n                label: 'Getting Started'\n            },\n            {\n                route: '',\n                label: 'API Reference'\n            },\n            {\n                route: '',\n                label: 'Vehicle Sales APIs'\n            },\n            {\n                route: '',\n                label: 'Vehicle Service APIs'\n            }\n        ]\n    },\n    {\n        title: 'DEVELOPERS 2',\n        links: [{\n                route: '',\n                label: 'Getting Started'\n            },\n            {\n                route: '',\n                label: 'API Reference'\n            }\n        ]\n    }\n]\n```\n\n## Theming\n\nOssus has a robust and simple theming engine for `ossus-components` to let you quickly and easily style your site. Learn more about this configuration on the next document."},908:function(e,n){e.exports='---\ntitle: Documentation\nauthor: Jared Jones\nlast updated: 1/8/2019\n---\n\nThe documentation of the site is held under the `/documentation` directory and requires some specific structure to ensure that all of the automagic greatness happens when you run the site.\n\nThe sites structure is dynamically created by the structure of your documentation *(any files under `/documentation`)*. It is important to remember this because Ossus uses automated scripts to generate your file structure, so if a file falls where it isn\'t supposed to be it won\'t be picked up. To give you more fine grained control over the layout of the site each folder under documentation must have an `index.json`. This file allows for you to determine the order of files and folders and the human readable names that will be displayed in the table of contents and the breadcrumbs. It\'s also important to note that if a file or directory is not defined in your `index.json` file it won\'t get displayed on the site.\n\nYour site structure is controlled by three main concepts, and the `index.json` will be just a bit different for each one:\n\n### Pages\n\nPages are top level folders that define a single page on your site that can contain multiple sections and documents about a topic.\n\nThere is only one `index.json` for the pages and it is directly under `/documentation`. Here you can add meta-data like \'label\' to the pages which will give them human readable names.\n\n```js\n{\n    "developer-docs": {\n        "label": "Developer Docs"\n    },\n    // ... any other pages you want\n}\n```\n\n### Sections\n\nInside of each page there are sections which are the folders nested directly underneath the page folder. These sections have no content themselves but allow us to divide the content displayed to the user in the table of contents.\n\nIn the sections the order matters because they will be displayed in the table of contents so we will define the order we want for the documents. If we don\'t define this order sections will appear in alphabetical order.\n\n```js\n{\n    "order": [\n        {\n            "route": "overview", // MUST COORESPOND TO A SECTION FOLDER NAME\n            "label": "Overview"\n        },\n        {\n            "route": "concepts",\n            "label": "Core Concepts"\n        }\n    ]\n}\n```\n\n### Documents\n\nLastly there are the documents, documents are markdown files (.md extension) and are dynamically rendered into HTML on the documentation site.\n\nLike the sections the order of the documents on the page is very important so we will define the order we want. In this case though we only need to put the name of the document because we can define things like title, author, and lastupdated in the frontmatter.\n\n```js\n{\n    "order": [\n        "getting-started.md", // MUST COORESPOND TO A DOCUMENT FILE NAME\n        "some-other-doc.md"\n    ]\n}\n```\n\n## Inside a .md file\n\nOssus supports all avaliable [markdown](https://en.wikipedia.org/wiki/Markdown) syntax and HTML. If you need help with the syntax used to style markdown documents check out this handy resource: [markdown cheat sheet](https://www.markdownguide.org/cheat-sheet/). The only thing Next Docs suggests that you do is avoid h1 (#) tags. An h1 is automatically generated from the document title and the right menu that is automatically generated based on the content of the doc expects h2 to be the highest h tag on the page. H1 tags won\'t break the page but they will display as on the same level as h2\'s in the menu.\n\nIf you want to link images that you upload, simply add them to the `static/` directory and reference them the same as external images: `![image](static/image.jpg)`\n\nOssus also supports a special syntax called *frontmatter* that allows for you to define document metadata like:\n\n- title\n- author\n- last updated date\n\nDefine it at the top of your markdown files like so:\n\n```yaml\n---\ntitle: Page Title\nauthor: Your Name\nlast updated: 1/9/1996\n---\n```\n'},909:function(e,n){e.exports="---\ntitle: Getting Started\nauthor: Jared Jones\nlast updated: 1/8/2019\n---\n\n## Welcome to Ossus\n\nOssus is a documentation for getting your documentation off the ground quickly without sacrificing customization and power.\n\n### Installation\n\nOssus can be set up easily with the `create-ossus` package. `create-ossus` automatically generates a sample app with boiler plate that can get you writing documentation immediately.\n\n1. Make sure you have [Node](https://nodejs.org/en/) installed on your machine\n2. Create a new directory on your computer (ex: `my-docs`) and enter that directory on the command line\n3. Run the Ossus boilerplate script `npx create-ossus`\n4. Install the required packages `npm install`\n5. Run the site with `npm run dev`\n\nOnce you have it started, go to <http://localhost:3000> to view your new documentation site. Now that the site is running any changes you make to files will automatically cause the site to reload. However if you add, remove, or rename documentation files you may need to run the site again.\n\nIn your Ossus documenation site you will have a `/pages`, `/config`, `/src`, and a `/documentation` directory. The overall structure should look like this:\n\n```text\nroot\n|-- config\n|-- documentation\n| |-- example-page\n| | |-- example-section\n| | | |-- example.md\n| | | |-- index.json\n| | |-- index.json\n| |-- index.json\n|-- pages\n| |-- _app.js\n| |-- doc.js\n| |-- index.js\n|-- src\n| |-- getDoc.js\n|-- static\n```"},910:function(e,n){e.exports="---\ntitle: Publishing\nauthor: Jared Jones\nlast updated: 1/8/2019\n---\n\nNow that you have created a sample Ossus site with `create-ossus`, written your documentation, and customized it to your brands needs, you will want to be able to publish it so others can see your awesome documentation. Using the Next.js framework Ossus can easily export your whole site to static HTML so that you can host a lightning fast site easily.\n\n## Building\n\nTo get started you need to build your site, simply run:\n\n```bash\nnpm run build\n```\n\nIf you don't want to create a fully static version of your site, you can run a production grade SSR app with:\n\n```bash\nnpm run start\n```\n\n## Exporting\n\nIf your goal is to get a static site you have one extra step, to run:\n\n```bash\nnpm run export\n```\n\nThis will export your site as static HTML files to the `/out` directory. Creating a static site will give you fast loads, great SEO, and the ability to host cheaper. Here are a couple of great hosting platforms that allow you to host static sites:\n\n- [Github Pages](https://pages.github.com/)\n- [Now](https://zeit.co/now)\n- [Netlify](https://www.netlify.com/)\n- [AWS S3](https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html)\n\nIf you want to see your static site locally you can use the npm package [serve](https://www.npmjs.com/package/serve):\n\n1. Download `serve` globally: `npm install -g serve`\n2. Change into the `/out` directory\n3. Run `serve`\n4. A static version of your site is now avaliable at <http://localhost:5000>"},911:function(e,n){e.exports="---\ntitle: Theming\nauthor: Jared Jones\nlast updated: 2/15/2019\n---\n\nNext Docs uses a css-in-js solution called Emotion.js to theme the site. This theme injects your configuration values into the stylesheets allowing you to personalize easily. Change any of the values in the theme and the site will automatically update.\n\n> You must use emotion >= 10.0.0 to get automatic theme injection into styled components\n\nWhen using the `Layout` component from `ossus-components` you are given a default theme that can be overwritten by adding json to the theme variable in `config.js`. Each of these sections falls under the theme object in `config.js` and can be defined like so:\n\n```js\nconst theme = {\n    color: { ... },\n    font: { ... },\n    size: { ... },\n    header: { ... },\n    code: { ... },\n    breadcrumbs: { ... },\n    toc: {\n        title: { ... },\n        item: { ... }\n    },\n    menu: { ... },\n    button: { ... },\n    paging: { ... },\n    type: {\n        list: { ... },\n        a: { ... },\n        p: { ... },\n        heading: {\n            one: { ... },\n            two: { ... },\n            three: { ... },\n            four: { ... }\n        }\n    },\n}\n```\n\nEach of the objects are defined below respectively:\n\n## Color\n\nThe top level color block is used to define the default colors for the rest of the components. Changing a color in this object will override it for the whole site unless it has been defined at a more granular level. These colors can be any string value of a color that css will accept: `#fff`, `#ffffff`, `rgb(255,255,255)`, etc...\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `primary` | string | `'#82c600'` | The primary color used to accent your site. |\n| `secondary` | string | `'#000'` | The secondary color used to accent your site. |\n| `grey` | string | `'#ccc'` | The default grey used for lighter elements like borders and dividers. |\n| `bg` | string | `'#fff'` | The background color for your site. |\n| `bgDark` | string | `'#202020'` | A dark background color used for darker areas like the footer. |\n| `fg` | string | `'#82c600'` | The foreground color for your site. Used to define default text color. |\n| `fgOnDark` | string | `'#fff'` | The foreground color for your site on dark areas. |\n| `fgOnPrimary` | string | `'#fff'` | The foreground color for your site on primary colored areas. |\n\n## Font\n\nThe font block defines the default font values for the rest of the components. Change a font value in this object will override it for the entire site unless it has been defined at a more granular level. The font object is made up of three other objects: family, size, and weight to fully define the style for fonts on the site.\n\n### Family\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `title` | string | `'Montserrat, sans-serif'` | The default font to be used for 'title' elements like headings and toc title |\n| `body` | string | `'Raleway, sans-serif'` | The default font to be used for 'body' elements like paragraphs and list items |\n| `mono` | string | `'monospace'` | The default font to be used for 'code' elements like pre and code blocks |\n\n### Size\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `unit` | string | `'rem'` | The default font unit to be used for calculating font sizes (can be: 'px', 'rem', 'em') |\n| `body` | number | `.95` | The default font size for 'body' elements like paragraphs and list items |\n\n### Weight\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `regular` | number | `400` | Defines the weight used for 'regular' items like paragraphs and list items |\n| `semibold` | number | `500` | Defines the weight used for 'semibold' items like titles and active items |\n| `bold` | number | `600` | Defines the weight used for 'bold' items like headings |\n\n## Size\n\nThe size object defines some important size variables to layout your site including page width, menu/toc widths, etc. At the top level you can define:\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `unit` | string | `'px'` | The unit used to define these sizes in css (the values are given as numbers not strings so operations can be performed on them) |\n| `radius` | number | `4` | The default border radius value |\n\n### Width\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `page` | number | `1360` | The width of the page that holds the site content. |\n| `toc` | number | `260` | The width of the table of contents component that displays on docs. |\n| `menu` | number | `160` | The width of the right menu that shows document heading links. |\n| `blogSidebar` | number | `250` | The width of the blog side bar that shows recent blog posts. |\n| `blog` | number | `900` | The width of the blog post on the page within the `page` size. |\n\n### Height\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `header` | number | `60` | The height of the header on the site. |\n| `headerMobile` | number | `90` | The height of the header after the mobile breakpoint. |\n| `breadcrumbs` | number | `60` | The height of the breadcrumbs. (Set to `0` if you are not using the breadcrumbs component) |\n\n### Responsive\n\nDefine your responsive breakpoints:\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `unit` | string | `'px'` | The unit used to define these sizes in css (the values are given as numbers not strings so operations can be performed on them) |\n| `mobile` | number | `720` | The default mobile breakpoint for the site. |\n\n## Header\n\nThe header variables override the more general values above for the header component. At the top level you can define:\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `sticky` | boolean | `true` | Define whether or not the header stays at the top of the screen even when scrolling. |\n| `color` | string | `color.primary` | The background color for the header. |\n\n### Title\n\nSpecific style values for the 'title' or 'logo' on the header.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fgOnPrimary` | The font color for the header title. |\n| `font.family` | string | `font.family.title` | The font family of the title. |\n| `font.weight` | number | `font.weight.bold` | The font weight of the title. |\n| `font.size` | string | `1.5rem` | The font size of the title. |\n| `font.sizeMobile` | string | `1.2rem` | The font weight of the title on mobile. |\n\n### Link\n\nSpecific style values for the 'links' on the header.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fgOnPrimary` | The font color for the header links. |\n| `font.family` | string | `font.family.body` | The font family of the links. |\n| `font.weight` | number | `font.weight.regular` | The font weight of the links. |\n| `font.size` | string | `.9rem` | The font size of the links. |\n\n## Code\n\nThe code variables override the more general values above for the code blocks on your site.\n\n### Color\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `inlineBg` | string | `#efefef` | The background color for inline code. |\n| `blockBg` | string | `color.bgDark` | The background color for block code. |\n\n### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.mono` | The font family of the code blocks. |\n| `size` | string | `font.size.body` | The font size of the code blocks. |\n\n## Breadcrumbs\n\nTheme definitions for the breadcrumbs component to override global definitions like `color` and `font`.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `spacing` | string | `'10px'` | The spacing between the breadcrumb links. |\n\n### Color\n\nColor value definitions for the breadcrumbs component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `bg` | string | `color.bg` | The background color for the breadcrumbs. |\n| `fg` | string | `color.fg` | The foreground color for breadcrumbs text. |\n| `border` | string | `color.grey` | The border color for breadcrumbs container. |\n\n### Font\n\nFont value definitions for the breadcrumbs component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.mono` | The font family of the breadcrumbs text. |\n| `size` | string | `font.size.body` | The font size of the breadcrumbs text. |\n| `weight` | number | `font.size.body` | The font weight of the breadcrumbs text. |\n\n### Divider\n\nTheme values for the icons used to separate the links within the breadcrumbs.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `height` | string | `font.size.body` | The height of the icons used as dividers between breadcrumb links. |\n\n## Toc\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n\n## Menu\n\nTheme definitions for the menu component that displays header links on docs.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `borderRadius` | string | `'0px'` | The border radius of the menu component. |\n\n### Color\n\nColor value definitions for the menu component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `bg` | string | `color.bg` | The background color for the breadcrumbs. |\n| `fg` | string | `color.fg` | The foreground color for breadcrumbs text. |\n| `border` | string | `color.grey` | The border color for breadcrumbs container. |\n| `fgHover` | string | `color.primary` | The foreground color for breadcrumbs text when hovered. |\n| `fgActive` | string | `color.primary` | The foreground color for breadcrumbs text when active. |\n| `divider` | string | `color.fg` | The color of the divider between the menu and the doc. |\n\n### Font\n\nFont value definitions for the menu component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.body` | The font family of the menu text. |\n| `size` | string | `font.size.body` | The font size of the menu text. |\n| `weight` | number | `font.size.regular` | The font weight of the menu text. |\n\n### Divider\n\nTheme values for the line used to divide the menu from the doc. If given `false` instead of an object value it will remove the divider from the menu component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `width` | string | `2px` | The width of the line divider. |\n\n## Button\n\nThe theme variables for the button component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `borderRadius` | string | `size.radius` | The border radius of the button component. |\n| `borderWidth` | string | `'1.5px'` | The width of the border around the button component. |\n\n### Color\n\nColor value definitions for the menu component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `bg` | string | `color.bg` | The background color for the button. |\n| `fg` | string | `color.primary` | The foreground color for button text. |\n| `border` | string | `color.primary` | The border color for button container. |\n| `bgHover` | string | `color.primary` | The background color for button when hovered. |\n| `fgHover` | string | `color.fgOnPrimary` | The foreground color for button text when hovered. |\n| `borderHover` | string | `color.primary` | The border color for button when hovered. |\n\n### Font\n\nFont value definitions for the menu component.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.body` | The font family of the button text. |\n| `size` | string | `font.size.body` | The font size of the button text. |\n| `weight` | number | `font.size.regular` | The font weight of the button text. |\n\n## Paging\n\nThe theme variables for the Paging component. The paging component uses the same definition as the button component above with the only difference that the border default is `color.grey`.\n\n## Type\n\n### Frontmatter\n\nTheme overrides for the frontmatter element used at the top of documentation markdown to show metadata.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n| `borderColor` | string | `color.grey` | The border color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.body` | The font family of the text. |\n| `size` | string | `font.size.body` | The font size of the text. |\n| `weight` | number | `font.size.regular` | The font weight of the text. |\n\n### List\n\nTheme overrides for the list element used in documentation markdown.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n| `padLeft` | string | `'20px'` | The left padding of the list indentation. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.body` | The font family of the text. |\n| `size` | string | `font.size.body` | The font size of the text. |\n| `weight` | number | `font.size.regular` | The font weight of the text. |\n\n### A (link)\n\nTheme overrides for the link element used in documentation markdown.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.body` | The font family of the text. |\n| `size` | string | `font.size.body` | The font size of the text. |\n| `weight` | number | `font.size.regular` | The font weight of the text. |\n| `lineHeight` | string | `1.5` | The line height of the text. |\n\n### P (paragraph)\n\nTheme overrides for the paragraph element used in documentation markdown.\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.body` | The font family of the text. |\n| `size` | string | `font.size.body` | The font size of the text. |\n| `weight` | number | `font.size.regular` | The font weight of the text. |\n| `lineHeight` | string | `1.5` | The line height of the text. |\n\n### Heading\n\nOssus has default definitions for Headings 1 - 4 that can be overwritten through the theme config.\n\n#### H1\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.title` | The font family of the text. |\n| `size` | string | `2rem` | The font size of the text. |\n| `weight` | number | `font.size.bold` | The font weight of the text. |\n\n#### H2\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.title` | The font family of the text. |\n| `size` | string | `1.75rem` | The font size of the text. |\n| `weight` | number | `font.size.bold` | The font weight of the text. |\n\n#### H3\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.title` | The font family of the text. |\n| `size` | string | `1.25rem` | The font size of the text. |\n| `weight` | number | `font.size.semibold` | The font weight of the text. |\n\n#### H4\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `color` | string | `color.fg` | The text color. |\n\n#### Font\n\n| parameter | type | default | description |\n| --------- | ---- | ------- | ----------- |\n| `family` | string | `font.family.title` | The font family of the text. |\n| `size` | string | `1.1rem` | The font size of the text. |\n| `weight` | number | `font.size.bold` | The font weight of the text. |\n"},918:function(e,n,t){"use strict";t.r(n);var o=t(0),r=t.n(o),i=t(217),a=t.n(i),s=t(5),l=t(1),d=t.n(l),c=t(47),h=t.n(c);function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function f(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.forEach(function(n){w(e,n,t[n])})}return e}function m(e,n,t,o,r,i,a){try{var s=e[i](a),l=s.value}catch(e){return void t(e)}s.done?n(l):Promise.resolve(l).then(o,r)}function p(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function g(e,n){return!n||"object"!==u(n)&&"function"!=typeof n?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):n}function b(e){return(b=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function y(e,n){return(y=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function w(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}var v=function(e){var n,i;return i=n=function(n){function t(){return function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,t),g(this,b(t).apply(this,arguments))}var i,a,s;return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),n&&y(e,n)}(t,o.Component),i=t,(a=[{key:"render",value:function(){return r.a.createElement(e,this.props)}}])&&p(i.prototype,a),s&&p(i,s),t}(),w(n,"getInitialProps",(a=h.a.mark(function n(o){var r,i,a,s,l,d;return h.a.wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return r=o.query,i=r.page,a=r.section,s=r.doc,l={},n.prev=2,n.next=5,t(887)("./".concat(i,"/").concat(a,"/").concat(s,".md"));case 5:d=n.sent,l={statusCode:200,content:d,page:i,section:a,doc:s},n.next=12;break;case 9:n.prev=9,n.t0=n.catch(2),l={statusCode:404,content:"",page:i};case 12:if(!e.hasOwnProperty("getInitialProps")){n.next=14;break}return n.abrupt("return",f({},l,e.getInitialProps(o)));case 14:return n.abrupt("return",l);case 15:case"end":return n.stop()}},n,this,[[2,9]])}),s=function(){var e=this,n=arguments;return new Promise(function(t,o){var r=a.apply(e,n);function i(e){m(r,t,o,i,s,"next",e)}function s(e){m(r,t,o,i,s,"throw",e)}i(void 0)})},function(e){return s.apply(this,arguments)})),i;var a,s};function T(e){return(T="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function k(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function x(e,n){return!n||"object"!==T(n)&&"function"!=typeof n?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):n}function C(e){return(C=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function O(e,n){return(O=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}var j={a:d.a.primatives.A,p:d.a.primatives.P,pre:l.CodeHighlight,table:d.a.primatives.Table,ul:d.a.primatives.Ul,ol:d.a.primatives.Ol,h1:d.a.primatives.H1,h2:d.a.primatives.H2,h3:d.a.primatives.H3,h4:d.a.primatives.H4,blockquote:d.a.primatives.Blockquote},z=function(e){function n(){return function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n),x(this,C(n).apply(this,arguments))}var t,i,d;return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),n&&O(e,n)}(n,o["Component"]),t=n,(i=[{key:"render",value:function(){var e=this.props,n=e.content,t=e.statusCode,o=e.page,i=e.prevDoc,d=e.nextDoc,c=e.menu,h=e.activeHeader,u=e.watchMenu,f=e.watchScroll;return 404===t?r.a.createElement(a.a,{statusCode:t}):r.a.createElement(l.DocumentLayout,null,r.a.createElement(l.TableOfContents,{page:o}),r.a.createElement(l.DocumentContent,null,r.a.createElement(s.MarkdownRenderer,{content:n,menuCallback:u,watchScroll:f,components:j,FrontMatter:l.FrontMatter}),r.a.createElement(l.Paging,{nextDoc:d,prevDoc:i,page:o})),r.a.createElement(l.Menu,{menu:c,activeHeader:h}))}}])&&k(t.prototype,i),d&&k(t,d),n}();n.default=Object(s.withConfig)(v(Object(s.withDoc)(z)))}},[[871,1,0]]]);