@redocly/theme 0.7.5 → 0.8.1

package/lib/Markdown/Admonition.d.ts

@@ -4,6 +4,8 @@ interface AdmonitionTypeProps {
 }
 export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
     name?: string;
+    'data-source'?: string;
+    'data-hash'?: string;
 }
-export declare function Admonition({ type, name, children, }: React.PropsWithChildren<AdmonitionProps>): JSX.Element;
+export declare function Admonition({ type, name, children, 'data-source': dataSource, 'data-hash': dataHash, }: React.PropsWithChildren<AdmonitionProps>): JSX.Element;
 export {};

package/lib/Markdown/Admonition.js

@@ -7,8 +7,8 @@ exports.Admonition = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const AlertIcon_1 = require("../icons/AlertIcon/AlertIcon");
-function Admonition({ type = 'info', name, children, }) {
-    return (react_1.default.createElement(Wrapper, { type: type, "data-component-name": "Markdown/Admonition" },
+function Admonition({ type = 'info', name, children, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    return (react_1.default.createElement(Wrapper, { type: type, "data-component-name": "Markdown/Admonition", "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(AlertIcon_1.AlertIcon, { type: type }),
         name ? react_1.default.createElement(Heading, { type: type }, name) : null,
         react_1.default.createElement(Content, null, children)));

package/lib/Markdown/CodeSample/CodeSample.d.ts

@@ -3,5 +3,7 @@ export type CodeSampleProps = {
     language: string;
     highlighted: string;
     rawContent: string;
+    'data-source'?: string;
+    'data-hash'?: string;
 };
-export declare function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element;
+export declare function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, }: CodeSampleProps): JSX.Element;

package/lib/Markdown/CodeSample/CodeSample.js

@@ -29,7 +29,7 @@ const styled_components_1 = __importStar(require("styled-components"));
 const ClipboardService_1 = require("../../utils/ClipboardService");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const Feedback_1 = require("../../Feedback");
-function CodeSample({ rawContent, highlighted, language }) {
+function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, }) {
     const langClassName = language ? `language-${language}` : '';
     const { codeSnippet: { copy = {}, report = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
     const [isCopied, setIsCopied] = (0, react_1.useState)(false);
@@ -39,7 +39,7 @@ function CodeSample({ rawContent, highlighted, language }) {
         setIsCopied(true);
         setTimeout(() => setIsCopied(false), copy.toasterDuration || 1500);
     };
-    return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
+    return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample", "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(CodeSampleButtonContainer, null,
             !copy.hide && (react_1.default.createElement(react_1.default.Fragment, null,
                 !isCopied && (react_1.default.createElement(Button, { onClick: () => copyCode(rawContent), title: copy.tooltipText || 'Copy to clipboard' }, copy.buttonText || 'Copy')),

package/lib/Markdown/Heading.d.ts

@@ -1,5 +1,7 @@
 import type { PropsWithChildren } from 'react';
-export declare function Heading({ level, id, children, }: PropsWithChildren<{
+export declare function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, }: PropsWithChildren<{
     level: number;
     id: string;
+    'data-source'?: string;
+    'data-hash'?: string;
 }>): JSX.Element;

package/lib/Markdown/Heading.js

@@ -26,18 +26,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = void 0;
 const react_1 = __importStar(require("react"));
 const utils_1 = require("../utils");
+const icons_1 = require("../icons");
 /**
  * Class name for all MD tags
  */
 const mdClassName = 'md';
-const SvgIcon = (react_1.default.createElement("svg", { "aria-hidden": "true", focusable: "false", height: "16", version: "1.1", viewBox: "0 0 16 16", width: "16" },
-    react_1.default.createElement("path", { fillRule: "evenodd", d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" })));
-function Heading({ level, id, children, }) {
-    const linkEl = (react_1.default.createElement("a", { href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') }, SvgIcon));
+function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    const linkEl = (react_1.default.createElement("a", { href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') },
+        react_1.default.createElement(icons_1.AnchorIcon, null)));
     return (0, react_1.createElement)(`h${level}`, {
         id,
         className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName),
         'data-component-name': 'Markdown/Heading',
+        'data-source': dataSource,
+        'data-hash': dataHash,
     }, react_1.default.createElement(react_1.default.Fragment, null,
         linkEl,
         children));

package/lib/Markdown/Mermaid.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 type MermaidProps = {
     diagramHtml: string;
+    'data-source'?: string;
+    'data-hash'?: string;
 };
-export declare function Mermaid({ diagramHtml }: MermaidProps): JSX.Element;
+export declare function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, }: MermaidProps): JSX.Element;
 export {};

package/lib/Markdown/Mermaid.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mermaid = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Mermaid({ diagramHtml }) {
-    return (react_1.default.createElement(Wrapper, { className: "mermaid-wrapper", dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid" }));
+function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    return (react_1.default.createElement(Wrapper, { className: "mermaid-wrapper", dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid", "data-source": dataSource, "data-hash": dataHash }));
 }
 exports.Mermaid = Mermaid;
 const Wrapper = styled_components_1.default.div `

package/lib/Sidebar/MenuGroup.js

@@ -53,7 +53,7 @@ function MenuGroup({ item, isExpanded, toggleExpanded, children, }) {
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuGroup" },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
             react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active },
-                react_1.default.createElement(MenuGroupArrow, { direction: isExpanded ? 'down' : 'right' }),
+                react_1.default.createElement(MenuGroupArrow, { visibility: item.items.length ? 'visible' : 'hidden', direction: isExpanded ? 'down' : 'right' }),
                 item.label)),
         react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, showChildren ? children : null),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
@@ -64,7 +64,7 @@ const MenuWrapper = styled_components_1.default.div `
   padding-left: var(--sidebar-item-nested-offset);
   overflow: hidden;
   ${(props) => props.isExpanded
-    ? `max-height: 9999px;
+    ? `max-height: 99999px;
         transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;`
     : `max-height: 0px;
 	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};

package/lib/Sidebar/Sidebar.d.ts

@@ -1,4 +1,5 @@
 interface SidebarProps {
+    isNavbar: boolean;
     opened?: boolean;
     animate?: boolean;
 }

package/lib/Sidebar/Sidebar.js

@@ -18,13 +18,16 @@ exports.Sidebar = styled_components_1.default.aside.attrs(() => ({
   font-size: var(--sidebar-item-font-size);
   font-family: var(--sidebar-item-font-family);
   color: var(--sidebar-item-text-color);
-  top: var(--navbar-height);
-  height: calc(100vh - var(--navbar-height));
   display: flex;
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
 
+  ${({ isNavbar }) => `
+    top: ${isNavbar ? 'var(--navbar-height)' : '0'};
+    height: calc(100vh ${isNavbar ? '- var(--navbar-height)' : ''});
+  `};
+
   ${({ opened, animate }) => `
     opacity: ${opened ? '1' : '0'};
     pointer-events: ${opened ? 'auto' : 'none'};

package/lib/Sidebar/SidebarLayout.d.ts

@@ -6,6 +6,7 @@ interface SidebarLayoutProps {
         label: string;
         slug: string;
     };
+    isNavbar: boolean;
 }
-export declare function SidebarLayout({ versions, menu, backLink, }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu, backLink, isNavbar, }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/lib/Sidebar/SidebarLayout.js

@@ -14,7 +14,7 @@ const SidebarSearch_1 = require("../Search/SidebarSearch");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
 const ArrowBack_1 = require("../Sidebar/ArrowBack");
 const Link_1 = require("../mocks/Link");
-function SidebarLayout({ versions, menu, backLink, }) {
+function SidebarLayout({ versions, menu, backLink, isNavbar, }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const toggleMenu = () => setIsOpen(!isOpen);
     const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
@@ -24,7 +24,7 @@ function SidebarLayout({ versions, menu, backLink, }) {
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout" },
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu }),
         !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
-        react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
+        react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen, isNavbar: isNavbar },
             (backLink && (react_1.default.createElement(BackLinkWrapper, null,
                 react_1.default.createElement(Link_1.Link, { to: backLink.slug },
                     react_1.default.createElement(ArrowBack_1.ArrowBack, null),

package/lib/TableOfContent/TableOfContent.js

@@ -104,6 +104,6 @@ const TableOfContentItems = styled_components_1.default.div `
   max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
   border-left: 1px solid var(--toc-border-color);
   overflow-y: auto;
-  width: var(--toc-width); ;
+  width: var(--toc-width);
 `;
 //# sourceMappingURL=TableOfContent.js.map

package/lib/config.d.ts

@@ -1,4 +1,88 @@
 import { z } from 'zod';
+declare const MarkdownConfig: z.ZodDefault<z.ZodObject<{
+    frontMatterKeysToResolve: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, "many">>>;
+    lastUpdatedBlock: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
+        format: z.ZodOptional<z.ZodDefault<z.ZodEnum<["timeago", "iso", "long", "short"]>>>;
+        locale: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+    }, {
+        hide: z.ZodOptional<z.ZodBoolean>;
+    }>, "strip", z.ZodTypeAny, {
+        hide?: boolean | undefined;
+        format?: "timeago" | "iso" | "long" | "short" | undefined;
+        locale?: string | undefined;
+    }, {
+        hide?: boolean | undefined;
+        format?: "timeago" | "iso" | "long" | "short" | undefined;
+        locale?: string | undefined;
+    }>>>;
+    toc: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
+        header: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+        depth: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
+    }, {
+        hide: z.ZodOptional<z.ZodBoolean>;
+    }>, "strip", z.ZodTypeAny, {
+        hide?: boolean | undefined;
+        header?: string | undefined;
+        depth?: number | undefined;
+    }, {
+        hide?: boolean | undefined;
+        header?: string | undefined;
+        depth?: number | undefined;
+    }>>>;
+    editPage: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
+        baseUrl: z.ZodOptional<z.ZodString>;
+        icon: z.ZodOptional<z.ZodString>;
+        text: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    }, {
+        hide: z.ZodOptional<z.ZodBoolean>;
+    }>, "strip", z.ZodTypeAny, {
+        hide?: boolean | undefined;
+        baseUrl?: string | undefined;
+        icon?: string | undefined;
+        text: string;
+    }, {
+        hide?: boolean | undefined;
+        baseUrl?: string | undefined;
+        icon?: string | undefined;
+        text?: string | undefined;
+    }>>>;
+}, "strict", z.ZodTypeAny, {
+    frontMatterKeysToResolve?: string[] | undefined;
+    lastUpdatedBlock?: {
+        hide?: boolean | undefined;
+        format?: "timeago" | "iso" | "long" | "short" | undefined;
+        locale?: string | undefined;
+    } | undefined;
+    editPage?: {
+        hide?: boolean | undefined;
+        baseUrl?: string | undefined;
+        icon?: string | undefined;
+        text: string;
+    } | undefined;
+    toc: {
+        hide?: boolean | undefined;
+        header?: string | undefined;
+        depth?: number | undefined;
+    };
+}, {
+    frontMatterKeysToResolve?: string[] | undefined;
+    lastUpdatedBlock?: {
+        hide?: boolean | undefined;
+        format?: "timeago" | "iso" | "long" | "short" | undefined;
+        locale?: string | undefined;
+    } | undefined;
+    toc?: {
+        hide?: boolean | undefined;
+        header?: string | undefined;
+        depth?: number | undefined;
+    } | undefined;
+    editPage?: {
+        hide?: boolean | undefined;
+        baseUrl?: string | undefined;
+        icon?: string | undefined;
+        text?: string | undefined;
+    } | undefined;
+}>>;
 export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     imports: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, "many">>>;
     logo: z.ZodOptional<z.ZodObject<{
@@ -417,9 +501,9 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             text: string;
         }, {
             hide?: boolean | undefined;
-            text?: string | undefined;
             baseUrl?: string | undefined;
             icon?: string | undefined;
+            text?: string | undefined;
         }>>>;
     }, "strict", z.ZodTypeAny, {
         frontMatterKeysToResolve?: string[] | undefined;
@@ -453,9 +537,9 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         } | undefined;
         editPage?: {
             hide?: boolean | undefined;
-            text?: string | undefined;
             baseUrl?: string | undefined;
             icon?: string | undefined;
+            text?: string | undefined;
         } | undefined;
     }>>>;
     openapi: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, {}, {}>>;
@@ -479,6 +563,23 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         logoutRedirect?: string | undefined;
     }>>>;
 }, "passthrough", z.ZodTypeAny, {
+    links?: {
+        type?: string | undefined;
+        crossorigin?: string | undefined;
+        fetchpriority?: string | undefined;
+        integrity?: string | undefined;
+        referrerpolicy?: string | undefined;
+        as?: string | undefined;
+        hreflang?: string | undefined;
+        imagesizes?: string | undefined;
+        imagesrcset?: string | undefined;
+        media?: string | undefined;
+        prefetch?: string | undefined;
+        rel?: string | undefined;
+        sizes?: string | undefined;
+        title?: string | undefined;
+        href: string;
+    }[] | undefined;
     imports?: string[] | undefined;
     logo?: {
         image?: string | undefined;
@@ -526,23 +627,6 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             src: string;
         }[] | undefined;
     } | undefined;
-    links?: {
-        type?: string | undefined;
-        crossorigin?: string | undefined;
-        fetchpriority?: string | undefined;
-        integrity?: string | undefined;
-        referrerpolicy?: string | undefined;
-        as?: string | undefined;
-        hreflang?: string | undefined;
-        imagesizes?: string | undefined;
-        imagesrcset?: string | undefined;
-        media?: string | undefined;
-        prefetch?: string | undefined;
-        rel?: string | undefined;
-        sizes?: string | undefined;
-        title?: string | undefined;
-        href: string;
-    }[] | undefined;
     feedback?: {
         hide?: boolean | undefined;
         settings?: string | undefined;
@@ -611,6 +695,23 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         logoutRedirect?: string | undefined;
     };
 }, {
+    links?: {
+        type?: string | undefined;
+        crossorigin?: string | undefined;
+        fetchpriority?: string | undefined;
+        integrity?: string | undefined;
+        referrerpolicy?: string | undefined;
+        as?: string | undefined;
+        hreflang?: string | undefined;
+        imagesizes?: string | undefined;
+        imagesrcset?: string | undefined;
+        media?: string | undefined;
+        prefetch?: string | undefined;
+        rel?: string | undefined;
+        sizes?: string | undefined;
+        title?: string | undefined;
+        href: string;
+    }[] | undefined;
     imports?: string[] | undefined;
     logo?: {
         image?: string | undefined;
@@ -658,23 +759,6 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             src: string;
         }[] | undefined;
     } | undefined;
-    links?: {
-        type?: string | undefined;
-        crossorigin?: string | undefined;
-        fetchpriority?: string | undefined;
-        integrity?: string | undefined;
-        referrerpolicy?: string | undefined;
-        as?: string | undefined;
-        hreflang?: string | undefined;
-        imagesizes?: string | undefined;
-        imagesrcset?: string | undefined;
-        media?: string | undefined;
-        prefetch?: string | undefined;
-        rel?: string | undefined;
-        sizes?: string | undefined;
-        title?: string | undefined;
-        href: string;
-    }[] | undefined;
     feedback?: {
         type?: string | undefined;
         hide?: boolean | undefined;
@@ -728,9 +812,9 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         } | undefined;
         editPage?: {
             hide?: boolean | undefined;
-            text?: string | undefined;
             baseUrl?: string | undefined;
             icon?: string | undefined;
+            text?: string | undefined;
         } | undefined;
     } | undefined;
     openapi?: {} | undefined;
@@ -759,3 +843,5 @@ export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 's
         shortcuts?: string[];
     };
 };
+export type MarkdownConfig = z.infer<typeof MarkdownConfig>;
+export {};

package/lib/config.js

@@ -47,6 +47,37 @@ const LinksConfig = zod_1.z
     type: zod_1.z.string().optional(),
 })
     .passthrough();
+const MarkdownConfig = zod_1.z
+    .object({
+    frontMatterKeysToResolve: zod_1.z.array(zod_1.z.string()).default(['image', 'links']).optional(),
+    lastUpdatedBlock: zod_1.z
+        .object({
+        format: zod_1.z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
+        locale: zod_1.z.string().default('en-US').optional(),
+    })
+        .extend(HideConfig.shape)
+        .default({})
+        .optional(),
+    toc: zod_1.z
+        .object({
+        header: zod_1.z.string().default('On this page').optional(),
+        depth: zod_1.z.number().default(3).optional(),
+    })
+        .extend(HideConfig.shape)
+        .optional()
+        .default({}),
+    editPage: zod_1.z
+        .object({
+        baseUrl: zod_1.z.string().optional(),
+        icon: zod_1.z.string().optional(),
+        text: zod_1.z.string().optional().default('Edit this page'),
+    })
+        .extend(HideConfig.shape)
+        .default({})
+        .optional(),
+})
+    .strict()
+    .default({});
 exports.ThemeConfig = zod_1.z
     .object({
     imports: zod_1.z.array(zod_1.z.string()).default([]).optional(),
@@ -141,38 +172,7 @@ exports.ThemeConfig = zod_1.z
         .strict()
         .default({})
         .optional(),
-    markdown: zod_1.z
-        .object({
-        frontMatterKeysToResolve: zod_1.z.array(zod_1.z.string()).default(['image', 'links']).optional(),
-        lastUpdatedBlock: zod_1.z
-            .object({
-            format: zod_1.z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
-            locale: zod_1.z.string().default('en-US').optional(),
-        })
-            .extend(HideConfig.shape)
-            .default({})
-            .optional(),
-        toc: zod_1.z
-            .object({
-            header: zod_1.z.string().default('On this page').optional(),
-            depth: zod_1.z.number().default(3).optional(),
-        })
-            .extend(HideConfig.shape)
-            .optional()
-            .default({}),
-        editPage: zod_1.z
-            .object({
-            baseUrl: zod_1.z.string().optional(),
-            icon: zod_1.z.string().optional(),
-            text: zod_1.z.string().optional().default('Edit this page'),
-        })
-            .extend(HideConfig.shape)
-            .default({})
-            .optional(),
-    })
-        .strict()
-        .default({})
-        .optional(),
+    markdown: MarkdownConfig.optional(),
     openapi: zod_1.z.object({}).passthrough().optional(),
     graphql: zod_1.z.object({}).passthrough().optional(),
     analytics: zod_1.z.any().optional(),

package/lib/globalStyle.js

@@ -202,7 +202,7 @@ const headingsTypography = (0, styled_components_1.css) `
   --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h2-font-size: 28px; // @presenter FontSize
   --h2-line-height: 28px; // @presenter LineHeight
-  --h2-margin-top: 0; // @presenter Spacing
+  --h2-margin-top: var(--heading-margin-top); // @presenter Spacing
   --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
   --h2-text-color: var(--heading-text-color); // @presenter Color
 
@@ -872,6 +872,7 @@ const apiReferencePanels = (0, styled_components_1.css) `
   */
 
   .panel-try-it,
+  .panel-pull-right,
   .panel-request-samples,
   .panel-response-samples,
   .panel-callback-samples {
@@ -1659,7 +1660,7 @@ const loadProgressBar = (0, styled_components_1.css) `
   #nprogress .peg {
     display: block;
     position: absolute;
-    right: 0px;
+    right: 0;
     width: 100px;
     height: 100%;
     box-shadow: var(--load-progress-bar-shadow);

package/lib/hooks/useActiveHeading.js

@@ -7,7 +7,7 @@ function useActiveHeading(contentElement, displayedHeaders) {
     const [heading, setHeading] = (0, react_1.useState)(displayedHeaders.length > 1 ? displayedHeaders[0] : undefined);
     const [headingElements, setHeadingElements] = (0, react_1.useState)([]);
     const headingElementsRef = (0, react_1.useRef)({});
-    const history = (0, react_router_dom_1.useHistory)();
+    const location = (0, react_router_dom_1.useLocation)();
     const getVisibleHeadings = () => {
         const visibleHeadings = [];
         for (const key in headingElementsRef.current) {
@@ -56,12 +56,7 @@ function useActiveHeading(contentElement, displayedHeaders) {
             return;
         }
         setHeadingElements(findHeaders(contentElement));
-        const unlisten = history.listen(() => {
-            setHeadingElements(findHeaders(contentElement));
-        });
-        return () => unlisten();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [contentElement]);
+    }, [contentElement, location]);
     (0, react_1.useEffect)(() => {
         if (!(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length)) {
             return;

package/lib/hooks/useActiveSectionId.js

@@ -33,7 +33,7 @@ function useActiveSectionId(location, hasOverviewPage = false) {
         window.addEventListener('scroll', scrollListener, { capture: false });
         setTimeout(() => {
             scrollListener();
-        }, 0);
+        }, 10);
         return () => {
             window.removeEventListener('scroll', scrollListener);
         };

package/lib/hooks/useMobileMenu.js

@@ -4,7 +4,7 @@ exports.useMobileMenu = void 0;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 function useMobileMenu(initialState = false) {
-    const { location } = (0, react_router_dom_1.useHistory)();
+    const location = (0, react_router_dom_1.useLocation)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(initialState);
     (0, react_1.useEffect)(() => setIsOpen(false), [location.pathname]);
     return [isOpen, setIsOpen];

package/lib/icons/AnchorIcon/AnchorIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface AnchorIconProps {
+    className?: string;
+}
+export declare const AnchorIcon: import("styled-components").StyledComponent<({ className }: AnchorIconProps) => JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/icons/AnchorIcon/AnchorIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnchorIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = ({ className }) => (react_1.default.createElement("svg", { "aria-hidden": "true", focusable: "false", height: "16", version: "1.1", viewBox: "0 0 16 16", width: "16", className: className },
+    react_1.default.createElement("path", { fillRule: "evenodd", d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" })));
+exports.AnchorIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/AnchorIcon/AnchorIcon',
+})) `
+  fill: var(--heading-anchor-color);
+  visibility: hidden;
+  cursor: pointer;
+
+  background-image: var(--heading-anchor-icon);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+`;
+//# sourceMappingURL=AnchorIcon.js.map

package/lib/icons/AnchorIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { AnchorIcon } from '../../icons/AnchorIcon/AnchorIcon';
+export type { AnchorIconProps } from '../../icons/AnchorIcon/AnchorIcon';

package/lib/icons/AnchorIcon/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnchorIcon = void 0;
+var AnchorIcon_1 = require("../../icons/AnchorIcon/AnchorIcon");
+Object.defineProperty(exports, "AnchorIcon", { enumerable: true, get: function () { return AnchorIcon_1.AnchorIcon; } });
+//# sourceMappingURL=index.js.map

package/lib/icons/ArrowIcon/ArrowIcon.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export interface ArrowIconProps {
     direction?: 'up' | 'right' | 'left' | 'down';
+    visibility?: 'visible' | 'hidden';
 }
 export declare const ArrowIcon: import("styled-components").StyledComponent<({ className }: {
     className?: string | undefined;

package/lib/icons/ArrowIcon/ArrowIcon.js

@@ -26,6 +26,7 @@ exports.ArrowIcon = (0, styled_components_1.default)(Icon) `
   height: var(--sidebar-group-item-chevron-size);
   fill: var(--sidebar-group-item-chevron-color);
   transform: rotate(${directionToTransform}deg);
+  visibility: ${({ visibility = 'visible' }) => visibility};
 
   vertical-align: middle;
 `;

package/lib/icons/index.d.ts

@@ -2,3 +2,4 @@ export * from '../icons/ShelfIcon';
 export * from '../icons/AlertIcon';
 export * from '../icons/ArrowIcon';
 export * from '../icons/ColorModeIcon';
+export * from '../icons/AnchorIcon';

package/lib/icons/index.js

@@ -18,4 +18,5 @@ __exportStar(require("../icons/ShelfIcon"), exports);
 __exportStar(require("../icons/AlertIcon"), exports);
 __exportStar(require("../icons/ArrowIcon"), exports);
 __exportStar(require("../icons/ColorModeIcon"), exports);
+__exportStar(require("../icons/AnchorIcon"), exports);
 //# sourceMappingURL=index.js.map

package/lib/index.d.ts

@@ -22,3 +22,4 @@ export * from './Sidebar';
 export * from './types/config';
 export * from './config';
 export * from './Pages';
+export * from './Markdown';

package/lib/index.js

@@ -38,4 +38,5 @@ __exportStar(require("./Sidebar"), exports);
 __exportStar(require("./types/config"), exports);
 __exportStar(require("./config"), exports);
 __exportStar(require("./Pages"), exports);
+__exportStar(require("./Markdown"), exports);
 //# sourceMappingURL=index.js.map

package/lib/ui/Jumbotron.js

@@ -14,8 +14,8 @@ exports.Jumbotron = (0, styled_components_1.default)(Background_1.Background).at
   flex-direction: column;
   padding-top: ${({ pt }) => pt || '0'};
   padding-bottom: ${({ pb }) => pb || '8em'};
-  padding-left: ${({ pl }) => pl || '0'};
-  padding-right: ${({ pr }) => pr || '0'};
+  padding-left: ${({ pl }) => pl || '1rem'};
+  padding-right: ${({ pr }) => pr || '1rem'};
   ${({ bgColor }) => bgColor && `background: ${bgColor}`};
   ${({ bgImage, bgColor }) => bgImage &&
     `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.7.5",
+  "version": "0.8.1",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -39,8 +39,7 @@
     "prismjs": "^1.28.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router": "^5.3.0",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.4.4",
     "styled-components": "^5.3.6",
     "styled-system": "^5.1.5",
     "zod": ">=3.19.1"
@@ -71,8 +70,6 @@
     "@types/prismjs": "^1.26.0",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/react-router": "^5.1.20",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.13",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
@@ -87,8 +84,7 @@
     "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",
     "react-refresh": "^0.14.0",
-    "react-router": "^5.3.0",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.4.4",
     "storybook-addon-pseudo-states": "^1.15.1",
     "storybook-design-token": "^2.7.1",
     "styled-components": "^5.3.6",

package/src/Markdown/Admonition.tsx

@@ -9,15 +9,24 @@ interface AdmonitionTypeProps {
 
 export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
   name?: string;
+  'data-source'?: string;
+  'data-hash'?: string;
 }
 
 export function Admonition({
   type = 'info',
   name,
   children,
+  'data-source': dataSource,
+  'data-hash': dataHash,
 }: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
   return (
-    <Wrapper type={type} data-component-name="Markdown/Admonition">
+    <Wrapper
+      type={type}
+      data-component-name="Markdown/Admonition"
+      data-source={dataSource}
+      data-hash={dataHash}
+    >
       <AlertIcon type={type} />
       {name ? <Heading type={type}>{name}</Heading> : null}
       <Content>{children}</Content>

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -9,9 +9,17 @@ export type CodeSampleProps = {
   language: string;
   highlighted: string;
   rawContent: string;
+  'data-source'?: string;
+  'data-hash'?: string;
 };
 
-export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
+export function CodeSample({
+  rawContent,
+  highlighted,
+  language,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+}: CodeSampleProps): JSX.Element {
   const langClassName = language ? `language-${language}` : '';
   const { codeSnippet: { copy = {}, report = {} } = {} } = useThemeConfig();
 
@@ -26,7 +34,12 @@ export function CodeSample({ rawContent, highlighted, language }: CodeSampleProp
   };
 
   return (
-    <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
+    <Wrapper
+      className="code-sample"
+      data-component-name="Markdown/CodeSample/CodeSample"
+      data-source={dataSource}
+      data-hash={dataHash}
+    >
       <CodeSampleButtonContainer>
         {!copy.hide && (
           <>

package/src/Markdown/Heading.tsx

@@ -3,36 +3,28 @@ import React, { createElement } from 'react';
 import type { PropsWithChildren } from 'react';
 
 import { concatClassNames } from '@theme/utils';
+import { AnchorIcon } from '@theme/icons';
 
 /**
  * Class name for all MD tags
  */
 const mdClassName = 'md';
 
-const SvgIcon = (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="16"
-    version="1.1"
-    viewBox="0 0 16 16"
-    width="16"
-  >
-    <path
-      fillRule="evenodd"
-      d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
-    ></path>
-  </svg>
-);
-
 export function Heading({
   level,
   id,
   children,
-}: PropsWithChildren<{ level: number; id: string }>): JSX.Element {
+  'data-source': dataSource,
+  'data-hash': dataHash,
+}: PropsWithChildren<{
+  level: number;
+  id: string;
+  'data-source'?: string;
+  'data-hash'?: string;
+}>): JSX.Element {
   const linkEl = (
     <a href={`#${id}`} className={concatClassNames('anchor', 'before')}>
-      {SvgIcon}
+      <AnchorIcon />
     </a>
   );
 
@@ -42,6 +34,8 @@ export function Heading({
       id,
       className: concatClassNames('heading-anchor', mdClassName),
       'data-component-name': 'Markdown/Heading',
+      'data-source': dataSource,
+      'data-hash': dataHash,
     },
     <>
       {linkEl}

package/src/Markdown/Mermaid.tsx

@@ -3,14 +3,22 @@ import styled from 'styled-components';
 
 type MermaidProps = {
   diagramHtml: string;
+  'data-source'?: string;
+  'data-hash'?: string;
 };
 
-export function Mermaid({ diagramHtml }: MermaidProps): JSX.Element {
+export function Mermaid({
+  diagramHtml,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+}: MermaidProps): JSX.Element {
   return (
     <Wrapper
       className="mermaid-wrapper"
       dangerouslySetInnerHTML={{ __html: diagramHtml }}
       data-component-name="Markdown/Mermaid"
+      data-source={dataSource}
+      data-hash={dataHash}
     />
   );
 }

package/src/Sidebar/MenuGroup.tsx

@@ -43,7 +43,10 @@ export function MenuGroup({
           isAlwaysExpanded={item.expanded === 'always'}
           active={item.active}
         >
-          <MenuGroupArrow direction={isExpanded ? 'down' : 'right'} />
+          <MenuGroupArrow
+            visibility={item.items.length ? 'visible' : 'hidden'}
+            direction={isExpanded ? 'down' : 'right'}
+          />
           {item.label}
         </MenuGroupLabel>
       </MenuLinkItem>
@@ -62,7 +65,7 @@ const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
   overflow: hidden;
   ${(props) =>
     props.isExpanded
-      ? `max-height: 9999px;
+      ? `max-height: 99999px;
         transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;`
       : `max-height: 0px;
 	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};

package/src/Sidebar/Sidebar.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 interface SidebarProps {
+  isNavbar: boolean;
   opened?: boolean;
   animate?: boolean;
 }
@@ -18,13 +19,16 @@ export const Sidebar = styled.aside.attrs(() => ({
   font-size: var(--sidebar-item-font-size);
   font-family: var(--sidebar-item-font-family);
   color: var(--sidebar-item-text-color);
-  top: var(--navbar-height);
-  height: calc(100vh - var(--navbar-height));
   display: flex;
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
 
+  ${({ isNavbar }) => `
+    top: ${isNavbar ? 'var(--navbar-height)' : '0'};
+    height: calc(100vh ${isNavbar ? '- var(--navbar-height)' : ''});
+  `};
+
   ${({ opened, animate }) => `
     opacity: ${opened ? '1' : '0'};
     pointer-events: ${opened ? 'auto' : 'none'};

package/src/Sidebar/SidebarLayout.tsx

@@ -17,12 +17,14 @@ interface SidebarLayoutProps {
     label: string;
     slug: string;
   };
+  isNavbar: boolean;
 }
 
 export function SidebarLayout({
   versions,
   menu,
   backLink,
+  isNavbar,
 }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
@@ -37,7 +39,7 @@ export function SidebarLayout({
       <MobileSidebarButton opened={isOpen} onClick={toggleMenu} />
 
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
-      <Sidebar animate={true} opened={isOpen}>
+      <Sidebar animate={true} opened={isOpen} isNavbar={isNavbar}>
         {(backLink && (
           <BackLinkWrapper>
             <Link to={backLink.slug}>

package/src/TableOfContent/TableOfContent.tsx

@@ -109,5 +109,5 @@ const TableOfContentItems = styled.div`
   max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
   border-left: 1px solid var(--toc-border-color);
   overflow-y: auto;
-  width: var(--toc-width); ;
+  width: var(--toc-width);
 `;

package/src/config.ts

@@ -50,6 +50,38 @@ const LinksConfig = z
   })
   .passthrough();
 
+const MarkdownConfig = z
+  .object({
+    frontMatterKeysToResolve: z.array(z.string()).default(['image', 'links']).optional(),
+    lastUpdatedBlock: z
+      .object({
+        format: z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
+        locale: z.string().default('en-US').optional(),
+      })
+      .extend(HideConfig.shape)
+      .default({})
+      .optional(),
+    toc: z
+      .object({
+        header: z.string().default('On this page').optional(),
+        depth: z.number().default(3).optional(),
+      })
+      .extend(HideConfig.shape)
+      .optional()
+      .default({}),
+    editPage: z
+      .object({
+        baseUrl: z.string().optional(),
+        icon: z.string().optional(),
+        text: z.string().optional().default('Edit this page'),
+      })
+      .extend(HideConfig.shape)
+      .default({})
+      .optional(),
+  })
+  .strict()
+  .default({});
+
 export const ThemeConfig = z
   .object({
     imports: z.array(z.string()).default([]).optional(),
@@ -150,38 +182,7 @@ export const ThemeConfig = z
       .strict()
       .default({})
       .optional(),
-    markdown: z
-      .object({
-        frontMatterKeysToResolve: z.array(z.string()).default(['image', 'links']).optional(),
-        lastUpdatedBlock: z
-          .object({
-            format: z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
-            locale: z.string().default('en-US').optional(),
-          })
-          .extend(HideConfig.shape)
-          .default({})
-          .optional(),
-        toc: z
-          .object({
-            header: z.string().default('On this page').optional(),
-            depth: z.number().default(3).optional(),
-          })
-          .extend(HideConfig.shape)
-          .optional()
-          .default({}),
-        editPage: z
-          .object({
-            baseUrl: z.string().optional(),
-            icon: z.string().optional(),
-            text: z.string().optional().default('Edit this page'),
-          })
-          .extend(HideConfig.shape)
-          .default({})
-          .optional(),
-      })
-      .strict()
-      .default({})
-      .optional(),
+    markdown: MarkdownConfig.optional(),
     openapi: z.object({}).passthrough().optional(),
     graphql: z.object({}).passthrough().optional(),
     analytics: z.any().optional(),
@@ -215,3 +216,5 @@ export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 's
     shortcuts?: string[];
   };
 };
+
+export type MarkdownConfig = z.infer<typeof MarkdownConfig>;

package/src/globalStyle.ts

@@ -204,7 +204,7 @@ const headingsTypography = css`
   --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h2-font-size: 28px; // @presenter FontSize
   --h2-line-height: 28px; // @presenter LineHeight
-  --h2-margin-top: 0; // @presenter Spacing
+  --h2-margin-top: var(--heading-margin-top); // @presenter Spacing
   --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
   --h2-text-color: var(--heading-text-color); // @presenter Color
 
@@ -880,6 +880,7 @@ const apiReferencePanels = css`
   */
 
   .panel-try-it,
+  .panel-pull-right,
   .panel-request-samples,
   .panel-response-samples,
   .panel-callback-samples {
@@ -1677,7 +1678,7 @@ const loadProgressBar = css`
   #nprogress .peg {
     display: block;
     position: absolute;
-    right: 0px;
+    right: 0;
     width: 100px;
     height: 100%;
     box-shadow: var(--load-progress-bar-shadow);

package/src/hooks/useActiveHeading.ts

@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
-
+import { useLocation } from 'react-router-dom';
 export type UseActiveHeadingReturnType = string | undefined;
 
 type HeadingEntry = {
@@ -16,8 +15,7 @@ export function useActiveHeading(
   );
   const [headingElements, setHeadingElements] = useState<HTMLElement[]>([]);
   const headingElementsRef = useRef<HeadingEntry>({});
-
-  const history = useHistory();
+  const location = useLocation();
 
   const getVisibleHeadings = () => {
     const visibleHeadings: IntersectionObserverEntry[] = [];
@@ -86,14 +84,7 @@ export function useActiveHeading(
       return;
     }
     setHeadingElements(findHeaders(contentElement));
-
-    const unlisten = history.listen(() => {
-      setHeadingElements(findHeaders(contentElement));
-    });
-
-    return () => unlisten();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [contentElement]);
+  }, [contentElement, location]);
 
   useEffect(() => {
     if (!headingElements?.length) {

package/src/hooks/useActiveSectionId.ts

@@ -41,7 +41,7 @@ export function useActiveSectionId(
     window.addEventListener('scroll', scrollListener, { capture: false });
     setTimeout(() => {
       scrollListener();
-    }, 0);
+    }, 10);
 
     return () => {
       window.removeEventListener('scroll', scrollListener);

package/src/hooks/useMobileMenu.ts

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import type { Dispatch, SetStateAction } from 'react';
 
 export function useMobileMenu(initialState = false): [boolean, Dispatch<SetStateAction<boolean>>] {
-  const { location } = useHistory();
+  const location = useLocation();
   const [isOpen, setIsOpen] = useState(initialState);
 
   useEffect(() => setIsOpen(false), [location.pathname]);

package/src/icons/AnchorIcon/AnchorIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface AnchorIconProps {
+  className?: string;
+}
+
+const Icon = ({ className }: AnchorIconProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="16"
+    version="1.1"
+    viewBox="0 0 16 16"
+    width="16"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
+    />
+  </svg>
+);
+
+export const AnchorIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/AnchorIcon/AnchorIcon',
+}))`
+  fill: var(--heading-anchor-color);
+  visibility: hidden;
+  cursor: pointer;
+
+  background-image: var(--heading-anchor-icon);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+`;

package/src/icons/AnchorIcon/index.ts

@@ -0,0 +1,2 @@
+export { AnchorIcon } from '@theme/icons/AnchorIcon/AnchorIcon';
+export type { AnchorIconProps } from '@theme/icons/AnchorIcon/AnchorIcon';

package/src/icons/ArrowIcon/ArrowIcon.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 export interface ArrowIconProps {
   direction?: 'up' | 'right' | 'left' | 'down';
+  visibility?: 'visible' | 'hidden';
 }
 
 function directionToTransform({ direction }: ArrowIconProps) {
@@ -31,6 +32,7 @@ export const ArrowIcon = styled(Icon)`
   height: var(--sidebar-group-item-chevron-size);
   fill: var(--sidebar-group-item-chevron-color);
   transform: rotate(${directionToTransform}deg);
+  visibility: ${({ visibility = 'visible' }) => visibility};
 
   vertical-align: middle;
 `;

package/src/icons/index.ts

@@ -2,3 +2,4 @@ export * from '@theme/icons/ShelfIcon';
 export * from '@theme/icons/AlertIcon';
 export * from '@theme/icons/ArrowIcon';
 export * from '@theme/icons/ColorModeIcon';
+export * from '@theme/icons/AnchorIcon';

package/src/index.ts

@@ -22,3 +22,4 @@ export * from './Sidebar';
 export * from './types/config';
 export * from './config';
 export * from './Pages';
+export * from './Markdown';

package/src/types/portal/src/shared/types/nav.d.ts

@@ -63,7 +63,7 @@ export declare type ResolvedNavItemWithLink = (ResolvedNavLinkItem | ResolvedNav
 export declare type ResolvedSidebar = ResolvedNavItem[];
 export interface PageProps {
   seo?: {
-    title: string;
+    title?: string;
   };
   frontmatter?: Omit<PageProps, 'frontmatter'> & {
     settings?: any;

package/src/ui/Jumbotron.tsx

@@ -19,8 +19,8 @@ export const Jumbotron = styled(Background).attrs(() => ({
   flex-direction: column;
   padding-top: ${({ pt }) => pt || '0'};
   padding-bottom: ${({ pb }) => pb || '8em'};
-  padding-left: ${({ pl }) => pl || '0'};
-  padding-right: ${({ pr }) => pr || '0'};
+  padding-left: ${({ pl }) => pl || '1rem'};
+  padding-right: ${({ pr }) => pr || '1rem'};
   ${({ bgColor }) => bgColor && `background: ${bgColor}`};
   ${({ bgImage, bgColor }) =>
     bgImage &&