@redocly/theme 0.6.0 → 0.6.1
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/lib/ColorModeSwitcher/ColorModeSwitcher.js +1 -1
- package/lib/Footer/Footer.d.ts +6 -3
- package/lib/Footer/Footer.js +3 -3
- package/lib/PageNavigation/NextButton.d.ts +2 -0
- package/lib/PageNavigation/{NextPageLink.js → NextButton.js} +7 -7
- package/lib/PageNavigation/PageNavigation.js +5 -5
- package/lib/PageNavigation/PreviousButton.d.ts +2 -0
- package/lib/PageNavigation/{PreviousPageLink.js → PreviousButton.js} +7 -7
- package/lib/PageNavigation/index.d.ts +2 -2
- package/lib/PageNavigation/index.js +2 -2
- package/lib/TableOfContent/TableOfContent.js +14 -19
- package/lib/TableOfContent/utils.d.ts +1 -1
- package/lib/TableOfContent/utils.js +2 -2
- package/lib/config.d.ts +71 -65
- package/lib/config.js +25 -13
- package/lib/mocks/hooks/index.js +4 -5
- package/package.json +3 -3
- package/src/ColorModeSwitcher/ColorModeSwitcher.tsx +1 -1
- package/src/Footer/Footer.tsx +8 -5
- package/src/PageNavigation/{NextPageLink.tsx → NextButton.tsx} +4 -4
- package/src/PageNavigation/PageNavigation.tsx +5 -5
- package/src/PageNavigation/{PreviousPageLink.tsx → PreviousButton.tsx} +4 -4
- package/src/PageNavigation/index.ts +2 -2
- package/src/TableOfContent/TableOfContent.tsx +24 -32
- package/src/TableOfContent/utils.ts +2 -2
- package/src/config.ts +29 -16
- package/src/mocks/hooks/index.ts +4 -5
- package/src/settings.yaml +2 -2
- package/src/types/portal/src/shared/constants.d.ts +0 -1
- package/lib/PageNavigation/NextPageLink.d.ts +0 -2
- package/lib/PageNavigation/PreviousPageLink.d.ts +0 -2
|
@@ -36,7 +36,7 @@ function ColorModeSwitcher() {
|
|
|
36
36
|
const colorMode = themeSettings.colorMode;
|
|
37
37
|
const [activeColorMode, setActiveColorMode] = (0, react_1.useState)('');
|
|
38
38
|
const modes = (colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || ['light', 'dark'];
|
|
39
|
-
const defaultColor =
|
|
39
|
+
const defaultColor = modes[0] || 'light';
|
|
40
40
|
(0, hooks_1.useMount)(() => {
|
|
41
41
|
setActiveColorMode(document.documentElement.className || defaultColor);
|
|
42
42
|
});
|
package/lib/Footer/Footer.d.ts
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type {
|
|
2
|
+
import type { NavGroup } from '@theme/types/portal';
|
|
3
3
|
interface FooterProps {
|
|
4
|
-
data:
|
|
4
|
+
data: {
|
|
5
|
+
items?: NavGroup;
|
|
6
|
+
copyrightText?: string;
|
|
7
|
+
};
|
|
5
8
|
}
|
|
6
|
-
export declare function Footer({ data: {
|
|
9
|
+
export declare function Footer({ data: { items, copyrightText } }: FooterProps): JSX.Element | null;
|
|
7
10
|
export {};
|
package/lib/Footer/Footer.js
CHANGED
|
@@ -10,13 +10,13 @@ const FooterColumns_1 = require("../Footer/FooterColumns");
|
|
|
10
10
|
const FooterCopyright_1 = require("../Footer/FooterCopyright");
|
|
11
11
|
const utils_1 = require("../utils");
|
|
12
12
|
const hooks_1 = require("../hooks");
|
|
13
|
-
function Footer({ data: {
|
|
13
|
+
function Footer({ data: { items, copyrightText } }) {
|
|
14
14
|
const { footer } = (0, hooks_1.useThemeConfig)();
|
|
15
|
-
if ((0, utils_1.isEmptyArray)(
|
|
15
|
+
if ((0, utils_1.isEmptyArray)(items) || !copyrightText || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
|
|
16
16
|
return null;
|
|
17
17
|
}
|
|
18
18
|
return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/Footer" },
|
|
19
|
-
react_1.default.createElement(FooterColumns_1.FooterColumns, { columns:
|
|
19
|
+
react_1.default.createElement(FooterColumns_1.FooterColumns, { columns: items }),
|
|
20
20
|
react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText })));
|
|
21
21
|
}
|
|
22
22
|
exports.Footer = Footer;
|
|
@@ -26,24 +26,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
exports.
|
|
29
|
+
exports.NextButton = void 0;
|
|
30
30
|
const React = __importStar(require("react"));
|
|
31
31
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
32
32
|
const hooks_1 = require("../mocks/hooks");
|
|
33
33
|
const Button_1 = require("../Button/Button");
|
|
34
34
|
const useThemeConfig_1 = require("../hooks/useThemeConfig");
|
|
35
|
-
function
|
|
35
|
+
function NextButton() {
|
|
36
36
|
var _a, _b;
|
|
37
37
|
const { nextPage } = (0, hooks_1.useSidebarSiblingsData)() || {};
|
|
38
38
|
const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
|
|
39
|
-
if (!nextPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.
|
|
39
|
+
if (!nextPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _a === void 0 ? void 0 : _a.hide)) {
|
|
40
40
|
return React.createElement("div", null, "\u00A0");
|
|
41
41
|
}
|
|
42
|
-
const
|
|
43
|
-
return (React.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" },
|
|
42
|
+
const text = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || 'Next to {label}').replace('{label}', nextPage.label || nextPage.routeSlug || '');
|
|
43
|
+
return (React.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" }, text));
|
|
44
44
|
}
|
|
45
|
-
exports.
|
|
45
|
+
exports.NextButton = NextButton;
|
|
46
46
|
const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
|
|
47
47
|
font-family: var(--font-family-base);
|
|
48
48
|
`;
|
|
49
|
-
//# sourceMappingURL=
|
|
49
|
+
//# sourceMappingURL=NextButton.js.map
|
|
@@ -6,18 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.PageNavigation = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
9
|
-
const
|
|
10
|
-
const
|
|
9
|
+
const PreviousButton_1 = require("../PageNavigation/PreviousButton");
|
|
10
|
+
const NextButton_1 = require("../PageNavigation/NextButton");
|
|
11
11
|
const useThemeConfig_1 = require("../hooks/useThemeConfig");
|
|
12
12
|
function PageNavigation() {
|
|
13
13
|
var _a, _b;
|
|
14
14
|
const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
|
|
15
|
-
if (((_a = navigation === null || navigation === void 0 ? void 0 : navigation.
|
|
15
|
+
if (((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _a === void 0 ? void 0 : _a.hide) && ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.hide)) {
|
|
16
16
|
return null;
|
|
17
17
|
}
|
|
18
18
|
return (react_1.default.createElement(PageNavigationWrapper, { "data-component-name": "PageNavigation/PageNavigation" },
|
|
19
|
-
react_1.default.createElement(
|
|
20
|
-
react_1.default.createElement(
|
|
19
|
+
react_1.default.createElement(PreviousButton_1.PreviousButton, null),
|
|
20
|
+
react_1.default.createElement(NextButton_1.NextButton, null)));
|
|
21
21
|
}
|
|
22
22
|
exports.PageNavigation = PageNavigation;
|
|
23
23
|
const PageNavigationWrapper = styled_components_1.default.div `
|
|
@@ -3,24 +3,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.
|
|
6
|
+
exports.PreviousButton = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
9
9
|
const hooks_1 = require("../mocks/hooks");
|
|
10
10
|
const useThemeConfig_1 = require("../hooks/useThemeConfig");
|
|
11
11
|
const Button_1 = require("../Button/Button");
|
|
12
|
-
function
|
|
12
|
+
function PreviousButton() {
|
|
13
13
|
var _a, _b;
|
|
14
14
|
const { prevPage } = (0, hooks_1.useSidebarSiblingsData)() || {};
|
|
15
15
|
const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
|
|
16
|
-
if (!prevPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.
|
|
16
|
+
if (!prevPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _a === void 0 ? void 0 : _a.hide)) {
|
|
17
17
|
return react_1.default.createElement("div", null, "\u00A0");
|
|
18
18
|
}
|
|
19
|
-
const
|
|
20
|
-
return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" },
|
|
19
|
+
const text = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _b === void 0 ? void 0 : _b.text) || 'Back to {label}').replace('{label}', prevPage.label || prevPage.routeSlug || '');
|
|
20
|
+
return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, text));
|
|
21
21
|
}
|
|
22
|
-
exports.
|
|
22
|
+
exports.PreviousButton = PreviousButton;
|
|
23
23
|
const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
|
|
24
24
|
font-family: var(--font-family-base);
|
|
25
25
|
`;
|
|
26
|
-
//# sourceMappingURL=
|
|
26
|
+
//# sourceMappingURL=PreviousButton.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from '../PageNavigation/
|
|
1
|
+
export * from '../PageNavigation/NextButton';
|
|
2
2
|
export * from '../PageNavigation/PageNavigation';
|
|
3
|
-
export * from '../PageNavigation/
|
|
3
|
+
export * from '../PageNavigation/PreviousButton';
|
|
@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("../PageNavigation/
|
|
17
|
+
__exportStar(require("../PageNavigation/NextButton"), exports);
|
|
18
18
|
__exportStar(require("../PageNavigation/PageNavigation"), exports);
|
|
19
|
-
__exportStar(require("../PageNavigation/
|
|
19
|
+
__exportStar(require("../PageNavigation/PreviousButton"), exports);
|
|
20
20
|
//# sourceMappingURL=index.js.map
|
|
@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.TableOfContent = void 0;
|
|
30
|
-
const
|
|
30
|
+
const React = __importStar(require("react"));
|
|
31
31
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
32
32
|
const useFullHeight_1 = require("../hooks/useFullHeight");
|
|
33
33
|
const useActiveHeading_1 = require("../hooks/useActiveHeading");
|
|
@@ -35,31 +35,26 @@ const useThemeConfig_1 = require("../hooks/useThemeConfig");
|
|
|
35
35
|
const utils_1 = require("./utils");
|
|
36
36
|
function TableOfContent(props) {
|
|
37
37
|
const { headings, contentWrapper } = props;
|
|
38
|
-
const sidebar =
|
|
38
|
+
const sidebar = React.useRef(null);
|
|
39
39
|
(0, useFullHeight_1.useFullHeight)(sidebar);
|
|
40
40
|
const { markdown: { toc = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
|
|
41
|
-
const displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, toc.
|
|
41
|
+
const displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, toc.depth || 3);
|
|
42
42
|
const leastDepth = (0, utils_1.getLeastDepth)(displayedHeadings);
|
|
43
43
|
const activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, (0, utils_1.getDisplayedHeadingsIds)(displayedHeadings));
|
|
44
44
|
if (toc === null || toc === void 0 ? void 0 : toc.hide) {
|
|
45
45
|
return null;
|
|
46
46
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
return null;
|
|
59
|
-
}
|
|
60
|
-
const href = '#' + heading.id;
|
|
61
|
-
return (react_1.default.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": `toc-${heading.value}` }));
|
|
62
|
-
}))))));
|
|
47
|
+
return (React.createElement(React.Fragment, null,
|
|
48
|
+
React.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent" },
|
|
49
|
+
React.createElement(TableOfContentItems, { ref: sidebar },
|
|
50
|
+
displayedHeadings.length ? React.createElement(TocHeader, null, toc.header || 'On this page') : null,
|
|
51
|
+
displayedHeadings.map((heading, idx) => {
|
|
52
|
+
if (!heading) {
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
55
|
+
const href = '#' + heading.id;
|
|
56
|
+
return (React.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": `toc-${heading.value}` }));
|
|
57
|
+
})))));
|
|
63
58
|
}
|
|
64
59
|
exports.TableOfContent = TableOfContent;
|
|
65
60
|
const TocHeader = styled_components_1.default.div `
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { MdHeading } from '@theme/types/portal';
|
|
2
|
-
export declare function getDisplayedHeadings(headings: Array<MdHeading | null> | null | undefined,
|
|
2
|
+
export declare function getDisplayedHeadings(headings: Array<MdHeading | null> | null | undefined, tocDepth: number): Array<MdHeading | null>;
|
|
3
3
|
export declare function getDisplayedHeadingsIds(headings: Array<MdHeading | null> | null | undefined): Array<string | undefined>;
|
|
4
4
|
export declare function getLeastDepth(headings: Array<MdHeading | null> | null | undefined): number;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getLeastDepth = exports.getDisplayedHeadingsIds = exports.getDisplayedHeadings = void 0;
|
|
4
|
-
function getDisplayedHeadings(headings,
|
|
4
|
+
function getDisplayedHeadings(headings, tocDepth) {
|
|
5
5
|
if (!headings) {
|
|
6
6
|
return [];
|
|
7
7
|
}
|
|
@@ -12,7 +12,7 @@ function getDisplayedHeadings(headings, tocMaxDepth) {
|
|
|
12
12
|
if (idx === 0 && heading.depth === 1) {
|
|
13
13
|
return false;
|
|
14
14
|
}
|
|
15
|
-
return !(heading.depth && heading.depth >
|
|
15
|
+
return !(heading.depth && heading.depth > tocDepth);
|
|
16
16
|
});
|
|
17
17
|
}
|
|
18
18
|
exports.getDisplayedHeadings = getDisplayedHeadings;
|
package/lib/config.d.ts
CHANGED
|
@@ -17,19 +17,30 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
17
17
|
link?: string | undefined;
|
|
18
18
|
favicon?: string | undefined;
|
|
19
19
|
}>>;
|
|
20
|
-
navbar: z.ZodOptional<z.ZodObject<{
|
|
20
|
+
navbar: z.ZodOptional<z.ZodObject<z.extendShape<{
|
|
21
|
+
items: z.ZodOptional<z.ZodArray<z.ZodAny, "many">>;
|
|
22
|
+
}, {
|
|
21
23
|
hide: z.ZodOptional<z.ZodBoolean>;
|
|
22
|
-
}
|
|
24
|
+
}>, "strict", z.ZodTypeAny, {
|
|
23
25
|
hide?: boolean | undefined;
|
|
26
|
+
items?: any[] | undefined;
|
|
24
27
|
}, {
|
|
25
28
|
hide?: boolean | undefined;
|
|
29
|
+
items?: any[] | undefined;
|
|
26
30
|
}>>;
|
|
27
|
-
footer: z.ZodOptional<z.ZodObject<{
|
|
31
|
+
footer: z.ZodOptional<z.ZodObject<z.extendShape<{
|
|
32
|
+
items: z.ZodOptional<z.ZodArray<z.ZodAny, "many">>;
|
|
33
|
+
copyrightText: z.ZodOptional<z.ZodString>;
|
|
34
|
+
}, {
|
|
28
35
|
hide: z.ZodOptional<z.ZodBoolean>;
|
|
29
|
-
}
|
|
36
|
+
}>, "strict", z.ZodTypeAny, {
|
|
30
37
|
hide?: boolean | undefined;
|
|
38
|
+
items?: any[] | undefined;
|
|
39
|
+
copyrightText?: string | undefined;
|
|
31
40
|
}, {
|
|
32
41
|
hide?: boolean | undefined;
|
|
42
|
+
items?: any[] | undefined;
|
|
43
|
+
copyrightText?: string | undefined;
|
|
33
44
|
}>>;
|
|
34
45
|
sidebar: z.ZodOptional<z.ZodObject<{
|
|
35
46
|
hide: z.ZodOptional<z.ZodBoolean>;
|
|
@@ -38,11 +49,9 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
38
49
|
}, {
|
|
39
50
|
hide?: boolean | undefined;
|
|
40
51
|
}>>;
|
|
41
|
-
navbarItems: z.ZodOptional<z.ZodAny>;
|
|
42
|
-
footerItems: z.ZodOptional<z.ZodAny>;
|
|
43
52
|
scripts: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodBoolean, z.ZodString]>>]>, "many">>;
|
|
44
53
|
postBodyScripts: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodBoolean, z.ZodString]>>]>, "many">>;
|
|
45
|
-
|
|
54
|
+
stylesheets: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodBoolean, z.ZodString]>>]>, "many">>;
|
|
46
55
|
search: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
|
|
47
56
|
placement: z.ZodOptional<z.ZodDefault<z.ZodString>>;
|
|
48
57
|
}, {
|
|
@@ -55,66 +64,63 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
55
64
|
placement?: string | undefined;
|
|
56
65
|
}>>>;
|
|
57
66
|
colorMode: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
|
|
58
|
-
|
|
59
|
-
default: z.ZodOptional<z.ZodString>;
|
|
67
|
+
ignoreDetection: z.ZodOptional<z.ZodBoolean>;
|
|
60
68
|
modes: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, "many">>>;
|
|
61
69
|
}, {
|
|
62
70
|
hide: z.ZodOptional<z.ZodBoolean>;
|
|
63
71
|
}>, "strict", z.ZodTypeAny, {
|
|
64
72
|
hide?: boolean | undefined;
|
|
65
|
-
|
|
66
|
-
default?: string | undefined;
|
|
73
|
+
ignoreDetection?: boolean | undefined;
|
|
67
74
|
modes?: string[] | undefined;
|
|
68
75
|
}, {
|
|
69
76
|
hide?: boolean | undefined;
|
|
70
|
-
|
|
71
|
-
default?: string | undefined;
|
|
77
|
+
ignoreDetection?: boolean | undefined;
|
|
72
78
|
modes?: string[] | undefined;
|
|
73
79
|
}>>>;
|
|
74
80
|
navigation: z.ZodDefault<z.ZodOptional<z.ZodObject<{
|
|
75
|
-
|
|
76
|
-
|
|
81
|
+
nextButton: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
|
|
82
|
+
text: z.ZodDefault<z.ZodString>;
|
|
77
83
|
}, {
|
|
78
84
|
hide: z.ZodOptional<z.ZodBoolean>;
|
|
79
85
|
}>, "strip", z.ZodTypeAny, {
|
|
80
86
|
hide?: boolean | undefined;
|
|
81
|
-
|
|
87
|
+
text: string;
|
|
82
88
|
}, {
|
|
83
89
|
hide?: boolean | undefined;
|
|
84
|
-
|
|
90
|
+
text?: string | undefined;
|
|
85
91
|
}>>>;
|
|
86
|
-
|
|
87
|
-
|
|
92
|
+
previousButton: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
|
|
93
|
+
text: z.ZodDefault<z.ZodString>;
|
|
88
94
|
}, {
|
|
89
95
|
hide: z.ZodOptional<z.ZodBoolean>;
|
|
90
96
|
}>, "strip", z.ZodTypeAny, {
|
|
91
97
|
hide?: boolean | undefined;
|
|
92
|
-
|
|
98
|
+
text: string;
|
|
93
99
|
}, {
|
|
94
100
|
hide?: boolean | undefined;
|
|
95
|
-
|
|
101
|
+
text?: string | undefined;
|
|
96
102
|
}>>>;
|
|
97
103
|
}, "strict", z.ZodTypeAny, {
|
|
98
|
-
|
|
104
|
+
nextButton: {
|
|
99
105
|
hide?: boolean | undefined;
|
|
100
|
-
|
|
106
|
+
text: string;
|
|
101
107
|
};
|
|
102
|
-
|
|
108
|
+
previousButton: {
|
|
103
109
|
hide?: boolean | undefined;
|
|
104
|
-
|
|
110
|
+
text: string;
|
|
105
111
|
};
|
|
106
112
|
}, {
|
|
107
|
-
|
|
113
|
+
nextButton?: {
|
|
108
114
|
hide?: boolean | undefined;
|
|
109
|
-
|
|
115
|
+
text?: string | undefined;
|
|
110
116
|
} | undefined;
|
|
111
|
-
|
|
117
|
+
previousButton?: {
|
|
112
118
|
hide?: boolean | undefined;
|
|
113
|
-
|
|
119
|
+
text?: string | undefined;
|
|
114
120
|
} | undefined;
|
|
115
121
|
}>>>;
|
|
116
122
|
markdown: z.ZodOptional<z.ZodDefault<z.ZodObject<{
|
|
117
|
-
|
|
123
|
+
frontMatterKeysToResolve: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, "many">>>;
|
|
118
124
|
lastUpdatedBlock: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
|
|
119
125
|
format: z.ZodOptional<z.ZodDefault<z.ZodEnum<["timeago", "iso", "long", "short"]>>>;
|
|
120
126
|
locale: z.ZodOptional<z.ZodDefault<z.ZodString>>;
|
|
@@ -131,17 +137,17 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
131
137
|
}>>>;
|
|
132
138
|
toc: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
|
|
133
139
|
header: z.ZodOptional<z.ZodDefault<z.ZodString>>;
|
|
134
|
-
|
|
140
|
+
depth: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
|
|
135
141
|
}, {
|
|
136
142
|
hide: z.ZodOptional<z.ZodBoolean>;
|
|
137
143
|
}>, "strip", z.ZodTypeAny, {
|
|
138
144
|
hide?: boolean | undefined;
|
|
139
145
|
header?: string | undefined;
|
|
140
|
-
|
|
146
|
+
depth?: number | undefined;
|
|
141
147
|
}, {
|
|
142
148
|
hide?: boolean | undefined;
|
|
143
149
|
header?: string | undefined;
|
|
144
|
-
|
|
150
|
+
depth?: number | undefined;
|
|
145
151
|
}>>>;
|
|
146
152
|
editPage: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
|
|
147
153
|
baseUrl: z.ZodOptional<z.ZodString>;
|
|
@@ -156,9 +162,9 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
156
162
|
text: string;
|
|
157
163
|
}, {
|
|
158
164
|
hide?: boolean | undefined;
|
|
165
|
+
text?: string | undefined;
|
|
159
166
|
baseUrl?: string | undefined;
|
|
160
167
|
icon?: string | undefined;
|
|
161
|
-
text?: string | undefined;
|
|
162
168
|
}>>>;
|
|
163
169
|
copyCodeSnippet: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
|
|
164
170
|
buttonText: z.ZodOptional<z.ZodDefault<z.ZodString>>;
|
|
@@ -181,7 +187,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
181
187
|
toasterDuration?: number | undefined;
|
|
182
188
|
}>>>;
|
|
183
189
|
}, "strict", z.ZodTypeAny, {
|
|
184
|
-
|
|
190
|
+
frontMatterKeysToResolve?: string[] | undefined;
|
|
185
191
|
lastUpdatedBlock?: {
|
|
186
192
|
hide?: boolean | undefined;
|
|
187
193
|
format?: "timeago" | "iso" | "long" | "short" | undefined;
|
|
@@ -196,7 +202,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
196
202
|
toc: {
|
|
197
203
|
hide?: boolean | undefined;
|
|
198
204
|
header?: string | undefined;
|
|
199
|
-
|
|
205
|
+
depth?: number | undefined;
|
|
200
206
|
};
|
|
201
207
|
copyCodeSnippet: {
|
|
202
208
|
hide?: boolean | undefined;
|
|
@@ -206,7 +212,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
206
212
|
toasterDuration?: number | undefined;
|
|
207
213
|
};
|
|
208
214
|
}, {
|
|
209
|
-
|
|
215
|
+
frontMatterKeysToResolve?: string[] | undefined;
|
|
210
216
|
lastUpdatedBlock?: {
|
|
211
217
|
hide?: boolean | undefined;
|
|
212
218
|
format?: "timeago" | "iso" | "long" | "short" | undefined;
|
|
@@ -215,13 +221,13 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
215
221
|
toc?: {
|
|
216
222
|
hide?: boolean | undefined;
|
|
217
223
|
header?: string | undefined;
|
|
218
|
-
|
|
224
|
+
depth?: number | undefined;
|
|
219
225
|
} | undefined;
|
|
220
226
|
editPage?: {
|
|
221
227
|
hide?: boolean | undefined;
|
|
228
|
+
text?: string | undefined;
|
|
222
229
|
baseUrl?: string | undefined;
|
|
223
230
|
icon?: string | undefined;
|
|
224
|
-
text?: string | undefined;
|
|
225
231
|
} | undefined;
|
|
226
232
|
copyCodeSnippet?: {
|
|
227
233
|
hide?: boolean | undefined;
|
|
@@ -243,24 +249,25 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
243
249
|
} | undefined;
|
|
244
250
|
navbar?: {
|
|
245
251
|
hide?: boolean | undefined;
|
|
252
|
+
items?: any[] | undefined;
|
|
246
253
|
} | undefined;
|
|
247
254
|
footer?: {
|
|
248
255
|
hide?: boolean | undefined;
|
|
256
|
+
items?: any[] | undefined;
|
|
257
|
+
copyrightText?: string | undefined;
|
|
249
258
|
} | undefined;
|
|
250
259
|
sidebar?: {
|
|
251
260
|
hide?: boolean | undefined;
|
|
252
261
|
} | undefined;
|
|
253
|
-
navbarItems?: any;
|
|
254
|
-
footerItems?: any;
|
|
255
262
|
scripts?: (string | Record<string, string | boolean>)[] | undefined;
|
|
256
263
|
postBodyScripts?: (string | Record<string, string | boolean>)[] | undefined;
|
|
257
|
-
|
|
264
|
+
stylesheets?: (string | Record<string, string | boolean>)[] | undefined;
|
|
258
265
|
search?: {
|
|
259
266
|
hide?: boolean | undefined;
|
|
260
267
|
placement?: string | undefined;
|
|
261
268
|
} | undefined;
|
|
262
269
|
markdown?: {
|
|
263
|
-
|
|
270
|
+
frontMatterKeysToResolve?: string[] | undefined;
|
|
264
271
|
lastUpdatedBlock?: {
|
|
265
272
|
hide?: boolean | undefined;
|
|
266
273
|
format?: "timeago" | "iso" | "long" | "short" | undefined;
|
|
@@ -275,7 +282,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
275
282
|
toc: {
|
|
276
283
|
hide?: boolean | undefined;
|
|
277
284
|
header?: string | undefined;
|
|
278
|
-
|
|
285
|
+
depth?: number | undefined;
|
|
279
286
|
};
|
|
280
287
|
copyCodeSnippet: {
|
|
281
288
|
hide?: boolean | undefined;
|
|
@@ -289,18 +296,17 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
289
296
|
graphql?: {} | undefined;
|
|
290
297
|
colorMode: {
|
|
291
298
|
hide?: boolean | undefined;
|
|
292
|
-
|
|
293
|
-
default?: string | undefined;
|
|
299
|
+
ignoreDetection?: boolean | undefined;
|
|
294
300
|
modes?: string[] | undefined;
|
|
295
301
|
};
|
|
296
302
|
navigation: {
|
|
297
|
-
|
|
303
|
+
nextButton: {
|
|
298
304
|
hide?: boolean | undefined;
|
|
299
|
-
|
|
305
|
+
text: string;
|
|
300
306
|
};
|
|
301
|
-
|
|
307
|
+
previousButton: {
|
|
302
308
|
hide?: boolean | undefined;
|
|
303
|
-
|
|
309
|
+
text: string;
|
|
304
310
|
};
|
|
305
311
|
};
|
|
306
312
|
}, {
|
|
@@ -313,40 +319,40 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
313
319
|
} | undefined;
|
|
314
320
|
navbar?: {
|
|
315
321
|
hide?: boolean | undefined;
|
|
322
|
+
items?: any[] | undefined;
|
|
316
323
|
} | undefined;
|
|
317
324
|
footer?: {
|
|
318
325
|
hide?: boolean | undefined;
|
|
326
|
+
items?: any[] | undefined;
|
|
327
|
+
copyrightText?: string | undefined;
|
|
319
328
|
} | undefined;
|
|
320
329
|
sidebar?: {
|
|
321
330
|
hide?: boolean | undefined;
|
|
322
331
|
} | undefined;
|
|
323
|
-
navbarItems?: any;
|
|
324
|
-
footerItems?: any;
|
|
325
332
|
scripts?: (string | Record<string, string | boolean>)[] | undefined;
|
|
326
333
|
postBodyScripts?: (string | Record<string, string | boolean>)[] | undefined;
|
|
327
|
-
|
|
334
|
+
stylesheets?: (string | Record<string, string | boolean>)[] | undefined;
|
|
328
335
|
search?: {
|
|
329
336
|
hide?: boolean | undefined;
|
|
330
337
|
placement?: string | undefined;
|
|
331
338
|
} | undefined;
|
|
332
339
|
colorMode?: {
|
|
333
340
|
hide?: boolean | undefined;
|
|
334
|
-
|
|
335
|
-
default?: string | undefined;
|
|
341
|
+
ignoreDetection?: boolean | undefined;
|
|
336
342
|
modes?: string[] | undefined;
|
|
337
343
|
} | undefined;
|
|
338
344
|
navigation?: {
|
|
339
|
-
|
|
345
|
+
nextButton?: {
|
|
340
346
|
hide?: boolean | undefined;
|
|
341
|
-
|
|
347
|
+
text?: string | undefined;
|
|
342
348
|
} | undefined;
|
|
343
|
-
|
|
349
|
+
previousButton?: {
|
|
344
350
|
hide?: boolean | undefined;
|
|
345
|
-
|
|
351
|
+
text?: string | undefined;
|
|
346
352
|
} | undefined;
|
|
347
353
|
} | undefined;
|
|
348
354
|
markdown?: {
|
|
349
|
-
|
|
355
|
+
frontMatterKeysToResolve?: string[] | undefined;
|
|
350
356
|
lastUpdatedBlock?: {
|
|
351
357
|
hide?: boolean | undefined;
|
|
352
358
|
format?: "timeago" | "iso" | "long" | "short" | undefined;
|
|
@@ -355,13 +361,13 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
355
361
|
toc?: {
|
|
356
362
|
hide?: boolean | undefined;
|
|
357
363
|
header?: string | undefined;
|
|
358
|
-
|
|
364
|
+
depth?: number | undefined;
|
|
359
365
|
} | undefined;
|
|
360
366
|
editPage?: {
|
|
361
367
|
hide?: boolean | undefined;
|
|
368
|
+
text?: string | undefined;
|
|
362
369
|
baseUrl?: string | undefined;
|
|
363
370
|
icon?: string | undefined;
|
|
364
|
-
text?: string | undefined;
|
|
365
371
|
} | undefined;
|
|
366
372
|
copyCodeSnippet?: {
|
|
367
373
|
hide?: boolean | undefined;
|
|
@@ -375,9 +381,9 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
|
|
|
375
381
|
graphql?: {} | undefined;
|
|
376
382
|
}>>;
|
|
377
383
|
export declare type ThemeConfig = z.infer<typeof ThemeConfig>;
|
|
378
|
-
export declare type ThemeUIConfig = Omit<ThemeConfig, '
|
|
379
|
-
|
|
380
|
-
|
|
384
|
+
export declare type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'styles' | 'scripts' | 'postBodyScripts'> & {
|
|
385
|
+
navbar?: any;
|
|
386
|
+
footer?: any;
|
|
381
387
|
auth?: {
|
|
382
388
|
idpIds?: string[];
|
|
383
389
|
devLogin?: boolean;
|
package/lib/config.js
CHANGED
|
@@ -17,18 +17,31 @@ exports.ThemeConfig = zod_1.z
|
|
|
17
17
|
.object({
|
|
18
18
|
imports: zod_1.z.array(zod_1.z.string()).default([]).optional(),
|
|
19
19
|
logo: LogoConfig.optional(),
|
|
20
|
-
navbar:
|
|
21
|
-
|
|
20
|
+
navbar: zod_1.z
|
|
21
|
+
.object({
|
|
22
|
+
items: zod_1.z.array(zod_1.z.any()).optional(), // todo: think about validation here
|
|
23
|
+
})
|
|
24
|
+
.extend(HideConfig.shape)
|
|
25
|
+
.strict()
|
|
26
|
+
.optional(),
|
|
27
|
+
footer: zod_1.z
|
|
28
|
+
.object({
|
|
29
|
+
items: zod_1.z.array(zod_1.z.any()).optional(),
|
|
30
|
+
copyrightText: zod_1.z.string().optional(),
|
|
31
|
+
})
|
|
32
|
+
.extend(HideConfig.shape)
|
|
33
|
+
.strict()
|
|
34
|
+
.optional(),
|
|
22
35
|
sidebar: HideConfig.strict().optional(),
|
|
23
|
-
navbarItems: zod_1.z.any().optional(),
|
|
24
|
-
footerItems: zod_1.z.any().optional(),
|
|
25
36
|
scripts: zod_1.z
|
|
26
37
|
.array(zod_1.z.union([zod_1.z.string(), zod_1.z.record(zod_1.z.union([zod_1.z.boolean(), zod_1.z.string()]))]))
|
|
27
38
|
.optional(),
|
|
28
39
|
postBodyScripts: zod_1.z
|
|
29
40
|
.array(zod_1.z.union([zod_1.z.string(), zod_1.z.record(zod_1.z.union([zod_1.z.boolean(), zod_1.z.string()]))]))
|
|
30
41
|
.optional(),
|
|
31
|
-
|
|
42
|
+
stylesheets: zod_1.z
|
|
43
|
+
.array(zod_1.z.union([zod_1.z.string(), zod_1.z.record(zod_1.z.union([zod_1.z.boolean(), zod_1.z.string()]))]))
|
|
44
|
+
.optional(),
|
|
32
45
|
search: zod_1.z
|
|
33
46
|
.object({
|
|
34
47
|
placement: zod_1.z.string().default('navbar').optional(),
|
|
@@ -39,8 +52,7 @@ exports.ThemeConfig = zod_1.z
|
|
|
39
52
|
.optional(),
|
|
40
53
|
colorMode: zod_1.z
|
|
41
54
|
.object({
|
|
42
|
-
|
|
43
|
-
default: zod_1.z.string().optional(),
|
|
55
|
+
ignoreDetection: zod_1.z.boolean().optional(),
|
|
44
56
|
modes: zod_1.z.array(zod_1.z.string()).default(['light', 'dark']).optional(),
|
|
45
57
|
})
|
|
46
58
|
.extend(HideConfig.shape)
|
|
@@ -49,13 +61,13 @@ exports.ThemeConfig = zod_1.z
|
|
|
49
61
|
.default({}),
|
|
50
62
|
navigation: zod_1.z
|
|
51
63
|
.object({
|
|
52
|
-
|
|
53
|
-
.object({
|
|
64
|
+
nextButton: zod_1.z
|
|
65
|
+
.object({ text: zod_1.z.string().default('Next to {label}') })
|
|
54
66
|
.extend(HideConfig.shape)
|
|
55
67
|
.optional()
|
|
56
68
|
.default({}),
|
|
57
|
-
|
|
58
|
-
.object({
|
|
69
|
+
previousButton: zod_1.z
|
|
70
|
+
.object({ text: zod_1.z.string().default('Back to {label}') })
|
|
59
71
|
.extend(HideConfig.shape)
|
|
60
72
|
.optional()
|
|
61
73
|
.default({}),
|
|
@@ -65,7 +77,7 @@ exports.ThemeConfig = zod_1.z
|
|
|
65
77
|
.default({}),
|
|
66
78
|
markdown: zod_1.z
|
|
67
79
|
.object({
|
|
68
|
-
|
|
80
|
+
frontMatterKeysToResolve: zod_1.z.array(zod_1.z.string()).default(['image', 'links']).optional(),
|
|
69
81
|
lastUpdatedBlock: zod_1.z
|
|
70
82
|
.object({
|
|
71
83
|
format: zod_1.z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
|
|
@@ -77,7 +89,7 @@ exports.ThemeConfig = zod_1.z
|
|
|
77
89
|
toc: zod_1.z
|
|
78
90
|
.object({
|
|
79
91
|
header: zod_1.z.string().default('On this page').optional(),
|
|
80
|
-
|
|
92
|
+
depth: zod_1.z.number().default(3).optional(),
|
|
81
93
|
})
|
|
82
94
|
.extend(HideConfig.shape)
|
|
83
95
|
.optional()
|
package/lib/mocks/hooks/index.js
CHANGED
|
@@ -5,7 +5,7 @@ function useThemeConfig() {
|
|
|
5
5
|
return {
|
|
6
6
|
search: { hide: false, placement: 'navbar' },
|
|
7
7
|
markdown: {
|
|
8
|
-
toc: {
|
|
8
|
+
toc: { depth: 3, header: 'Table of contents', hide: false },
|
|
9
9
|
lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
|
|
10
10
|
copyCodeSnippet: {
|
|
11
11
|
hide: false,
|
|
@@ -18,15 +18,14 @@ function useThemeConfig() {
|
|
|
18
18
|
baseUrl: '',
|
|
19
19
|
text: 'Edit this page',
|
|
20
20
|
},
|
|
21
|
-
|
|
21
|
+
frontMatterKeysToResolve: ['image', 'links'],
|
|
22
22
|
},
|
|
23
23
|
navigation: {
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
nextButton: { text: 'next page theme config label' },
|
|
25
|
+
previousButton: { text: 'prev page theme config label' },
|
|
26
26
|
},
|
|
27
27
|
colorMode: {
|
|
28
28
|
modes: ['light', 'dark'],
|
|
29
|
-
default: 'light',
|
|
30
29
|
},
|
|
31
30
|
};
|
|
32
31
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@redocly/theme",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "Shared UI components",
|
|
5
5
|
"author": "team@redocly.com",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@storybook/manager-webpack5": "^6.5.9",
|
|
57
57
|
"@storybook/node-logger": "^6.5.9",
|
|
58
58
|
"@storybook/react": "^6.5.9",
|
|
59
|
-
"@storybook/testing-library": "^0.0.
|
|
59
|
+
"@storybook/testing-library": "^0.0.13",
|
|
60
60
|
"@storybook/theming": "^6.5.9",
|
|
61
61
|
"@testing-library/jest-dom": "^5.16.5",
|
|
62
62
|
"@testing-library/react": "^12.1.4",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"@types/react": "^17.0.43",
|
|
71
71
|
"@types/react-dom": "^17.0.14",
|
|
72
72
|
"@types/react-router-dom": "^5.3.1",
|
|
73
|
-
"@types/styled-components": "^5.1.
|
|
73
|
+
"@types/styled-components": "^5.1.26",
|
|
74
74
|
"@types/styled-system": "^5.1.13",
|
|
75
75
|
"@typescript-eslint/eslint-plugin": "^5.23.0",
|
|
76
76
|
"@typescript-eslint/parser": "^5.23.0",
|
|
@@ -9,7 +9,7 @@ export function ColorModeSwitcher(): JSX.Element | null {
|
|
|
9
9
|
const colorMode = themeSettings.colorMode;
|
|
10
10
|
const [activeColorMode, setActiveColorMode] = useState('');
|
|
11
11
|
const modes = colorMode?.modes || ['light', 'dark'];
|
|
12
|
-
const defaultColor =
|
|
12
|
+
const defaultColor = modes[0] || 'light';
|
|
13
13
|
|
|
14
14
|
useMount(() => {
|
|
15
15
|
setActiveColorMode(document.documentElement.className || defaultColor);
|
package/src/Footer/Footer.tsx
CHANGED
|
@@ -5,22 +5,25 @@ import { FooterColumns } from '@theme/Footer/FooterColumns';
|
|
|
5
5
|
import { FooterCopyright } from '@theme/Footer/FooterCopyright';
|
|
6
6
|
import { isEmptyArray } from '@theme/utils';
|
|
7
7
|
import { useThemeConfig } from '@theme/hooks';
|
|
8
|
-
import type {
|
|
8
|
+
import type { NavGroup, ResolvedNavItem } from '@theme/types/portal';
|
|
9
9
|
|
|
10
10
|
interface FooterProps {
|
|
11
|
-
data:
|
|
11
|
+
data: {
|
|
12
|
+
items?: NavGroup;
|
|
13
|
+
copyrightText?: string;
|
|
14
|
+
};
|
|
12
15
|
}
|
|
13
16
|
|
|
14
|
-
export function Footer({ data: {
|
|
17
|
+
export function Footer({ data: { items, copyrightText } }: FooterProps): JSX.Element | null {
|
|
15
18
|
const { footer } = useThemeConfig();
|
|
16
19
|
|
|
17
|
-
if (isEmptyArray(
|
|
20
|
+
if (isEmptyArray(items) || !copyrightText || footer?.hide) {
|
|
18
21
|
return null;
|
|
19
22
|
}
|
|
20
23
|
|
|
21
24
|
return (
|
|
22
25
|
<FooterContainer data-component-name="Footer/Footer">
|
|
23
|
-
<FooterColumns columns={
|
|
26
|
+
<FooterColumns columns={items as ResolvedNavItem[]} />
|
|
24
27
|
<FooterCopyright copyrightText={copyrightText} />
|
|
25
28
|
</FooterContainer>
|
|
26
29
|
);
|
|
@@ -10,15 +10,15 @@ interface NextPageType {
|
|
|
10
10
|
nextPage?: ResolvedNavItemWithLink | null;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
export function
|
|
13
|
+
export function NextButton(): JSX.Element {
|
|
14
14
|
const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
|
|
15
15
|
const { navigation } = useThemeConfig();
|
|
16
16
|
|
|
17
|
-
if (!nextPage || navigation?.
|
|
17
|
+
if (!nextPage || navigation?.nextButton?.hide) {
|
|
18
18
|
return <div> </div>;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
const
|
|
21
|
+
const text = (navigation?.nextButton?.text || 'Next to {label}').replace(
|
|
22
22
|
'{label}',
|
|
23
23
|
nextPage.label || nextPage.routeSlug || '',
|
|
24
24
|
);
|
|
@@ -30,7 +30,7 @@ export function NextPageLink(): JSX.Element {
|
|
|
30
30
|
to={nextPage.link}
|
|
31
31
|
data-component-name="PageNavigation/NextPageLink"
|
|
32
32
|
>
|
|
33
|
-
{
|
|
33
|
+
{text}
|
|
34
34
|
</StyledButton>
|
|
35
35
|
);
|
|
36
36
|
}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { PreviousButton } from '@theme/PageNavigation/PreviousButton';
|
|
5
|
+
import { NextButton } from '@theme/PageNavigation/NextButton';
|
|
6
6
|
import { useThemeConfig } from '@theme/hooks/useThemeConfig';
|
|
7
7
|
|
|
8
8
|
export function PageNavigation(): JSX.Element | null {
|
|
9
9
|
const { navigation } = useThemeConfig();
|
|
10
10
|
|
|
11
|
-
if (navigation?.
|
|
11
|
+
if (navigation?.previousButton?.hide && navigation?.nextButton?.hide) {
|
|
12
12
|
return null;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
return (
|
|
16
16
|
<PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
|
|
17
|
-
<
|
|
18
|
-
<
|
|
17
|
+
<PreviousButton />
|
|
18
|
+
<NextButton />
|
|
19
19
|
</PageNavigationWrapper>
|
|
20
20
|
);
|
|
21
21
|
}
|
|
@@ -10,15 +10,15 @@ interface PreviousPageType {
|
|
|
10
10
|
prevPage?: ResolvedNavItemWithLink | null;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
export function
|
|
13
|
+
export function PreviousButton(): JSX.Element {
|
|
14
14
|
const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
|
|
15
15
|
const { navigation } = useThemeConfig();
|
|
16
16
|
|
|
17
|
-
if (!prevPage || navigation?.
|
|
17
|
+
if (!prevPage || navigation?.previousButton?.hide) {
|
|
18
18
|
return <div> </div>;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
const
|
|
21
|
+
const text = (navigation?.previousButton?.text || 'Back to {label}').replace(
|
|
22
22
|
'{label}',
|
|
23
23
|
prevPage.label || prevPage.routeSlug || '',
|
|
24
24
|
);
|
|
@@ -30,7 +30,7 @@ export function PreviousPageLink(): JSX.Element {
|
|
|
30
30
|
to={prevPage.link}
|
|
31
31
|
data-component-name="PageNavigation/PreviousPageLink"
|
|
32
32
|
>
|
|
33
|
-
{
|
|
33
|
+
{text}
|
|
34
34
|
</StyledButton>
|
|
35
35
|
);
|
|
36
36
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from '@theme/PageNavigation/
|
|
1
|
+
export * from '@theme/PageNavigation/NextButton';
|
|
2
2
|
export * from '@theme/PageNavigation/PageNavigation';
|
|
3
|
-
export * from '@theme/PageNavigation/
|
|
3
|
+
export * from '@theme/PageNavigation/PreviousButton';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
4
|
import { useFullHeight } from '@theme/hooks/useFullHeight';
|
|
@@ -16,11 +16,11 @@ interface TableOfContentProps {
|
|
|
16
16
|
export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
|
|
17
17
|
const { headings, contentWrapper } = props;
|
|
18
18
|
|
|
19
|
-
const sidebar = useRef<HTMLDivElement | null>(null);
|
|
19
|
+
const sidebar = React.useRef<HTMLDivElement | null>(null);
|
|
20
20
|
useFullHeight(sidebar);
|
|
21
21
|
const { markdown: { toc = {} } = {} } = useThemeConfig();
|
|
22
22
|
|
|
23
|
-
const displayedHeadings = getDisplayedHeadings(headings, toc.
|
|
23
|
+
const displayedHeadings = getDisplayedHeadings(headings, toc.depth || 3);
|
|
24
24
|
const leastDepth = getLeastDepth(displayedHeadings);
|
|
25
25
|
|
|
26
26
|
const activeHeadingId = useActiveHeading(
|
|
@@ -31,38 +31,30 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
|
|
|
31
31
|
if (toc?.hide) {
|
|
32
32
|
return null;
|
|
33
33
|
}
|
|
34
|
-
if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
|
|
35
|
-
return null;
|
|
36
|
-
}
|
|
37
|
-
if (!headings?.length) {
|
|
38
|
-
return null;
|
|
39
|
-
}
|
|
40
34
|
|
|
41
35
|
return (
|
|
42
36
|
<>
|
|
43
|
-
|
|
44
|
-
<
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
</TableOfContentMenu>
|
|
65
|
-
)}
|
|
37
|
+
<TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
|
|
38
|
+
<TableOfContentItems ref={sidebar}>
|
|
39
|
+
{displayedHeadings.length ? <TocHeader>{toc.header || 'On this page'}</TocHeader> : null}
|
|
40
|
+
{displayedHeadings.map((heading: MdHeading | null, idx: number) => {
|
|
41
|
+
if (!heading) {
|
|
42
|
+
return null;
|
|
43
|
+
}
|
|
44
|
+
const href = '#' + heading.id;
|
|
45
|
+
return (
|
|
46
|
+
<MenuItem
|
|
47
|
+
key={href + idx}
|
|
48
|
+
href={href}
|
|
49
|
+
depth={heading.depth - leastDepth + 1 || 0}
|
|
50
|
+
className={activeHeadingId === heading.id ? 'active' : ''}
|
|
51
|
+
dangerouslySetInnerHTML={{ __html: heading.value || '' }}
|
|
52
|
+
data-cy={`toc-${heading.value}`}
|
|
53
|
+
/>
|
|
54
|
+
);
|
|
55
|
+
})}
|
|
56
|
+
</TableOfContentItems>
|
|
57
|
+
</TableOfContentMenu>
|
|
66
58
|
</>
|
|
67
59
|
);
|
|
68
60
|
}
|
|
@@ -2,7 +2,7 @@ import type { MdHeading } from '@theme/types/portal';
|
|
|
2
2
|
|
|
3
3
|
export function getDisplayedHeadings(
|
|
4
4
|
headings: Array<MdHeading | null> | null | undefined,
|
|
5
|
-
|
|
5
|
+
tocDepth: number,
|
|
6
6
|
): Array<MdHeading | null> {
|
|
7
7
|
if (!headings) {
|
|
8
8
|
return [];
|
|
@@ -14,7 +14,7 @@ export function getDisplayedHeadings(
|
|
|
14
14
|
if (idx === 0 && heading.depth === 1) {
|
|
15
15
|
return false;
|
|
16
16
|
}
|
|
17
|
-
return !(heading.depth && heading.depth >
|
|
17
|
+
return !(heading.depth && heading.depth > tocDepth);
|
|
18
18
|
});
|
|
19
19
|
}
|
|
20
20
|
|
package/src/config.ts
CHANGED
|
@@ -18,11 +18,23 @@ export const ThemeConfig = z
|
|
|
18
18
|
imports: z.array(z.string()).default([]).optional(),
|
|
19
19
|
|
|
20
20
|
logo: LogoConfig.optional(),
|
|
21
|
-
navbar:
|
|
22
|
-
|
|
21
|
+
navbar: z
|
|
22
|
+
.object({
|
|
23
|
+
items: z.array(z.any()).optional(), // todo: think about validation here
|
|
24
|
+
})
|
|
25
|
+
.extend(HideConfig.shape)
|
|
26
|
+
.strict()
|
|
27
|
+
.optional(),
|
|
28
|
+
|
|
29
|
+
footer: z
|
|
30
|
+
.object({
|
|
31
|
+
items: z.array(z.any()).optional(), // todo: think about validation here
|
|
32
|
+
copyrightText: z.string().optional(),
|
|
33
|
+
})
|
|
34
|
+
.extend(HideConfig.shape)
|
|
35
|
+
.strict()
|
|
36
|
+
.optional(),
|
|
23
37
|
sidebar: HideConfig.strict().optional(),
|
|
24
|
-
navbarItems: z.any().optional(), // todo: think about validation here
|
|
25
|
-
footerItems: z.any().optional(), // todo: think about validation here
|
|
26
38
|
|
|
27
39
|
scripts: z
|
|
28
40
|
.array(z.union([z.string(), z.record(z.union([z.boolean(), z.string()]))]))
|
|
@@ -30,7 +42,9 @@ export const ThemeConfig = z
|
|
|
30
42
|
postBodyScripts: z
|
|
31
43
|
.array(z.union([z.string(), z.record(z.union([z.boolean(), z.string()]))]))
|
|
32
44
|
.optional(),
|
|
33
|
-
|
|
45
|
+
stylesheets: z
|
|
46
|
+
.array(z.union([z.string(), z.record(z.union([z.boolean(), z.string()]))]))
|
|
47
|
+
.optional(),
|
|
34
48
|
|
|
35
49
|
search: z
|
|
36
50
|
.object({
|
|
@@ -43,8 +57,7 @@ export const ThemeConfig = z
|
|
|
43
57
|
|
|
44
58
|
colorMode: z
|
|
45
59
|
.object({
|
|
46
|
-
|
|
47
|
-
default: z.string().optional(),
|
|
60
|
+
ignoreDetection: z.boolean().optional(),
|
|
48
61
|
modes: z.array(z.string()).default(['light', 'dark']).optional(),
|
|
49
62
|
})
|
|
50
63
|
.extend(HideConfig.shape)
|
|
@@ -53,13 +66,13 @@ export const ThemeConfig = z
|
|
|
53
66
|
.default({}),
|
|
54
67
|
navigation: z
|
|
55
68
|
.object({
|
|
56
|
-
|
|
57
|
-
.object({
|
|
69
|
+
nextButton: z
|
|
70
|
+
.object({ text: z.string().default('Next to {label}') })
|
|
58
71
|
.extend(HideConfig.shape)
|
|
59
72
|
.optional()
|
|
60
73
|
.default({}),
|
|
61
|
-
|
|
62
|
-
.object({
|
|
74
|
+
previousButton: z
|
|
75
|
+
.object({ text: z.string().default('Back to {label}') })
|
|
63
76
|
.extend(HideConfig.shape)
|
|
64
77
|
.optional()
|
|
65
78
|
.default({}),
|
|
@@ -69,7 +82,7 @@ export const ThemeConfig = z
|
|
|
69
82
|
.default({}),
|
|
70
83
|
markdown: z
|
|
71
84
|
.object({
|
|
72
|
-
|
|
85
|
+
frontMatterKeysToResolve: z.array(z.string()).default(['image', 'links']).optional(),
|
|
73
86
|
lastUpdatedBlock: z
|
|
74
87
|
.object({
|
|
75
88
|
format: z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
|
|
@@ -81,7 +94,7 @@ export const ThemeConfig = z
|
|
|
81
94
|
toc: z
|
|
82
95
|
.object({
|
|
83
96
|
header: z.string().default('On this page').optional(),
|
|
84
|
-
|
|
97
|
+
depth: z.number().default(3).optional(),
|
|
85
98
|
})
|
|
86
99
|
.extend(HideConfig.shape)
|
|
87
100
|
.optional()
|
|
@@ -118,10 +131,10 @@ export const ThemeConfig = z
|
|
|
118
131
|
export type ThemeConfig = z.infer<typeof ThemeConfig>;
|
|
119
132
|
export type ThemeUIConfig = Omit<
|
|
120
133
|
ThemeConfig,
|
|
121
|
-
'
|
|
134
|
+
'navbar' | 'footer' | 'styles' | 'scripts' | 'postBodyScripts'
|
|
122
135
|
> & {
|
|
123
|
-
|
|
124
|
-
|
|
136
|
+
navbar?: any; // TODO
|
|
137
|
+
footer?: any; // TODO
|
|
125
138
|
auth?: {
|
|
126
139
|
// used by portal dev login emulator
|
|
127
140
|
idpIds?: string[];
|
package/src/mocks/hooks/index.ts
CHANGED
|
@@ -10,7 +10,7 @@ export function useThemeConfig<T extends Record<string, unknown>>(): T & ThemeUI
|
|
|
10
10
|
return {
|
|
11
11
|
search: { hide: false, placement: 'navbar' },
|
|
12
12
|
markdown: {
|
|
13
|
-
toc: {
|
|
13
|
+
toc: { depth: 3, header: 'Table of contents', hide: false },
|
|
14
14
|
lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
|
|
15
15
|
copyCodeSnippet: {
|
|
16
16
|
hide: false,
|
|
@@ -23,15 +23,14 @@ export function useThemeConfig<T extends Record<string, unknown>>(): T & ThemeUI
|
|
|
23
23
|
baseUrl: '',
|
|
24
24
|
text: 'Edit this page',
|
|
25
25
|
},
|
|
26
|
-
|
|
26
|
+
frontMatterKeysToResolve: ['image', 'links'],
|
|
27
27
|
},
|
|
28
28
|
navigation: {
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
nextButton: { text: 'next page theme config label' },
|
|
30
|
+
previousButton: { text: 'prev page theme config label' },
|
|
31
31
|
},
|
|
32
32
|
colorMode: {
|
|
33
33
|
modes: ['light', 'dark'],
|
|
34
|
-
default: 'light',
|
|
35
34
|
},
|
|
36
35
|
} as ThemeUIConfig as T & ThemeUIConfig;
|
|
37
36
|
}
|
package/src/settings.yaml
CHANGED
|
@@ -8,7 +8,6 @@ export declare const PUBLIC_ASSETS_FOLDER = '/assets';
|
|
|
8
8
|
export declare const PUBLIC_STATIC_FOLDER = '/static';
|
|
9
9
|
export declare const PERMISSION_PROP_NAME = 'redocly::permission';
|
|
10
10
|
export declare const DEFAULT_PLACEHOLDER_PERMISSION = 'redocly:default-permission';
|
|
11
|
-
export declare const DIRECTORY_PERMISSIONS_FILE_NAME = 'permissions.rbac.yaml';
|
|
12
11
|
export declare const REQUIRED_OIDC_SCOPES: string[];
|
|
13
12
|
export declare const DEFAULT_COOKIE_EXPIRATION: number;
|
|
14
13
|
export declare const DEFAULT_AUTHENTICATED_ROLE = 'AuthenticatedUser';
|