@primer/gatsby-theme-doctocat 2.0.0 → 3.1.0

package/src/components/nav-items.js

@@ -43,7 +43,7 @@ function NavItems({items}) {
               to={item.url}
               activeClassName="active"
               partiallyActive={true}
-              color="inherit"
+              sx={{color: 'inherit'}}
             >
               {item.title}
             </NavLink>
@@ -55,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>
@@ -69,22 +71,11 @@ function NavItems({items}) {
         </Box>
       ))}
       {repositoryUrl ? (
-        <Box
-          borderWidth={0}
-          borderTopWidth={1}
-          borderRadius={0}
-          borderStyle="solid"
-          borderColor="border.default"
-          p={4}
-        >
-          <Link href={repositoryUrl} color="inherit">
-            <Box
-              display="flex"
-              justifyContent="space-between"
-              alignItems="center"
-            >
+        <Box borderWidth={0} borderTopWidth={1} borderRadius={0} borderStyle="solid" borderColor="border.default" p={4}>
+          <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/note.js

@@ -16,22 +16,22 @@ const Note = styled.div`
     variants: {
       info: {
         borderColor: 'accent.muted',
-        bg: 'accent.subtle',
+        bg: 'accent.subtle'
       },
       warning: {
         borderColor: 'attention.muted',
-        bg: 'attention.subtle',
+        bg: 'attention.subtle'
       },
       danger: {
         borderColor: 'danger.muted',
-        bg: 'danger.subtle',
-      },
-    },
+        bg: 'danger.subtle'
+      }
+    }
   })}
 `
 
 Note.defaultProps = {
-  variant: 'info',
+  variant: 'info'
 }
 
 export default Note

package/src/components/page-footer.js

@@ -5,25 +5,23 @@ 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}
 
-        {contributors.length > 0 ? (
-          <Contributors contributors={contributors} />
-        ) : null}
+        {contributors.length > 0 ? <Contributors contributors={contributors} /> : null}
       </Grid>
     </BorderBox>
   ) : null
 }
 
 PageFooter.defaultProps = {
-  contributors: [],
+  contributors: []
 }
 
 export default PageFooter

package/src/components/search-results.js

@@ -27,7 +27,7 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
         fontSize: 1,
         bg: highlightedIndex === index ? 'neutral.muted' : 'transparent',
         style: {cursor: 'pointer'},
-        borderRadius: 2,
+        borderRadius: 2
       })}
     >
       <Text fontSize={0} color="fg.muted">
@@ -47,7 +47,7 @@ function getBreadcrumbs(siteTitle, path) {
       // The last title will be displayed separately, so we exclude it
       // from the breadcrumbs to avoid displaying it twice.
       .slice(0, -1)
-      .map(sentenceCase),
+      .map(sentenceCase)
   ]
 }
 

package/src/components/search.js

