@primer/gatsby-theme-doctocat 4.6.0 → 4.6.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @primer/gatsby-theme-doctocat
 
+## 4.6.2
+
+### Patch Changes
+
+- [`545c1ef`](https://github.com/primer/doctocat/commit/545c1ef96087e3da1990c206e484f0bd06e5eb39) [#618](https://github.com/primer/doctocat/pull/618) Thanks [@josepmartins](https://github.com/josepmartins)! - Add missing `pathPrefix`` to the selected state in Underlinenav items
+
+## 4.6.1
+
+### Patch Changes
+
+- [`e2cd01a`](https://github.com/primer/doctocat/commit/e2cd01a79e668c21a762e82a5f1b914be0d0c5b6) [#613](https://github.com/primer/doctocat/pull/613) Thanks [@josepmartins](https://github.com/josepmartins)! - - Fix the primer navigation about link
+  - Removes mono space font in the nav drawer + fontweight bold to match top left navigation
+
 ## 4.6.0
 
 ### Minor Changes

package/package.json

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

package/src/components/header.js

@@ -5,6 +5,7 @@ import {Link as GatsbyLink} from 'gatsby'
 import React from 'react'
 import primerNavItems from '../primer-nav.yml'
 import useSiteMetadata from '../use-site-metadata'
+import usePathPrefix from '../use-path-prefix'
 import MobileSearch from './mobile-search'
 import NavDrawer, {useNavDrawerState} from './nav-drawer'
 import Search from './search'
@@ -17,6 +18,7 @@ function Header({isSearchEnabled, path}) {
   const [isNavDrawerOpen, setIsNavDrawerOpen] = useNavDrawerState(theme.breakpoints[2])
   const [isMobileSearchOpen, setIsMobileSearchOpen] = React.useState(false)
   const siteMetadata = useSiteMetadata()
+  const pathPrefix = usePathPrefix()
 
   return (
     <ThemeProvider>
@@ -92,7 +94,7 @@ function Header({isSearchEnabled, path}) {
           </Box>
           <Box>
             <Box sx={{display: ['none', null, null, 'flex'], alignItems: 'center'}}>
-              <PrimerNavItems path={path} siteMetadata={siteMetadata} items={primerNavItems} />
+              <PrimerNavItems path={path} siteMetadata={siteMetadata} pathPrefix={pathPrefix} items={primerNavItems} />
               {isSearchEnabled ? (
                 <Box sx={{display: ['none', null, null, 'block'], ml: 3}}>
                   <Search />
@@ -138,7 +140,11 @@ Header.defaultProps = {
   isSearchEnabled: true
 }
 
-function PrimerNavItems({siteMetadata, items, path}) {
+function PrimerNavItems({siteMetadata, items, path, pathPrefix}) {
+  console.log('header url', siteMetadata.header.url)
+  console.log('pathPrefix', pathPrefix)
+  console.log('path', path)
+
   return (
     <>
       <VisuallyHidden>
@@ -147,7 +153,12 @@ function PrimerNavItems({siteMetadata, items, path}) {
       <UnderlineNav aria-label="main navigation" sx={{border: 'none'}}>
         {items.map((item, index) => {
           return (
-            <UnderlineNav.Link key={index} href={item.url} selected={item.url === siteMetadata.header.url + path}>
+            <UnderlineNav.Link
+              key={index}
+              href={item.url}
+              selected={item.url === siteMetadata.header.url + pathPrefix + path}
+              sx={{fontSize: 2, lineHeight: 'condensed'}}
+            >
               {item.title}
             </UnderlineNav.Link>
           )

package/src/components/nav-drawer.js

@@ -60,7 +60,7 @@ function NavDrawer({isOpen, onDismiss}) {
             }}
           >
             <Box sx={{py: 3, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
-              <Link href="https://primer.style" sx={{fontFamily: 'mono', color: 'inherit'}}>
+              <Link href="https://primer.style" sx={{fontWeight: 'bold', color: 'inherit'}}>
                 Primer
               </Link>
               <Button aria-label="Close" onClick={onDismiss}>
@@ -86,7 +86,7 @@ function NavDrawer({isOpen, onDismiss}) {
               <Link
                 as={GatsbyLink}
                 to="/"
-                sx={{display: 'inline-block', color: 'inherit', fontFamily: 'mono', mx: 4, mt: 4}}
+                sx={{display: 'inline-block', color: 'inherit', fontWeight: 'bold', mx: 4, mt: 4}}
               >
                 {siteMetadata.title}
               </Link>
@@ -111,7 +111,8 @@ function PrimerNavItems({items}) {
           borderRadius: 0,
           borderTopWidth: index !== 0 ? 1 : 0,
           borderColor: 'border.muted',
-          p: 4,
+          px: 4,
+          py: 3,
           borderStyle: 'solid'
         }}
       >

package/src/primer-nav.yml

@@ -1,4 +1,4 @@
 - title: Brand
   url: https://primer.style/brand
 - title: About
-  url: https://primer.style/design/guides/about
+  url: https://primer.style/design/about

package/src/use-path-prefix.js

@@ -0,0 +1,14 @@
+import {useStaticQuery, graphql} from 'gatsby'
+
+function usePathPrefix() {
+  const data = useStaticQuery(graphql`
+    {
+      site {
+        pathPrefix
+      }
+    }
+  `)
+  return data.site.pathPrefix
+}
+
+export default usePathPrefix