@redocly/theme 0.14.2 → 0.15.1

package/lib/I18n/LanguagePicker.js

@@ -77,7 +77,7 @@ const DropdownValue = styled_components_1.default.div `
   display: block;
 
   color: var(--navbar-text-color);
-  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
+  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   border-radius: var(--navbar-item-border-radius);
 
   &:hover {

package/lib/components/Breadcrumbs/Breadcrumb.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Breadcrumb: (props: {
+    label: string;
+    link?: string;
+    isActive: boolean;
+}) => JSX.Element;

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumb = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+const Breadcrumb = (props) => {
+    const { label, link, isActive } = props;
+    return (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/Breadcrumb", isLink: link != null, isActive: isActive }, link ? (react_1.default.createElement(BreadcrumbLink, { to: link }, label)) : (react_1.default.createElement(BreadcrumbText, null, label))));
+};
+exports.Breadcrumb = Breadcrumb;
+const BreadcrumbText = styled_components_1.default.div `
+  cursor: default;
+`;
+const BreadcrumbWrapper = styled_components_1.default.div `
+  border-radius: var(--border-radius);
+  padding: 0 var(--breadcrumbs-padding-horizontal);
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  ${(props) => props.isLink &&
+    `
+    &:hover {
+      text-decoration: var(--breadcrumbs-hover-text-decoration);
+    }
+  `}
+
+  ${(props) => props.isActive &&
+    `
+    color: var(--breadcrumbs-active-text-color);
+  `}
+`;
+const BreadcrumbLink = (0, styled_components_1.default)(Link_1.Link) `
+  text-decoration: none;
+
+  &:visited {
+    color: inherit;
+  }
+`;
+//# sourceMappingURL=Breadcrumb.js.map

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Breadcrumbs: (props: {
+    className?: string;
+}) => JSX.Element | null;

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumbs = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const useBreadcrumbs_1 = require("../../mocks/Sidebar/useBreadcrumbs");
+const Breadcrumb_1 = require("./Breadcrumb");
+const Breadcrumbs = (props) => {
+    const breadcrumbs = (0, useBreadcrumbs_1.useBreadcrumbs)();
+    if (breadcrumbs.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement(Container, { "data-component-name": "Breadcrumbs/Breadcrumbs", className: props.className }, breadcrumbs.map((breadcrumb, idx) => {
+        const isLast = idx === breadcrumbs.length - 1;
+        return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
+            react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: breadcrumb.label, isActive: isLast }),
+            isLast ? null : react_1.default.createElement("div", null, "/")));
+    })));
+};
+exports.Breadcrumbs = Breadcrumbs;
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--breadcrumbs-text-color);
+
+  @media print {
+    display: none;
+  }
+`;
+//# sourceMappingURL=Breadcrumbs.js.map

package/lib/components/Breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../components/Breadcrumbs/Breadcrumbs';
+export * from '../../components/Breadcrumbs/Breadcrumb';

