@redocly/theme 0.4.14 → 0.4.16

package/lib/Markdown/CodeSample/CodeSample.js

@@ -0,0 +1,211 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeSample = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const ClipboardService_1 = require("../../utils/ClipboardService");
+const useDefaultThemeSettings_1 = require("../../hooks/useDefaultThemeSettings");
+const defaultCopyCodeSnippet = {
+    hide: false,
+    buttonText: 'Copy',
+    tooltipText: 'Copy the code snippet',
+    toasterText: 'Copied',
+    toasterDuration: 1500,
+};
+function CodeSample({ rawContent, highlighted, language }) {
+    const langClassName = language ? `language-${language}` : '';
+    const { copyCodeSnippet } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
+    const copyCodeProps = Object.assign(Object.assign({}, defaultCopyCodeSnippet), copyCodeSnippet);
+    const [isCopied, setIsCopied] = (0, react_1.useState)(false);
+    const copyCode = (code) => {
+        ClipboardService_1.ClipboardService.copyCustom(code);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), copyCodeProps.toasterDuration);
+    };
+    return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
+        !copyCodeProps.hide && (react_1.default.createElement(CodeSampleButtonContainer, { onClick: () => copyCode(rawContent) },
+            !isCopied && (react_1.default.createElement(CopyCodeButton, { title: copyCodeProps.tooltipText }, copyCodeProps.buttonText)),
+            isCopied && react_1.default.createElement(DoneIndicator, null, copyCodeProps.toasterText))),
+        react_1.default.createElement("pre", { className: langClassName },
+            react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));
+}
+exports.CodeSample = CodeSample;
+const CodeSampleButtonContainer = styled_components_1.default.div `
+  position: absolute;
+  top: 12px;
+  right: 5px;
+`;
+const CopyCodeButton = styled_components_1.default.div `
+  padding: var(--code-block-controls-padding);
+  border-radius: var(--code-block-controls-border-radius);
+  font-size: var(--code-block-controls-font-size);
+  font-family: var(--code-block-controls-font-family);
+  &:hover {
+    cursor: pointer;
+  }
+`;
+const DoneIndicator = styled_components_1.default.div `
+  padding: var(--code-block-controls-padding);
+  border-radius: var(--code-block-controls-border-radius);
+  font-size: var(--code-block-controls-font-size);
+  font-family: var(--code-block-controls-font-family);
+  cursor: default;
+`;
+const darkStyleTokens = (0, styled_components_1.css) `
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: hsl(30, 20%, 50%);
+  }
+  .token.property,
+  .token.tag,
+  .token.number,
+  .token.constant,
+  .token.symbol {
+    color: #62bff9;
+  }
+  .token.boolean {
+    color: firebrick;
+  }
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #a0fbaa;
+    & + a,
+    & + a:visited {
+      color: #4ed2ba;
+      text-decoration: underline;
+    }
+  }
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .token.variable {
+    color: hsl(40, 90%, 60%);
+  }
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: hsl(350, 40%, 70%);
+  }
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+  .token.deleted {
+    color: red;
+  }
+`;
+const Wrapper = styled_components_1.default.div `
+  overflow: auto;
+  border-radius: 4px;
+  position: relative;
+
+  ${CopyCodeButton},
+  ${DoneIndicator} {
+    color: var(--code-block-controls-text-color);
+    background-color: var(--code-block-controls-background-color);
+    opacity: var(--code-block-controls-opacity);
+  }
+  ${CopyCodeButton}:hover {
+    color: var(--code-block-controls-hover-text-color);
+    background-color: var(--code-block-controls-hover-background-color);
+    opacity: var(--code-block-controls-active-opacity);
+  }
+
+  pre {
+    white-space: var(--code-wrap);
+    color: white;
+    padding: 12px 14px 15px 14px;
+    overflow-x: auto;
+    line-height: normal;
+    border-radius: var(--code-block-border-radius);
+    font-family: var(--code-font-family);
+    background-color: var(--code-block-background-color);
+    code {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+      color: var(--code-block-text-color);
+      &:before,
+      &:after {
+        content: none;
+      }
+    }
+  }
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border: 0;
+    border-radius: var(--border-radius);
+  }
+  code[class='language-text'] {
+    line-height: 1.2em;
+    display: inline-flex;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    .token.important,
+    .token.bold {
+      font-weight: bold;
+    }
+    .token.italic {
+      font-style: italic;
+    }
+    .token.entity {
+      cursor: help;
+    }
+    .token.punctuation {
+      opacity: 0.7;
+    }
+    .namespace {
+      opacity: 0.7;
+    }
+
+    ${darkStyleTokens};
+  }
+`;
+//# sourceMappingURL=CodeSample.js.map

