@primer/gatsby-theme-doctocat 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @primer/gatsby-theme-doctocat
 
+## 4.0.1
+
+### Patch Changes
+
+- [`1e22900`](https://github.com/primer/doctocat/commit/1e229008d374b8b56d19ce33f315256c4301efb4) [#434](https://github.com/primer/doctocat/pull/434) Thanks [@rezrah](https://github.com/rezrah)! - - Updated external links in frontmatter to open in new tab
+  - Added support for Figma links in frontmatter
+
+* [`9585e40`](https://github.com/primer/doctocat/commit/9585e40d62b0bfcb8aff6d98cdd490b5058f6748) [#475](https://github.com/primer/doctocat/pull/475) Thanks [@JoshBowdenConcepts](https://github.com/JoshBowdenConcepts)! - Adding Primer Brand link to the main navigation
+
 ## 4.0.0
 
 ### Major Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "main": "index.js",
   "license": "MIT",
   "scripts": {

package/src/components/code.js

@@ -6,12 +6,14 @@ import Prism from '../prism'
 import ClipboardCopy from './clipboard-copy'
 import LiveCode from './live-code'
 
-function Code({className, children, live, noinline, metastring}) {
+function Code({className, children, live, highlight, noinline, metastring}) {
   const language = className ? className.replace(/language-/, '') : ''
   const code = children.trim()
 
   if (live) {
-    return <LiveCode code={code} language={language} noinline={noinline} metastring={metastring} />
+    return (
+      <LiveCode code={code} highlight={highlight} language={language} noinline={noinline} metastring={metastring} />
+    )
   }
 
   return (

package/src/components/do-dont.js

@@ -1,4 +1,4 @@
-import {Box, StyledOcticon, Text} from '@primer/react'
+import {Box, Text} from '@primer/react'
 import React from 'react'
 
 export function DoDontContainer({stacked, children}) {

package/src/components/figma-link.js

@@ -0,0 +1,32 @@
+import {Link, Text} from '@primer/react'
+import React from 'react'
+
+function SourceLink({href}) {
+  return (
+    <Link href={href} target="_blank">
+      <FigmaLogo />
+      <Text sx={{ml: 2, display: 'inline-block'}}>View Figma</Text>
+    </Link>
+  )
+}
+
+function FigmaLogo() {
+  return (
+    <svg
+      width={16}
+      height={16}
+      aria-hidden="true"
+      style={{verticalAlign: 'text-bottom'}}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 172 247"
+    >
+      <g stroke="currentColor" strokeWidth="15.081">
+        <path d="M164 46.5c0 21.263-17.237 38.5-38.5 38.5H86V8h39.5C146.763 8 164 25.237 164 46.5ZM8 46.5C8 67.763 25.237 85 46.5 85H86V8H46.5C25.237 8 8 25.237 8 46.5ZM8 123.501c0 21.263 17.237 38.5 38.5 38.5H86v-77H46.5c-21.263 0-38.5 17.237-38.5 38.5Z" />
+        <path d="M8 200.5C8 221.763 25.485 239 46.748 239 68.288 239 86 221.539 86 200v-38H46.5C25.237 162 8 179.237 8 200.5ZM86 123.501c0 21.263 17.237 38.5 38.5 38.5h1c21.263 0 38.5-17.237 38.5-38.5s-17.237-38.5-38.5-38.5h-1c-21.263 0-38.5 17.237-38.5 38.5Z" />
+      </g>
+    </svg>
+  )
+}
+
+export default SourceLink

package/src/components/layout.js

@@ -8,10 +8,12 @@ import Sidebar from './sidebar'
 import SourceLink from './source-link'
 import StatusLabel from './status-label'
 import StorybookLink from './storybook-link'
+import FigmaLink from './figma-link'
 import TableOfContents from './table-of-contents'
 
 function Layout({children, pageContext}) {
-  let {title, description, status, source, storybook, additionalContributors, componentId} = pageContext.frontmatter
+  let {title, description, figma, status, source, storybook, additionalContributors, componentId} =
+    pageContext.frontmatter
 
   if (!additionalContributors) {
     additionalContributors = []
@@ -84,6 +86,7 @@ function Layout({children, pageContext}) {
                 >
                   {source ? <SourceLink href={source} /> : null}
                   {storybook ? <StorybookLink href={storybook} /> : null}
+                  {figma ? <FigmaLink href={figma} /> : null}
                 </Box>
               ) : null}
             </Box>

package/src/components/live-code.js

@@ -8,6 +8,8 @@ import {ThemeContext} from 'styled-components'
 import scope from '../live-code-scope'
 import ClipboardCopy from './clipboard-copy'
 import LivePreviewWrapper from './live-preview-wrapper'
+import styled from 'styled-components'
+import themeGet from '@styled-system/theme-get'
 
 const languageTransformers = {
   html: html => htmlToJsx(html),
@@ -39,10 +41,43 @@ const getResolvedScope = metastring => {
   return scope
 }
 
-function LiveCode({code, language, noinline, metastring}) {
+function parseHighlightRange(highlight) {
+  // Captures numbers separated by a dash: 2-3, 34-5, 2-101
+  const numbersWithDash = new RegExp('([0-9]+)-([0-9]+)')
+
+  const match = numbersWithDash.exec(highlight)
+  if (!match) return null
+
+  return {firstLine: match[1], lastLine: match[2]}
+}
+
+const LineWrapper = styled.div`
+  // Using negative and positive nth-child values to select the children.
+  pre .token-line:nth-child(n + ${props => props.range.firstLine}):nth-child(-n + ${props => props.range.lastLine}) {
+    // 16px is the padding of the react-live <pre> element that wraps the .token-line elements.
+    // The margin/padding combo extends the token-line elements so the background color reaches the border.
+    margin: 0px -16px;
+    padding: 0px 16px;
+    background-color: ${themeGet('colors.accent.subtle')};
+    // We use box-shadow instead of a border to avoid flickering when toggling the highlighting on/off.
+    box-shadow: inset 3px 0px 0px 0px ${themeGet('colors.accent.fg')};
+  }
+`
+
+function LineHighlighter({enabled, range, children}) {
+  if (!enabled || !range) return children
+
+  return <LineWrapper range={range}>{children}</LineWrapper>
+}
+
+function LiveCode({code, language, highlight, noinline, metastring}) {
   const theme = React.useContext(ThemeContext)
   const [liveCode, setLiveCode] = useState(code)
-  const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
+  const [pristine, setPristine] = useState(true)
+  const handleChange = updatedLiveCode => {
+    setLiveCode(updatedLiveCode)
+    setPristine(false)
+  }
 
   return (
     <Box sx={{flexDirection: 'column', mb: 3, display: 'flex'}}>
@@ -66,21 +101,23 @@ function LiveCode({code, language, noinline, metastring}) {
           </LivePreviewWrapper>
         </Box>
         <Box sx={{position: 'relative'}}>
-          <LiveEditor
-            onChange={handleChange}
-            theme={githubTheme}
-            ignoreTabKey={true}
-            padding={theme.space[3]}
-            style={{
-              fontFamily: theme.fonts.mono,
-              fontSize: '85%',
-              borderBottomLeftRadius: theme.radii[2],
-              borderBottomRightRadius: theme.radii[2],
-              border: '1px solid',
-              borderTop: 0,
-              borderColor: theme.colors.border.default
-            }}
-          />
+          <LineHighlighter range={parseHighlightRange(highlight)} enabled={pristine}>
+            <LiveEditor
+              onChange={handleChange}
+              theme={githubTheme}
+              ignoreTabKey={true}
+              padding={theme.space[3]}
+              style={{
+                fontFamily: theme.fonts.mono,
+                fontSize: '85%',
+                borderBottomLeftRadius: theme.radii[2],
+                borderBottomRightRadius: theme.radii[2],
+                border: '1px solid',
+                borderTop: 0,
+                borderColor: theme.colors.border.default
+              }}
+            />
+          </LineHighlighter>
           <Box sx={{top: 0, right: 0, p: 2, position: 'absolute'}}>
             <ClipboardCopy value={liveCode} />
           </Box>

package/src/components/nav-drawer.js

@@ -21,7 +21,7 @@ export function useNavDrawerState(breakpoint) {
     if (window.innerWidth >= breakpoint) {
       setOpen(false)
     }
-  }, [setOpen])
+  }, [setOpen, breakpoint])
 
   const debouncedOnResize = React.useCallback(debounce(onResize, 250), [onResize])
 

package/src/components/nav-items.js

@@ -1,11 +1,9 @@
 import {LinkExternalIcon} from '@primer/octicons-react'
-import {Link, themeGet} from '@primer/react'
 import {NavList} from '@primer/react/drafts'
 import {useLocation} from '@reach/router'
 import {Link as GatsbyLink, withPrefix} from 'gatsby'
 import preval from 'preval.macro'
 import React from 'react'
-import styled from 'styled-components'
 
 // This code needs to run at build-time so it can access the file system.
 const repositoryUrl = preval`

package/src/components/sidebar.js

@@ -19,7 +19,7 @@ function usePersistentScroll(id) {
     if (scrollPosition && ref.current) {
       ref.current.scrollTop = scrollPosition
     }
-  }, [])
+  }, [id])
 
   // Return props to spread onto the scroll container
   return {

package/src/components/source-link.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 function SourceLink({href}) {
   return (
-    <Link href={href}>
+    <Link href={href} target="_blank">
       <MarkGithubIcon />
       <Text sx={{ml: 2, display: 'inline-block'}}>View source</Text>
     </Link>

package/src/components/storybook-link.js

@@ -3,9 +3,9 @@ import React from 'react'
 
 function SourceLink({href}) {
   return (
-    <Link href={href}>
+    <Link href={href} target="_blank">
       <StorybookIcon />
-      <Text sx={{ml: 2, display: 'inline-block'}}>View storybook</Text>
+      <Text sx={{ml: 2, display: 'inline-block'}}>View Storybook</Text>
     </Link>
   )
 }

package/src/components/table-of-contents.js

@@ -1,8 +1,7 @@
-import {Box, Link} from '@primer/react'
 import React from 'react'
 import {NavList} from '@primer/react/drafts'
 
-function TableOfContents({'aria-labelledby': ariaLabelledBy, items, depth}) {
+function TableOfContents({'aria-labelledby': ariaLabelledBy, items}) {
   return (
     <NavList aria-labelledby={ariaLabelledBy}>
       {items.map(item => (
@@ -14,8 +13,4 @@ function TableOfContents({'aria-labelledby': ariaLabelledBy, items, depth}) {
   )
 }
 
-TableOfContents.defaultProps = {
-  depth: 0
-}
-
 export default TableOfContents

package/src/primer-nav.yml

@@ -20,6 +20,8 @@
       url: https://primer.style/css
     - title: React
       url: https://primer.style/react
+    - title: React Brand
+      url: https://primer.style/brand
     - title: ViewComponents
       url: https://primer.style/view-components
 - title: Contribute