@primer/doctocat-nextjs 0.5.4-rc.bcfc99f → 0.5.4-rc.bd27497

package/CHANGELOG.md

@@ -4,20 +4,9 @@
 
 ### Patch Changes
 
-- [#51](https://github.com/primer/doctocat-nextjs/pull/51) [`4c76c4f`](https://github.com/primer/doctocat-nextjs/commit/4c76c4f5ccd248ec7d1f448c054808287a3ff51d) Thanks [@rezrah](https://github.com/rezrah)! - Add auto-collapsed React code blocks for large code snippets. This feature only applies to code fences with the `jsx live` language identifiers.
-
-  E.g.
-
-  ```jsx live
-  <>Your code</>
-  ```
-
 - [#48](https://github.com/primer/doctocat-nextjs/pull/48) [`ce73c24`](https://github.com/primer/doctocat-nextjs/commit/ce73c24b2e4e924667bf7446a504bd88d8f2ccf0) Thanks [@rezrah](https://github.com/rezrah)! - - Fix inline code font-size in markdown headings. Now inherits size used in the heading.
-
   - Increased spacing below React code blocks, which was previously too small.
 
-- [#50](https://github.com/primer/doctocat-nextjs/pull/50) [`5d67989`](https://github.com/primer/doctocat-nextjs/commit/5d679895408c1a58342419692db4234dfddefd80) Thanks [@rezrah](https://github.com/rezrah)! - Add `menu-position` frontmatter support for custom sidebar navigation ordering
-
 ## 0.5.3
 
 ### Patch Changes

package/components/layout/code-block/ReactCodeBlock.module.css

@@ -28,11 +28,6 @@
   font-family: var(--brand-fontStack-monospace);
   background-color: var(--brand-color-canvas-subtle);
   overflow: auto;
-  position: relative;
-}
-
-.EditorWrapper {
-  position: relative;
 }
 
 .Editor pre {
@@ -42,11 +37,6 @@
   background-color: var(--brand-color-canvas-subtle) !important;
 }
 
-.Editor--is-collapsed {
-  max-height: 400px;
-  overflow: hidden;
-}
-
 .Toolbar {
   display: flex;
   gap: var(--base-size-8);
@@ -77,44 +67,3 @@
 .colorModeButtonActive {
   background-color: var(--brand-color-canvas-subtle);
 }
-
-.collapseButton {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  background-color: var(--brand-color-canvas-subtle);
-  border: none;
-  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-  border-bottom-left-radius: var(--brand-borderRadius-medium);
-  border-bottom-right-radius: var(--brand-borderRadius-medium);
-  padding: var(--base-size-8) var(--base-size-12);
-  font-size: var(--brand-text-size-100);
-  font-family: var(--brand-fontStack-system);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--base-size-4);
-  z-index: 10;
-  transition: background-color var(--brand-animation-duration-default) var(--brand-animation-easing-glide);
-}
-
-.collapseButton--collapsed::before {
-  content: '';
-  position: absolute;
-  top: -41px;
-  left: 0;
-  width: 100%;
-  height: 40px;
-  background: linear-gradient(to bottom, transparent, var(--brand-color-canvas-subtle));
-  z-index: -1;
-}
-
-.collapseButton:hover,
-.collapseButton:focus {
-  background-color: var(--brand-color-canvas-default);
-}
-
-.collapseLabel {
-  font-size: var(--brand-text-size-100) !important;
-}

package/components/layout/code-block/ReactCodeBlock.tsx

@@ -1,66 +1,30 @@
 'use client'
-import React, {type PropsWithChildren, useCallback, useState, useRef, useEffect, useId} from 'react'
+import React, {PropsWithChildren, useCallback, useState} from 'react'
 import clsx from 'clsx'
 import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live'
 import {useColorMode} from '../../context/color-modes/useColorMode'
 import {useConfig} from '../../context/useConfig'
 import styles from './ReactCodeBlock.module.css'
 import {ActionBar, Button, ThemeProvider} from '@primer/react'
-import {Text} from '@primer/react-brand'
-import {CopyIcon, MoonIcon, SunIcon, UndoIcon, UnfoldIcon, FoldIcon} from '@primer/octicons-react'
+import {CopyIcon, MoonIcon, SunIcon, UndoIcon} from '@primer/octicons-react'
 import {colorModes} from '../../context/color-modes/context'
 
 import {lightTheme, darkTheme} from './syntax-highlighting-themes'
 import {codeTransformer} from './code-transformer'
 
-const COLLAPSE_HEIGHT = 400 // TODO: Hoist this to config to make user customizable eventually
-
 type ReactCodeBlockProps = {
   'data-language': string
   'data-filename'?: string
   jsxScope: Record<string, unknown>
 } & PropsWithChildren<HTMLElement>
 
-const getFocusableElements = () => {
-  const focusableElementsQuery = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-
-  return Array.from(document.querySelectorAll<HTMLElement>(focusableElementsQuery)).filter(el => {
-    const style = window.getComputedStyle(el)
-    return style.display !== 'none' && style.visibility !== 'hidden' && !el.hasAttribute('disabled')
-  })
-}
-
 export function ReactCodeBlock(props: ReactCodeBlockProps) {
-  const uniqueId = useId()
   const {colorMode, setColorMode} = useColorMode()
   const {basePath} = useConfig()
   const initialCode = getCodeFromChildren(props.children)
   const [code, setCode] = useState(initialCode)
-  const rootRef = useRef<HTMLDivElement>(null)
-  const [isCodePaneCollapsed, setIsCodePaneCollapsed] = useState<boolean | null>(null)
-  const [initialPosition, setInitialPosition] = useState<number | null>(null)
-  const editorRef = useRef<HTMLDivElement>(null)
-  const resetButtonRef = useRef<HTMLButtonElement>(null)
   const shouldShowPreview = ['tsx', 'jsx'].includes(props['data-language'])
 
-  // scroll back to the initial y pos on collapse state change
-  useEffect(() => {
-    if (rootRef.current && initialPosition === null) {
-      const rect = rootRef.current.getBoundingClientRect()
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-      setInitialPosition(rect.top + scrollTop)
-    }
-  }, [initialPosition])
-
-  useEffect(() => {
-    if (editorRef.current && isCodePaneCollapsed === null) {
-      const editorHeight = editorRef.current.scrollHeight
-      setIsCodePaneCollapsed(editorHeight > COLLAPSE_HEIGHT)
-    }
-  }, [code, isCodePaneCollapsed])
-
-  const shouldShowCollapse = isCodePaneCollapsed !== null && (editorRef.current?.scrollHeight || 0) > COLLAPSE_HEIGHT
-
   /**
    * Transforms code to prepend basePath to img src attributes
    */
@@ -77,62 +41,12 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
     navigator.clipboard.writeText(code)
   }, [code])
 
-  const handleCollapsibleCodePane = useCallback(() => {
-    const newCollapsedState = !isCodePaneCollapsed
-
-    if (!isCodePaneCollapsed && newCollapsedState && initialPosition !== null) {
-      requestAnimationFrame(() => {
-        window.scrollTo({
-          top: initialPosition,
-          behavior: 'smooth',
-        })
-      })
-    }
-
-    setIsCodePaneCollapsed(newCollapsedState)
-  }, [isCodePaneCollapsed, initialPosition])
-
   const noInline = props['data-filename'] === 'noinline' || false
 
-  useEffect(() => {
-    const editor = editorRef.current
-
-    if (!editor) return
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== 'Tab') {
-        return
-      }
-
-      if (e.shiftKey) {
-        e.preventDefault()
-        // We know that the previous focusable element is always the reset button
-        resetButtonRef.current?.focus()
-        return
-      }
-
-      const focusableElements = getFocusableElements()
-
-      const currentIndex = focusableElements.findIndex(el => el === resetButtonRef.current)
-
-      if (currentIndex !== -1) {
-        e.preventDefault()
-        const nextIndex = currentIndex + 1
-        focusableElements[nextIndex]?.focus()
-      }
-    }
-
-    editor.addEventListener('keydown', onKeyDown)
-
-    return () => {
-      editor.removeEventListener('keydown', onKeyDown)
-    }
-  }, [])
-
   return (
     <>
       <LiveProvider transformCode={transformCodeWithBasePath} code={code} scope={props.jsxScope} noInline={noInline}>
-        <div ref={rootRef} className={clsx(styles.CodeBlock, 'custom-component')}>
+        <div className={clsx(styles.CodeBlock, 'custom-component')}>
           {shouldShowPreview && (
             <div>
               <div className={styles.colorModeMenu}>
@@ -162,32 +76,12 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
             <Button size="small" leadingVisual={CopyIcon} onClick={handleCopy}>
               Copy
             </Button>
-            <Button size="small" leadingVisual={UndoIcon} onClick={handleReset} ref={resetButtonRef}>
+            <Button size="small" leadingVisual={UndoIcon} onClick={handleReset}>
               Reset
             </Button>
           </div>
-          <div className={styles.EditorWrapper}>
-            <div
-              className={clsx(styles.Editor, isCodePaneCollapsed && styles['Editor--is-collapsed'])}
-              ref={editorRef}
-              id={`${uniqueId}-code-editor-content`}
-            >
-              <LiveEditor theme={colorMode === 'light' ? lightTheme : darkTheme} onChange={setCode} />
-            </div>
-            {shouldShowCollapse && (
-              <button
-                className={clsx(styles.collapseButton, isCodePaneCollapsed && styles['collapseButton--collapsed'])}
-                onClick={handleCollapsibleCodePane}
-                aria-expanded={!isCodePaneCollapsed}
-                aria-controls={`${uniqueId}-code-editor-content`}
-                aria-label={isCodePaneCollapsed ? 'Show full code block' : 'Collapse code block'}
-              >
-                <Text size="100" className={styles.collapseLabel}>
-                  {isCodePaneCollapsed ? 'Show full code' : 'Collapse code'}
-                </Text>
-                <Text variant="muted">{isCodePaneCollapsed ? <UnfoldIcon /> : <FoldIcon />}</Text>
-              </button>
-            )}
+          <div className={styles.Editor}>
+            <LiveEditor theme={colorMode === 'light' ? lightTheme : darkTheme} onChange={setCode} />
           </div>
           {shouldShowPreview && (
             <div className={styles.Error}>

package/components/layout/sidebar/Sidebar.tsx

@@ -82,29 +82,7 @@ export function Sidebar({pageMap}: SidebarProps) {
                 <NextLink href={item.route}>{subNavName}</NextLink>
               </NavList.GroupHeading>
               {item.children
-                .sort((a, b) => {
-                  // make sure index page is first
-                  if ((a as MdxFile).name === 'index') return -1
-                  if ((b as MdxFile).name === 'index') return 1
-
-                  // Check for menu-position property in frontmatter
-                  const aPos = (a as MdxFile).frontMatter?.['menu-position']
-                  const bPos = (b as MdxFile).frontMatter?.['menu-position']
-
-                  // If both have menu-position, sort by menu-position
-                  if (typeof aPos === 'number' && typeof bPos === 'number') {
-                    return aPos - bPos
-                  }
-
-                  // If only one has menu-position, it comes first
-                  if (typeof aPos === 'number') return -1
-                  if (typeof bPos === 'number') return 1
-
-                  // Neither has menu-position, sort alphabetically by title or name
-                  const aTitle = (a as MdxFile).frontMatter?.title || (a as MdxFile).name
-                  const bTitle = (b as MdxFile).frontMatter?.title || (b as MdxFile).name
-                  return aTitle.localeCompare(bTitle)
-                })
+                .sort((a, b) => ((a as MdxFile).name === 'index' ? -1 : (b as MdxFile).name === 'index' ? 1 : 0)) // puts index page first
                 // only show index page if it has show-tabs
                 .filter(child => (child as MdxFile).name !== 'index' || hasShowTabs(child as ExtendedPageItem))
                 .map(child => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.5.4-rc.bcfc99f",
+  "version": "0.5.4-rc.bd27497",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",

package/types.ts

@@ -31,7 +31,6 @@ export type FrontMatter = {
   description?: string
   filePath?: string
   keywords?: string[]
-  menu_position?: number
   related?: {
     title: string
     href: string