@primer/gatsby-theme-doctocat 2.1.0 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @primer/gatsby-theme-doctocat
 
+## 3.1.1
+
+### Patch Changes
+
+- [`45e8748`](https://github.com/primer/doctocat/commit/45e8748a547903b8f7091fafb5b13e5c197b0dae) [#324](https://github.com/primer/doctocat/pull/324) Thanks [@rezrah](https://github.com/rezrah)! - Only add pages that have `componentId` and `status` to `components.json`
+
+## 3.1.0
+
+### Minor Changes
+
+- [`3767651`](https://github.com/primer/doctocat/commit/37676515f1d7485ca7b5e932e115d96e3ef0285b) [#318](https://github.com/primer/doctocat/pull/318) Thanks [@colebemis](https://github.com/colebemis)! - Add a step to build process that will output a static `components.json` file with component status info if the site that its building has markdown files containing `componentId` frontmatter.
+
+## 3.0.1
+
+### Patch Changes
+
+- [`ff74ece`](https://github.com/primer/doctocat/commit/ff74ecea1b373469034c2122d94a54ca3e964158) [#301](https://github.com/primer/doctocat/pull/301) Thanks [@jfuchs](https://github.com/jfuchs)! - Removed styled system prop usage on Primer React components.
+
+## 3.0.0
+
+### Major Changes
+
+- [`c2037d8`](https://github.com/primer/doctocat/commit/c2037d8352fca4ce3055e801b365d4ff1b5eefe9) [#295](https://github.com/primer/doctocat/pull/295) Thanks [@colebemis](https://github.com/colebemis)! - Remove checklist feature
+
+### Minor Changes
+
+- [`a94e0a9`](https://github.com/primer/doctocat/commit/a94e0a962e8013901e4285c7a3cabc3a0b691a92) [#294](https://github.com/primer/doctocat/pull/294) Thanks [@colebemis](https://github.com/colebemis)! - You can now make custom React components globally available (no import required) to all markdown files in your site.
+
+### Patch Changes
+
+- [`31a62df`](https://github.com/primer/doctocat/commit/31a62dfb7eb7a467a4e03a991adad995564ae4d1) [#262](https://github.com/primer/doctocat/pull/262) Thanks [@SferaDev](https://github.com/SferaDev)! - Fix scroll flickering of table of contents
+
+* [`9972de8`](https://github.com/primer/doctocat/commit/9972de88224e1b868dad051abe62a92daf8796ef) [#291](https://github.com/primer/doctocat/pull/291) Thanks [@jonrohan](https://github.com/jonrohan)! - Fix release
+
 ## 2.1.0
 
 ### Minor Changes

package/gatsby-node.js

@@ -1,41 +1,11 @@
 const path = require('path')
+const fs = require('fs')
 const readPkgUp = require('read-pkg-up')
 const getPkgRepo = require('get-pkg-repo')
 const axios = require('axios')
 const uniqBy = require('lodash.uniqby')
 const extractExports = require(`gatsby-plugin-mdx/utils/extract-exports`)
 const mdx = require(`gatsby-plugin-mdx/utils/mdx`)
-const requireGlob = require('require-glob')
-const {validateChecklistSchema, validateChecklist} = require('./src/validate-checklists')
-const checklistSchemas = requireGlob.sync('./src/checklists/*.schema.js')
-
-exports.sourceNodes = ({actions, createNodeId, createContentDigest}) => {
-  const {createNode} = actions
-
-  // Add checklist schemas to GraphQL API
-  for (const schemaKey in checklistSchemas) {
-    try {
-      validateChecklistSchema(checklistSchemas[schemaKey])
-    } catch (error) {
-      throw new Error(`Invalid checklist schema: ${schemaKey.replace('Schema', '')}.schema.js\n${error.message}`)
-    }
-
-    const name = schemaKey.replace('Schema', '')
-    const data = {name, ...checklistSchemas[schemaKey]}
-
-    const node = {
-      id: createNodeId(schemaKey),
-      parent: null,
-      children: [],
-      internal: {
-        type: 'ChecklistSchema',
-        contentDigest: createContentDigest(data)
-      },
-      ...data
-    }
-    createNode(node)
-  }
-}
 
 const CONTRIBUTOR_CACHE = new Map()
 
@@ -43,7 +13,7 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
   const repo = getPkgRepo(readPkgUp.sync().package)
 
   const {data} = await graphql(`
-    {
+    query {
       allMdx {
         nodes {
           fileAbsolutePath
@@ -65,7 +35,7 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
   }
 
   // Turn every MDX file into a page.
-  return Promise.all(
+  await Promise.all(
     data.allMdx.nodes.map(async node => {
       const pagePath = path
         .join(node.parent.relativeDirectory, node.parent.name === 'index' ? '/' : node.parent.name)
@@ -87,18 +57,6 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
       const code = await mdx(node.rawBody)
       const {frontmatter} = extractExports(code)
 
-      // Validate checklist frontmatter
-      for (const schemaKey in checklistSchemas) {
-        const checklistKey = schemaKey.replace('Schema', 'Checklist')
-        if (checklistKey in frontmatter) {
-          try {
-            validateChecklist(frontmatter[checklistKey], checklistSchemas[schemaKey])
-          } catch (error) {
-            throw new Error(`Invalid checklist: ${checklistKey} in ${fileRelativePath}\n${error.message}`)
-          }
-        }
-      }
-
       actions.createPage({
         path: pagePath,
         component: node.fileAbsolutePath,
@@ -117,6 +75,40 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
   )
 }
 
+exports.onPostBuild = async ({graphql}) => {
+  try {
+    const {data} = await graphql(`
+      query {
+        allSitePage(filter: {context: {frontmatter: {componentId: {ne: null}, status: {ne: null}}}}) {
+          nodes {
+            path
+            context {
+              frontmatter {
+                componentId
+                status
+              }
+            }
+          }
+        }
+      }
+    `)
+
+    const components = data.allSitePage.nodes.map(node => {
+      return {
+        id: node.context.frontmatter.componentId,
+        path: node.path,
+        status: node.context.frontmatter.status.toLowerCase()
+      }
+    })
+
+    fs.writeFileSync(path.resolve(process.cwd(), 'public/components.json'), JSON.stringify(components))
+  } catch (error) {
+    // This is not necessarily an error, so we just log a warning instead of failing the build.
+    // Some sites won't have any markdown files with `componentId` frontmatter and that's okay.
+    console.warn('Unable to build components.json')
+  }
+}
+
 function getEditUrl(repo, filePath, defaultBranch) {
   return `https://github.com/${repo.user}/${repo.project}/edit/${defaultBranch}/${filePath}`
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "2.1.0",
+  "version": "3.1.1",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
     "test": "jest",
-    "lint": "eslint '**/*.js'",
+    "lint": "eslint '**/*.{js,ts,tsx}'",
     "lint:fix": "yarn lint -- --fix"
   },
   "prettier": "@github/prettier-config",
@@ -60,7 +60,6 @@
     "github-slugger": "^1.2.1",
     "html-react-parser": "^1.4.0",
     "jest": "^24.9.0",
-    "jsonschema": "^1.4.0",
     "lodash.debounce": "4.0.8",
     "lodash.uniqby": "^4.7.0",
     "pkg-up": "^3.1.0",
@@ -76,7 +75,6 @@
     "react-live": "^2.1.2",
     "react-measure": "^2.3.0",
     "read-pkg-up": "^6.0.0",
-    "require-glob": "^4.0.0",
     "sentence-case": "^2.1.1",
     "styled-components": "^4.3.2",
     "styled-system": "^5.0.18",

package/src/components/clipboard-copy.js

@@ -24,9 +24,9 @@ function ClipboardCopy({value}) {
       sx={{px: 2}}
     >
       {copied ? (
-        <StyledOcticon icon={CheckIcon} color="success.fg" />
+        <StyledOcticon icon={CheckIcon} sx={{color: 'success.fg'}} />
       ) : (
-        <StyledOcticon icon={CopyIcon} color="fg.muted" />
+        <StyledOcticon icon={CopyIcon} sx={{color: 'fg.muted'}} />
       )}
     </Button>
   )

package/src/components/code.js

@@ -24,7 +24,7 @@ function Code({className, children, live, noinline}) {
         width: '100%'
       }}
     >
-      <Absolute top={0} right={0} p={2}>
+      <Absolute sx={{top: 0, right: 0, p: 2}}>
         <ClipboardCopy value={code} />
       </Absolute>
       <Highlight {...defaultProps} Prism={Prism} code={code} language={language} theme={githubTheme}>

package/src/components/contributors.js

@@ -20,8 +20,7 @@ function Contributors({contributors}) {
           <Link
             key={contributor.login}
             href={`https://github.com/${contributor.login}`}
-            lineHeight="condensedUltra"
-            sx={{mr: 2}}
+            sx={{mr: 2, lineHeight: 'condensedUltra'}}
           >
             <Tooltip key={contributor.login} aria-label={contributor.login}>
               <Avatar src={`https://github.com/${contributor.login}.png?size=40`} alt={contributor.login} />

package/src/components/do-dont.js

@@ -26,7 +26,7 @@ function DoDontBase({children, title, icon: Icon, iconBg}) {
   return (
     <Box display="flex" flexDirection="column">
       <Box display="flex" alignSelf="start" flexDirection="row" alignItems="center" mb="2">
-        <StyledOcticon icon={Icon} color={iconBg} />
+        <StyledOcticon icon={Icon} sx={{color: iconBg}} />
         <Text fontWeight="bold" color="fg.default" ml={2}>
           {title}
         </Text>

package/src/components/drawer.js

@@ -23,12 +23,8 @@ function Drawer({isOpen, onDismiss, children}) {
               animate={{opacity: 1}}
               exit={{opacity: 0}}
               transition={{type: 'tween'}}
-              top={0}
-              right={0}
-              bottom={0}
-              left={0}
-              bg="rgba(0, 0, 0, 0.5)"
               onClick={() => onDismiss()}
+              sx={{top: 0, right: 0, bottom: 0, left: 0, bg: 'rgba(0, 0, 0, 0.5)'}}
             />
 
             <Fixed
@@ -38,12 +34,8 @@ function Drawer({isOpen, onDismiss, children}) {
               animate={{x: 0}}
               exit={{x: '100%'}}
               transition={{type: 'tween', duration: 0.2}}
-              width={300}
-              top={0}
-              right={0}
-              bottom={0}
-              bg="gray.0"
               style={{zIndex: 1}}
+              sx={{width: 300, top: 0, right: 0, bottom: 0, bg: 'gray.0'}}
             >
               {children}
             </Fixed>

package/src/components/hero-layout.js

@@ -15,10 +15,10 @@ function HeroLayout({children, pageContext}) {
   }
 
   return (
-    <Flex flexDirection="column" minHeight="100vh">
+    <Flex sx={{flexDirection: 'column', minHeight: '100vh'}}>
       <Head />
       <Header />
-      <Flex flex="1 1 auto" flexDirection="row">
+      <Flex sx={{flex: '1 1 auto', flexDirection: 'row'}}>
         <Box display={['none', null, null, 'block']}>
           <Sidebar />
         </Box>

package/src/components/hero.js

@@ -10,7 +10,7 @@ function Hero() {
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
       <Box bg="canvas.default" py={6}>
         <Container>
-          <Heading as="h1" color="accent.fg" fontSize={7} m={0}>
+          <Heading as="h1" sx={{color: 'accent.fg', fontSize: 7, m: 0}}>
             {title}
           </Heading>
           <Text as="p" m={0} color="fg.default" fontSize={4}>

package/src/components/image-container.js

@@ -3,10 +3,8 @@ import React from 'react'
 
 function ImageContainer({children}) {
   return (
-    <BorderBox p={6} bg="gray.1">
-      <Flex justifyContent="center" sx={{img: {maxWidth: '100%'}}}>
-        {children}
-      </Flex>
+    <BorderBox sx={{p: 6, bg: 'gray.1'}}>
+      <Flex sx={{img: {maxWidth: '100%'}, justifyContent: 'center'}}>{children}</Flex>
     </BorderBox>
   )
 }

package/src/components/layout.js

@@ -1,7 +1,6 @@
 import componentMetadata from '@primer/component-metadata'
 import {BorderBox, Box, Flex, Grid, Heading, Position, Text} from '@primer/components'
 import React from 'react'
-import Checklists from './checklists'
 import Head from './head'
 import Header, {HEADER_HEIGHT} from './header'
 import PageFooter from './page-footer'
@@ -27,10 +26,10 @@ function Layout({children, pageContext}) {
   }
 
   return (
-    <Flex flexDirection="column" minHeight="100vh">
+    <Flex sx={{flexDirection: 'column', minHeight: '100vh'}}>
       <Head title={title} description={description} />
       <Header />
-      <Flex flex="1 1 auto" flexDirection="row" css={{zIndex: 0}}>
+      <Flex css={{zIndex: 0}} sx={{flex: '1 1 auto', flexDirection: 'row'}}>
         <Box display={['none', null, null, 'block']}>
           <Sidebar />
         </Box>
@@ -46,12 +45,16 @@ function Layout({children, pageContext}) {
         >
           {pageContext.tableOfContents.items ? (
             <Position
-              sx={{width: 220, flex: '0 0 auto', marginLeft: 6}}
-              display={['none', null, 'block']}
+              sx={{
+                width: 220,
+                flex: '0 0 auto',
+                marginLeft: 6,
+                display: ['none', null, 'block'],
+                position: 'sticky',
+                top: HEADER_HEIGHT + 48,
+                maxHeight: `calc(100vh - ${HEADER_HEIGHT}px - 48px)`
+              }}
               css={{gridArea: 'table-of-contents', overflow: 'auto'}}
-              position="sticky"
-              top={HEADER_HEIGHT + 24}
-              maxHeight={`calc(100vh - ${HEADER_HEIGHT}px - 24px)`}
             >
               <Text display="inline-block" fontWeight="bold" mb={1}>
                 On this page
@@ -62,7 +65,7 @@ function Layout({children, pageContext}) {
           <Box width="100%" maxWidth="960px">
             <Box mb={4}>
               <Flex sx={{alignItems: 'center'}}>
-                <Heading as="h1" mr={2}>
+                <Heading as="h1" sx={{mr: 2}}>
                   {title}
                 </Heading>{' '}
                 {status ? <StatusLabel status={status} /> : null}
@@ -74,11 +77,13 @@ function Layout({children, pageContext}) {
               ) : null}
               {source || storybook ? (
                 <Grid
-                  py={2}
-                  gridGap={[1, null, 3]}
-                  gridAutoFlow={['row', null, 'column']}
-                  gridAutoColumns="max-content"
-                  gridAutoRows="max-content"
+                  sx={{
+                    py: 2,
+                    gridGap: [1, null, 3],
+                    gridAutoFlow: ['row', null, 'column'],
+                    gridAutoColumns: 'max-content',
+                    gridAutoRows: 'max-content'
+                  }}
                 >
                   {source ? <SourceLink href={source} /> : null}
                   {storybook ? <StorybookLink href={storybook} /> : null}
@@ -86,9 +91,11 @@ function Layout({children, pageContext}) {
               ) : null}
             </Box>
             {pageContext.tableOfContents.items ? (
-              <BorderBox display={['block', null, 'none']} mb={5} borderColor="border.muted" bg="canvas.subtle">
+              <BorderBox
+                sx={{display: ['block', null, 'none'], mb: 5, borderColor: 'border.muted', bg: 'canvas.subtle'}}
+              >
                 <Box p={3}>
-                  <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
+                  <Flex sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                     <Text fontWeight="bold">On this page</Text>
                   </Flex>
                 </Box>
@@ -98,7 +105,6 @@ function Layout({children, pageContext}) {
               </BorderBox>
             ) : null}
             {children}
-            <Checklists frontmatter={pageContext.frontmatter} />
             <PageFooter
               editUrl={pageContext.editUrl}
               contributors={pageContext.contributors.concat(additionalContributors.map(login => ({login})))}

package/src/components/live-code.js

@@ -40,7 +40,7 @@ function LiveCode({code, language, noinline}) {
   const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
 
   return (
-    <Flex flexDirection="column" mb={3}>
+    <Flex sx={{flexDirection: 'column', mb: 3}}>
       <LiveProvider scope={scope} code={liveCode} transformCode={languageTransformers[language]} noInline={noinline}>
         <Flex
           sx={{
@@ -70,7 +70,7 @@ function LiveCode({code, language, noinline}) {
               borderColor: theme.colors.border.default
             }}
           />
-          <Absolute top={0} right={0} p={2}>
+          <Absolute sx={{top: 0, right: 0, p: 2}}>
             <ClipboardCopy value={liveCode} />
           </Absolute>
         </Relative>

package/src/components/mobile-search.js

@@ -38,19 +38,14 @@ function MobileSearch({isOpen, onDismiss}) {
     <AnimatePresence>
       {isOpen ? (
         <FocusOn returnFocus={true} onEscapeKey={() => handleDismiss()}>
-          <Fixed top={0} left={0} right={0} bottom={0} zIndex={1}>
+          <Fixed sx={{top: 0, left: 0, right: 0, bottom: 0, zIndex: 1}}>
             <Absolute
               as={motion.div}
               initial={{opacity: 0}}
               animate={{opacity: 1}}
               exit={{opacity: 0}}
-              top={0}
-              left={0}
-              right={0}
-              bottom={0}
-              bg="primer.canvas.backdrop"
-              zIndex={-1}
               onClick={handleDismiss}
+              sx={{top: 0, left: 0, right: 0, bottom: 0, bg: 'primer.canvas.backdrop', zIndex: -1}}
             />
             <Downshift
               inputValue={query}
@@ -72,7 +67,7 @@ function MobileSearch({isOpen, onDismiss}) {
                     height: isMenuOpen ? '100%' : 'auto'
                   })}
                 >
-                  <Flex bg="canvas.default" color="fg.default" p={3} flex="0 0 auto">
+                  <Flex sx={{bg: 'canvas.default', color: 'fg.default', p: 3, flex: '0 0 auto'}}>
                     <motion.div
                       initial={{scaleX: 0.1}}
                       animate={{scaleX: 1}}
@@ -83,7 +78,7 @@ function MobileSearch({isOpen, onDismiss}) {
                       <TextInput
                         {...getInputProps({
                           placeholder: `Search`,
-                          width: '100%'
+                          sx: {width: '100%'}
                         })}
                       />
                     </motion.div>

package/src/components/nav-drawer.js

@@ -44,15 +44,13 @@ function NavDrawer({isOpen, onDismiss}) {
   return (
     <Drawer isOpen={isOpen} onDismiss={onDismiss}>
       <Flex
-        flexDirection="column"
-        height="100%"
-        bg="canvas.default"
         style={{overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
+        sx={{flexDirection: 'column', height: '100%', bg: 'canvas.default'}}
       >
-        <Flex flexDirection="column" flex="0 0 auto" color="fg.default" bg="canvas.default">
-          <BorderBox borderWidth={0} borderRadius={0} borderBottomWidth={1} borderColor="border.muted">
-            <Flex py={3} pl={4} pr={3} alignItems="center" justifyContent="space-between">
-              <Link href="https://primer.style" fontFamily="mono" color="inherit">
+        <Flex sx={{flexDirection: 'column', flex: '0 0 auto', color: 'fg.default', bg: 'canvas.default'}}>
+          <BorderBox sx={{borderWidth: 0, borderRadius: 0, borderBottomWidth: 1, borderColor: 'border.muted'}}>
+            <Flex sx={{py: 3, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between'}}>
+              <Link href="https://primer.style" sx={{fontFamily: 'mono', color: 'inherit'}}>
                 Primer
               </Link>
               <Button aria-label="Close" onClick={onDismiss}>
@@ -60,14 +58,18 @@ function NavDrawer({isOpen, onDismiss}) {
               </Button>
             </Flex>
           </BorderBox>
-          <Flex flexDirection="column">
+          <Flex sx={{flexDirection: 'column'}}>
             <PrimerNavItems items={primerNavItems} />
           </Flex>
         </Flex>
         {navItems.length > 0 ? (
           <ThemeProvider colorMode="day">
-            <Flex flexDirection="column" flex="1 0 auto" color="fg.default" bg="canvas.default">
-              <Link as={GatsbyLink} to="/" display="inline-block" color="inherit" fontFamily="mono" mx={4} my={4}>
+            <Flex sx={{flexDirection: 'column', flex: '1 0 auto', color: 'fg.default', bg: 'canvas.default'}}>
+              <Link
+                as={GatsbyLink}
+                to="/"
+                sx={{display: 'inline-block', color: 'inherit', fontFamily: 'mono', mx: 4, my: 4}}
+              >
                 {siteMetadata.title}
               </Link>
               <NavItems items={navItems} />
@@ -84,25 +86,21 @@ function PrimerNavItems({items}) {
     return (
       <BorderBox
         key={item.title}
-        borderWidth={0}
-        borderRadius={0}
-        borderTopWidth={index !== 0 ? 1 : 0}
-        borderColor="border.muted"
-        p={4}
+        sx={{borderWidth: 0, borderRadius: 0, borderTopWidth: index !== 0 ? 1 : 0, borderColor: 'border.muted', p: 4}}
       >
         {item.children ? (
           <Details key={index}>
             {({open, toggle}) => (
               <>
                 <summary onClick={toggle} style={{cursor: 'pointer'}}>
-                  <Flex alignItems="center" justifyContent="space-between">
+                  <Flex sx={{alignItems: 'center', justifyContent: 'space-between'}}>
                     <Text>{item.title}</Text>
                     {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
                   </Flex>
                 </summary>
-                <Flex flexDirection="column" mt={2}>
+                <Flex sx={{flexDirection: 'column', mt: 2}}>
                   {item.children.map(child => (
-                    <Link key={child.title} href={child.url} py={1} mt={2} fontSize={1} color="inherit">
+                    <Link key={child.title} href={child.url} sx={{py: 1, mt: 2, fontSize: 1, color: 'inherit'}}>
                       {child.title}
                     </Link>
                   ))}
@@ -111,7 +109,7 @@ function PrimerNavItems({items}) {
             )}
           </Details>
         ) : (
-          <Link key={index} href={item.url} color="inherit" display="block">
+          <Link key={index} href={item.url} sx={{color: 'inherit', display: 'block'}}>
             {item.title}
           </Link>
         )}

package/src/components/nav-dropdown.js

@@ -9,7 +9,7 @@ function NavDropdown({title, children}) {
     <Details {...getDetailsProps()}>
       <summary style={{cursor: 'pointer'}}>
         <Text>{title}</Text>
-        <StyledOcticon icon={TriangleDownIcon} ml={1} />
+        <StyledOcticon icon={TriangleDownIcon} sx={{ml: 1}} />
       </summary>
       <Box position="absolute">
         <Box

package/src/components/nav-items.js

@@ -38,7 +38,13 @@ function NavItems({items}) {
           p={4}
         >
           <Box display="flex" flexDirection="column">
-            <NavLink as={GatsbyLink} to={item.url} activeClassName="active" partiallyActive={true} color="inherit">
+            <NavLink
+              as={GatsbyLink}
+              to={item.url}
+              activeClassName="active"
+              partiallyActive={true}
+              sx={{color: 'inherit'}}
+            >
               {item.title}
             </NavLink>
             {item.children ? (
@@ -49,10 +55,12 @@ function NavItems({items}) {
                     as={GatsbyLink}
                     to={child.url}
                     activeClassName="active"
-                    display="block"
-                    py={1}
-                    mt={2}
-                    fontSize={1}
+                    sx={{
+                      display: 'block',
+                      py: 1,
+                      mt: 2,
+                      fontSize: 1
+                    }}
                   >
                     {child.title}
                   </NavLink>
@@ -64,10 +72,10 @@ function NavItems({items}) {
       ))}
       {repositoryUrl ? (
         <Box borderWidth={0} borderTopWidth={1} borderRadius={0} borderStyle="solid" borderColor="border.default" p={4}>
-          <Link href={repositoryUrl} color="inherit">
+          <Link href={repositoryUrl} sx={{color: 'inherit'}}>
             <Box display="flex" justifyContent="space-between" alignItems="center">
               GitHub
-              <StyledOcticon icon={LinkExternalIcon} color="fg.muted" />
+              <StyledOcticon icon={LinkExternalIcon} sx={{color: 'fg.muted'}} />
             </Box>
           </Link>
         </Box>

package/src/components/page-footer.js

@@ -5,11 +5,11 @@ import Contributors from './contributors'
 
 function PageFooter({editUrl, contributors}) {
   return editUrl || contributors.length > 0 ? (
-    <BorderBox borderWidth={0} borderTopWidth={1} borderRadius={0} mt={8} py={5}>
-      <Grid gridGap={4}>
+    <BorderBox sx={{borderWidth: 0, borderTopWidth: 1, borderRadius: 0, mt: 8, py: 5}}>
+      <Grid sx={{gridGap: 4}}>
         {editUrl ? (
           <Link href={editUrl}>
-            <StyledOcticon icon={PencilIcon} mr={2} />
+            <StyledOcticon icon={PencilIcon} sx={{mr: 2}} />
             Edit this page on GitHub
           </Link>
         ) : null}

package/src/components/search.js

@@ -64,14 +64,16 @@ function Search() {
             >
               <ThemeProvider colorMode="day">
                 <BorderBox
-                  minWidth={300}
-                  maxHeight="70vh"
-                  p={2}
-                  boxShadow="shadow.large"
-                  borderColor="border.muted"
-                  bg="canvas.overlay"
-                  borderRadius="12px"
                   style={{overflow: 'auto'}}
+                  sx={{
+                    minWidth: 300,
+                    maxHeight: '70vh',
+                    p: 2,
+                    boxShadow: 'shadow.large',
+                    borderColor: 'border.muted',
+                    bg: 'canvas.overlay',
+                    borderRadius: '12px'
+                  }}
                 >
                   <SearchResults results={results} getItemProps={getItemProps} highlightedIndex={highlightedIndex} />
                 </BorderBox>

package/src/components/sidebar.js

@@ -33,21 +33,20 @@ function Sidebar() {
 
   return (
     <Position
-      position="sticky"
-      top={HEADER_HEIGHT}
-      height={`calc(100vh - ${HEADER_HEIGHT}px)`}
-      minWidth={260}
-      bg="canvas.subtle"
+      sx={{
+        position: 'sticky',
+        top: HEADER_HEIGHT,
+        height: `calc(100vh - ${HEADER_HEIGHT}px)`,
+        minWidth: 260,
+        bg: 'canvas.subtle'
+      }}
     >
       <BorderBox
         {...scrollContainerProps}
-        borderWidth={0}
-        borderRightWidth={1}
-        borderRadius={0}
-        height="100%"
         style={{overflow: 'auto'}}
+        sx={{borderWidth: 0, borderRightWidth: 1, borderRadius: 0, height: '100%'}}
       >
-        <Flex flexDirection="column">
+        <Flex sx={{flexDirection: 'column'}}>
           <NavItems items={navItems} />
         </Flex>
       </BorderBox>

package/src/components/status-label.js

@@ -14,7 +14,7 @@ function getStatusColor(status) {
 
 function StatusLabel({status}) {
   return (
-    <Label outline color={getStatusColor(status)} borderColor={getStatusColor(status)}>
+    <Label outline sx={{color: getStatusColor(status), borderColor: getStatusColor(status)}}>
       {status}
     </Label>
   )

package/src/components/wrap-root-element.js

@@ -1,6 +1,7 @@
 import {MDXProvider} from '@mdx-js/react'
 import {Link, ThemeProvider} from '@primer/components'
 import React from 'react'
+import mdxComponents from '../mdx-components'
 import Blockquote from './blockquote'
 import Caption from './caption'
 import Code from './code'
@@ -36,13 +37,14 @@ const components = {
   ol: List.withComponent('ol'),
   dl: DescriptionList,
 
-  // Shortcodes (https://mdxjs.com/blog/shortcodes)
+  // Custom components
   Note,
   Do,
   Dont,
   DoDontContainer,
   Caption,
-  ImageContainer
+  ImageContainer,
+  ...mdxComponents
 }
 
 function wrapRootElement({element}) {

package/src/mdx-components.js

@@ -0,0 +1,2 @@
+// Users can shadow this file to add custom components to scope of all MDX files.
+export default {}

package/src/__tests__/validate-checklists.test.js

@@ -1,96 +0,0 @@
-import {validateChecklistSchema, validateChecklist} from '../validate-checklists'
-
-describe('validateChecklistSchema()', () => {
-  const valid = [
-    {
-      title: 'Example checklist',
-      items: []
-    },
-    {
-      title: 'Example checklist',
-      items: [{id: 'example', description: 'Example item'}]
-    },
-    {
-      title: 'Example checklist',
-      items: [{id: 'example', description: 'Example item', someMetadata: 1}]
-    }
-  ]
-
-  const invalid = [
-    {
-      title: 'Example checklist'
-    },
-    {
-      title: 'Example checklist',
-      items: [{description: 'Example item'}]
-    },
-    {
-      title: 1,
-      items: []
-    },
-    {
-      title: 'Example checklist',
-      items: 1
-    }
-  ]
-
-  for (const checklistSchema of valid) {
-    test(`should validate ${JSON.stringify(checklistSchema)}`, () => {
-      expect(() => validateChecklistSchema(checklistSchema)).not.toThrow()
-    })
-  }
-
-  for (const checklistSchema of invalid) {
-    test(`should not validate ${JSON.stringify(checklistSchema)}`, () => {
-      expect(() => validateChecklistSchema(checklistSchema)).toThrow()
-    })
-  }
-})
-
-describe('validateChecklist()', () => {
-  const valid = [
-    {
-      checklist: {dependenciesReviewed: true},
-      checklistSchema: {
-        title: 'Example checklist',
-        items: [{id: 'dependenciesReviewed', description: 'Third-party dependencies have been reviewed'}]
-      }
-    }
-  ]
-
-  const invalid = [
-    {
-      checklist: {reviewed: true},
-      checklistSchema: {
-        title: 'Example checklist',
-        items: [{id: 'dependenciesReviewed', description: 'Third-party dependencies have been reviewed'}]
-      }
-    },
-    {
-      checklist: {dependenciesReviewed: 1},
-      checklistSchema: {
-        title: 'Example checklist',
-        items: [{id: 'dependenciesReviewed', description: 'Third-party dependencies have been reviewed'}]
-      }
-    },
-    {
-      checklist: ['dependenciesReviewed'],
-      checklistSchema: {
-        title: 'Example checklist',
-        items: [{id: 'dependenciesReviewed', description: 'Third-party dependencies have been reviewed'}]
-      }
-    }
-  ]
-
-  for (const {checklist, checklistSchema} of valid) {
-    test(`should validate ${JSON.stringify(checklist)}`, () => {
-      expect(() => validateChecklist(checklist, checklistSchema)).not.toThrow()
-    })
-  }
-
-  for (const {checklist, checklistSchema} of invalid) {
-    test(`should not validate ${JSON.stringify(checklist)}`, () => {
-      expect(() => validateChecklist(checklist, checklistSchema)).toThrow()
-    })
-  }
-})

package/src/checklists/component.schema.js

@@ -1,13 +0,0 @@
-module.exports = {
-  title: 'Component checklist',
-  items: [
-    {
-      id: 'dependenciesReviewed',
-      description: 'All third-party dependencies have been reviewed.'
-    },
-    {
-      id: 'componentStatusDocumented',
-      description: 'Component status is documented.'
-    }
-  ]
-}

package/src/components/checklist.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import {H2} from './heading'
-import {Box, StyledOcticon} from '@primer/components'
-import {CheckCircleFillIcon, CircleIcon} from '@primer/octicons-react'
-import GithubSlugger from 'github-slugger'
-
-export type ChecklistSchema = {
-  title: string
-  items: Array<{id: string; description: string}>
-}
-
-type ChecklistProps = {
-  checklist: {[id: string]: boolean}
-  schema: ChecklistSchema
-}
-
-function Checklist({checklist, schema}: ChecklistProps) {
-  const id = React.useMemo(() => {
-    const slugger = new GithubSlugger()
-    return slugger.slug(schema.title)
-  }, [schema.title])
-  return (
-    <>
-      <H2 id={id}>{schema.title}</H2>
-      <Box aria-describedby={id} as="ul" display="grid" gridGap={2} p={0} m={0}>
-        {schema.items.map(({id, description}) => {
-          const checked = Boolean(checklist[id])
-          return (
-            <ChecklistItem checked={checked} key={id}>
-              {description}
-            </ChecklistItem>
-          )
-        })}
-      </Box>
-    </>
-  )
-}
-
-type ChecklistItemProps = {
-  checked: boolean
-}
-
-function ChecklistItem({checked, children}: React.PropsWithChildren<ChecklistItemProps>) {
-  return (
-    <Box as="li" display="grid" gridTemplateColumns="auto 1fr" gridGap={2} sx={{listStyleType: 'none'}}>
-      <Box height="24px" display="flex" alignItems="center">
-        {checked ? (
-          <StyledOcticon aria-label="Completed" icon={CheckCircleFillIcon} color="success.fg" />
-        ) : (
-          <StyledOcticon aria-label="To do" icon={CircleIcon} color="border.default" />
-        )}
-      </Box>
-      <span>{children}</span>
-    </Box>
-  )
-}
-
-export default Checklist

package/src/components/checklists.tsx

@@ -1,48 +0,0 @@
-import {graphql, useStaticQuery} from 'gatsby'
-import React from 'react'
-import Checklist from './checklist'
-
-type ChecklistSchemaQuery = {
-  allChecklistSchema: {
-    nodes: Array<{
-      name: string
-      title: string
-      items: Array<{id: string; description: string}>
-    }>
-  }
-}
-
-function Checklists({frontmatter}: {frontmatter: Record<string, any>}) {
-  const data = useStaticQuery<ChecklistSchemaQuery>(graphql`
-    query ChecklistSchemaQuery {
-      allChecklistSchema {
-        nodes {
-          name
-          title
-          items {
-            id
-            description
-          }
-        }
-      }
-    }
-  `)
-
-  const checklistSchemas = data.allChecklistSchema.nodes
-
-  const checklists = checklistSchemas
-    .map(schema => {
-      const key = `${schema.name}Checklist`
-
-      if (!(key in frontmatter)) {
-        return null
-      }
-
-      return <Checklist checklist={frontmatter[key]} schema={schema} />
-    })
-    .filter(Boolean)
-
-  return checklists
-}
-
-export default Checklists

package/src/validate-checklists.js

@@ -1,62 +0,0 @@
-const validate = require('jsonschema').validate
-
-exports.validateChecklistSchema = checklistSchema => {
-  const jsonSchema = {
-    type: 'object',
-    properties: {
-      title: {
-        type: 'string'
-      },
-      items: {
-        type: 'array',
-        items: {
-          type: 'object',
-          properties: {
-            id: {
-              type: 'string'
-            },
-            description: {
-              type: 'string'
-            }
-          },
-          required: ['id', 'description']
-        }
-      }
-    },
-    required: ['title', 'items']
-  }
-
-  const {errors} = validate(checklistSchema, jsonSchema)
-
-  if (errors.length > 0) {
-    const errorMessage = errors.map(error => `• ${error.message}`).join('\n')
-    throw new Error(`Errors:\n${errorMessage}`)
-  }
-}
-
-exports.validateChecklist = (checklist, checklistSchema) => {
-  const jsonSchema = checklistSchemaToJsonSchema(checklistSchema)
-
-  const {errors} = validate(checklist, jsonSchema)
-
-  if (errors.length > 0) {
-    const errorMessage = errors.map(error => `• ${error.message}`).join('\n')
-    throw new Error(`Errors:\n${errorMessage}`)
-  }
-}
-
-function checklistSchemaToJsonSchema(checklistSchema) {
-  const ids = checklistSchema.items.map(item => item.id)
-
-  const properties = ids.reduce((properties, id) => {
-    properties[id] = {type: 'boolean'}
-    return properties
-  }, {})
-
-  return {
-    type: 'object',
-    properties,
-    required: ids,
-    additionalProperties: false
-  }
-}