create-trellis-docs 1.0.0

package/template/src/theme/DocItem/Content/styles.module.css

@@ -0,0 +1,96 @@
+/* last updated */
+
+.lastUpdated  {
+  flex: 1;
+  font-style: normal;
+  font-size: 12px;
+  margin-top: 3px;
+}
+
+.editThisPage {
+  font-style: normal;
+  font-size: 12px;
+  text-align: right;
+  padding-top: 0; /* Changed from 33px */
+  margin-top: 2px;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start; /* Changed from center to flex-start */
+  margin-top: -45px;
+  padding-bottom: 3rem;
+  margin-left: 4px;
+}
+
+
+
+.role {
+  margin-left: -2px;
+  margin-top: 10px;
+  padding-bottom: 0.05rem;
+  display: flex;
+  gap: 8px;
+}
+
+/* Media query for smaller screens */
+@media (max-width: 768px) {
+  .lastUpdated, .editThisPage {
+    flex: 100%;
+    text-align: left;
+
+  }
+  .editThisPage {
+    padding-top: 0.5rem;
+  }
+
+
+}
+
+@media (max-width: 996px) {
+  .lastUpdated, .editThisPage {
+    flex: 100%;
+    text-align: left;
+
+  }
+  .editThisPage {
+    padding-top: 0.5rem;
+  }
+
+}
+
+@media (min-width: 997px) {
+  .lastUpdated {
+    text-align: left;
+  }
+  .editThisPage {
+    margin-top: 0; /* Changed from -38px */
+  }
+}
+
+
+
+@media only screen and (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}
+
+.docItemContainer {
+  margin: 0 auto;
+  padding: 0 0.5rem;
+}
+
+@media only screen and (max-width: 996px) {
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}
+
+.docTitle {
+  font-size: 3rem;
+  margin-bottom: -calc(var(--ifm-leading-desktop) * var(--ifm-leading));
+}
+

package/template/src/theme/DocItem/Footer/index.js

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

package/template/src/theme/DocItem/Footer/styles.module.css

@@ -0,0 +1,19 @@
+.pagination {
+  align-items: center;
+}
+
+.pagination li {
+
+  font-style: normal;
+  font-size: 14px;
+  margin-bottom: 14px;
+}
+
+ul.no-style {
+  list-style-type: none;
+  margin-left: 20px;
+}
+
+.indent {
+  margin-left: 10px;
+}

package/template/src/theme/DocItem/Layout/index.js

@@ -0,0 +1,55 @@
+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 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();
+  return (
+    <div className="row">
+      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+        <ContentVisibility metadata={metadata} />
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {docTOC.mobile}
+            <DocItemContent>{children}</DocItemContent>
+
+          </article>
+        </div>
+      </div>
+      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+    </div>
+  );
+}

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

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

package/template/src/theme/DocItem/Metadata/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {PageMetadata} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+export default function DocItemMetadata() {
+  const {metadata, frontMatter, assets} = useDoc();
+  return (
+    <PageMetadata
+      title={metadata.title}
+      description={metadata.description}
+      keywords={frontMatter.keywords}
+      image={assets.image ?? frontMatter.image}
+      doc_type={frontMatter.docType}
+      product={frontMatter.product}
+      role={frontMatter.role}
+    />
+  );
+}

package/template/src/theme/DocItem/Paginator/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import DocPaginator from '@theme/DocPaginator';
+/**
+ * This extra component is needed, because <DocPaginator> should remain generic.
+ * DocPaginator is used in non-docs contexts too: generated-index pages...
+ */
+export default function DocItemPaginator() {
+  const {metadata} = useDoc();
+  return (
+    <DocPaginator
+      className="docusaurus-mt-lg"
+      previous={metadata.previous}
+      next={metadata.next}
+    />
+  );
+}

package/template/src/theme/DocItem/TOC/Desktop/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import TOC from '@theme/TOC';
+export default function DocItemTOCDesktop() {
+  const {toc, frontMatter} = useDoc();
+  return (
+    <TOC
+      toc={toc}
+      minHeadingLevel={frontMatter.toc_min_heading_level}
+      maxHeadingLevel={frontMatter.toc_max_heading_level}
+      className={ThemeClassNames.docs.docTocDesktop}
+    />
+  );
+}

