Merge pull request #172 from primer/release-0.24.0

Release 0.24.0

Author: colebemis

CONTRIBUTING.md

@@ -4,12 +4,25 @@ title: Contributing
 
 We appreciate your contribution and hope that this document helps you along the way. If you have any questions or problems, don't hesitate to [file an issue](https://github.com/primer/doctocat/issues/new).
 
-_Note: These guidelines are for contributing to the theme itself, if you are looking for help running a Doctocat site for another project locally, check out the [Local Development](/usage/local-development) docs in the Usage section._
+<Note>
+
+
+These guidelines are for contributing to the theme itself, if you are looking for help running a Doctocat site for another project locally, check out the [Local Development](/usage/local-development) docs in the Usage section.
+
+</Note>
+
+
 ## Local development
 
 Run the following commands to begin local development:
 
-_Note: These steps require [Node.js](https://nodejs.org) and [Yarn](https://yarnpkg.com) to be set up locally._
+<Note>
+
+
+These steps require [Node.js](https://nodejs.org) and [Yarn](https://yarnpkg.com) to be set up locally.
+
+</Note>
+
 
 ```shell
 # Clone the repository

docs/content/components/caption.mdx

@@ -15,11 +15,21 @@ import {Caption} from '@primer/gatsby-theme-doctocat'
 ```
 
 ## Example
+
 ```jsx live
 <Flex alignItems="center" flexDirection="column">
-  <img alt="" src="https://s3.us-west-2.amazonaws.com/photos.puppyspot.com/breeds/245/card/500000291_medium.jpg" />
+  <img
+    alt=""
+    src="https://s3.us-west-2.amazonaws.com/photos.puppyspot.com/breeds/245/card/500000291_medium.jpg"
+  />
   <Caption>A beautiful husky puppy.</Caption>
 </Flex>
 ```
 
-_Note: Be sure to provide enough detail in your caption so users with assistive technology have adequate context. An empty alt tag `alt=""` should be used on the `img` in cases where the caption describes the image, thus making the image decorative in purpose._
+<Note variant="warning">
+
+
+Be sure to provide enough detail in your caption so users with assistive technology have adequate context. An empty alt tag `alt=""` should be used on the `img` in cases where the caption describes the image, thus making the image decorative in purpose.
+
+</Note>
+

docs/content/components/note.mdx

@@ -0,0 +1,56 @@
+---
+title: Note
+status: New
+source: https://github.com/primer/doctocat/blob/master/theme/src/components/note.js
+---
+
+Use the `Note` component to call out information in documentation pages.
+
+## Usage
+
+`Note` is a [shortcode](https://mdxjs.com/blog/shortcodes), meaning it's globally available in all `.md` and `.mdx` files. So you can use the `Note` component in any `.md` or `.mdx` file without importing it.
+
+```jsx live
+<Note>Your note goes here</Note>
+```
+
+To write markdown syntax inside of a `Note`, make sure to add extra newlines to seperate the content from the opening and
+closing tags:
+
+```
+blah blah blah
+
+<Note>
+
+Your _note_ goes **here**.
+
+</Note>
+
+blah blah blah
+```
+
+## Variants
+
+### Info (default)
+
+Use the `info` variant to call out neutral information.
+
+```jsx live
+<Note>Your note goes here</Note>
+```
+
+### Warning
+
+Use the `warning` variant to indicate that extra care should be taken.
+
+```jsx live
+<Note variant="warning">Don't forget to give your images alt text.</Note>
+```
+
+### Danger
+
+Use the `danger` variant to indicate that something bad could happen if the reader ignores the note.
+
+```jsx live
+<Note variant="danger">Don't cut the red wire!</Note>
+```

docs/content/getting-started/gatsby-cli.mdx

@@ -4,7 +4,13 @@ title: Gatsby CLI
 
 Follow these steps to create a new site using the [Gatsby CLI](https://www.gatsbyjs.org/docs/gatsby-cli/):
 
-_Note: This guide assumes that you have some familiarity with the command line, and have Node.js and npm installed locally. Check out [nodejs.org](https://nodejs.org) for more information. You will need npm v5.2.0 or higher to use the [`npx`](https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner) command in step 1._
+<Note>
+
+
+This guide assumes that you have some familiarity with the command line, and have Node.js and npm installed locally. Check out [nodejs.org](https://nodejs.org) for more information. You will need npm v5.2.0 or higher to use the [`npx`](https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner) command in step 1.
+
+</Note>
+
 
 ## 1. Scaffold a new site
 

docs/content/usage/front-matter.mdx

@@ -66,7 +66,13 @@ If the `source` front matter variable is defined, Doctocat will add a source cod
   <SourceLink href="#" />
 </BorderBox>
 
-_Note: This source code link is not the same as the "Edit this page on GitHub" link that is automatically added to the bottom of every page. The source code link should point to code that is relevant to the page. The "Edit this page on GitHub" link points to the Markdown file for the page itself._
+<Note>
+
+
+This source code link is not the same as the "Edit this page on GitHub" link that is automatically added to the bottom of every page. The source code link should point to code that is relevant to the page. The "Edit this page on GitHub" link points to the Markdown file for the page itself.
+
+</Note>
+
 
 ## Additional contributors
 

docs/content/usage/live-code.mdx

@@ -39,7 +39,13 @@ export default {
 }
 ```
 
-**Note:** make sure to place `live-code-scope.js` in the root of your `gatsby-theme-doctocat` folder. Shadowed files must be present in the same location as they exist in the theme repository.
+<Note variant="warning">
+
+
+Make sure to place `live-code-scope.js` in the root of your `gatsby-theme-doctocat` folder. Shadowed files must be present in the same location as they exist in the theme repository.
+
+</Note>
+
 
 Every property on the object exported by `live-code-scope.js` will be available as a variable in the code:
 
@@ -89,9 +95,9 @@ function DemoApp() {
 
   return (
     <div>
-      <button onClick={() => setCount(n => n - 1)}>-</button>
+      <button onClick={() => setCount((n) => n - 1)}>-</button>
       {count}
-      <button onClick={() => setCount(n => n + 1)}>+</button>
+      <button onClick={() => setCount((n) => n + 1)}>+</button>
     </div>
   )
 }
@@ -106,9 +112,9 @@ function DemoApp() {
 
   return (
     <div style={{textAlign: 'center'}}>
-      <button onClick={() => setCount(n => n - 1)}>-</button>
+      <button onClick={() => setCount((n) => n - 1)}>-</button>
       {count}
-      <button onClick={() => setCount(n => n + 1)}>+</button>
+      <button onClick={() => setCount((n) => n + 1)}>+</button>
     </div>
   )
 }

docs/package.json

@@ -11,11 +11,11 @@
     "@primer/components": "^20.0.0",
     "@primer/css": "^12.4.1",
     "@primer/gatsby-theme-doctocat": "*",
-    "gatsby": "^2.13.52",
+    "gatsby": "^2.24.52",
     "gatsby-plugin-sass": "^2.1.0",
     "node-sass": "^4.12.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "repository": "primer/doctocat"
 }

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -25,5 +25,7 @@
       url: /components/caption
     - title: Do/Don't
       url: /components/do-dont
+    - title: Note
+      url: /components/note
 - title: Contributing
   url: /contributing

theme/gatsby-node.js

@@ -16,8 +16,11 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
           fileAbsolutePath
           frontmatter {
             title
+            status
+            source
+            additionalContributors
           }
-          tableOfContents
+          tableOfContents(maxDepth: 3)
           parent {
             ... on File {
               relativeDirectory
@@ -71,7 +74,7 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
           // for us here, and does on the first build,
           // but when HMR kicks in the frontmatter is lost.
           // The solution is to include it here explicitly.
-          // frontmatter: node.frontmatter
+          frontmatter: node.frontmatter,
         },
       })
     }),

theme/index.js

@@ -6,6 +6,7 @@ export {default as Frame} from './src/components/frame'
 export {default as Head} from './src/components/head'
 export {default as Header} from './src/components/header'
 export {default as Hero} from './src/components/hero'
+export {default as Note} from './src/components/note'
 export {default as HeroLayout} from './src/components/hero-layout'
 export {default as Sidebar} from './src/components/sidebar'
 export {default as SourceLink} from './src/components/source-link'