@primer/doctocat-nextjs 0.5.4-rc.3b1107b → 0.5.4-rc.bd27497
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -5,11 +5,8 @@
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
7
7
|
- [#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.
|
|
8
|
-
|
|
9
8
|
- Increased spacing below React code blocks, which was previously too small.
|
|
10
9
|
|
|
11
|
-
- [#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
|
|
12
|
-
|
|
13
10
|
## 0.5.3
|
|
14
11
|
|
|
15
12
|
### Patch Changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client'
|
|
2
|
-
import React, {
|
|
2
|
+
import React, {PropsWithChildren, useCallback, useState} from 'react'
|
|
3
3
|
import clsx from 'clsx'
|
|
4
4
|
import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live'
|
|
5
5
|
import {useColorMode} from '../../context/color-modes/useColorMode'
|
|
@@ -18,23 +18,12 @@ type ReactCodeBlockProps = {
|
|
|
18
18
|
jsxScope: Record<string, unknown>
|
|
19
19
|
} & PropsWithChildren<HTMLElement>
|
|
20
20
|
|
|
21
|
-
const getFocusableElements = () => {
|
|
22
|
-
const focusableElementsQuery = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
23
|
-
|
|
24
|
-
return Array.from(document.querySelectorAll<HTMLElement>(focusableElementsQuery)).filter(el => {
|
|
25
|
-
const style = window.getComputedStyle(el)
|
|
26
|
-
return style.display !== 'none' && style.visibility !== 'hidden' && !el.hasAttribute('disabled')
|
|
27
|
-
})
|
|
28
|
-
}
|
|
29
|
-
|
|
30
21
|
export function ReactCodeBlock(props: ReactCodeBlockProps) {
|
|
31
22
|
const {colorMode, setColorMode} = useColorMode()
|
|
32
23
|
const {basePath} = useConfig()
|
|
33
24
|
const initialCode = getCodeFromChildren(props.children)
|
|
34
25
|
const [code, setCode] = useState(initialCode)
|
|
35
26
|
const shouldShowPreview = ['tsx', 'jsx'].includes(props['data-language'])
|
|
36
|
-
const editorRef = useRef<HTMLDivElement>(null)
|
|
37
|
-
const resetButtonRef = useRef<HTMLButtonElement>(null)
|
|
38
27
|
|
|
39
28
|
/**
|
|
40
29
|
* Transforms code to prepend basePath to img src attributes
|
|
@@ -54,41 +43,6 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
|
|
|
54
43
|
|
|
55
44
|
const noInline = props['data-filename'] === 'noinline' || false
|
|
56
45
|
|
|
57
|
-
useEffect(() => {
|
|
58
|
-
const editor = editorRef.current
|
|
59
|
-
|
|
60
|
-
if (!editor) return
|
|
61
|
-
|
|
62
|
-
const onKeyDown = (e: KeyboardEvent) => {
|
|
63
|
-
if (e.key !== 'Tab') {
|
|
64
|
-
return
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
if (e.shiftKey) {
|
|
68
|
-
e.preventDefault()
|
|
69
|
-
// We know that the previous focusable element is always the reset button
|
|
70
|
-
resetButtonRef.current?.focus()
|
|
71
|
-
return
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
const focusableElements = getFocusableElements()
|
|
75
|
-
|
|
76
|
-
const currentIndex = focusableElements.findIndex(el => el === resetButtonRef.current)
|
|
77
|
-
|
|
78
|
-
if (currentIndex !== -1) {
|
|
79
|
-
e.preventDefault()
|
|
80
|
-
const nextIndex = currentIndex + 1
|
|
81
|
-
focusableElements[nextIndex]?.focus()
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
editor.addEventListener('keydown', onKeyDown)
|
|
86
|
-
|
|
87
|
-
return () => {
|
|
88
|
-
editor.removeEventListener('keydown', onKeyDown)
|
|
89
|
-
}
|
|
90
|
-
}, [])
|
|
91
|
-
|
|
92
46
|
return (
|
|
93
47
|
<>
|
|
94
48
|
<LiveProvider transformCode={transformCodeWithBasePath} code={code} scope={props.jsxScope} noInline={noInline}>
|
|
@@ -122,11 +76,11 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
|
|
|
122
76
|
<Button size="small" leadingVisual={CopyIcon} onClick={handleCopy}>
|
|
123
77
|
Copy
|
|
124
78
|
</Button>
|
|
125
|
-
<Button size="small" leadingVisual={UndoIcon} onClick={handleReset}
|
|
79
|
+
<Button size="small" leadingVisual={UndoIcon} onClick={handleReset}>
|
|
126
80
|
Reset
|
|
127
81
|
</Button>
|
|
128
82
|
</div>
|
|
129
|
-
<div className={styles.Editor}
|
|
83
|
+
<div className={styles.Editor}>
|
|
130
84
|
<LiveEditor theme={colorMode === 'light' ? lightTheme : darkTheme} onChange={setCode} />
|
|
131
85
|
</div>
|
|
132
86
|
{shouldShowPreview && (
|
|
@@ -82,29 +82,7 @@ export function Sidebar({pageMap}: SidebarProps) {
|
|
|
82
82
|
<NextLink href={item.route}>{subNavName}</NextLink>
|
|
83
83
|
</NavList.GroupHeading>
|
|
84
84
|
{item.children
|
|
85
|
-
.sort((a, b) =>
|
|
86
|
-
// make sure index page is first
|
|
87
|
-
if ((a as MdxFile).name === 'index') return -1
|
|
88
|
-
if ((b as MdxFile).name === 'index') return 1
|
|
89
|
-
|
|
90
|
-
// Check for menu-position property in frontmatter
|
|
91
|
-
const aPos = (a as MdxFile).frontMatter?.['menu-position']
|
|
92
|
-
const bPos = (b as MdxFile).frontMatter?.['menu-position']
|
|
93
|
-
|
|
94
|
-
// If both have menu-position, sort by menu-position
|
|
95
|
-
if (typeof aPos === 'number' && typeof bPos === 'number') {
|
|
96
|
-
return aPos - bPos
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
// If only one has menu-position, it comes first
|
|
100
|
-
if (typeof aPos === 'number') return -1
|
|
101
|
-
if (typeof bPos === 'number') return 1
|
|
102
|
-
|
|
103
|
-
// Neither has menu-position, sort alphabetically by title or name
|
|
104
|
-
const aTitle = (a as MdxFile).frontMatter?.title || (a as MdxFile).name
|
|
105
|
-
const bTitle = (b as MdxFile).frontMatter?.title || (b as MdxFile).name
|
|
106
|
-
return aTitle.localeCompare(bTitle)
|
|
107
|
-
})
|
|
85
|
+
.sort((a, b) => ((a as MdxFile).name === 'index' ? -1 : (b as MdxFile).name === 'index' ? 1 : 0)) // puts index page first
|
|
108
86
|
// only show index page if it has show-tabs
|
|
109
87
|
.filter(child => (child as MdxFile).name !== 'index' || hasShowTabs(child as ExtendedPageItem))
|
|
110
88
|
.map(child => {
|
package/package.json
CHANGED