@redocly/theme 0.8.0 → 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));

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

@@ -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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

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>

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

@@ -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/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;