package/lib/components/Breadcrumbs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Breadcrumbs/Breadcrumbs"), exports);
+__exportStar(require("../../components/Breadcrumbs/Breadcrumb"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Markdown/ContainerWrapper.js

@@ -14,9 +14,9 @@ exports.ContainerWrapper = styled_components_1.default.section.attrs(() => ({
 
   padding: var(--md-container-padding-vertical) var(--md-container-padding-horizontal);
 
-  & > article:first-child > h1:first-child {
-    // disable margin top for h1 on the title heading if there is no "Last updated at" block
-    /* margin-top: 0; */
+  article:first-child > h1:first-child {
+    // disable margin top for h1 on the title heading
+    margin-top: 0;
   }
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/lib/components/Markdown/Details.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 type DetailsProps = {
     summary: string;
+    className?: string;
 };
-export declare function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element;
+export declare function Details({ summary, children, className, }: React.PropsWithChildren<DetailsProps>): JSX.Element;
 export {};

package/lib/components/Markdown/Details.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Details = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Details({ summary, children }) {
-    return (react_1.default.createElement(StyledDetails, null,
+function Details({ summary, children, className, }) {
+    return (react_1.default.createElement(StyledDetails, { className: className },
         react_1.default.createElement("summary", null, summary),
         react_1.default.createElement(StyledDetailsContent, null, children)));
 }

package/lib/components/Markdown/MarkdownLayout.js

@@ -13,6 +13,7 @@ const EditPageButton_1 = require("../../components/EditPageButton");
 const LastUpdated_1 = require("../../components/LastUpdated/LastUpdated");
 const hooks_1 = require("../../hooks");
 const hooks_2 = require("../../mocks/hooks");
+const Breadcrumbs_1 = require("../../components/Breadcrumbs");
 function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, nextPage, prevPage, }) {
     const { markdown } = (0, hooks_1.useThemeConfig)();
     const { translate } = (0, hooks_2.useTranslate)();
@@ -23,6 +24,7 @@ function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, l
     const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
     return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
         react_1.default.createElement(ContainerWrapper_1.ContainerWrapper, { withToc: true },
+            react_1.default.createElement(Breadcrumbs, null),
             react_1.default.createElement(LayoutTop, null,
                 lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
                 mergedConf && (react_1.default.createElement(EditPageButton_1.EditPageButton, { text: translate(translationKeys.text, mergedConf.text), to: mergedConf.to, icon: mergedConf.icon, "data-translation-key": translationKeys.text }))),
@@ -37,6 +39,9 @@ const LayoutTop = styled_components_1.default.div `
   justify-content: space-between;
   flex-flow: row nowrap;
 `;
+const Breadcrumbs = (0, styled_components_1.default)(Breadcrumbs_1.Breadcrumbs) `
+  margin-bottom: var(--breadcrumbs-margin-bottom);
+`;
 const LayoutBottom = (0, styled_components_1.default)(LayoutTop) `
   > * {
     margin: 25px 5px;

package/lib/components/Markdown/MarkdownWrapper.js

@@ -50,12 +50,21 @@ exports.baseTable = (0, styled_components_1.css) `
     }
 
     th {
+      /** th has text-align: center by default */
       text-align: left;
       font-weight: var(--md-table-head-font-weight);
       color: var(--md-table-head-text-color);
       background-color: var(--md-table-head-background-color);
     }
 
+    /* need to overwrite the text-align: left from above */
+    th[align='center'] {
+      text-align: center;
+    }
+    th[align='right'] {
+      text-align: right;
+    }
+
     tr th:first-child,
     tr td:first-child {
       border-left: 1px solid var(--md-table-border-color);
@@ -260,10 +269,6 @@ exports.MarkdownWrapper = styled_components_1.default.main.attrs(() => ({
     ${(0, theme_helpers_1.typography)('h1', 'h')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
     ${headingAnchor()};
-
-    &:first-child {
-      margin-top: 0;
-    }
   }
 
   h2.md {

package/lib/components/Navbar/Navbar.js

@@ -42,7 +42,7 @@ const AuthUserProfile_1 = require("../../components/Profile/AuthUserProfile");
 const hooks_1 = require("../../mocks/hooks");
 const LanguagePicker_1 = require("../../I18n/LanguagePicker");
 const EmptyNavbarHack = (0, styled_components_1.createGlobalStyle) `
-  #redocly_root {
+  :root {
     --navbar-height: 0px !important;
   }
 `;
@@ -105,7 +105,7 @@ exports.NavbarContainer = styled_components_1.default.nav `
   position: sticky;
   top: 0;
   z-index: 200;
-  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
+  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   background: var(--navbar-background-color);
   font-family: var(--navbar-item-font-family);
 

package/lib/components/Navbar/NavbarItem.js

@@ -76,7 +76,7 @@ exports.NavbarLink = (0, styled_components_1.default)(Link_1.Link) `
 `;
 exports.NavbarMenuItem = styled_components_1.default.li `
   display: inline-block;
-  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
+  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   margin-left: var(--navbar-item-margin-horizontal);
   text-align: center;
   line-height: 1;

package/lib/components/OpenApiDocs/hooks/AfterOpenApiOperation.d.ts

@@ -0,0 +1 @@
+export declare const AfterOpenApiOperation: any;

package/lib/components/OpenApiDocs/hooks/AfterOpenApiOperation.js

@@ -0,0 +1,11 @@
+"use strict";
+// interface AfterOpenApiOperationProps {
+//   operation: any;
+// }
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AfterOpenApiOperation = void 0;
+// export function AfterOpenApiOperation(_props: AfterOpenAPIOperationProps) {
+//   return null;
+// }
+exports.AfterOpenApiOperation = null;
+//# sourceMappingURL=AfterOpenApiOperation.js.map

package/lib/components/OpenApiDocs/hooks/AfterOpenApiOperationSummary.d.ts

@@ -0,0 +1 @@
+export declare const AfterOpenApiOperationSummary: any;

package/lib/components/OpenApiDocs/hooks/AfterOpenApiOperationSummary.js

@@ -0,0 +1,11 @@
+"use strict";
+// interface AfterOpenApiOperationSummaryProps {
+//   operation: any;
+// }
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AfterOpenApiOperationSummary = void 0;
+// export function AfterOpenApiOperationSummary(_props: AfterOpenAPIOperationSummaryProps) {
+//   return null;
+// }
+exports.AfterOpenApiOperationSummary = null;
+//# sourceMappingURL=AfterOpenApiOperationSummary.js.map

package/lib/components/OpenApiDocs/hooks/AfterOpenApiTitle.d.ts

@@ -0,0 +1 @@
+export declare const AfterOpenApiTitle: any;

package/lib/components/OpenApiDocs/hooks/AfterOpenApiTitle.js

@@ -0,0 +1,11 @@
+"use strict";
+// interface AfterOpenApiTitleProps {
+//   info: any;
+// }
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AfterOpenApiTitle = void 0;
+// export function AfterOpenApiTitle(_props: AfterOpenAPIApiTitleProps) {
+//   return null;
+// }
+exports.AfterOpenApiTitle = null;
+//# sourceMappingURL=AfterOpenApiTitle.js.map

package/lib/components/OpenApiDocs/hooks/BeforeOpenApiOperation.d.ts

@@ -0,0 +1 @@
+export declare const BeforeOpenApiOperation: any;

package/lib/components/OpenApiDocs/hooks/BeforeOpenApiOperation.js

@@ -0,0 +1,11 @@
+"use strict";
+// interface BeforeOpenApiOperationProps {
+//   operation: any;
+// }
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BeforeOpenApiOperation = void 0;
+// export function BeforeOpenApiOperation(_props: BeforeOpenAPIOperationProps) {
+//   return null;
+// }
+exports.BeforeOpenApiOperation = null;
+//# sourceMappingURL=BeforeOpenApiOperation.js.map

package/lib/components/OpenApiDocs/hooks/BeforeOpenApiOperationSummary.d.ts

@@ -0,0 +1 @@
+export declare const BeforeOpenApiOperationSummary: any;

package/lib/components/OpenApiDocs/hooks/BeforeOpenApiOperationSummary.js

@@ -0,0 +1,11 @@
+"use strict";
+// interface BeforeOpenApiOperationSummaryProps {
+//   operation: any;
+// }
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BeforeOpenApiOperationSummary = void 0;
+// export function BeforeOpenApiOperationSummary(_props: BeforeOpenAPIOperationSummaryProps) {
+//   return null;
+// }
+exports.BeforeOpenApiOperationSummary = null;
+//# sourceMappingURL=BeforeOpenApiOperationSummary.js.map

package/lib/components/OpenApiDocs/hooks/OpenApiFooter.d.ts

@@ -0,0 +1 @@
+export declare const OpenApiFooter: any;

package/lib/components/OpenApiDocs/hooks/OpenApiFooter.js

@@ -0,0 +1,8 @@
+"use strict";
+// export function OpenApiFooter() {
+//   return null;
+// }
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenApiFooter = void 0;
+exports.OpenApiFooter = null;
+//# sourceMappingURL=OpenApiFooter.js.map

package/lib/components/OpenApiDocs/hooks/OpenApiHeader.d.ts

@@ -0,0 +1 @@
+export declare const OpenApiHeader: any;

package/lib/components/OpenApiDocs/hooks/OpenApiHeader.js

@@ -0,0 +1,8 @@
+"use strict";
+// export function OpenApiHeader() {
+//   return null;
+// }
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenApiHeader = void 0;
+exports.OpenApiHeader = null;
+//# sourceMappingURL=OpenApiHeader.js.map

package/lib/components/OpenApiDocs/hooks/OpenApiTryItSecurityPanel.d.ts

@@ -0,0 +1 @@
+export declare const OpenApiTryItSecurityPanel: any;

package/lib/components/OpenApiDocs/hooks/OpenApiTryItSecurityPanel.js

@@ -0,0 +1,14 @@
+"use strict";
+// interface OpenApiTryItSecurityPanelProps {
+//   server: any;
+//   operation: any;
+//   onChange?: any;
+//   OAuth2: any;
+// }
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenApiTryItSecurityPanel = void 0;
+// export function OpenApiTryItSecurityPanel(_props: OpenAPITryItSecurityPanelProps) {
+//   return null;
+// }
+exports.OpenApiTryItSecurityPanel = null;
+//# sourceMappingURL=OpenApiTryItSecurityPanel.js.map

package/lib/components/index.d.ts

@@ -1,3 +1,8 @@
+export * from './OpenApiDocs/hooks/AfterOpenApiTitle';
+export * from './OpenApiDocs/hooks/AfterOpenApiOperation';
+export * from './OpenApiDocs/hooks/AfterOpenApiOperationSummary';
+export * from './OpenApiDocs/hooks/BeforeOpenApiOperation';
+export * from './OpenApiDocs/hooks/BeforeOpenApiOperationSummary';
 export * from './Button';
 export * from './CopyButton';
 export * from './EditPageButton';
@@ -5,6 +10,9 @@ export * from './JsonViewer';
 export * from './Typography';
 export * from './SidebarLogo';
 export * from './CodeBlock';
+export * from './OpenApiDocs/hooks/OpenApiFooter';
+export * from './OpenApiDocs/hooks/OpenApiHeader';
+export * from './OpenApiDocs/hooks/OpenApiTryItSecurityPanel';
 export * from './SamplesPanelControls';
 export * from './Tooltip';
 export * from './SourceCode';
@@ -16,7 +24,7 @@ export * from './Profile';
 export * from './ColorModeSwitcher';
 export * from './Sidebar';
 export * from './Markdown';
-export * from './OpenAPIDocs';
+export * from './OpenApiDocs';
 export * from './SidebarActions';
 export * from './Filter';
 export * from './Tags';
@@ -26,4 +34,5 @@ export * from './Menu';
 export * from './Separator';
 export * from './Cards';
 export * from './Tiles';
+export * from './Breadcrumbs';
 export * from './Catalog';

package/lib/components/index.js

@@ -14,6 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./OpenApiDocs/hooks/AfterOpenApiTitle"), exports);
+__exportStar(require("./OpenApiDocs/hooks/AfterOpenApiOperation"), exports);
+__exportStar(require("./OpenApiDocs/hooks/AfterOpenApiOperationSummary"), exports);
+__exportStar(require("./OpenApiDocs/hooks/BeforeOpenApiOperation"), exports);
+__exportStar(require("./OpenApiDocs/hooks/BeforeOpenApiOperationSummary"), exports);
 __exportStar(require("./Button"), exports);
 __exportStar(require("./CopyButton"), exports);
 __exportStar(require("./EditPageButton"), exports);
@@ -21,6 +26,9 @@ __exportStar(require("./JsonViewer"), exports);
 __exportStar(require("./Typography"), exports);
 __exportStar(require("./SidebarLogo"), exports);
 __exportStar(require("./CodeBlock"), exports);
+__exportStar(require("./OpenApiDocs/hooks/OpenApiFooter"), exports);
+__exportStar(require("./OpenApiDocs/hooks/OpenApiHeader"), exports);
+__exportStar(require("./OpenApiDocs/hooks/OpenApiTryItSecurityPanel"), exports);
 __exportStar(require("./SamplesPanelControls"), exports);
 __exportStar(require("./Tooltip"), exports);
 __exportStar(require("./SourceCode"), exports);
@@ -32,7 +40,7 @@ __exportStar(require("./Profile"), exports);
 __exportStar(require("./ColorModeSwitcher"), exports);
 __exportStar(require("./Sidebar"), exports);
 __exportStar(require("./Markdown"), exports);
-__exportStar(require("./OpenAPIDocs"), exports);
+__exportStar(require("./OpenApiDocs"), exports);
 __exportStar(require("./SidebarActions"), exports);
 __exportStar(require("./Filter"), exports);
 __exportStar(require("./Tags"), exports);
@@ -42,5 +50,6 @@ __exportStar(require("./Menu"), exports);
 __exportStar(require("./Separator"), exports);
 __exportStar(require("./Cards"), exports);
 __exportStar(require("./Tiles"), exports);
+__exportStar(require("./Breadcrumbs"), exports);
 __exportStar(require("./Catalog"), exports);
 //# sourceMappingURL=index.js.map

package/lib/config.d.ts

@@ -1,5 +1,6 @@
 import type { FromSchema } from 'json-schema-to-ts';
-import type { MenuStyle } from './types/portal';
+import type { MenuStyle, ResolvedNavLinkItem } from './types/portal';
+import type { CatalogConfig } from './types/portal/src/shared/types/catalog';
 declare const markdownConfigSchema: {
     readonly type: "object";
     readonly properties: {
@@ -149,6 +150,12 @@ export declare const themeConfigSchema: {
                                         readonly flatten: {
                                             readonly type: "boolean";
                                         };
+                                        readonly linkedSidebars: {
+                                            readonly type: "array";
+                                            readonly items: {
+                                                readonly type: "string";
+                                            };
+                                        };
                                     };
                                 };
                             };
@@ -187,6 +194,12 @@ export declare const themeConfigSchema: {
                             readonly flatten: {
                                 readonly type: "boolean";
                             };
+                            readonly linkedSidebars: {
+                                readonly type: "array";
+                                readonly items: {
+                                    readonly type: "string";
+                                };
+                            };
                         };
                         readonly type: "object";
                     };
@@ -244,6 +257,12 @@ export declare const themeConfigSchema: {
                                         readonly flatten: {
                                             readonly type: "boolean";
                                         };
+                                        readonly linkedSidebars: {
+                                            readonly type: "array";
+                                            readonly items: {
+                                                readonly type: "string";
+                                            };
+                                        };
                                     };
                                 };
                             };
@@ -282,6 +301,12 @@ export declare const themeConfigSchema: {
                             readonly flatten: {
                                 readonly type: "boolean";
                             };
+                            readonly linkedSidebars: {
+                                readonly type: "array";
+                                readonly items: {
+                                    readonly type: "string";
+                                };
+                            };
                         };
                         readonly type: "object";
                     };
@@ -804,11 +829,42 @@ export declare const themeConfigSchema: {
             readonly additionalProperties: false;
             readonly default: {};
         };
+        readonly breadcrumbs: {
+            readonly type: "object";
+            readonly properties: {
+                readonly hide: {
+                    readonly type: "boolean";
+                };
+                readonly prefixItems: {
+                    readonly type: "array";
+                    readonly items: {
+                        readonly type: "object";
+                        readonly properties: {
+                            readonly label: {
+                                readonly type: "string";
+                            };
+                            readonly labelTranslationKey: {
+                                readonly type: "string";
+                            };
+                            readonly page: {
+                                readonly type: "string";
+                            };
+                        };
+                        readonly additionalProperties: false;
+                        readonly default: {};
+                    };
+                };
+            };
+            readonly additionalProperties: false;
+            readonly default: {};
+        };
     };
     readonly additionalProperties: true;
     readonly default: {};
 };
-export type ThemeConfig = FromSchema<typeof themeConfigSchema>;
+export type ThemeConfig = FromSchema<typeof themeConfigSchema> & {
+    catalog?: Record<string, CatalogConfig>;
+};
 export type ThemeUIConfig = ThemeConfig & {
     auth?: {
         idpsInfo?: {
@@ -822,6 +878,9 @@ export type ThemeUIConfig = ThemeConfig & {
         shortcuts?: string[];
         suggestedPages?: any[];
     };
+    breadcrumbs?: {
+        prefixItems?: ResolvedNavLinkItem[];
+    };
 };
 export type MarkdownConfig = FromSchema<typeof markdownConfigSchema>;
 export {};

package/lib/config.js

@@ -106,6 +106,10 @@ const navItemSchema = {
         expanded: { type: 'string', const: 'always' },
         selectFirstItemOnExpand: { type: 'boolean' },
         flatten: { type: 'boolean' },
+        linkedSidebars: {
+            type: 'array',
+            items: { type: 'string' },
+        },
     },
 };
 const navItemsSchema = {
@@ -283,6 +287,27 @@ exports.themeConfigSchema = {
             additionalProperties: false,
             default: {},
         },
+        breadcrumbs: {
+            type: 'object',
+            properties: {
+                hide: { type: 'boolean' },
+                prefixItems: {
+                    type: 'array',
+                    items: {
+                        type: 'object',
+                        properties: {
+                            label: { type: 'string' },
+                            labelTranslationKey: { type: 'string' },
+                            page: { type: 'string' },
+                        },
+                        additionalProperties: false,
+                        default: {},
+                    },
+                },
+            },
+            additionalProperties: false,
+            default: {},
+        },
     },
     additionalProperties: true,
     default: {},

package/lib/globalStyle.js

@@ -1570,7 +1570,7 @@ const navbar = (0, styled_components_1.css) `
   --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily
   --navbar-item-font-size: 16px; // @presenter FontSize
   --navbar-item-padding-horizontal: 16px; // @presenter Spacing
-  --navbar-item-paddin-vertical: 8px; // @presenter Spacing
+  --navbar-item-padding-vertical: 8px; // @presenter Spacing
   --navbar-item-margin-horizontal: 7px;
   --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight
@@ -1595,6 +1595,19 @@ const navbar = (0, styled_components_1.css) `
 
   // @tokens End
 `;
+const breadcrumbs = (0, styled_components_1.css) `
+  /**
+   * @tokens Breadcrumbs
+   */
+
+  --breadcrumbs-text-color: var(--text-color-secondary); // @presenter Color
+  --breadcrumbs-active-text-color: var(--text-color); // @presenter Color
+  --breadcrumbs-hover-text-decoration: underline;
+  --breadcrumbs-padding-horizontal: 8px; // @presenter Spacing
+  --breadcrumbs-margin-bottom: 24px; // @presenter Spacing
+
+  // @tokens End
+`;
 const toc = (0, styled_components_1.css) `
   /**
     * @tokens TOC
@@ -2048,6 +2061,7 @@ exports.styles = (0, styled_components_1.css) `
     ${footer}
     ${logo}
     ${badges}
+    ${breadcrumbs}
     ${toc}
     ${inputs}
     ${tooltip}

package/lib/mocks/Sidebar/useBreadcrumbs.d.ts

@@ -0,0 +1,4 @@
+export declare function useBreadcrumbs(): {
+    label: string;
+    link?: string | undefined;
+}[];

package/lib/mocks/Sidebar/useBreadcrumbs.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreadcrumbs = void 0;
+function useBreadcrumbs() {
+    return [];
+}
+exports.useBreadcrumbs = useBreadcrumbs;
+//# sourceMappingURL=useBreadcrumbs.js.map

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@redocly/theme",
-  "version": "0.14.2",
+  "version": "0.15.1",
   "description": "Shared UI components library",
-  "keywords": [],
+  "keywords": [
+    "theme",
+    "redocly"
+  ],
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
   "main": "lib/index.js",

package/src/I18n/LanguagePicker.tsx

@@ -80,7 +80,7 @@ const DropdownValue = styled.div`
   display: block;
 
   color: var(--navbar-text-color);
-  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
+  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   border-radius: var(--navbar-item-border-radius);
 
   &:hover {

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+
+export const Breadcrumb = (props: { label: string; link?: string; isActive: boolean }) => {
+  const { label, link, isActive } = props;
+
+  return (
+    <BreadcrumbWrapper
+      data-component-name="Breadcrumbs/Breadcrumb"
+      isLink={link != null}
+      isActive={isActive}
+    >
+      {link ? (
+        <BreadcrumbLink to={link}>{label}</BreadcrumbLink>
+      ) : (
+        <BreadcrumbText>{label}</BreadcrumbText>
+      )}
+    </BreadcrumbWrapper>
+  );
+};
+
+const BreadcrumbText = styled.div`
+  cursor: default;
+`;
+
+const BreadcrumbWrapper = styled.div<{ isActive: boolean; isLink: boolean }>`
+  border-radius: var(--border-radius);
+  padding: 0 var(--breadcrumbs-padding-horizontal);
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  ${(props) =>
+    props.isLink &&
+    `
+    &:hover {
+      text-decoration: var(--breadcrumbs-hover-text-decoration);
+    }
+  `}
+
+  ${(props) =>
+    props.isActive &&
+    `
+    color: var(--breadcrumbs-active-text-color);
+  `}
+`;
+
+const BreadcrumbLink = styled(Link)`
+  text-decoration: none;
+
+  &:visited {
+    color: inherit;
+  }
+`;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useBreadcrumbs } from '@portal/Sidebar/useBreadcrumbs';
+
+import { Breadcrumb } from './Breadcrumb';
+
+export const Breadcrumbs = (props: { className?: string }) => {
+  const breadcrumbs = useBreadcrumbs();
+
+  if (breadcrumbs.length === 0) {
+    return null;
+  }
+
+  return (
+    <Container data-component-name="Breadcrumbs/Breadcrumbs" className={props.className}>
+      {breadcrumbs.map((breadcrumb, idx) => {
+        const isLast = idx === breadcrumbs.length - 1;
+        return (
+          <React.Fragment key={idx}>
+            <Breadcrumb link={breadcrumb.link} label={breadcrumb.label} isActive={isLast} />
+            {isLast ? null : <div>/</div>}
+          </React.Fragment>
+        );
+      })}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--breadcrumbs-text-color);
+
+  @media print {
+    display: none;
+  }
+`;

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export * from '@theme/components/Breadcrumbs/Breadcrumbs';
+export * from '@theme/components/Breadcrumbs/Breadcrumb';

package/src/components/Markdown/ContainerWrapper.tsx

@@ -9,9 +9,9 @@ export const ContainerWrapper = styled.section.attrs(() => ({
 
   padding: var(--md-container-padding-vertical) var(--md-container-padding-horizontal);
 
-  & > article:first-child > h1:first-child {
-    // disable margin top for h1 on the title heading if there is no "Last updated at" block
-    /* margin-top: 0; */
+  article:first-child > h1:first-child {
+    // disable margin top for h1 on the title heading
+    margin-top: 0;
   }
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/src/components/Markdown/Details.tsx

@@ -3,11 +3,16 @@ import styled from 'styled-components';
 
 type DetailsProps = {
   summary: string;
+  className?: string;
 };
 
-export function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element {
+export function Details({
+  summary,
+  children,
+  className,
+}: React.PropsWithChildren<DetailsProps>): JSX.Element {
   return (
-    <StyledDetails>
+    <StyledDetails className={className}>
       <summary>{summary}</summary>
       <StyledDetailsContent>{children}</StyledDetailsContent>
     </StyledDetails>

package/src/components/Markdown/MarkdownLayout.tsx

@@ -9,6 +9,7 @@ import { LastUpdated } from '@theme/components/LastUpdated/LastUpdated';
 import { useThemeConfig } from '@theme/hooks';
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 import { useTranslate } from '@portal/hooks';
+import { Breadcrumbs as ThemeBreadcrumbs } from '@theme/components/Breadcrumbs';
 
 type MarkdownLayoutProps = {
   tableOfContent: React.ReactNode;
@@ -46,6 +47,7 @@ export function MarkdownLayout({
   return (
     <PageWrapper data-component-name="Markdown/MarkdownLayout">
       <ContainerWrapper withToc={true}>
+        <Breadcrumbs />
         <LayoutTop>
           {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
           {mergedConf && (
@@ -72,6 +74,10 @@ const LayoutTop = styled.div`
   flex-flow: row nowrap;
 `;
 
+const Breadcrumbs = styled(ThemeBreadcrumbs)`
+  margin-bottom: var(--breadcrumbs-margin-bottom);
+`;
+
 const LayoutBottom = styled(LayoutTop)`
   > * {
     margin: 25px 5px;

package/src/components/Markdown/MarkdownWrapper.tsx

@@ -28,12 +28,21 @@ export const baseTable = css`
     }
 
     th {
+      /** th has text-align: center by default */
       text-align: left;
       font-weight: var(--md-table-head-font-weight);
       color: var(--md-table-head-text-color);
       background-color: var(--md-table-head-background-color);
     }
 
+    /* need to overwrite the text-align: left from above */
+    th[align='center'] {
+      text-align: center;
+    }
+    th[align='right'] {
+      text-align: right;
+    }
+
     tr th:first-child,
     tr td:first-child {
       border-left: 1px solid var(--md-table-border-color);
@@ -239,10 +248,6 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
     ${typography('h1', 'h')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
     ${headingAnchor()};
-
-    &:first-child {
-      margin-top: 0;
-    }
   }
 
   h2.md {

package/src/components/Navbar/Navbar.tsx

@@ -17,7 +17,7 @@ import { useI18n } from '@portal/hooks';
 import { LanguagePicker } from '@theme/I18n/LanguagePicker';
 
 const EmptyNavbarHack = createGlobalStyle`
-  #redocly_root {
+  :root {
     --navbar-height: 0px !important;
   }
 `;
@@ -120,7 +120,7 @@ export const NavbarContainer = styled.nav`
   position: sticky;
   top: 0;
   z-index: 200;
-  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
+  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   background: var(--navbar-background-color);
   font-family: var(--navbar-item-font-family);
 

package/src/components/Navbar/NavbarItem.tsx

@@ -84,7 +84,7 @@ export const NavbarLink = styled(Link)`
 
 export const NavbarMenuItem = styled.li<{ active?: boolean }>`
   display: inline-block;
-  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
+  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   margin-left: var(--navbar-item-margin-horizontal);
   text-align: center;
   line-height: 1;

package/src/components/OpenApiDocs/hooks/AfterOpenApiOperation.tsx

@@ -0,0 +1,9 @@
+// interface AfterOpenApiOperationProps {
+//   operation: any;
+// }
+
+// export function AfterOpenApiOperation(_props: AfterOpenAPIOperationProps) {
+//   return null;
+// }
+
+export const AfterOpenApiOperation: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiOperationSummary.tsx

@@ -0,0 +1,9 @@
+// interface AfterOpenApiOperationSummaryProps {
+//   operation: any;
+// }
+
+// export function AfterOpenApiOperationSummary(_props: AfterOpenAPIOperationSummaryProps) {
+//   return null;
+// }
+
+export const AfterOpenApiOperationSummary: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiTitle.tsx

@@ -0,0 +1,9 @@
+// interface AfterOpenApiTitleProps {
+//   info: any;
+// }
+
+// export function AfterOpenApiTitle(_props: AfterOpenAPIApiTitleProps) {
+//   return null;
+// }
+
+export const AfterOpenApiTitle: any = null;

package/src/components/OpenApiDocs/hooks/BeforeOpenApiOperation.tsx

@@ -0,0 +1,9 @@
+// interface BeforeOpenApiOperationProps {
+//   operation: any;
+// }
+
+// export function BeforeOpenApiOperation(_props: BeforeOpenAPIOperationProps) {
+//   return null;
+// }
+
+export const BeforeOpenApiOperation: any = null;

package/src/components/OpenApiDocs/hooks/BeforeOpenApiOperationSummary.tsx

@@ -0,0 +1,9 @@
+// interface BeforeOpenApiOperationSummaryProps {
+//   operation: any;
+// }
+
+// export function BeforeOpenApiOperationSummary(_props: BeforeOpenAPIOperationSummaryProps) {
+//   return null;
+// }
+
+export const BeforeOpenApiOperationSummary: any = null;

package/src/components/OpenApiDocs/hooks/OpenApiFooter.tsx

@@ -0,0 +1,5 @@
+// export function OpenApiFooter() {
+//   return null;
+// }
+
+export const OpenApiFooter: any = null;

package/src/components/OpenApiDocs/hooks/OpenApiHeader.tsx

@@ -0,0 +1,5 @@
+// export function OpenApiHeader() {
+//   return null;
+// }
+
+export const OpenApiHeader: any = null;

package/src/components/OpenApiDocs/hooks/OpenApiTryItSecurityPanel.tsx

@@ -0,0 +1,12 @@
+// interface OpenApiTryItSecurityPanelProps {
+//   server: any;
+//   operation: any;
+//   onChange?: any;
+//   OAuth2: any;
+// }
+
+// export function OpenApiTryItSecurityPanel(_props: OpenAPITryItSecurityPanelProps) {
+//   return null;
+// }
+
+export const OpenApiTryItSecurityPanel: any = null;

package/src/components/index.ts

@@ -1,3 +1,8 @@
+export * from './OpenApiDocs/hooks/AfterOpenApiTitle';
+export * from './OpenApiDocs/hooks/AfterOpenApiOperation';
+export * from './OpenApiDocs/hooks/AfterOpenApiOperationSummary';
+export * from './OpenApiDocs/hooks/BeforeOpenApiOperation';
+export * from './OpenApiDocs/hooks/BeforeOpenApiOperationSummary';
 export * from './Button';
 export * from './CopyButton';
 export * from './EditPageButton';
@@ -5,6 +10,9 @@ export * from './JsonViewer';
 export * from './Typography';
 export * from './SidebarLogo';
 export * from './CodeBlock';
+export * from './OpenApiDocs/hooks/OpenApiFooter';
+export * from './OpenApiDocs/hooks/OpenApiHeader';
+export * from './OpenApiDocs/hooks/OpenApiTryItSecurityPanel';
 export * from './SamplesPanelControls';
 export * from './Tooltip';
 export * from './SourceCode';
@@ -16,7 +24,7 @@ export * from './Profile';
 export * from './ColorModeSwitcher';
 export * from './Sidebar';
 export * from './Markdown';
-export * from './OpenAPIDocs';
+export * from './OpenApiDocs';
 export * from './SidebarActions';
 export * from './Filter';
 export * from './Tags';
@@ -26,4 +34,5 @@ export * from './Menu';
 export * from './Separator';
 export * from './Cards';
 export * from './Tiles';
+export * from './Breadcrumbs';
 export * from './Catalog';

package/src/config.ts

@@ -1,5 +1,6 @@
 import type { FromSchema } from 'json-schema-to-ts';
-import type { MenuStyle } from './types/portal';
+import type { MenuStyle, ResolvedNavLinkItem } from './types/portal';
+import type { CatalogConfig } from './types/portal/src/shared/types/catalog';
 
 const logoConfigSchema = {
   type: 'object',
@@ -124,6 +125,10 @@ const navItemSchema = {
     expanded: { type: 'string', const: 'always' },
     selectFirstItemOnExpand: { type: 'boolean' },
     flatten: { type: 'boolean' },
+    linkedSidebars: {
+      type: 'array',
+      items: { type: 'string' },
+    },
   },
 } as const;
 
@@ -352,12 +357,37 @@ export const themeConfigSchema = {
       additionalProperties: false,
       default: {},
     },
+    breadcrumbs: {
+      type: 'object',
+      properties: {
+        hide: { type: 'boolean' },
+        prefixItems: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              label: { type: 'string' },
+              labelTranslationKey: { type: 'string' },
+              page: { type: 'string' },
+            },
+            additionalProperties: false,
+            default: {},
+          },
+        },
+      },
+      additionalProperties: false,
+      default: {},
+    },
   },
   additionalProperties: true,
   default: {},
 } as const;
 
-export type ThemeConfig = FromSchema<typeof themeConfigSchema>;
+// FIXME: add catalog to schema
+export type ThemeConfig = FromSchema<typeof themeConfigSchema> & {
+  catalog?: Record<string, CatalogConfig>;
+};
+
 export type ThemeUIConfig = ThemeConfig & {
   auth?: {
     // used by portal dev login emulator
@@ -372,6 +402,9 @@ export type ThemeUIConfig = ThemeConfig & {
     shortcuts?: string[];
     suggestedPages?: any[];
   };
+  breadcrumbs?: {
+    prefixItems?: ResolvedNavLinkItem[];
+  };
 };
 
 export type MarkdownConfig = FromSchema<typeof markdownConfigSchema>;

package/src/globalStyle.ts

@@ -1586,7 +1586,7 @@ const navbar = css`
   --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily
   --navbar-item-font-size: 16px; // @presenter FontSize
   --navbar-item-padding-horizontal: 16px; // @presenter Spacing
-  --navbar-item-paddin-vertical: 8px; // @presenter Spacing
+  --navbar-item-padding-vertical: 8px; // @presenter Spacing
   --navbar-item-margin-horizontal: 7px;
   --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight
@@ -1612,6 +1612,20 @@ const navbar = css`
   // @tokens End
 `;
 
+const breadcrumbs = css`
+  /**
+   * @tokens Breadcrumbs
+   */
+
+  --breadcrumbs-text-color: var(--text-color-secondary); // @presenter Color
+  --breadcrumbs-active-text-color: var(--text-color); // @presenter Color
+  --breadcrumbs-hover-text-decoration: underline;
+  --breadcrumbs-padding-horizontal: 8px; // @presenter Spacing
+  --breadcrumbs-margin-bottom: 24px; // @presenter Spacing
+
+  // @tokens End
+`
+
 const toc = css`
   /**
     * @tokens TOC
@@ -2076,6 +2090,7 @@ export const styles = css`
     ${footer}
     ${logo}
     ${badges}
+    ${breadcrumbs}
     ${toc}
     ${inputs}
     ${tooltip}

package/src/mocks/Sidebar/useBreadcrumbs.ts

@@ -0,0 +1,3 @@
+export function useBreadcrumbs() {
+  return [] as { label: string; link?: string }[];
+}