@redocly/theme 0.1.27 → 0.1.28
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/Button/Button.js +3 -3
- package/CodeBlock/CodeBlock.js +1 -1
- package/CopyButton/CopyButton.js +17 -1
- package/Footer/Footer.js +2 -1
- package/Footer/FooterColumn.js +1 -1
- package/Footer/FooterColumns.d.ts +2 -2
- package/Footer/FooterColumns.js +1 -1
- package/JsonViewer/JsonViewer.d.ts +2 -0
- package/JsonViewer/JsonViewer.js +53 -22
- package/Markdown/Admonition.js +1 -1
- package/Markdown/CodeSample/CodeSample.js +17 -1
- package/Markdown/Heading.js +1 -1
- package/Markdown/Mermaid.js +1 -1
- package/Markdown/Sup.d.ts +2 -0
- package/Markdown/Sup.js +19 -0
- package/Markdown/Tabs/Tabs.js +17 -1
- package/Markdown/index.d.ts +4 -3
- package/Markdown/index.js +4 -3
- package/Navbar/MobileNavbarDropdown.d.ts +8 -0
- package/Navbar/MobileNavbarDropdown.js +21 -0
- package/Navbar/MobileNavbarItem.d.ts +15 -0
- package/Navbar/MobileNavbarItem.js +102 -0
- package/Navbar/MobileNavbarMenu.d.ts +6 -0
- package/Navbar/MobileNavbarMenu.js +32 -0
- package/Navbar/MobileNavbarMenuButton.d.ts +4 -0
- package/Navbar/MobileNavbarMenuButton.js +19 -0
- package/Navbar/Navbar.js +26 -4
- package/Navbar/NavbarDropdown.js +1 -1
- package/Navbar/NavbarItem.d.ts +9 -3
- package/Navbar/NavbarItem.js +9 -9
- package/Navbar/NavbarMenu.js +3 -2
- package/PageNavigation/NextPageLink.js +4 -4
- package/PageNavigation/PreviousPageLink.js +4 -4
- package/Panel/PanelComponent.js +18 -2
- package/Search/Autocomplete.js +18 -2
- package/Search/utils.js +17 -1
- package/Sidebar/SidebarLayout.js +17 -1
- package/SourceCode/SourceCode.d.ts +10 -3
- package/SourceCode/SourceCode.js +10 -5
- package/TableOfContent/TableOfContent.js +4 -4
- package/globalStyle.js +2 -2
- package/hooks/useActiveHeading.js +17 -1
- package/hooks/useActiveSectionId.js +17 -1
- package/hooks/useControl.js +17 -1
- package/hooks/useMobileMenu.js +17 -1
- package/hooks/useNavbarHeight.js +17 -1
- package/package.json +1 -1
- package/src/Button/Button.tsx +5 -1
- package/src/CodeBlock/CodeBlock.ts +12 -0
- package/src/Footer/Footer.tsx +4 -3
- package/src/Footer/FooterColumn.tsx +3 -1
- package/src/Footer/FooterColumns.tsx +3 -3
- package/src/JsonViewer/JsonViewer.tsx +55 -40
- package/src/Markdown/Admonition.tsx +1 -1
- package/src/Markdown/Heading.tsx +1 -1
- package/src/Markdown/Mermaid.tsx +1 -1
- package/src/Markdown/Sup.tsx +8 -0
- package/src/Markdown/index.ts +4 -3
- package/src/Navbar/MobileNavbarDropdown.tsx +37 -0
- package/src/Navbar/MobileNavbarItem.tsx +116 -0
- package/src/Navbar/MobileNavbarMenu.tsx +106 -0
- package/src/Navbar/MobileNavbarMenuButton.tsx +13 -0
- package/src/Navbar/Navbar.tsx +11 -3
- package/src/Navbar/NavbarDropdown.tsx +1 -1
- package/src/Navbar/NavbarItem.tsx +9 -8
- package/src/Navbar/NavbarMenu.tsx +9 -4
- package/src/PageNavigation/NextPageLink.tsx +3 -3
- package/src/PageNavigation/PreviousPageLink.tsx +3 -3
- package/src/SourceCode/SourceCode.tsx +32 -5
- package/src/TableOfContent/TableOfContent.tsx +3 -3
- package/src/globalStyle.ts +2 -0
- package/src/types/portal/src/client/app/Sidebar/types.d.ts +2 -1
- package/src/types/portal/src/server/constants.d.ts +2 -0
- package/src/types/portal/src/server/dev-server/types.d.ts +22 -0
- package/src/types/portal/src/server/plugins/markdown/types.d.ts +15 -5
- package/src/types/portal/src/server/plugins/portal-config/get-frontmatter-keys-to-resolve.d.ts +2 -0
- package/src/types/portal/src/server/plugins/portal-config/types.d.ts +6 -2
- package/src/types/portal/src/server/plugins/reference-docs/utils.d.ts +26 -0
- package/src/types/portal/src/server/plugins/types.d.ts +29 -12
- package/src/types/portal/src/server/store.d.ts +16 -16
- package/src/types/portal/src/server/utils/fs.d.ts +2 -1
- package/src/types/portal/src/server/utils/index.d.ts +1 -0
- package/src/types/portal/src/server/utils/paths.d.ts +4 -0
- package/src/types/portal/src/server/utils/rbac.d.ts +15 -0
- package/src/types/portal/src/shared/constants.d.ts +7 -0
- package/src/types/portal/src/shared/models/config.d.ts +24 -12
- package/src/types/portal/src/shared/types.d.ts +17 -4
- package/src/types/portal/src/shared/urls.d.ts +1 -1
- package/src/types/portal/src/shared/utils.d.ts +2 -0
- package/src/ui/Burger.tsx +36 -0
- package/src/ui/Flex.tsx +1 -0
- package/src/utils/args-typecheck.ts +9 -0
- package/src/utils/highlight.ts +11 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/jsonToHtml.ts +171 -59
- package/ui/Burger.d.ts +8 -0
- package/ui/Burger.js +23 -0
- package/ui/Dropdown.js +17 -1
- package/ui/Flex.js +1 -1
- package/ui/UniversalLink.js +17 -1
- package/utils/args-typecheck.d.ts +2 -0
- package/utils/args-typecheck.js +13 -0
- package/utils/highlight.d.ts +1 -0
- package/utils/highlight.js +12 -1
- package/utils/index.d.ts +1 -0
- package/utils/index.js +1 -0
- package/utils/jsonToHtml.d.ts +4 -1
- package/utils/jsonToHtml.js +287 -83
- package/utils/media-css.js +40 -3
- package/utils/theme-helpers.js +56 -9
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
|
|
4
|
+
import { NavMenuItem, NavMenuItemWithDropdownWrapper } from '@theme/Navbar/NavbarItem';
|
|
5
|
+
import { MobileNavbarItem } from '@theme/Navbar/MobileNavbarItem';
|
|
6
|
+
import { DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
|
|
7
|
+
import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
|
|
8
|
+
import { isPrimitive, isEmptyArray } from '@theme/utils';
|
|
9
|
+
|
|
10
|
+
export function MobileNavbarMenu({
|
|
11
|
+
menuItems,
|
|
12
|
+
closeMenu,
|
|
13
|
+
}: {
|
|
14
|
+
menuItems: ResolvedConfigLinks;
|
|
15
|
+
closeMenu: () => void;
|
|
16
|
+
}): JSX.Element | null {
|
|
17
|
+
if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<NavItemsWrapper data-component-name="Navbar/MobileNavbarMenu">
|
|
23
|
+
<NavItemsContainer>
|
|
24
|
+
{(menuItems as ResolvedNavItem[]).map((navItem, index) => {
|
|
25
|
+
return (
|
|
26
|
+
<MobileNavbarItem
|
|
27
|
+
key={`${navItem.label}_${index}`}
|
|
28
|
+
data-cy={navItem.label}
|
|
29
|
+
navItem={navItem}
|
|
30
|
+
/>
|
|
31
|
+
);
|
|
32
|
+
})}
|
|
33
|
+
</NavItemsContainer>
|
|
34
|
+
<NavItemsClosableArea onClick={closeMenu} />
|
|
35
|
+
</NavItemsWrapper>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
const NavItemsWrapper = styled.div`
|
|
40
|
+
height: 100%;
|
|
41
|
+
width: 100%;
|
|
42
|
+
position: fixed;
|
|
43
|
+
z-index: 201; //more than Search
|
|
44
|
+
left: 0;
|
|
45
|
+
top: 0;
|
|
46
|
+
overflow-x: hidden;
|
|
47
|
+
transition: 0.5s;
|
|
48
|
+
display: flex;
|
|
49
|
+
${DropdownWrapper} {
|
|
50
|
+
& > div {
|
|
51
|
+
text-align: center;
|
|
52
|
+
padding: 10px 0;
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
a {
|
|
55
|
+
color: var(--navbar-text-color);
|
|
56
|
+
text-decoration: none;
|
|
57
|
+
}
|
|
58
|
+
:hover {
|
|
59
|
+
text-decoration: underline;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
`;
|
|
64
|
+
|
|
65
|
+
const NavItemsClosableArea = styled.div`
|
|
66
|
+
display: flex;
|
|
67
|
+
flex: 1;
|
|
68
|
+
min-width: 50px;
|
|
69
|
+
height: 100%;
|
|
70
|
+
background-color: rgba(255, 255, 255, 0.4);
|
|
71
|
+
`;
|
|
72
|
+
|
|
73
|
+
const NavItemsContainer = styled.ul`
|
|
74
|
+
width: 70%;
|
|
75
|
+
list-style: none;
|
|
76
|
+
margin: 0;
|
|
77
|
+
padding: 0;
|
|
78
|
+
display: flex;
|
|
79
|
+
flex-direction: column;
|
|
80
|
+
background: var(--navbar-background-color);
|
|
81
|
+
|
|
82
|
+
${NavMenuItem} {
|
|
83
|
+
&:not(:last-child){
|
|
84
|
+
border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
|
|
85
|
+
}
|
|
86
|
+
border-radius: 0;
|
|
87
|
+
padding: 1em 0;
|
|
88
|
+
width: 100%;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
${NavMenuItemWithDropdownWrapper} {
|
|
92
|
+
display: block;
|
|
93
|
+
&:not(:last-child){
|
|
94
|
+
border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
|
|
95
|
+
border-radius: 0;
|
|
96
|
+
}
|
|
97
|
+
${NavMenuItem} {
|
|
98
|
+
border-bottom: none;
|
|
99
|
+
}
|
|
100
|
+
${DropdownWrapper} {
|
|
101
|
+
background-color: var(--navbar-background-color);
|
|
102
|
+
width: 100%;
|
|
103
|
+
padding: 0;
|
|
104
|
+
position: relative;
|
|
105
|
+
}
|
|
106
|
+
`;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
|
|
3
|
+
import { Burger } from '@theme/ui/Burger';
|
|
4
|
+
|
|
5
|
+
export const MobileNavbarMenuButton = styled(Burger).attrs(() => ({
|
|
6
|
+
'data-component-name': 'Navbar/MobileNavbarMenuButton',
|
|
7
|
+
}))`
|
|
8
|
+
display: block;
|
|
9
|
+
|
|
10
|
+
${({ theme }) => theme.mediaQueries.medium} {
|
|
11
|
+
display: none;
|
|
12
|
+
}
|
|
13
|
+
`;
|
package/src/Navbar/Navbar.tsx
CHANGED
|
@@ -5,6 +5,9 @@ import { useThemeSettings } from '@portal/hooks';
|
|
|
5
5
|
import { DEFAULT_THEME_NAME } from '@portal/constants';
|
|
6
6
|
import { ResolvedConfigLinks } from '@theme/types/portal';
|
|
7
7
|
import { NavbarMenu } from '@theme/Navbar';
|
|
8
|
+
import { useMobileMenu } from '@theme/hooks/useMobileMenu';
|
|
9
|
+
import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
|
|
10
|
+
import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
|
|
8
11
|
|
|
9
12
|
interface NavbarProps {
|
|
10
13
|
menu: ResolvedConfigLinks;
|
|
@@ -13,17 +16,22 @@ interface NavbarProps {
|
|
|
13
16
|
}
|
|
14
17
|
|
|
15
18
|
export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null {
|
|
16
|
-
const
|
|
17
|
-
const searchSettings =
|
|
19
|
+
const [isOpen, setIsOpen] = useMobileMenu(false);
|
|
20
|
+
const { search: searchSettings, navbar } = useThemeSettings(DEFAULT_THEME_NAME);
|
|
18
21
|
const hideSearch =
|
|
19
22
|
searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');
|
|
20
23
|
|
|
21
|
-
if (
|
|
24
|
+
if (navbar?.hide) {
|
|
22
25
|
return null;
|
|
23
26
|
}
|
|
24
27
|
|
|
28
|
+
const openMobileMenu = () => setIsOpen(true);
|
|
29
|
+
const closeMobileMenu = () => setIsOpen(false);
|
|
30
|
+
|
|
25
31
|
return (
|
|
26
32
|
<NavbarContainer data-component-name="Navbar/Navbar">
|
|
33
|
+
<MobileNavbarMenuButton onClick={openMobileMenu} />
|
|
34
|
+
{isOpen && <MobileNavbarMenu closeMenu={closeMobileMenu} menuItems={menu} />}
|
|
27
35
|
{logo}
|
|
28
36
|
<NavbarMenu menuItems={menu} />
|
|
29
37
|
{hideSearch ? null : search}
|
|
@@ -11,18 +11,19 @@ import { Link } from '@portal/Link';
|
|
|
11
11
|
import { withPathPrefix } from '@portal/utils';
|
|
12
12
|
import { NavbarDropdown, DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
|
|
13
13
|
|
|
14
|
-
interface NavbarItemProps {
|
|
14
|
+
export interface NavbarItemProps {
|
|
15
15
|
navItem: ResolvedNavItem;
|
|
16
|
+
className?: string;
|
|
16
17
|
}
|
|
17
18
|
|
|
18
|
-
export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null {
|
|
19
|
+
export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null {
|
|
19
20
|
const { pathname } = useLocation();
|
|
20
21
|
|
|
21
22
|
if ((navItem as ResolvedNavLinkItem).link) {
|
|
22
23
|
const item = navItem as ResolvedNavLinkItem;
|
|
23
24
|
const isActive = pathname === withPathPrefix(item.link);
|
|
24
25
|
return (
|
|
25
|
-
<NavMenuItem active={isActive} data-component-name="Navbar/NavbarItem">
|
|
26
|
+
<NavMenuItem active={isActive} data-component-name="Navbar/NavbarItem" className={className}>
|
|
26
27
|
<NavLink to={item.link} active={isActive}>
|
|
27
28
|
<NavLabel>{item.label}</NavLabel>
|
|
28
29
|
</NavLink>
|
|
@@ -34,7 +35,7 @@ export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null {
|
|
|
34
35
|
const item = navItem as ResolvedNavGroupItem;
|
|
35
36
|
return (
|
|
36
37
|
<NavMenuItemWithDropdownWrapper>
|
|
37
|
-
<NavMenuItem active={false} data-component-name="Navbar/NavbarItem">
|
|
38
|
+
<NavMenuItem active={false} data-component-name="Navbar/NavbarItem" className={className}>
|
|
38
39
|
<NavLabel>{item.label}</NavLabel>
|
|
39
40
|
</NavMenuItem>
|
|
40
41
|
<NavbarDropdown items={item.items as ResolvedNavLinkItem[]} />
|
|
@@ -45,7 +46,7 @@ export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null {
|
|
|
45
46
|
return null;
|
|
46
47
|
}
|
|
47
48
|
|
|
48
|
-
const NavMenuItemWithDropdownWrapper = styled.div`
|
|
49
|
+
export const NavMenuItemWithDropdownWrapper = styled.div`
|
|
49
50
|
display: inline-block;
|
|
50
51
|
position: relative;
|
|
51
52
|
border-radius: var(--navbar-item-border-radius);
|
|
@@ -57,9 +58,9 @@ const NavMenuItemWithDropdownWrapper = styled.div`
|
|
|
57
58
|
}
|
|
58
59
|
`;
|
|
59
60
|
|
|
60
|
-
const NavMenuItem = styled.li<{ active?: boolean }>`
|
|
61
|
+
export const NavMenuItem = styled.li<{ active?: boolean }>`
|
|
61
62
|
display: inline-block;
|
|
62
|
-
padding:
|
|
63
|
+
padding: 8px calc(var(--sidebar-spacing-horizontal) * 2);
|
|
63
64
|
text-align: center;
|
|
64
65
|
line-height: 1;
|
|
65
66
|
font-size: var(--navbar-item-font-size);
|
|
@@ -70,7 +71,7 @@ const NavMenuItem = styled.li<{ active?: boolean }>`
|
|
|
70
71
|
background: ${({ active }) => (active ? 'var(--navbar-item-active-background-color)' : 'none')};
|
|
71
72
|
`;
|
|
72
73
|
|
|
73
|
-
const NavLink = styled(Link)`
|
|
74
|
+
export const NavLink = styled(Link)`
|
|
74
75
|
color: ${({ active }) =>
|
|
75
76
|
active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
|
|
76
77
|
text-decoration: ${({ active }) =>
|
|
@@ -3,9 +3,10 @@ import styled from 'styled-components';
|
|
|
3
3
|
|
|
4
4
|
import { NavbarItem } from '@theme/Navbar/NavbarItem';
|
|
5
5
|
import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
|
|
6
|
+
import { isPrimitive, isEmptyArray } from '@theme/utils';
|
|
6
7
|
|
|
7
8
|
export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): JSX.Element | null {
|
|
8
|
-
if (
|
|
9
|
+
if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
|
|
9
10
|
return null;
|
|
10
11
|
}
|
|
11
12
|
|
|
@@ -22,11 +23,15 @@ export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): J
|
|
|
22
23
|
|
|
23
24
|
const NavItemsContainer = styled.ul`
|
|
24
25
|
list-style: none;
|
|
25
|
-
margin: 0;
|
|
26
|
+
margin: 0 7px;
|
|
26
27
|
padding: 0;
|
|
27
|
-
display:
|
|
28
|
+
display: none;
|
|
29
|
+
flex-wrap: nowrap;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: flex-end;
|
|
32
|
+
flex: 1;
|
|
28
33
|
|
|
29
34
|
${({ theme }) => theme.mediaQueries.medium} {
|
|
30
|
-
display:
|
|
35
|
+
display: flex;
|
|
31
36
|
}
|
|
32
37
|
`;
|
|
@@ -12,13 +12,13 @@ interface NextPageType {
|
|
|
12
12
|
|
|
13
13
|
export function NextPageLink(): JSX.Element {
|
|
14
14
|
const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
|
|
15
|
-
const {
|
|
15
|
+
const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
|
|
16
16
|
|
|
17
|
-
if (!nextPage ||
|
|
17
|
+
if (!nextPage || navigation?.hide) {
|
|
18
18
|
return <div> </div>;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
const label =
|
|
21
|
+
const label = navigation?.nextPageLink?.label || `Next to ${nextPage.label}`;
|
|
22
22
|
|
|
23
23
|
return (
|
|
24
24
|
<StyledButton
|
|
@@ -12,13 +12,13 @@ interface PreviousPageType {
|
|
|
12
12
|
|
|
13
13
|
export function PreviousPageLink(): JSX.Element {
|
|
14
14
|
const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
|
|
15
|
-
const {
|
|
15
|
+
const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
|
|
16
16
|
|
|
17
|
-
if (!prevPage ||
|
|
17
|
+
if (!prevPage || navigation?.hide) {
|
|
18
18
|
return <div> </div>;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
const label =
|
|
21
|
+
const label = navigation?.nextPageLink?.label || `Back to ${prevPage.label}`;
|
|
22
22
|
|
|
23
23
|
return (
|
|
24
24
|
<StyledButton
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
import { highlight } from '@theme/utils';
|
|
3
|
+
import { highlight, addLineNumbers } from '@theme/utils';
|
|
4
4
|
import {
|
|
5
5
|
SampleControls,
|
|
6
6
|
SampleControlsWrap,
|
|
@@ -8,7 +8,12 @@ import {
|
|
|
8
8
|
} from '@theme/SamplesPanelControls';
|
|
9
9
|
import { CopyButtonWrapper } from '@theme/CopyButton';
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
interface CommonCodeProps {
|
|
12
|
+
withLineNumbers?: boolean;
|
|
13
|
+
startLineNumber?: number;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export interface SourceCodeProps extends CommonCodeProps {
|
|
12
17
|
lang: string;
|
|
13
18
|
source?: string;
|
|
14
19
|
externalSource?: ExternalSource;
|
|
@@ -16,6 +21,10 @@ export interface SourceCodeProps {
|
|
|
16
21
|
dataTestId?: string;
|
|
17
22
|
}
|
|
18
23
|
|
|
24
|
+
interface CodeProps
|
|
25
|
+
extends Required<Pick<SourceCodeProps, 'lang' | 'source' | 'dataTestId'>>,
|
|
26
|
+
CommonCodeProps {}
|
|
27
|
+
|
|
19
28
|
export interface Sample {
|
|
20
29
|
lang: string;
|
|
21
30
|
label?: string;
|
|
@@ -37,10 +46,18 @@ export function Code({
|
|
|
37
46
|
source,
|
|
38
47
|
lang,
|
|
39
48
|
dataTestId,
|
|
40
|
-
|
|
49
|
+
withLineNumbers,
|
|
50
|
+
startLineNumber,
|
|
51
|
+
}: CodeProps): JSX.Element {
|
|
52
|
+
const highlightedCode = highlight(source, lang);
|
|
53
|
+
|
|
41
54
|
return (
|
|
42
55
|
<PreformattedCodeBlock
|
|
43
|
-
dangerouslySetInnerHTML={{
|
|
56
|
+
dangerouslySetInnerHTML={{
|
|
57
|
+
__html: withLineNumbers
|
|
58
|
+
? addLineNumbers(highlightedCode, startLineNumber)
|
|
59
|
+
: highlightedCode,
|
|
60
|
+
}}
|
|
44
61
|
data-cy={dataTestId}
|
|
45
62
|
/>
|
|
46
63
|
);
|
|
@@ -52,6 +69,8 @@ export function SourceCode({
|
|
|
52
69
|
externalSource,
|
|
53
70
|
withCopyButton,
|
|
54
71
|
dataTestId = 'source-code',
|
|
72
|
+
withLineNumbers,
|
|
73
|
+
startLineNumber,
|
|
55
74
|
}: SourceCodeProps): JSX.Element {
|
|
56
75
|
const _source = source || externalSource?.sample?.get?.(externalSource) || '';
|
|
57
76
|
if (withCopyButton) {
|
|
@@ -60,7 +79,13 @@ export function SourceCode({
|
|
|
60
79
|
{({ renderCopyButton }) => (
|
|
61
80
|
<SampleControlsWrap>
|
|
62
81
|
<SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
|
|
63
|
-
<Code
|
|
82
|
+
<Code
|
|
83
|
+
lang={lang}
|
|
84
|
+
source={_source}
|
|
85
|
+
withLineNumbers={withLineNumbers}
|
|
86
|
+
startLineNumber={startLineNumber}
|
|
87
|
+
dataTestId={dataTestId}
|
|
88
|
+
/>
|
|
64
89
|
</SampleControlsWrap>
|
|
65
90
|
)}
|
|
66
91
|
</CopyButtonWrapper>
|
|
@@ -72,6 +97,8 @@ export function SourceCode({
|
|
|
72
97
|
dataTestId={dataTestId}
|
|
73
98
|
lang={lang}
|
|
74
99
|
source={_source}
|
|
100
|
+
withLineNumbers={withLineNumbers}
|
|
101
|
+
startLineNumber={startLineNumber}
|
|
75
102
|
data-component-name="SourceCode/SourceCode"
|
|
76
103
|
/>
|
|
77
104
|
);
|
|
@@ -19,9 +19,9 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
|
|
|
19
19
|
const sidebar = useRef<HTMLDivElement | null>(null);
|
|
20
20
|
useFullHeight(sidebar);
|
|
21
21
|
const activeHeadingId = useActiveHeading(contentWrapper);
|
|
22
|
-
const {
|
|
22
|
+
const { toc } = useThemeSettings(DEFAULT_THEME_NAME);
|
|
23
23
|
|
|
24
|
-
if (
|
|
24
|
+
if (toc?.hide) {
|
|
25
25
|
return null;
|
|
26
26
|
}
|
|
27
27
|
if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
|
|
@@ -36,7 +36,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
|
|
|
36
36
|
{headings && (
|
|
37
37
|
<TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
|
|
38
38
|
<TableOfContentItems ref={sidebar}>
|
|
39
|
-
<TocHeader>{
|
|
39
|
+
<TocHeader>{toc?.header?.label || 'On this page'}</TocHeader>
|
|
40
40
|
{headings.map((heading: MdHeading | null, idx: number) => {
|
|
41
41
|
// TODO: not sure about !heading
|
|
42
42
|
if (!heading) {
|
package/src/globalStyle.ts
CHANGED
|
@@ -299,6 +299,7 @@ const buttons = css`
|
|
|
299
299
|
* @tokens Button borders
|
|
300
300
|
*/
|
|
301
301
|
--button-border-radius: var(--global-border-radius); // @presenter BorderRadius
|
|
302
|
+
--button-margin: 5px; // @presenter Margin
|
|
302
303
|
--button-box-shadow: none; // @presenter Shadow
|
|
303
304
|
--button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow
|
|
304
305
|
|
|
@@ -751,6 +752,7 @@ const navbar = css`
|
|
|
751
752
|
--navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight
|
|
752
753
|
--navbar-item-active-background-color: #1b75fa; // @presenter Color
|
|
753
754
|
--navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color
|
|
755
|
+
--navbar-item-separator-line-color: var(--sidebar-separator-line-color); // @presenter Color
|
|
754
756
|
--navbar-item-active-text-decoration: none;
|
|
755
757
|
|
|
756
758
|
// @tokens End
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { PERMISSION_PROP_NAME } from '../../../shared/constants';
|
|
1
2
|
import { MenuStyle } from '../../../shared/types';
|
|
2
3
|
export interface SidebarNavItem {
|
|
3
4
|
label?: string;
|
|
@@ -18,7 +19,7 @@ export interface SidebarNavItem {
|
|
|
18
19
|
target?: string;
|
|
19
20
|
external?: boolean;
|
|
20
21
|
items?: SidebarNavItem[];
|
|
21
|
-
|
|
22
|
+
[PERMISSION_PROP_NAME]?: string;
|
|
22
23
|
menuStyle?: MenuStyle;
|
|
23
24
|
separatorLine?: boolean;
|
|
24
25
|
version?: string;
|
|
@@ -5,3 +5,5 @@ export declare enum cliCommandNames {
|
|
|
5
5
|
export declare const VERSION_SEPARATOR = "@";
|
|
6
6
|
export declare const DEFAULT_VERSION_NAME = "default";
|
|
7
7
|
export declare const VERSIONED_FOLDER_REGEXP_MATCH: RegExp;
|
|
8
|
+
export declare const PORTAL_CONFIG_FILE_NAME = "portal.yaml";
|
|
9
|
+
export declare const JWT_SECRET_KEY: string;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/// <reference types="node" />
|
|
2
|
+
import http from 'http';
|
|
3
|
+
import { MatchFunction } from 'path-to-regexp';
|
|
4
|
+
import { BuildIncremental } from 'esbuild';
|
|
5
|
+
export interface DevServerOptions {
|
|
6
|
+
clientEsbuild: BuildIncremental;
|
|
7
|
+
serverEsbuild: BuildIncremental;
|
|
8
|
+
port?: number;
|
|
9
|
+
}
|
|
10
|
+
export interface EnhancedIncomingMessage extends http.IncomingMessage {
|
|
11
|
+
pathname: string;
|
|
12
|
+
params: Record<string, string>;
|
|
13
|
+
body: string;
|
|
14
|
+
}
|
|
15
|
+
export interface Route {
|
|
16
|
+
matchPath: MatchFunction<EnhancedIncomingMessage['params']>;
|
|
17
|
+
handler(req: EnhancedIncomingMessage, res: http.ServerResponse): void;
|
|
18
|
+
}
|
|
19
|
+
export interface Server {
|
|
20
|
+
httpServer: http.Server;
|
|
21
|
+
addRoute(path: string, handler: Route['handler']): void;
|
|
22
|
+
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Config, Node, RenderableTreeNode } from '@markdoc/markdoc/dist/src/types';
|
|
2
|
+
import type { PageStaticData } from '../../../shared/types.js';
|
|
2
3
|
import type { ContentProvider, ContentRecord } from '../../content/content-provider.js';
|
|
3
4
|
import { PluginDefaultOptions } from '../types.js';
|
|
4
5
|
import type { RouteDetails } from '../types.js';
|
|
@@ -7,16 +8,21 @@ export interface MdHeading {
|
|
|
7
8
|
value: string;
|
|
8
9
|
depth: number;
|
|
9
10
|
}
|
|
10
|
-
export declare type
|
|
11
|
+
export declare type RoutesInfoActions = {
|
|
11
12
|
getRouteByFsPath: (relativePath: string) => RouteDetails | undefined;
|
|
12
13
|
getRouteBySlug?: (slug: string) => RouteDetails | undefined;
|
|
13
|
-
contentProvider: ContentProvider;
|
|
14
14
|
};
|
|
15
|
-
export interface
|
|
15
|
+
export interface MdOptions {
|
|
16
16
|
partials: Record<string, Node>;
|
|
17
|
+
variables?: Record<string, any>;
|
|
17
18
|
}
|
|
18
|
-
export declare type MdRenderContext = ContentRecord & PluginDefaultOptions &
|
|
19
|
-
export declare type MdCompilationContext = MdRenderContext &
|
|
19
|
+
export declare type MdRenderContext = ContentRecord & PluginDefaultOptions & MdOptions;
|
|
20
|
+
export declare type MdCompilationContext = MdRenderContext & RoutesInfoActions & {
|
|
21
|
+
contentProvider: ContentProvider;
|
|
22
|
+
};
|
|
23
|
+
export declare type MdProcessContext = PluginDefaultOptions & RoutesInfoActions & {
|
|
24
|
+
contentProvider: ContentProvider;
|
|
25
|
+
} & MdOptions;
|
|
20
26
|
export interface MdCompilationResult {
|
|
21
27
|
result: RenderableTreeNode;
|
|
22
28
|
headings: MdHeading[];
|
|
@@ -24,3 +30,7 @@ export interface MdCompilationResult {
|
|
|
24
30
|
export interface ExtendedMarkdocConfig extends Config {
|
|
25
31
|
currentProcessedPage?: string;
|
|
26
32
|
}
|
|
33
|
+
export interface MdPageStaticData extends PageStaticData {
|
|
34
|
+
ast: string;
|
|
35
|
+
frontmatter: Record<string, unknown>;
|
|
36
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ResolvedConfigLinks } from '../../../shared/types.js';
|
|
2
|
-
import { PortalConfig, RawTheme } from '../../../shared/models/config.js';
|
|
2
|
+
import { AuthConfig, PortalConfig, RawTheme } from '../../../shared/models/config.js';
|
|
3
3
|
import { Redirect } from '../types';
|
|
4
4
|
export interface GlobalData {
|
|
5
5
|
nav?: ResolvedConfigLinks;
|
|
@@ -13,8 +13,12 @@ export interface GlobalConfig {
|
|
|
13
13
|
stylesheets?: string;
|
|
14
14
|
redirects: Record<string, Redirect>;
|
|
15
15
|
fileName: string;
|
|
16
|
+
rbac: RbacConfig;
|
|
16
17
|
[k: string]: unknown;
|
|
17
18
|
}
|
|
18
|
-
export declare type RbacConfig =
|
|
19
|
+
export declare type RbacConfig = {
|
|
20
|
+
roles: Record<string, string[]>;
|
|
21
|
+
auth?: AuthConfig;
|
|
22
|
+
};
|
|
19
23
|
export declare type CustomEntryPropertyType = Record<string, string | boolean>;
|
|
20
24
|
export declare type ScriptOrStylesheetConfig = string | CustomEntryPropertyType;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { Pagination as PaginationType, IMenuItem, OpenAPIDefinition as IOpenAPIDefinition, MenuItemType } from '@redocly/reference-docs';
|
|
2
|
+
import { RedocProRawOptions } from '@redocly/reference-docs';
|
|
3
|
+
import type { ResolvedNavItem } from '../../../shared/types.js';
|
|
4
|
+
import type { ParsedContentRecord } from '../../content/content-provider.js';
|
|
5
|
+
export interface IMenuItemExtended extends IMenuItem {
|
|
6
|
+
httpVerb?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare function loadDefinition(content: ParsedContentRecord): Promise<IOpenAPIDefinition | undefined>;
|
|
9
|
+
export declare function convertRedocToSidebar(data: {
|
|
10
|
+
redocItems: IMenuItemExtended[];
|
|
11
|
+
sidebarItems: ResolvedNavItem[];
|
|
12
|
+
parentId?: string;
|
|
13
|
+
routeSlug: string;
|
|
14
|
+
pagination: PaginationType;
|
|
15
|
+
}): void;
|
|
16
|
+
export declare const shouldAddPage: ({ pagination, type, }: {
|
|
17
|
+
pagination: PaginationType;
|
|
18
|
+
type: MenuItemType;
|
|
19
|
+
}) => boolean;
|
|
20
|
+
export declare const removeMarkdownLinks: (text: string) => string;
|
|
21
|
+
export declare function getConfigByPath(apis: {
|
|
22
|
+
[x: string]: {
|
|
23
|
+
root: string;
|
|
24
|
+
'features.openapi': RedocProRawOptions;
|
|
25
|
+
};
|
|
26
|
+
} | undefined, path: string): RedocProRawOptions;
|
|
@@ -1,24 +1,39 @@
|
|
|
1
|
-
import type { PageProps, ResolvedNavItem } from '../../shared/types.js';
|
|
2
|
-
import type { Template } from '../store';
|
|
1
|
+
import type { PageProps, PageStaticData, ResolvedNavItem, Version } from '../../shared/types.js';
|
|
3
2
|
import type { ContentProvider } from '../content/content-provider.js';
|
|
4
3
|
import { SearchData, SearchDocument } from '../../shared/models';
|
|
5
|
-
import
|
|
6
|
-
|
|
4
|
+
import { PERMISSION_PROP_NAME } from '@shared/constants.js';
|
|
5
|
+
import { Store } from '../store.js';
|
|
6
|
+
import type { GlobalData, GlobalConfig } from './portal-config/types.js';
|
|
7
|
+
import { MdOptions } from './markdown/types.js';
|
|
8
|
+
export declare type GetStaticDataContext = {
|
|
7
9
|
getRouteByFsPath: (relativePath: string) => RouteDetails | undefined;
|
|
8
10
|
getRouteBySlug: (relativePath: string) => RouteDetails | undefined;
|
|
11
|
+
getGlobalConfig<T = unknown>(key: string): T | undefined;
|
|
12
|
+
getAllRoutes: () => RouteDetails[];
|
|
13
|
+
contentDir: string;
|
|
14
|
+
outdir: string;
|
|
15
|
+
};
|
|
16
|
+
export declare type RbacContext = {
|
|
17
|
+
roles: string[];
|
|
18
|
+
permissions: string[];
|
|
9
19
|
};
|
|
10
|
-
export declare type
|
|
11
|
-
export
|
|
20
|
+
export declare type GetStaticDataFn<TData extends PageStaticData = PageStaticData, TProps extends PageProps = PageProps> = (route: RouteDetails<TData, TProps>, contentProvider: ContentProvider, context: GetStaticDataContext) => Promise<TData>;
|
|
21
|
+
export declare type GetServerPropsContext = {
|
|
22
|
+
getGlobalConfig<T = unknown>(key: string): T | undefined;
|
|
23
|
+
getRbacPermissionsByRole: Store['getRbacPermissionsByRole'];
|
|
24
|
+
};
|
|
25
|
+
export declare type GetServerPropsFn<TData extends PageStaticData = PageStaticData, TProps extends PageProps = PageProps> = (route: RouteDetails<TData, TProps>, data: TData, mdOptions: MdOptions) => Promise<TProps>;
|
|
26
|
+
export interface RouteDetails<TData extends PageStaticData = PageStaticData, TProps extends PageProps = PageProps> {
|
|
12
27
|
slug: string;
|
|
13
28
|
fsPath: string;
|
|
14
29
|
templateId: string;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
[k: string]: DataLoader;
|
|
18
|
-
};
|
|
30
|
+
[PERMISSION_PROP_NAME]?: string;
|
|
31
|
+
versions?: Version[];
|
|
19
32
|
getNavText?: () => Promise<string>;
|
|
20
33
|
getSidebar?(): ResolvedNavItem[];
|
|
21
34
|
getSearchDocuments?(): Promise<SearchDocument[]>;
|
|
35
|
+
getStaticData?: GetStaticDataFn<TData, TProps>;
|
|
36
|
+
serverPropsGetterIds?: string[];
|
|
22
37
|
}
|
|
23
38
|
export interface Redirect {
|
|
24
39
|
to: string;
|
|
@@ -32,9 +47,10 @@ export interface PathVersionInfo {
|
|
|
32
47
|
export interface ProcessContentActions {
|
|
33
48
|
createSharedData(id: string, data: unknown): string;
|
|
34
49
|
addRouteSharedData(slug: string, dataKey: string, dataId: string): void;
|
|
50
|
+
setGlobalConfig: (data: Partial<GlobalConfig>) => void;
|
|
35
51
|
addRoute: (route: RouteDetails) => void;
|
|
36
|
-
createTemplate: (
|
|
37
|
-
|
|
52
|
+
createTemplate: (id: string, importPath: string) => string;
|
|
53
|
+
registerServerPropsGetter: (id: string, importPath: string) => string;
|
|
38
54
|
}
|
|
39
55
|
export interface AfterRoutesCreatedActions {
|
|
40
56
|
createSharedData(id: string, data: unknown): string;
|
|
@@ -47,6 +63,7 @@ export interface AfterRoutesCreatedActions {
|
|
|
47
63
|
setSearchData: (data: SearchData) => void;
|
|
48
64
|
addRedirect: (from: string, to: Redirect) => void;
|
|
49
65
|
contentDir: string;
|
|
66
|
+
outdir: string;
|
|
50
67
|
}
|
|
51
68
|
export interface PluginInstance {
|
|
52
69
|
watch?: RegExp;
|