@primer/doctocat-nextjs 0.0.2-rc.ac6ab68 → 0.0.2-rc.de031ea

package/CHANGELOG.md

@@ -12,4 +12,6 @@
 
   - Added anchor links to headings to match current functionality on primer.style
 
+- [`b49f218`](https://github.com/primer/doctocat-nextjs/commit/b49f218e9bbc2de720476e21888956bee6081967) Thanks [@rezrah](https://github.com/rezrah)! - Removed sidebar links and added skip to main content a11y link
+
 - [#2](https://github.com/primer/doctocat-nextjs/pull/2) [`2742b32`](https://github.com/primer/doctocat-nextjs/commit/2742b3214e7a53416d23f0459dc389f7c22cf5a1) Thanks [@rezrah](https://github.com/rezrah)! - Remove code blocks stylesheet, now merged into global.css

package/components/layout/header/Header.tsx

@@ -4,7 +4,7 @@ import {Heading, Stack, Text} from '@primer/react-brand'
 import clsx from 'clsx'
 import {MdxFile, PageMapItem} from 'nextra'
 import type {PageItem} from 'nextra/normalize-pages'
-import React, {useEffect, useMemo} from 'react'
+import React, {useCallback, useEffect, useMemo} from 'react'
 import {debounce} from 'lodash'
 
 import Link from 'next/link'
@@ -37,6 +37,12 @@ export function Header({pageMap, docsDirectories, siteTitle}: HeaderProps) {
   const [searchTerm, setSearchTerm] = React.useState<string | undefined>('')
   const [activeDescendant] = React.useState<number>(-1)
 
+  useEffect(() => {
+    if (isSearchOpen && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isSearchOpen])
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -152,6 +158,10 @@ export function Header({pageMap, docsDirectories, siteTitle}: HeaderProps) {
     alert(`Name: ${inputRef.current.value}`)
   }
 
+  const handleSearchButtonOpenClick = useCallback(() => {
+    setIsSearchOpen(true)
+  }, [])
+
   return (
     <nav className={clsx(styles.Header, isSearchOpen && styles['Header--searchAreaOpen'])}>
       <Link href="/" className={styles.Header__siteTitle}>
@@ -292,7 +302,7 @@ export function Header({pageMap, docsDirectories, siteTitle}: HeaderProps) {
             variant="invisible"
             aria-label={`Open search`}
             sx={{display: ['flex', null, 'none']}}
-            onClick={() => setIsSearchOpen(true)}
+            onClick={handleSearchButtonOpenClick}
           />
           <Box sx={{display: ['flex', null, 'none']}}>
             <IconButton

package/components/layout/root-layout/Theme.tsx

@@ -35,6 +35,7 @@ import bodyStyles from '../../../css/prose.module.css'
 import {IndexCards} from '../index-cards/IndexCards'
 import {useColorMode} from '../../context/color-modes/useColorMode'
 import {getComponents} from '../../mdx-components/mdx-components'
+import {SkipToMainContent} from '../skip-to-main-content/SkipToMainContent'
 
 const {publicRuntimeConfig} = getConfig()
 
@@ -81,6 +82,7 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                     zIndex: 99,
                   }}
                 >
+                  <SkipToMainContent href="#main">Skip to main content</SkipToMainContent>
                   <Header
                     pageMap={pageMap}
                     docsDirectories={docsDirectories}
@@ -90,7 +92,7 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                 </PRCBox>
                 <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
                   <PageLayout.Content padding="normal">
-                    <main>
+                    <main id="main">
                       <PRCBox sx={!isHomePage && {display: 'flex', maxWidth: 1600, margin: '0 auto'}}>
                         <PRCBox sx={!isHomePage && {maxWidth: 800, width: '100%', margin: '0 auto'}}>
                           <Stack direction="vertical" padding="none" gap="spacious">

package/components/layout/sidebar/Sidebar.tsx

@@ -6,17 +6,7 @@ import {useRouter} from 'next/router'
 import getConfig from 'next/config'
 
 import styles from './Sidebar.module.css'
-import {
-  BookmarkIcon,
-  BrowserIcon,
-  Icon,
-  ImageIcon,
-  LinkExternalIcon,
-  OrganizationIcon,
-  RepoIcon,
-  StackIcon,
-  StarIcon,
-} from '@primer/octicons-react'
+import {LinkExternalIcon} from '@primer/octicons-react'
 import type {ThemeConfig} from '../../../index'
 
 type SidebarProps = {
@@ -36,29 +26,6 @@ type DocsItem = (MdxFile | FolderWithoutChildren) & {
 
 const {publicRuntimeConfig} = getConfig()
 
-function getOcticonForType(type?: string): Icon | undefined {
-  if (!type) return undefined
-
-  switch (type) {
-    case 'repo':
-      return RepoIcon
-    case 'org':
-      return OrganizationIcon
-    case 'bookmark':
-      return BookmarkIcon
-    case 'star':
-      return StarIcon
-    case 'browser':
-      return BrowserIcon
-    case 'stack':
-      return StackIcon
-    case 'img':
-      return ImageIcon
-    default:
-      return StarIcon
-  }
-}
-
 export function Sidebar({pageMap}: SidebarProps) {
   const router = useRouter()
 
@@ -167,9 +134,7 @@ export function Sidebar({pageMap}: SidebarProps) {
         {sidebarLinks && sidebarLinks.length > 0 && (
           <NavList.Group title="" sx={{mb: 24}}>
             {sidebarLinks.map(link => {
-              const {leadingIcon} = link
               const isExternalUrl = link.href.startsWith('http')
-              const LeadingIcon = getOcticonForType(leadingIcon)
 
               return (
                 <NavList.Item
@@ -178,7 +143,6 @@ export function Sidebar({pageMap}: SidebarProps) {
                   href={link.href}
                   target={isExternalUrl ? '_blank' : undefined}
                 >
-                  <NavList.LeadingVisual>{LeadingIcon && <LeadingIcon />}</NavList.LeadingVisual>
                   {link.title}
                   {isExternalUrl && (
                     <NavList.TrailingVisual>

package/components/layout/skip-to-main-content/SkipToMainContent.module.css

@@ -0,0 +1,17 @@
+.SkipToMainContent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  padding: var(--base-size-16);
+  background-color: var(--base-color-scale-blue-5);
+  color: var(--base-color-scale-white-0);
+}
+.SkipToMainContent:not(:focus) {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+}

package/components/layout/skip-to-main-content/SkipToMainContent.tsx

@@ -0,0 +1,14 @@
+import React, {HTMLAttributes, PropsWithChildren} from 'react'
+import styles from './SkipToMainContent.module.css'
+
+type SkipToMainContentProps = {
+  href: string
+} & HTMLAttributes<HTMLAnchorElement>
+
+export function SkipToMainContent({children, href, ...rest}: PropsWithChildren<SkipToMainContentProps>) {
+  return (
+    <a href={href} className={styles.SkipToMainContent} {...rest}>
+      {children}
+    </a>
+  )
+}

package/components/layout/table-of-contents/TableOfContents.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import React, {useEffect, useMemo} from 'react'
 import {NavList} from '@primer/react'
 import {Text} from '@primer/react-brand'
 import {Heading as HeadingType} from 'nextra'
@@ -10,6 +10,8 @@ type TableOfContentsProps = {
 }
 
 export function TableOfContents({headings}: TableOfContentsProps) {
+  const depth2Headings = useMemo(() => headings.filter(heading => heading.depth === 2), [headings])
+
   useEffect(() => {
     const observer = new IntersectionObserver(
       entries => {
@@ -40,7 +42,7 @@ export function TableOfContents({headings}: TableOfContentsProps) {
       },
     )
 
-    for (const heading of headings) {
+    for (const heading of depth2Headings) {
       const el = document.getElementById(heading.id)
       if (el) {
         observer.observe(el)
@@ -50,7 +52,7 @@ export function TableOfContents({headings}: TableOfContentsProps) {
     return () => {
       observer.disconnect()
     }
-  }, [headings])
+  }, [depth2Headings])
 
   return (
     <aside className={styles.wrapper}>
@@ -58,7 +60,7 @@ export function TableOfContents({headings}: TableOfContentsProps) {
         On this page
       </Text>
       <NavList>
-        {headings.map(heading => (
+        {depth2Headings.map(heading => (
           <NavList.Item
             className={styles.item}
             key={heading.id}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.0.2-rc.ac6ab68",
+  "version": "0.0.2-rc.de031ea",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "scripts": {

package/types.ts

@@ -3,6 +3,5 @@ export type ThemeConfig = {
   sidebarLinks?: {
     title: string
     href: string
-    leadingIcon?: 'repo' | 'org' | 'bookmark' | 'star' | 'img' | 'browser' | 'stack'
   }[]
 }