@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.
Files changed (110) hide show
  1. package/Button/Button.js +3 -3
  2. package/CodeBlock/CodeBlock.js +1 -1
  3. package/CopyButton/CopyButton.js +17 -1
  4. package/Footer/Footer.js +2 -1
  5. package/Footer/FooterColumn.js +1 -1
  6. package/Footer/FooterColumns.d.ts +2 -2
  7. package/Footer/FooterColumns.js +1 -1
  8. package/JsonViewer/JsonViewer.d.ts +2 -0
  9. package/JsonViewer/JsonViewer.js +53 -22
  10. package/Markdown/Admonition.js +1 -1
  11. package/Markdown/CodeSample/CodeSample.js +17 -1
  12. package/Markdown/Heading.js +1 -1
  13. package/Markdown/Mermaid.js +1 -1
  14. package/Markdown/Sup.d.ts +2 -0
  15. package/Markdown/Sup.js +19 -0
  16. package/Markdown/Tabs/Tabs.js +17 -1
  17. package/Markdown/index.d.ts +4 -3
  18. package/Markdown/index.js +4 -3
  19. package/Navbar/MobileNavbarDropdown.d.ts +8 -0
  20. package/Navbar/MobileNavbarDropdown.js +21 -0
  21. package/Navbar/MobileNavbarItem.d.ts +15 -0
  22. package/Navbar/MobileNavbarItem.js +102 -0
  23. package/Navbar/MobileNavbarMenu.d.ts +6 -0
  24. package/Navbar/MobileNavbarMenu.js +32 -0
  25. package/Navbar/MobileNavbarMenuButton.d.ts +4 -0
  26. package/Navbar/MobileNavbarMenuButton.js +19 -0
  27. package/Navbar/Navbar.js +26 -4
  28. package/Navbar/NavbarDropdown.js +1 -1
  29. package/Navbar/NavbarItem.d.ts +9 -3
  30. package/Navbar/NavbarItem.js +9 -9
  31. package/Navbar/NavbarMenu.js +3 -2
  32. package/PageNavigation/NextPageLink.js +4 -4
  33. package/PageNavigation/PreviousPageLink.js +4 -4
  34. package/Panel/PanelComponent.js +18 -2
  35. package/Search/Autocomplete.js +18 -2
  36. package/Search/utils.js +17 -1
  37. package/Sidebar/SidebarLayout.js +17 -1
  38. package/SourceCode/SourceCode.d.ts +10 -3
  39. package/SourceCode/SourceCode.js +10 -5
  40. package/TableOfContent/TableOfContent.js +4 -4
  41. package/globalStyle.js +2 -2
  42. package/hooks/useActiveHeading.js +17 -1
  43. package/hooks/useActiveSectionId.js +17 -1
  44. package/hooks/useControl.js +17 -1
  45. package/hooks/useMobileMenu.js +17 -1
  46. package/hooks/useNavbarHeight.js +17 -1
  47. package/package.json +1 -1
  48. package/src/Button/Button.tsx +5 -1
  49. package/src/CodeBlock/CodeBlock.ts +12 -0
  50. package/src/Footer/Footer.tsx +4 -3
  51. package/src/Footer/FooterColumn.tsx +3 -1
  52. package/src/Footer/FooterColumns.tsx +3 -3
  53. package/src/JsonViewer/JsonViewer.tsx +55 -40
  54. package/src/Markdown/Admonition.tsx +1 -1
  55. package/src/Markdown/Heading.tsx +1 -1
  56. package/src/Markdown/Mermaid.tsx +1 -1
  57. package/src/Markdown/Sup.tsx +8 -0
  58. package/src/Markdown/index.ts +4 -3
  59. package/src/Navbar/MobileNavbarDropdown.tsx +37 -0
  60. package/src/Navbar/MobileNavbarItem.tsx +116 -0
  61. package/src/Navbar/MobileNavbarMenu.tsx +106 -0
  62. package/src/Navbar/MobileNavbarMenuButton.tsx +13 -0
  63. package/src/Navbar/Navbar.tsx +11 -3
  64. package/src/Navbar/NavbarDropdown.tsx +1 -1
  65. package/src/Navbar/NavbarItem.tsx +9 -8
  66. package/src/Navbar/NavbarMenu.tsx +9 -4
  67. package/src/PageNavigation/NextPageLink.tsx +3 -3
  68. package/src/PageNavigation/PreviousPageLink.tsx +3 -3
  69. package/src/SourceCode/SourceCode.tsx +32 -5
  70. package/src/TableOfContent/TableOfContent.tsx +3 -3
  71. package/src/globalStyle.ts +2 -0
  72. package/src/types/portal/src/client/app/Sidebar/types.d.ts +2 -1
  73. package/src/types/portal/src/server/constants.d.ts +2 -0
  74. package/src/types/portal/src/server/dev-server/types.d.ts +22 -0
  75. package/src/types/portal/src/server/plugins/markdown/types.d.ts +15 -5
  76. package/src/types/portal/src/server/plugins/portal-config/get-frontmatter-keys-to-resolve.d.ts +2 -0
  77. package/src/types/portal/src/server/plugins/portal-config/types.d.ts +6 -2
  78. package/src/types/portal/src/server/plugins/reference-docs/utils.d.ts +26 -0
  79. package/src/types/portal/src/server/plugins/types.d.ts +29 -12
  80. package/src/types/portal/src/server/store.d.ts +16 -16
  81. package/src/types/portal/src/server/utils/fs.d.ts +2 -1
  82. package/src/types/portal/src/server/utils/index.d.ts +1 -0
  83. package/src/types/portal/src/server/utils/paths.d.ts +4 -0
  84. package/src/types/portal/src/server/utils/rbac.d.ts +15 -0
  85. package/src/types/portal/src/shared/constants.d.ts +7 -0
  86. package/src/types/portal/src/shared/models/config.d.ts +24 -12
  87. package/src/types/portal/src/shared/types.d.ts +17 -4
  88. package/src/types/portal/src/shared/urls.d.ts +1 -1
  89. package/src/types/portal/src/shared/utils.d.ts +2 -0
  90. package/src/ui/Burger.tsx +36 -0
  91. package/src/ui/Flex.tsx +1 -0
  92. package/src/utils/args-typecheck.ts +9 -0
  93. package/src/utils/highlight.ts +11 -0
  94. package/src/utils/index.ts +1 -0
  95. package/src/utils/jsonToHtml.ts +171 -59
  96. package/ui/Burger.d.ts +8 -0
  97. package/ui/Burger.js +23 -0
  98. package/ui/Dropdown.js +17 -1
  99. package/ui/Flex.js +1 -1
  100. package/ui/UniversalLink.js +17 -1
  101. package/utils/args-typecheck.d.ts +2 -0
  102. package/utils/args-typecheck.js +13 -0
  103. package/utils/highlight.d.ts +1 -0
  104. package/utils/highlight.js +12 -1
  105. package/utils/index.d.ts +1 -0
  106. package/utils/index.js +1 -0
  107. package/utils/jsonToHtml.d.ts +4 -1
  108. package/utils/jsonToHtml.js +287 -83
  109. package/utils/media-css.js +40 -3
  110. 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