@@ -43,21 +43,14 @@ function Search() {
       itemToString={item => (item ? item.title : '')}
       stateReducer={stateReducer}
     >
-      {({
-        getInputProps,
-        getItemProps,
-        getMenuProps,
-        getRootProps,
-        isOpen,
-        highlightedIndex,
-      }) => (
+      {({getInputProps, getItemProps, getMenuProps, getRootProps, isOpen, highlightedIndex}) => (
         <Position {...getRootProps({position: 'relative'})}>
           <TextInput
             {...getInputProps({
               placeholder: `Search ${siteMetadata.title}`,
               sx: {
-                width: 240,
-              },
+                width: 240
+              }
             })}
           />
           {isOpen ? (
@@ -66,25 +59,23 @@ function Search() {
                 position: 'absolute',
                 left: 0,
                 right: 0,
-                pt: 2,
+                pt: 2
               })}
             >
               <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}
-                  />
+                  <SearchResults results={results} getItemProps={getItemProps} highlightedIndex={highlightedIndex} />
                 </BorderBox>
               </ThemeProvider>
             </Position>

package/src/components/sidebar.js

@@ -10,7 +10,7 @@ function usePersistentScroll(id) {
   const handleScroll = React.useCallback(
     // Save scroll position in session storage on every scroll change
     event => window.sessionStorage.setItem(id, event.target.scrollTop),
-    [id],
+    [id]
   )
 
   React.useLayoutEffect(() => {
@@ -24,7 +24,7 @@ function usePersistentScroll(id) {
   // Return props to spread onto the scroll container
   return {
     ref,
-    onScroll: handleScroll,
+    onScroll: handleScroll
   }
 }
 
@@ -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/skip-link.js

@@ -11,7 +11,7 @@ function SkipLinkBase(props) {
         p: 3,
         color: 'fg.onEmphasis',
         backgroundColor: 'accent.emphasis',
-        fontSize: 1,
+        fontSize: 1
       }}
     >
       Skip to content

package/src/components/status-label.js

@@ -5,7 +5,7 @@ const STATUS_COLORS = {
   alpha: 'severe.fg',
   beta: 'attention.fg',
   stable: 'success.fg',
-  deprecated: 'danger.fg',
+  deprecated: 'danger.fg'
 }
 
 function getStatusColor(status) {
@@ -14,11 +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/table-of-contents.js

@@ -13,15 +13,13 @@ function TableOfContents({items, depth}) {
                 display: 'inline-block',
                 py: 1,
                 fontSize: [2, null, 1],
-                color: 'fg.muted',
+                color: 'fg.muted'
               }}
             >
               {item.title}
             </Link>
           ) : null}
-          {item.items ? (
-            <TableOfContents items={item.items} depth={depth + 1} />
-          ) : null}
+          {item.items ? <TableOfContents items={item.items} depth={depth + 1} /> : null}
         </Box>
       ))}
     </Box>
@@ -29,7 +27,7 @@ function TableOfContents({items, depth}) {
 }
 
 TableOfContents.defaultProps = {
-  depth: 0,
+  depth: 0
 }
 
 export default TableOfContents

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,
+  ...mdxComponents
 }
 
 function wrapRootElement({element}) {

package/src/github.js

@@ -1,74 +1,63 @@
 export default {
   plain: {
-    color: "#393A34",
-    backgroundColor: "#f6f8fa",
+    color: '#393A34',
+    backgroundColor: '#f6f8fa'
   },
   styles: [
     {
-      types: ["comment", "prolog", "doctype", "cdata"],
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
       style: {
-        color: "#999988",
-        fontStyle: "italic",
-      },
+        color: '#999988',
+        fontStyle: 'italic'
+      }
     },
     {
-      types: ["namespace"],
+      types: ['namespace'],
       style: {
-        opacity: 0.7,
-      },
+        opacity: 0.7
+      }
     },
     {
-      types: ["string", "attr-value"],
+      types: ['string', 'attr-value'],
       style: {
-        color: "#e3116c",
-      },
+        color: '#e3116c'
+      }
     },
     {
-      types: ["punctuation", "operator"],
+      types: ['punctuation', 'operator'],
       style: {
-        color: "#393A34",
-      },
+        color: '#393A34'
+      }
     },
     {
-      types: [
-        "entity",
-        "url",
-        "symbol",
-        "number",
-        "boolean",
-        "variable",
-        "constant",
-        "property",
-        "regex",
-        "inserted",
-      ],
+      types: ['entity', 'url', 'symbol', 'number', 'boolean', 'variable', 'constant', 'property', 'regex', 'inserted'],
       style: {
-        color: "#36acaa",
-      },
+        color: '#36acaa'
+      }
     },
     {
-      types: ["atrule", "keyword", "attr-name", "selector"],
+      types: ['atrule', 'keyword', 'attr-name', 'selector'],
       style: {
-        color: "#00a4db",
-      },
+        color: '#00a4db'
+      }
     },
     {
-      types: ["function", "deleted", "tag"],
+      types: ['function', 'deleted', 'tag'],
       style: {
-        color: "#d73a49",
-      },
+        color: '#d73a49'
+      }
     },
     {
-      types: ["function-variable"],
+      types: ['function-variable'],
       style: {
-        color: "#6f42c1",
-      },
+        color: '#6f42c1'
+      }
     },
     {
-      types: ["tag", "selector", "keyword"],
+      types: ['tag', 'selector', 'keyword'],
       style: {
-        color: "#00009f",
-      },
-    },
-  ],
-};
+        color: '#00009f'
+      }
+    }
+  ]
+}

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/prism.js