package/template/src/theme/DocItem/TOC/Mobile/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import TOCCollapsible from '@theme/TOCCollapsible';
+import styles from './styles.module.css';
+export default function DocItemTOCMobile() {
+  const {toc, frontMatter} = useDoc();
+  return (
+    <TOCCollapsible
+      toc={toc}
+      minHeadingLevel={frontMatter.toc_min_heading_level}
+      maxHeadingLevel={frontMatter.toc_max_heading_level}
+      className={clsx(ThemeClassNames.docs.docTocMobile, styles.tocMobile)}
+    />
+  );
+}

package/template/src/theme/DocItem/TOC/Mobile/styles.module.css

@@ -0,0 +1,12 @@
+@media (min-width: 997px) {
+  /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
+  .tocMobile {
+    display: none;
+  }
+}
+
+@media print {
+  .tocMobile {
+    display: none;
+  }
+}

package/template/src/theme/DocItem/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {HtmlClassNameProvider} from '@docusaurus/theme-common';
+import {DocProvider} from '@docusaurus/plugin-content-docs/client';
+import DocItemMetadata from '@theme/DocItem/Metadata';
+import DocItemLayout from '@theme/DocItem/Layout';
+export default function DocItem(props) {
+  const docHtmlClassName = `docs-doc-id-${props.content.metadata.id}`;
+  const MDXComponent = props.content;
+  return (
+    <DocProvider content={props.content}>
+      <HtmlClassNameProvider className={docHtmlClassName}>
+        <DocItemMetadata />
+        <DocItemLayout>
+          <MDXComponent />
+        </DocItemLayout>
+      </HtmlClassNameProvider>
+    </DocProvider>
+  );
+}

package/template/src/theme/DocItem/styles.module.css

@@ -0,0 +1,28 @@
+@media only screen and (min-width: 997px) {
+    .docItemCol {
+      max-width: 75% !important;
+    }
+  }
+  
+  .docItemContainer {
+    margin: 0 auto;
+    padding: 0 0.5rem;
+
+  }
+  
+  @media only screen and (max-width: 996px) {
+    .docItemContainer {
+      padding: 0 0.3rem;
+    }
+  }
+  
+  .docTitle {
+    font-size: 3rem;
+    margin-bottom: -calc(var(--ifm-leading-desktop) * var(--ifm-leading));
+  }
+  
+  .docLastUpdatedAt {
+    font-weight: bold;
+  }
+  
+  

package/template/src/theme/DocRoot/Layout/Main/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
+import styles from './styles.module.css';
+export default function DocRootLayoutMain({hiddenSidebarContainer, children}) {
+  const sidebar = useDocsSidebar();
+  return (
+    <main
+      className={clsx(
+        styles.docMainContainer,
+        (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
+      )}>
+      <div
+        className={clsx(
+          'container padding-top--md padding-bottom--lg',
+          styles.docItemWrapper,
+          hiddenSidebarContainer && styles.docItemWrapperEnhanced,
+        )}>
+        {children}
+      </div>
+    </main>
+  );
+}

package/template/src/theme/DocRoot/Layout/Main/styles.module.css

@@ -0,0 +1,31 @@
+.docMainContainer {
+  display: flex;
+  width: 100%;
+  margin-left: 0px;
+/*  box-shadow: var(--ifm-global-shadow-lw); */
+}
+
+article,
+.paper {
+  margin: 0 calc(var(--ifm-spacing-horizontal) * -0.5);
+  padding: 1rem 2rem;
+/*  box-shadow: var(--ifm-global-shadow-lw); */
+}
+
+
+@media (min-width: 997px) {
+  .docMainContainer {
+    flex-grow: 1;
+    max-width: calc(100% - var(--doc-sidebar-width));
+  }
+
+  .docMainContainerEnhanced {
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
+  }
+
+  .docItemWrapperEnhanced {
+    max-width: calc(
+      var(--ifm-container-width) + var(--doc-sidebar-width)
+    ) !important;
+  }
+}

package/template/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/Icon/Arrow';
+import styles from './styles.module.css';
+export default function DocRootLayoutSidebarExpandButton({toggleSidebar}) {
+  return (
+    <div
+      className={styles.expandButton}
+      title={translate({
+        id: 'theme.docs.sidebar.expandButtonTitle',
+        message: 'Expand sidebar',
+        description:
+          'The ARIA label and title attribute for expand button of doc sidebar',
+      })}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.expandButtonAriaLabel',
+        message: 'Expand sidebar',
+        description:
+          'The ARIA label and title attribute for expand button of doc sidebar',
+      })}
+      tabIndex={0}
+      role="button"
+      onKeyDown={toggleSidebar}
+      onClick={toggleSidebar}>
+      <IconArrow className={styles.expandButtonIcon} />
+    </div>
+  );
+}

