@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 EditPageButton_1 = require("../components/Buttons/EditPageButton");
const utils_1 = require("../core/utils");
const PageNavigation_1 = require("../components/PageNavigation/PageNavigation");
const LastUpdated_1 = require("../components/LastUpdated/LastUpdated");
const Breadcrumbs_1 = require("../components/Breadcrumbs/Breadcrumbs");
function DocumentationLayout({ tableOfContent, feedback, config, editPage, lastModified, nextPage, prevPage, className, children, }) {
    var _a;
    const { editPage: themeEditPage } = config || {};
    const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
    return (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(Breadcrumbs, null),
            react_1.default.createElement(LayoutTop, null,
                lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
                mergedConf && react_1.default.createElement(EditPageButton_1.EditPageButton, { to: mergedConf.to })),
            children,
            react_1.default.createElement(LayoutBottom, null, feedback),
            react_1.default.createElement(PageNavigation_1.PageNavigation, { 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%')};
  }
`;
const LayoutTop = styled_components_1.default.div `
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
`;
const Breadcrumbs = (0, styled_components_1.default)(Breadcrumbs_1.Breadcrumbs) `
  margin-bottom: var(--breadcrumbs-margin-bottom);
`;
const LayoutBottom = (0, styled_components_1.default)(LayoutTop) `
  > * {
    margin: 25px 0;
  }
`;
//# sourceMappingURL=DocumentationLayout.js.map