+ `;
@@ -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 settings = useThemeSettings(DEFAULT_THEME_NAME);
17
- const searchSettings = settings.search;
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 (settings?.navbar?.hide) {
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}
@@ -31,7 +31,7 @@ export const DropdownWrapper = styled.div`
31
31
  box-shadow: var(--navbar-dropdown-shadow);
32
32
  & > div {
33
33
  text-align: left;
34
- padding: 10px 0px;
34
+ padding: 10px 0;
35
35
  cursor: pointer;
36
36
  a {
37
37
  color: var(--navbar-text-color);
@@ -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: 20px calc(var(--sidebar-spacing-horizontal) * 2);
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 (!menuItems?.length) {
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: block;
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: block;
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 { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
15
+ const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
16
16
 
17
- if (!nextPage || themeSettings?.navigation?.hide) {
17
+ if (!nextPage || navigation?.hide) {
18
18
  return <div>&nbsp;</div>;
19
19
  }
20
20
 
21
- const label = themeSettings?.navigation?.nextPageLink?.label || `Next to ${nextPage.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 { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
15
+ const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
16
16
 
17
- if (!prevPage || themeSettings?.navigation?.hide) {
17
+ if (!prevPage || navigation?.hide) {
18
18
  return <div>&nbsp;</div>;
19
19
  }
20
20
 
21
- const label = themeSettings?.navigation?.nextPageLink?.label || `Back to ${prevPage.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
- export interface SourceCodeProps {
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
- }: Required<Omit<SourceCodeProps, 'externalSource' | 'withCopyButton'>>): JSX.Element {
49
+ withLineNumbers,
50
+ startLineNumber,
51
+ }: CodeProps): JSX.Element {
52
+ const highlightedCode = highlight(source, lang);
53
+
41
54
  return (
42
55
  <PreformattedCodeBlock
43
- dangerouslySetInnerHTML={{ __html: highlight(source, lang) }}
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 lang={lang} source={_source} dataTestId={dataTestId} />
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 { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
22
+ const { toc } = useThemeSettings(DEFAULT_THEME_NAME);
23
23
 
24
- if (themeSettings?.toc?.hide) {
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>{themeSettings?.toc?.header?.label || 'On this page'}</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) {
@@ -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
- permission?: string;
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 MarkdownOptions = {
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 MdPartialsContext {
15
+ export interface MdOptions {
16
16
  partials: Record<string, Node>;
17
+ variables?: Record<string, any>;
17
18
  }
18
- export declare type MdRenderContext = ContentRecord & PluginDefaultOptions & MdPartialsContext;
19
- export declare type MdCompilationContext = MdRenderContext & MarkdownOptions;
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
+ }
@@ -0,0 +1,2 @@
1
+ import { PortalConfig } from '../../../shared/models/config.js';
2
+ export declare function getFrontmatterKeysToResolve(config?: PortalConfig): string[];
@@ -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 = Record<string, string[]>;
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 type { GlobalData, GlobalConfig, RbacConfig } from './portal-config/types.js';
6
- export declare type DataLoaderContext = {
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 DataLoader<T = any> = (contentProvider: ContentProvider, context: DataLoaderContext) => Promise<T>;
11
- export interface RouteDetails {
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
- dataLoaders: {
16
- props: DataLoader<PageProps>;
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: (template: Template) => Template;
37
- setRbacConfig: (rbacConfig: RbacConfig) => void;
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;