Merge pull request #10 from KeychainMDIP/globalCallouts

Callouts via frontmatter

src/components/globalCallouts/experimental.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Admonition from '@theme/Admonition';
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+export default function ExperimentalCallout() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Admonition type="warning">
+      <p>
+        This feature is currently in the experimental stage of development.
+        Do not use it in production environments or presume it is secure.
+        Expect breaking changes.
+      </p>
+    </Admonition>
+  );
+}
+
+

src/theme/DocItem/Layout/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useWindowSize} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/theme-common/internal';
+import DocItemPaginator from '@theme/DocItem/Paginator';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocItemFooter from '@theme/DocItem/Footer';
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
+import DocItemContent from '@theme/DocItem/Content';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import Unlisted from '@theme/Unlisted';
+import styles from './styles.module.css';
+import ExperimentalCallout from '@site/src/components/globalCallouts/experimental';
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const {frontMatter, toc} = useDoc();
+  const windowSize = useWindowSize();
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
+  const desktop =
+    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+      <DocItemTOCDesktop />
+    ) : undefined;
+  return {
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+export default function DocItemLayout({children}) {
+  const docTOC = useDocTOC();
+  const {frontMatter} = useDoc();
+  const {
+    metadata: {unlisted},
+  } = useDoc();
+  return (
+    <div className="row">
+      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+        {unlisted && <Unlisted />}
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {docTOC.mobile}
+            <DocItemContent>
+              {frontMatter.experimental == true ?
+                <><ExperimentalCallout/></>
+                : null
+              }
+              {children}
+            </DocItemContent>
+            <DocItemFooter />
+          </article>
+          <DocItemPaginator />
+        </div>
+      </div>
+      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+    </div>
+  );
+}

src/theme/DocItem/Layout/styles.module.css

@@ -0,0 +1,10 @@
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}