package/{Markdown → lib/Markdown}/CodeSample/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../Markdown/CodeSample/CodeSample"), exports);
+//# sourceMappingURL=index.js.map

package/lib/Markdown/ContainerWrapper.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ContainerWrapper = styled_components_1.default.section.attrs(() => ({
+    'data-component-name': 'Markdown/ContainerWrapper',
+})) `
+  max-width: var(--md-container-max-width);
+  width: 90%;
+  margin: 0 auto;
+
+  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; */
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: ${({ withToc }) => (withToc ? `calc(90% - var(--toc-width))` : '90%')};
+  }
+`;
+//# sourceMappingURL=ContainerWrapper.js.map

package/lib/Markdown/Details.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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,
+        react_1.default.createElement("summary", null, summary),
+        react_1.default.createElement(StyledDetailsContent, null, children)));
+}
+exports.Details = Details;
+const StyledDetails = styled_components_1.default.details ``;
+const StyledDetailsContent = styled_components_1.default.div ``;
+//# sourceMappingURL=Details.js.map

package/{Markdown → lib/Markdown}/Heading.js

@@ -24,19 +24,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = void 0;
-var react_1 = __importStar(require("react"));
-var utils_1 = require("../utils");
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../utils");
 /**
  * Class name for all MD tags
  */
-var mdClassName = 'md';
-var SvgIcon = (react_1.default.createElement("svg", { "aria-hidden": "true", focusable: "false", height: "16", version: "1.1", viewBox: "0 0 16 16", width: "16" },
+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(_a) {
-    var level = _a.level, id = _a.id, children = _a.children;
-    var linkEl = (react_1.default.createElement("a", { href: "#".concat(id), className: (0, utils_1.concatClassNames)('anchor', 'before') }, SvgIcon));
-    return (0, react_1.createElement)("h".concat(level), {
-        id: id,
+function Heading({ level, id, children, }) {
+    const linkEl = (react_1.default.createElement("a", { href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') }, SvgIcon));
+    return (0, react_1.createElement)(`h${level}`, {
+        id,
         className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName),
         'data-component-name': 'Markdown/Heading',
     }, react_1.default.createElement(react_1.default.Fragment, null,
@@ -44,3 +43,4 @@ function Heading(_a) {
         children));
 }
 exports.Heading = Heading;
+//# sourceMappingURL=Heading.js.map

package/{Markdown → lib/Markdown}/MarkdownLayout.d.ts

@@ -2,14 +2,13 @@ import React from 'react';
 declare type MarkdownLayoutProps = {
     tableOfContent: React.ReactNode;
     markdownWrapper: React.ReactNode;
-    showPrevButton?: boolean;
-    showNextButton?: boolean;
     editPage?: {
         to: string;
         text: string;
         icon: string;
     };
+    /** String in ISO format */
     lastModified?: string | null;
 };
-export declare function MarkdownLayout({ tableOfContent, markdownWrapper, showPrevButton, showNextButton, editPage, lastModified, }: MarkdownLayoutProps): JSX.Element;
+export declare function MarkdownLayout({ tableOfContent, markdownWrapper, editPage, lastModified, }: MarkdownLayoutProps): JSX.Element;
 export {};

package/lib/Markdown/MarkdownLayout.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownLayout = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const PageWrapper_1 = require("../Markdown/PageWrapper");
+const ContainerWrapper_1 = require("../Markdown/ContainerWrapper");
+const PageNavigation_1 = require("../PageNavigation/PageNavigation");
+const EditPageButton_1 = require("../EditPageButton");
+const LastUpdated_1 = require("../LastUpdated/LastUpdated");
+function MarkdownLayout({ tableOfContent, markdownWrapper, editPage, lastModified, }) {
+    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(LayoutTop, null,
+                lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
+                editPage && (react_1.default.createElement(EditPageButton_1.EditPageButton, { text: editPage.text, to: editPage.to, icon: editPage.icon }))),
+            markdownWrapper,
+            react_1.default.createElement(PageNavigation_1.PageNavigation, null)),
+        tableOfContent));
+}
+exports.MarkdownLayout = MarkdownLayout;
+const LayoutTop = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+`;
+//# sourceMappingURL=MarkdownLayout.js.map