@redocly/theme/lib/layouts/DocumentationLayout.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DocumentationLayout = DocumentationLayout;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../core/utils");
const CodeSnippetContext_1 = require("../core/contexts/CodeSnippetContext");
const DocumentationLayoutTop_1 = require("../layouts/DocumentationLayoutTop");
const DocumentationLayoutBottom_1 = require("../layouts/DocumentationLayoutBottom");
function DocumentationLayout({ tableOfContent, feedback, config, editPage, lastModified, nextPage, prevPage, className, children, }) {
    var _a;
    return (react_1.default.createElement(CodeSnippetContext_1.CodeSnippetProvider, null,
        react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/DocumentationLayout", className: className },
            react_1.default.createElement(ContentWrapper, { withToc: !((_a = config === null || config === void 0 ? void 0 : config.toc) === null || _a === void 0 ? void 0 : _a.hide) },
                react_1.default.createElement(DocumentationLayoutTop_1.DocumentationLayoutTop, { config: config, editPage: editPage, lastModified: lastModified }),
                children,
                react_1.default.createElement(DocumentationLayoutBottom_1.DocumentationLayoutBottom, { feedback: feedback, nextPage: nextPage, prevPage: prevPage })),
            tableOfContent)));
}
const LayoutWrapper = styled_components_1.default.div.attrs(({ className }) => ({
    className,
})) `
  display: flex;
  flex: 1;
  width: 100%;
`;
const ContentWrapper = styled_components_1.default.section `
  --md-content-font-size: var(--font-size-lg);
  --md-content-line-height: var(--line-height-lg);
  --md-table-font-size: var(--md-content-font-size);
  --md-table-line-height: var(--md-content-line-height);
  --md-tabs-content-font-size: var(--md-content-font-size);
  --md-tabs-content-line-height: var(--md-content-line-height);

  max-width: var(--md-content-max-width);
  width: 90%;
  margin: 0 auto;

  padding: var(--md-content-padding);

  article:first-child > h1:first-child {
    // disable margin top for h1 on the title heading
    margin-top: 0;
  }

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    width: ${({ withToc }) => (withToc ? `calc(90% - var(--toc-width))` : '90%')};
  }
`;
//# sourceMappingURL=DocumentationLayout.js.map