Make docs tags more accessible

src/theme/DocItem/Footer/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import clsx from "clsx";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
+
+import EditMetaRow from "@theme/EditMetaRow";
+export default function DocItemFooter() {
+  const { metadata } = useDoc();
+  const { editUrl, lastUpdatedAt, lastUpdatedBy } = metadata;
+
+  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+  const canDisplayFooter = canDisplayEditMetaRow;
+  if (!canDisplayFooter) {
+    return null;
+  }
+  return (
+    <footer
+      className={clsx(ThemeClassNames.docs.docFooter, "docusaurus-mt-lg")}
+    >
+      {canDisplayEditMetaRow && (
+        <EditMetaRow
+          className={clsx(
+            "margin-top--sm",
+            ThemeClassNames.docs.docFooterEditMetaRow
+          )}
+          editUrl={editUrl}
+          lastUpdatedAt={lastUpdatedAt}
+          lastUpdatedBy={lastUpdatedBy}
+        />
+      )}
+    </footer>
+  );
+}

src/theme/DocItem/Layout/index.js

@@ -0,0 +1,72 @@
+import React from "react";
+import clsx from "clsx";
+import { useWindowSize } from "@docusaurus/theme-common";
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
+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 ContentVisibility from "@theme/ContentVisibility";
+import TagsListInline from "@theme/TagsListInline";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+import styles from "./styles.module.css";
+/**
+ * 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 { metadata } = useDoc();
+  const { tags } = metadata;
+  const canDisplayTagsRow = tags.length > 0;
+  return (
+    <div className="row">
+      <div className={clsx("col", !docTOC.hidden && styles.docItemCol)}>
+        <ContentVisibility metadata={metadata} />
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {canDisplayTagsRow && (
+              <div
+                className={clsx(
+                  "row margin-top--sm",
+                  ThemeClassNames.docs.docFooterTagsRow
+                )}
+              >
+                <div className="col">
+                  <TagsListInline tags={tags} />
+                </div>
+              </div>
+            )}
+            {docTOC.mobile}
+            <DocItemContent>{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;
+  }
+}