From 5f4d689974eb9c30ffa8e61a90ab4e2346c94341 Mon Sep 17 00:00:00 2001 From: emplums Date: Mon, 22 Apr 2019 15:06:23 -0700 Subject: [PATCH 01/12] fix table of contents instances --- docs/Outline.js | 30 ----------------------- docs/markdown.js | 11 --------- pages/css/components/avatars.md | 3 +-- pages/css/components/box.md | 2 +- pages/css/components/buttons.md | 2 +- pages/css/components/dropdown.md | 2 +- pages/css/components/forms.md | 2 +- pages/css/components/labels.md | 2 +- pages/css/components/navigation.md | 2 +- pages/css/components/pagehead.md | 2 +- pages/css/components/pagination.md | 2 +- pages/css/components/popover.md | 2 +- pages/css/components/select-menu.md | 2 +- pages/css/components/tooltips.md | 2 +- pages/css/getting-started/contributing.md | 2 +- pages/css/objects/grid.md | 2 +- pages/css/principles/accessibility.md | 2 +- pages/css/principles/html.md | 2 +- pages/css/principles/index.md | 2 +- pages/css/principles/scss.md | 2 +- pages/css/support/breakpoints.md | 2 +- pages/css/support/color-system.md | 2 +- pages/css/support/spacing.md | 2 +- pages/css/support/typography.md | 2 +- pages/css/tools/atom-packages.md | 2 +- pages/css/tools/linting.md | 2 +- pages/css/utilities/animations.md | 2 +- pages/css/utilities/borders.md | 2 +- pages/css/utilities/box-shadow.md | 2 +- pages/css/utilities/details.md | 2 +- pages/css/utilities/flexbox.md | 2 +- pages/css/utilities/layout.md | 2 +- pages/css/utilities/margin.md | 2 +- pages/css/utilities/marketing-layout.md | 2 +- pages/css/utilities/padding.md | 2 +- pages/css/utilities/typography.md | 2 +- 36 files changed, 34 insertions(+), 76 deletions(-) delete mode 100644 docs/Outline.js diff --git a/docs/Outline.js b/docs/Outline.js deleted file mode 100644 index ca12734f..00000000 --- a/docs/Outline.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import {Box} from '@primer/components' - -export default function Outline({outline, ...rest}) { - if (outline && outline.length) { - return ( - - Table of contents - - - ) - } - return null -} - -export function OutlineList({items, ...rest}) { - if (items && items.length) { - return ( - - ) - } - return null -} diff --git a/docs/markdown.js b/docs/markdown.js index e2bbe019..2d9180a9 100644 --- a/docs/markdown.js +++ b/docs/markdown.js @@ -1,27 +1,16 @@ import React from 'react' import {Heading, Link} from '@primer/components' import {CodeExample} from '@primer/blueprints' -import Outline from './Outline' export const H1 = props => export default function getComponents(page = {}) { - const {outline: getOutline = () => []} = page - return { h1: H1, // render links with our component a: Link, // render code blocks with our wrapper around react-live code: CodeExample, - // render the outline for

tags with exactly the text "{:toc}" - p: ({children, ...rest}) => { - if (children === '{:toc}') { - return - } else { - return

{children}

- } - }, // "unwrap" 
 elements around  blocks
     pre: props => props.children
   }
diff --git a/pages/css/components/avatars.md b/pages/css/components/avatars.md
index 0b97d220..fa2f5bb9 100644
--- a/pages/css/components/avatars.md
+++ b/pages/css/components/avatars.md
@@ -9,7 +9,7 @@ bundle: avatars
 
 Avatars are images that users can set as their profile picture. On GitHub, they're always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
 
-{:toc}
+## Table of Contents
 
 ## Basic example
 
@@ -154,4 +154,3 @@ For specific cases where two badges or more need to be shown as related or conne
   
 
 ```
-
diff --git a/pages/css/components/box.md b/pages/css/components/box.md
index 9177061b..27eb51ba 100644
--- a/pages/css/components/box.md
+++ b/pages/css/components/box.md
@@ -10,7 +10,7 @@ bundle: box
 
 The `.Box` component can be used for something as simple as a rounded corner box, or more complex lists and forms. It includes optional modifiers for padding density and color themes.
 
-{:toc}
+## Table of Contents
 
 ## Box
 
diff --git a/pages/css/components/buttons.md b/pages/css/components/buttons.md
index 668bc190..ca384b63 100644
--- a/pages/css/components/buttons.md
+++ b/pages/css/components/buttons.md
@@ -9,7 +9,7 @@ bundle: buttons
 
 Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.
 
-{:toc}
+## Table of Contents
 
 ## Default button
 
diff --git a/pages/css/components/dropdown.md b/pages/css/components/dropdown.md
index ee687b46..61bbac48 100644
--- a/pages/css/components/dropdown.md
+++ b/pages/css/components/dropdown.md
@@ -8,7 +8,7 @@ symbols: [active, anim-scale-in, btn-link, dropdown, dropdown-caret, dropdown-di
 
 Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
 
-{:toc}
+## Table of Contents
 
 ## Basic examples
 
diff --git a/pages/css/components/forms.md b/pages/css/components/forms.md
index 25fee25f..10b6167e 100644
--- a/pages/css/components/forms.md
+++ b/pages/css/components/forms.md
@@ -9,7 +9,7 @@ bundle: forms
 
 Style individual form controls and utilize common layouts.
 
-{:toc}
+## Table of Contents
 
 Overview:
 - We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `
`s, WebKit validation bubbles, and most textual ``s.
diff --git a/pages/css/components/labels.md b/pages/css/components/labels.md
index d60b0921..d29c08d8 100644
--- a/pages/css/components/labels.md
+++ b/pages/css/components/labels.md
@@ -11,7 +11,7 @@ bundle: labels
 Labels add metatdata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items.
 
 
-{:toc}
+## Table of Contents
 
 ## Labels
 
diff --git a/pages/css/components/navigation.md b/pages/css/components/navigation.md
index 935b4aae..b7d6d577 100644
--- a/pages/css/components/navigation.md
+++ b/pages/css/components/navigation.md
@@ -9,7 +9,7 @@ bundle: navigation
 
 Primer comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.
 
-{:toc}
+## Table of Contents
 
 ## Menu
 
diff --git a/pages/css/components/pagehead.md b/pages/css/components/pagehead.md
index 54ded7dd..8a3b8f8f 100644
--- a/pages/css/components/pagehead.md
+++ b/pages/css/components/pagehead.md
@@ -9,7 +9,7 @@ symbols: [account-switcher, active, admin, avatar, dropdown-menu-content, experi
 
 Give a page a clear, separated title and optional top nav by adding a `.pagehead`.
 
-{:toc}
+## Table of Contents
 
 ## Basic pagehead
 
diff --git a/pages/css/components/pagination.md b/pages/css/components/pagination.md
index 731d9a6c..e699d12c 100644
--- a/pages/css/components/pagination.md
+++ b/pages/css/components/pagination.md
@@ -9,7 +9,7 @@ bundle: pagination
 
 Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
 
-{:toc}
+## Table of Contents
 
 ## Previous/next pagination
 
diff --git a/pages/css/components/popover.md b/pages/css/components/popover.md
index 93c9db2a..7891c2e2 100644
--- a/pages/css/components/popover.md
+++ b/pages/css/components/popover.md
@@ -9,7 +9,7 @@ bundle: popover
 
 Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
 
-{:toc}
+## Table of Contents
 
 A popover consist of:
 
diff --git a/pages/css/components/select-menu.md b/pages/css/components/select-menu.md
index c3104feb..f5f76c14 100644
--- a/pages/css/components/select-menu.md
+++ b/pages/css/components/select-menu.md
@@ -8,7 +8,7 @@ symbols: [active, close-button, css-truncate-target, description, description-in
 
 The select menu provides advanced support for navigation, filtering, and more. Any popover within a select menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup.
 
-{:toc}
+## Table of Contents
 
 ## Basic example
 
diff --git a/pages/css/components/tooltips.md b/pages/css/components/tooltips.md
index 869af1f1..dd0fdac5 100644
--- a/pages/css/components/tooltips.md
+++ b/pages/css/components/tooltips.md
@@ -9,7 +9,7 @@ bundle: tooltips
 
 Add tooltips built entirely in CSS to nearly any element.
 
-{:toc}
+## Table of Contents
 
 ## Implementation and accessibility
 
diff --git a/pages/css/getting-started/contributing.md b/pages/css/getting-started/contributing.md
index 1bda29a4..c66263d5 100644
--- a/pages/css/getting-started/contributing.md
+++ b/pages/css/getting-started/contributing.md
@@ -159,7 +159,7 @@ The source option will let you point the document to the source file. **This is
 
 #### Tables of contents
 
-In the style guide you can add a `{:toc}` tag to have a table of contents automatically generated.
+In the style guide you can add a `## Table of Contents` heading to have a table of contents automatically generated.
 
 #### Code blocks
 
diff --git a/pages/css/objects/grid.md b/pages/css/objects/grid.md
index 79c9bfc5..623b606c 100644
--- a/pages/css/objects/grid.md
+++ b/pages/css/objects/grid.md
@@ -9,7 +9,7 @@ bundle: layout
 
 The grid is 12 columns and percentage-based. The number of columns a container spans can be adjusted across breakpoints for responsive layouts. The grid system works with a variety of layout utilities to achieve different results.
 
-{:toc}
+## Table of Contents
 
 ## Float based grid
 
diff --git a/pages/css/principles/accessibility.md b/pages/css/principles/accessibility.md
index d12caec0..059c6fd3 100644
--- a/pages/css/principles/accessibility.md
+++ b/pages/css/principles/accessibility.md
@@ -5,7 +5,7 @@ path: principles/accessibility
 
 Accessibility is everyone’s responsibility, and the purpose of this document is to provide general accessibility guidelines to developers and designers.
 
-{:toc}
+## Table of Contents
 
 ## Overview
 
diff --git a/pages/css/principles/html.md b/pages/css/principles/html.md
index 4e7023a8..d4c1bb43 100644
--- a/pages/css/principles/html.md
+++ b/pages/css/principles/html.md
@@ -3,7 +3,7 @@ title: HTML
 path: principles/html
 ---
 
-{:toc}
+## Table of Contents
 
 ## General formatting
 
diff --git a/pages/css/principles/index.md b/pages/css/principles/index.md
index 3edb5ff8..1bd9a72f 100644
--- a/pages/css/principles/index.md
+++ b/pages/css/principles/index.md
@@ -5,7 +5,7 @@ path: principles/index
 
 The CSS styleguide enables us to create a consistent user experience across GitHub, manage CSS bloat, and make our CSS easier to maintain. These principles should serve as guidelines for how we write and use CSS.
 
-{:toc}
+## Table of Contents
 
 
 ## Styleguide driven design and development
diff --git a/pages/css/principles/scss.md b/pages/css/principles/scss.md
index 122b5cef..63359140 100644
--- a/pages/css/principles/scss.md
+++ b/pages/css/principles/scss.md
@@ -3,7 +3,7 @@ title: SCSS
 path: priniciples/scss
 ---
 
-{:toc}
+## Table of Contents
 
 ## Spacing
 
diff --git a/pages/css/support/breakpoints.md b/pages/css/support/breakpoints.md
index cd1750cf..16a38902 100644
--- a/pages/css/support/breakpoints.md
+++ b/pages/css/support/breakpoints.md
@@ -6,7 +6,7 @@ source: 'https://github.com/primer/css/blob/master/src/support/variables/layout.
 bundle: support
 ---
 
-{:toc}
+## Table of Contents
 
 Our breakpoints are based on screen widths where our content starts to break. Since most of GitHub is currently a fixed-width with we use pixel widths to make it easy for us to match page widths for responsive and non-responsive pages. **Our breakpoints may change as we move more of the product into responsive layouts.**
 
diff --git a/pages/css/support/color-system.md b/pages/css/support/color-system.md
index 41e0ce31..8e4e3531 100644
--- a/pages/css/support/color-system.md
+++ b/pages/css/support/color-system.md
@@ -13,7 +13,7 @@ package:
 import {BorderBox, Box, Flex, Heading, Text} from '@primer/components'
 import {ColorPalette, ColorVariables} from '../../../docs/color-system'
 
-{:toc}
+## Table of Contents
 
 ## Color palette
 
diff --git a/pages/css/support/spacing.md b/pages/css/support/spacing.md
index 031f0de2..0a62fe8b 100644
--- a/pages/css/support/spacing.md
+++ b/pages/css/support/spacing.md
@@ -6,7 +6,7 @@ source: 'https://github.com/primer/css/blob/master/src/support/variables/layout.
 bundle: support
 ---
 
-{:toc}
+## Table of Contents
 
 ## Spacing scale
 The spacing scale is a **base-8** scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for GitHub's UI. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of `8px`.
diff --git a/pages/css/support/typography.md b/pages/css/support/typography.md
index 6bd2c167..b58857ee 100644
--- a/pages/css/support/typography.md
+++ b/pages/css/support/typography.md
@@ -7,7 +7,7 @@ source: 'https://github.com/primer/css/blob/master/src/support/variables/typogra
 bundle: support
 ---
 
-{:toc}
+## Table of Contents
 
 ## Type Scale
 
diff --git a/pages/css/tools/atom-packages.md b/pages/css/tools/atom-packages.md
index 2d22e659..081ba99e 100644
--- a/pages/css/tools/atom-packages.md
+++ b/pages/css/tools/atom-packages.md
@@ -11,7 +11,7 @@ We keep a list of suggested packages in our [atom-packages repository](https://g
 apm install $(curl -L https://raw.githubusercontent.com/primer/atom-packages/master/packages)
 ```
 
-{:toc}
+## Table of Contents
 
 ## Autocomplete Primer
 
diff --git a/pages/css/tools/linting.md b/pages/css/tools/linting.md
index 65c6b162..a7d9a315 100644
--- a/pages/css/tools/linting.md
+++ b/pages/css/tools/linting.md
@@ -9,7 +9,7 @@ For teams working on `github/github` this configuration is all setup for you. Wh
 
 For everyone else we encourage you to adopt all or some of these tools in your workflow.
 
-{:toc}
+## Table of Contents
 
 ## CSS
 
diff --git a/pages/css/utilities/animations.md b/pages/css/utilities/animations.md
index bd9b98ab..d644ff40 100644
--- a/pages/css/utilities/animations.md
+++ b/pages/css/utilities/animations.md
@@ -9,7 +9,7 @@ bundle: utilities
 
 Animations are reusable animation classes that you can use to emphasize an element. All of these animations will animate if you toggle their visibility using the "Toggle" button.
 
-{:toc}
+## Table of Contents
 
 ## Fade In
 
diff --git a/pages/css/utilities/borders.md b/pages/css/utilities/borders.md
index ff1f795c..cf2618be 100644
--- a/pages/css/utilities/borders.md
+++ b/pages/css/utilities/borders.md
@@ -9,7 +9,7 @@ bundle: utilities
 
 Utilities for borders, border radius, and box shadows.
 
-{:toc}
+## Table of Contents
 
 ## Default border
 
diff --git a/pages/css/utilities/box-shadow.md b/pages/css/utilities/box-shadow.md
index 7775b1f7..49f20871 100644
--- a/pages/css/utilities/box-shadow.md
+++ b/pages/css/utilities/box-shadow.md
@@ -9,7 +9,7 @@ bundle: utilities
 
 Box shadows are used to make content appear elevated. They are typically applied to containers of content that users need to pay attention to or content that appears on top of (overlapping) other elements on the page (like a pop-over or modal).
 
-{:toc}
+## Table of Contents
 
 ## Default
 
diff --git a/pages/css/utilities/details.md b/pages/css/utilities/details.md
index 5bad1261..750795bd 100644
--- a/pages/css/utilities/details.md
+++ b/pages/css/utilities/details.md
@@ -8,7 +8,7 @@ bundle: utilities
 
 Details classes are created to enhance the native behaviors of `
`.
 
-{:toc}
+## Table of Contents
 
 ## Fullscreen click area
 
diff --git a/pages/css/utilities/flexbox.md b/pages/css/utilities/flexbox.md
index 73452e31..02e7cb2f 100644
--- a/pages/css/utilities/flexbox.md
+++ b/pages/css/utilities/flexbox.md
@@ -9,7 +9,7 @@ bundle: utilities
 
 Flex utilities can be used to apply `flexbox` behaviors to elements by using utility classes.
 
-{:toc}
+## Table of Contents
 
 ## Required reading
 
diff --git a/pages/css/utilities/layout.md b/pages/css/utilities/layout.md
index 5a674694..e08b9a18 100644
--- a/pages/css/utilities/layout.md
+++ b/pages/css/utilities/layout.md
@@ -8,7 +8,7 @@ bundle: utilities
 
 Change the document layout with display, float, alignment, and other utilities.
 
-{:toc}
+## Table of Contents
 
 ## Display
 Adjust the display of an element with `.d-block`, `.d-none`, `.d-inline`, `.d-inline-block`, `.d-table`, `.d-table-cell` utilities.
diff --git a/pages/css/utilities/margin.md b/pages/css/utilities/margin.md
index ec4c03a6..59329cd6 100644
--- a/pages/css/utilities/margin.md
+++ b/pages/css/utilities/margin.md
@@ -8,7 +8,7 @@ bundle: utilities
 
 Margin utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
 
-{:toc}
+## Table of Contents
 
 ## Naming convention
 
diff --git a/pages/css/utilities/marketing-layout.md b/pages/css/utilities/marketing-layout.md
index 1d794458..54e28d71 100644
--- a/pages/css/utilities/marketing-layout.md
+++ b/pages/css/utilities/marketing-layout.md
@@ -9,7 +9,7 @@ bundle: marketing-utilities
 
 Marketing layout utilities build on top of [primer-core utilities](/css/utilities/layout#position), adding the option of responsive positioning.
 
-{:toc}
+## Table of Contents
 
 ## Position elements with spacing utilities
 
diff --git a/pages/css/utilities/padding.md b/pages/css/utilities/padding.md
index 8ca66b54..a96e9605 100644
--- a/pages/css/utilities/padding.md
+++ b/pages/css/utilities/padding.md
@@ -8,7 +8,7 @@ bundle: utilities
 
 Padding utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
 
-{:toc}
+## Table of Contents
 
 ## Shorthand
 
diff --git a/pages/css/utilities/typography.md b/pages/css/utilities/typography.md
index eeea63bb..c7491e2e 100644
--- a/pages/css/utilities/typography.md
+++ b/pages/css/utilities/typography.md
@@ -8,7 +8,7 @@ bundle: utilities
 
 Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/css/support/typography#typography-variables) that you can use in components or custom CSS.
 
-{:toc}
+## Table of Contents
 
 Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/support/breakpoints) to be larger on desktop.
 

From 5c11516a6120e39d77b2d08d48dbbde99cd692db Mon Sep 17 00:00:00 2001
From: emplums 
Date: Tue, 23 Apr 2019 12:33:07 -0700
Subject: [PATCH 02/12] lint

---
 docs/markdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/markdown.js b/docs/markdown.js
index 2d9180a9..bc70a547 100644
--- a/docs/markdown.js
+++ b/docs/markdown.js
@@ -4,7 +4,7 @@ import {CodeExample} from '@primer/blueprints'
 
 export const H1 = props => 
 
-export default function getComponents(page = {}) {
+export default function getComponents() {
   return {
     h1: H1,
     // render links with our component

From 55fe957d6eb1fb56da2c2b54e97fe761d7fa3d21 Mon Sep 17 00:00:00 2001
From: Shawn Allen 
Date: Thu, 2 May 2019 14:50:53 -0700
Subject: [PATCH 03/12] fix bad merge

---
 docs/markdown.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/markdown.js b/docs/markdown.js
index e3bddba4..abc82df1 100644
--- a/docs/markdown.js
+++ b/docs/markdown.js
@@ -2,7 +2,6 @@ import React from 'react'
 import {Link} from '@primer/components'
 import {MarkdownHeading} from '@primer/blueprints'
 import {CodeExample} from '@primer/blueprints/next-components'
-import Outline from './Outline'
 
 export const H1 = props => 
 export const H2 = props => 

From dc1ef2ae4cf566228feaed2623254abf3006f736 Mon Sep 17 00:00:00 2001
From: Emily Plummer 
Date: Tue, 7 May 2019 14:49:25 -0700
Subject: [PATCH 04/12] bump blueprints

---
 package-lock.json | 6 +++---
 package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 32e59212..b0e3b422 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1457,9 +1457,9 @@
       }
     },
     "@primer/blueprints": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@primer/blueprints/-/blueprints-4.0.1.tgz",
-      "integrity": "sha512-fGhRGcKobByuuJlIviSpR4mq2KpYZ6zMJO08x0Xw+XPEd+KPKHbap8NKbcc0qlzTmWcTo1qOaqN1AGNBjr8gzg==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@primer/blueprints/-/blueprints-4.0.2.tgz",
+      "integrity": "sha512-MgX/SztcMVE2ko4l092fNV0I5YXyv3QWTYjFCF5KLTxh6PgvkGFPg8FqTlKYzLf1YPbgkoEEMtl7IUvi78Q7ZQ==",
       "dev": true,
       "requires": {
         "@githubprimer/octicons-react": "^8.1.3",
diff --git a/package.json b/package.json
index c7f70b20..771220d1 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "@githubprimer/octicons-react": "^8.1.3",
     "@mdx-js/mdx": "^0.16.6",
     "@mdx-js/tag": "0.15.0",
-    "@primer/blueprints": "4.0.1",
+    "@primer/blueprints": "4.0.2",
     "@primer/components": "12.0.1",
     "@primer/next-pages": "0.0.3",
     "@storybook/addon-viewport": "5.0.0",

From 3da919a71231d2614bec84f6ac6d2cc25933d20d Mon Sep 17 00:00:00 2001
From: Emily Plummer 
Date: Tue, 7 May 2019 14:53:38 -0700
Subject: [PATCH 05/12] code style tweaks

---
 docs/markdown.js | 28 ++++++++++++++--------------
 pages/_app.js    |  4 +---
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/docs/markdown.js b/docs/markdown.js
index abc82df1..8ad25bef 100644
--- a/docs/markdown.js
+++ b/docs/markdown.js
@@ -9,18 +9,18 @@ export const H3 = props => 
 export const H4 = props => 
 export const H5 = props => 
 
-export default function getComponents() {
-  return {
-    h1: H1,
-    h2: H2,
-    h3: H3,
-    h4: H4,
-    h5: H5,
-    // render links with our component
-    a: Link,
-    // render code blocks with our wrapper around react-live
-    code: CodeExample,
-    // "unwrap" 
 elements around  blocks
-    pre: props => props.children
-  }
+const components = {
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  // render links with our component
+  a: Link,
+  // render code blocks with our wrapper around react-live
+  code: CodeExample,
+  // "unwrap" 
 elements around  blocks
+  pre: props => props.children
 }
+
+export default components
\ No newline at end of file
diff --git a/pages/_app.js b/pages/_app.js
index 99537ab2..68d1f4d3 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -7,7 +7,7 @@ import {BaseStyles, Link, Text, BorderBox, Box, Flex, theme} from '@primer/compo
 import {PackageHeader} from '../docs/components'
 import {Header, MarkdownHeading, JumpNav, SideNav} from '@primer/blueprints'
 import {NavList} from '@primer/blueprints/next-components'
-import getComponents from '../docs/markdown'
+import components from '../docs/markdown'
 import documents from '../searchIndex'
 import {config, requirePage, rootPage} from '../docs/utils'
 import {CONTENT_MAX_WIDTH} from '../docs/constants'
@@ -36,8 +36,6 @@ export default class MyApp extends App {
     const node = rootPage.first(node => node.path === pathname) || {}
     const {file, meta = {}} = node || {}
     const isIndex = file.includes('index')
-    const components = getComponents(node)
-
     const Hero = file ? requirePage(file).Hero : null
 
     return (

From b20e245c0de58135452c22787afd03033abec989 Mon Sep 17 00:00:00 2001
From: Emily Plummer 
Date: Tue, 7 May 2019 14:58:01 -0700
Subject: [PATCH 06/12] lint

---
 docs/markdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/markdown.js b/docs/markdown.js
index 8ad25bef..681463f4 100644
--- a/docs/markdown.js
+++ b/docs/markdown.js
@@ -23,4 +23,4 @@ const components = {
   pre: props => props.children
 }
 
-export default components
\ No newline at end of file
+export default components

From a641b2c4b19c2dcf2ec415000dce81d7e233cdd5 Mon Sep 17 00:00:00 2001
From: Florian Bruhin 
Date: Fri, 17 May 2019 15:35:18 +0200
Subject: [PATCH 07/12] Fix "aligned" typos

---
 pages/css/components/tooltips.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/css/components/tooltips.md b/pages/css/components/tooltips.md
index 869af1f1..d9b852cd 100644
--- a/pages/css/components/tooltips.md
+++ b/pages/css/components/tooltips.md
@@ -81,7 +81,7 @@ Align tooltips to the left or right of an element, combined with a directional c
   
     .tooltipped-sw .tooltipped-align-right-1
   
-  
+  
     .tooltipped-se .tooltipped-align-left-1
   
 
@@ -89,7 +89,7 @@ Align tooltips to the left or right of an element, combined with a directional c
   
     .tooltipped-sw .tooltipped-align-right-2
   
-  
+  
     .tooltipped-se .tooltipped-align-left-2
   
 

From 29e0389779b636884ff2e73ab72348a8396ec4b3 Mon Sep 17 00:00:00 2001
From: Emily Plummer 
Date: Fri, 17 May 2019 10:02:25 -0700
Subject: [PATCH 08/12] nav changes

---
 pages/_app.js                       |  4 ++--
 pages/css/tools/sketch-templates.md | 21 ---------------------
 2 files changed, 2 insertions(+), 23 deletions(-)
 delete mode 100644 pages/css/tools/sketch-templates.md

diff --git a/pages/_app.js b/pages/_app.js
index 99537ab2..b11b4135 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -101,12 +101,12 @@ export default class MyApp extends App {
             >
               
                 
-                
-                
                 
                 
                 
                 
+                
+                
               
             
           
diff --git a/pages/css/tools/sketch-templates.md b/pages/css/tools/sketch-templates.md
deleted file mode 100644
index dd09ee2f..00000000
--- a/pages/css/tools/sketch-templates.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Sketch templates
-internal: true
-path: tools/sketch-templates
----
-
-We often use Sketch for mocking up designs before coding them. To make this process faster and to keep our designs consistent, we have created UI kits that contain many of our commonly used styles.
-
-## Product UI Kits
-
-[The Product UI Kit](https://github.com/github/design/blob/master/resources/sketch/github-ui-kit.sketch) is a collection of our core GitHub UI styles and components suitable for building mockups. It also includes a starter page template with a site and repo header.
-
-Don't waste time manually updating the Octicons artboard when icons are added, removed, or changed. See the [Octicons Sketch plugin](https://github.com/github/design/tree/master/resources/sketch/octicons-plugin) directory for a way to automate those updates.
-
-![thumbnail of sketch UI kit](https://cloud.githubusercontent.com/assets/98681/9478261/7b4bd916-4b2b-11e5-991f-3bbef3f4c9a6.png)
-
-## Email templates
-
-[This email templates](https://github.com/github/design/blob/master/resources/sketch/email-templates.sketch) are a collection of current GitHub email templates which serve as a reference for new email designs.
-
-![thumbnail of sketch email templates](https://cloud.githubusercontent.com/assets/1319791/22992477/cb5fcb5e-f38d-11e6-9549-449018f31153.png)

From 02dc989a5ceb41173fcded55afee752d77fc0eab Mon Sep 17 00:00:00 2001
From: Shawn Allen 
Date: Wed, 22 May 2019 12:48:44 -0700
Subject: [PATCH 09/12] nix deploy action

---
 .github/main.workflow | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/.github/main.workflow b/.github/main.workflow
index ed15c07e..7d26c021 100644
--- a/.github/main.workflow
+++ b/.github/main.workflow
@@ -1,11 +1,6 @@
-workflow "lint, test, deploy, publish" {
+workflow "lint, test, publish" {
   on = "push"
-  resolves = [
-    "lint",
-    "test",
-    "publish",
-    "deploy",
-  ]
+  resolves = ["lint", "test", "publish"]
 }
 
 action "install" {
@@ -31,12 +26,3 @@ action "publish" {
   args = ["--", "--unsafe-perm"]
   secrets = ["GITHUB_TOKEN", "NPM_AUTH_TOKEN"]
 }
-
-action "deploy" {
-  needs = "install"
-  uses = "primer/deploy@v3.0.0"
-  secrets = [
-    "GITHUB_TOKEN",
-    "NOW_TOKEN",
-  ]
-}

From c8477335f6357216a539cd650a93f0d53e7aa601 Mon Sep 17 00:00:00 2001
From: Shawn Allen 
Date: Wed, 22 May 2019 15:27:54 -0700
Subject: [PATCH 10/12] chore: v12.4.1

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e3a1a13b..b8fe3685 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "12.4.0",
+  "version": "12.4.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 79cabfe2..a86ce968 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "12.4.0",
+  "version": "12.4.1",
   "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",

From bef7d4244edd42ddb04ae7093a07f636d98632d3 Mon Sep 17 00:00:00 2001
From: Shawn Allen 
Date: Wed, 22 May 2019 16:17:39 -0700
Subject: [PATCH 11/12] add exception for removed /tools/sketch-templates

---
 docs-test/urls.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs-test/urls.js b/docs-test/urls.js
index b49a1d1e..15ab4bb1 100644
--- a/docs-test/urls.js
+++ b/docs-test/urls.js
@@ -31,6 +31,7 @@ const exceptions = {
   '/packages/primer-product': removed,
   '/principles/HTML': moved('/principles/html'),
   '/principles/SCSS': moved('/principles/scss'),
+  '/tools/sketch-templates': removed,
   '/whats_new': redirect('https://github.com/primer/primer/releases'),
   '/whats_new/changelog': removed,
   '/whats_new/changelog/archived_changelog': removed,

From bd4f1736d41ab7f64c5145c537a5564e64aac77b Mon Sep 17 00:00:00 2001
From: Shawn Allen 
Date: Mon, 3 Jun 2019 11:11:42 -0700
Subject: [PATCH 12/12] add deprecation warning for .btn-purple in #736

---
 src/buttons/button.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index e0cfafe9..e5caa67b 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -60,6 +60,7 @@
 
 .btn         { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); }
 .btn-primary { @include btn-solid($text-white, $green-400, $green-500); }
+@warn ".btn-purple will be removed in 13.0.0. Please don't make buttons purple.";
 .btn-purple  { @include btn-solid($text-white, lighten($purple-500, 5%), darken($purple-500, 5%)); }
 .btn-blue    { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); }
 .btn-danger  { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); }