@primer/blueprints

Primer Blueprints

This project hosts React components and utilities for building Primer documentation sites.

:point_right: Visit primer.style/blueprints to learn more!

Installation

npm install @primer/blueprints react react-dom styled-components

Usage

Wrap your configuration in the @primer/blueprints/configure export in your project's next.config.js:

const configure = require('@primer/blueprints/configure')
module.exports = configure({
  env: {
    // your env vars here
  }
})

Now v2

When deploying to Now v2, be sure to provide the target: 'serverless' configuration option:

module.exports = configure({
+  target: 'serverless', // required for Now v2
  env: {
    // your env vars here
  }
})

Configuration features

Our configuration provides the following features:

1. Conversion of .svg files into React components with svgr, as in:

   import SomeImage from '../assets/some-image.svg'
   export default props => <SomeImage width="100%" {...props} />
   

2. Export of bitmap images (.gif, .jpg, .png, and .ico) as static files with file-loader:

   import myImagePath from '../assets/image.gif'
   export default props => <img src={myImagePath} {...props} />
   

3. MDX support, plus a bunch of other goodies:

   • YAML frontmatter support, which is available when you import or require() any MDX file in your app.
   • GitHub emoji with remark-emoji
   • Syntax highlighting with rehype-prism
   • Table of contents with remark-toc
   • Markdown images

Components

General-purpose React components are available as named exports from @primer/blueprints:

import {Header, ClipboardCopy, StatusLabel} from '@primer/blueprints'

Next.js components

React components for use in Next.js sites are only exported from @primer/blueprints/next-components:

import {Link, Frame, CodeExample} from '@primer/blueprints/next-components'