@@ -1,27 +1,27 @@
 import Prism from 'prismjs/components/prism-core'
 
 // Core languages
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-markup-templating';
+import 'prismjs/components/prism-clike'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-markup-templating'
 
 // Supported languages
-import 'prismjs/components/prism-bash';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-diff';
-import 'prismjs/components/prism-go';
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-markdown';
-import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-css'
+import 'prismjs/components/prism-diff'
+import 'prismjs/components/prism-go'
+import 'prismjs/components/prism-json'
+import 'prismjs/components/prism-markdown'
+import 'prismjs/components/prism-yaml'
 
 // JS like
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-jsx';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-tsx';
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-jsx'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-tsx'
 
 // Ruby like
-import 'prismjs/components/prism-ruby';
-import 'prismjs/components/prism-erb';
+import 'prismjs/components/prism-ruby'
+import 'prismjs/components/prism-erb'
 
 export default Prism

package/src/search.worker.js

@@ -1,7 +1,6 @@
 import Fuse from 'fuse.js'
 import debounce from 'lodash.debounce'
-
-(function searchWorker() {
+;(function searchWorker() {
   let fuse = null
 
   // [MKT]: I landed on the debouce wait value of 50 based mostly on
@@ -13,17 +12,21 @@ import debounce from 'lodash.debounce'
   // > Note: If `leading` and `trailing` options are `true`, `func` is invoked
   // > on the trailing edge of the timeout only if the debounced function is
   // > invoked more than once during the wait timeout.
-  const performSearch = debounce(function performSearch(query) {
-    const results = fuse.search(query).slice(0, 20)
-    postMessage({results: results, query: query})
-  }, 50, {leading: true, trailing: true})
+  const performSearch = debounce(
+    function performSearch(query) {
+      const results = fuse.search(query).slice(0, 20)
+      postMessage({results: results, query: query})
+    },
+    50,
+    {leading: true, trailing: true}
+  )
 
-  onmessage = function({data}) {
+  onmessage = function ({data}) {
     if (data.list) {
       fuse = new Fuse(data.list, {
         threshold: 0.2,
         keys: ['title', 'rawBody'],
-        tokenize: true,
+        tokenize: true
       })
     } else if (data.query) {
       performSearch(data.query)

package/src/use-search.js

@@ -3,7 +3,7 @@ import path from 'path'
 import React from 'react'
 import SearchWorker from 'worker-loader!./search.worker.js'
 
-const ensureAbsolute = uri => uri.startsWith('/') ? uri : `/${uri}`
+const ensureAbsolute = uri => (uri.startsWith('/') ? uri : `/${uri}`)
 
 function useSearch(query) {
   const latestQuery = React.useRef(query)
@@ -32,14 +32,13 @@ function useSearch(query) {
   const list = React.useMemo(
     () =>
       data.allMdx.nodes.map(node => ({
-        path: ensureAbsolute(path.join(
-          node.parent.relativeDirectory,
-          node.parent.name === 'index' ? '/' : node.parent.name,
-        )),
+        path: ensureAbsolute(
+          path.join(node.parent.relativeDirectory, node.parent.name === 'index' ? '/' : node.parent.name)
+        ),
         title: node.frontmatter.title,
-        rawBody: node.rawBody,
+        rawBody: node.rawBody
       })),
-    [data],
+    [data]
   )
 
   const [results, setResults] = React.useState(list)