package/template/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css

@@ -0,0 +1,27 @@
+@media (min-width: 997px) {
+  .expandButton {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--ifm-transition-fast) ease;
+    background-color: var(--docusaurus-collapse-button-bg);
+  }
+
+  .expandButton:hover,
+  .expandButton:focus {
+    background-color: var(--docusaurus-collapse-button-bg-hover);
+  }
+
+  .expandButtonIcon {
+    transform: rotate(0);
+  }
+
+  [dir='rtl'] .expandButtonIcon {
+    transform: rotate(180deg);
+  }
+}

package/template/src/theme/DocRoot/Layout/Sidebar/index.js

@@ -0,0 +1,70 @@
+import React, {useState, useCallback} from 'react';
+import clsx from 'clsx';
+import {prefersReducedMotion, ThemeClassNames} from '@docusaurus/theme-common';
+import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
+import {useLocation} from '@docusaurus/router';
+import DocSidebar from '@theme/DocSidebar';
+import ExpandButton from '@theme/DocRoot/Layout/Sidebar/ExpandButton';
+import styles from './styles.module.css';
+// Reset sidebar state when sidebar changes
+// Use React key to unmount/remount the children
+// See https://github.com/facebook/docusaurus/issues/3414
+function ResetOnSidebarChange({children}) {
+  const sidebar = useDocsSidebar();
+  return (
+    <React.Fragment key={sidebar?.name ?? 'noSidebar'}>
+      {children}
+    </React.Fragment>
+  );
+}
+export default function DocRootLayoutSidebar({
+  sidebar,
+  hiddenSidebarContainer,
+  setHiddenSidebarContainer,
+}) {
+  const {pathname} = useLocation();
+  const [hiddenSidebar, setHiddenSidebar] = useState(false);
+  const toggleSidebar = useCallback(() => {
+    if (hiddenSidebar) {
+      setHiddenSidebar(false);
+    }
+    // onTransitionEnd won't fire when sidebar animation is disabled
+    // fixes https://github.com/facebook/docusaurus/issues/8918
+    if (!hiddenSidebar && prefersReducedMotion()) {
+      setHiddenSidebar(true);
+    }
+    setHiddenSidebarContainer((value) => !value);
+  }, [setHiddenSidebarContainer, hiddenSidebar]);
+  return (
+    <aside
+      className={clsx(
+        ThemeClassNames.docs.docSidebarContainer,
+        styles.docSidebarContainer,
+        hiddenSidebarContainer && styles.docSidebarContainerHidden,
+      )}
+      onTransitionEnd={(e) => {
+        if (!e.currentTarget.classList.contains(styles.docSidebarContainer)) {
+          return;
+        }
+        if (hiddenSidebarContainer) {
+          setHiddenSidebar(true);
+        }
+      }}>
+      <ResetOnSidebarChange>
+        <div
+          className={clsx(
+            styles.sidebarViewport,
+            hiddenSidebar && styles.sidebarViewportHidden,
+          )}>
+          <DocSidebar
+            sidebar={sidebar}
+            path={pathname}
+            onCollapse={toggleSidebar}
+            isHidden={hiddenSidebar}
+          />
+          {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
+        </div>
+      </ResetOnSidebarChange>
+    </aside>
+  );
+}

package/template/src/theme/DocRoot/Layout/Sidebar/styles.module.css

@@ -0,0 +1,32 @@
+:root {
+  --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
+}
+
+.docSidebarContainer {
+  display: none;
+}
+
+@media (min-width: 997px) {
+  .docSidebarContainer {
+    display: block;
+    width: var(--doc-sidebar-width);
+    margin-top: calc(-1 * var(--ifm-navbar-height));
+    border-right: 1px solid var(--ifm-toc-border-color);
+    will-change: width;
+    transition: width var(--ifm-transition-fast) ease;
+    clip-path: inset(0);
+  }
+
+  .docSidebarContainerHidden {
+    width: var(--doc-sidebar-hidden-width);
+    cursor: pointer;
+  }
+
+  .sidebarViewport {
+    top: 0;
+    position: sticky;
+    height: 100%;
+    max-height: 100vh;
+  }
+}

package/template/src/theme/DocRoot/Layout/index.js

@@ -0,0 +1,27 @@
+import React, {useState} from 'react';
+import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
+import BackToTopButton from '@theme/BackToTopButton';
+import DocRootLayoutSidebar from '@theme/DocRoot/Layout/Sidebar';
+import DocRootLayoutMain from '@theme/DocRoot/Layout/Main';
+import styles from './styles.module.css';
+export default function DocRootLayout({children}) {
+  const sidebar = useDocsSidebar();
+  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
+  return (
+    <div className={styles.docsWrapper}>
+      <BackToTopButton />
+      <div className={styles.docRoot}>
+        {sidebar && (
+          <DocRootLayoutSidebar
+            sidebar={sidebar.items}
+            hiddenSidebarContainer={hiddenSidebarContainer}
+            setHiddenSidebarContainer={setHiddenSidebarContainer}
+          />
+        )}
+        <DocRootLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
+          {children}
+        </DocRootLayoutMain>
+      </div>
+    </div>
+  );
+}

package/template/src/theme/DocRoot/Layout/styles.module.css

@@ -0,0 +1,9 @@
+.docRoot {
+  display: flex;
+  width: 100%;
+}
+
+.docsWrapper {
+  display: flex;
+  flex: 1 0 auto;
+}

package/template/src/theme/DocRoot/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import clsx from 'clsx';
+import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  DocsSidebarProvider,
+  useDocRootMetadata,
+} from '@docusaurus/plugin-content-docs/client';
+import DocRootLayout from '@theme/DocRoot/Layout';
+import NotFoundContent from '@theme/NotFound/Content';
+export default function DocRoot(props) {
+  const currentDocRouteMetadata = useDocRootMetadata(props);
+  if (!currentDocRouteMetadata) {
+    // We only render the not found content to avoid a double layout
+    // see https://github.com/facebook/docusaurus/pull/7966#pullrequestreview-1077276692
+    return <NotFoundContent />;
+  }
+  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
+  return (
+    <HtmlClassNameProvider className={clsx(ThemeClassNames.page.docsDocPage)}>
+      <DocsSidebarProvider name={sidebarName} items={sidebarItems}>
+        <DocRootLayout>{docElement}</DocRootLayout>
+      </DocsSidebarProvider>
+    </HtmlClassNameProvider>
+  );
+}

package/template/src/theme/DocSidebar/Desktop/CollapseButton/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/Icon/Arrow';
+import styles from './styles.module.css';
+export default function CollapseButton({onClick}) {
+  return (
+    <button
+      type="button"
+      title={translate({
+        id: 'theme.docs.sidebar.collapseButtonTitle',
+        message: 'Collapse sidebar',
+        description: 'The title attribute for collapse button of doc sidebar',
+      })}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.collapseButtonAriaLabel',
+        message: 'Collapse sidebar',
+        description: 'The title attribute for collapse button of doc sidebar',
+      })}
+      className={clsx(
+        'button button--secondary button--outline',
+        styles.collapseSidebarButton,
+      )}
+      onClick={onClick}>
+      <IconArrow className={styles.collapseSidebarButtonIcon} />
+    </button>
+  );
+}