create-trellis-docs 1.0.0

package/template/src/theme/NavbarItem/DropdownNavbarItem/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import DropdownNavbarItemMobile from '@theme/NavbarItem/DropdownNavbarItem/Mobile';
+import DropdownNavbarItemDesktop from '@theme/NavbarItem/DropdownNavbarItem/Desktop';
+export default function DropdownNavbarItem({mobile = false, ...props}) {
+  const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop;
+  return <Comp {...props} />;
+}

package/template/src/theme/NotFound/Content/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import Translate, { translate } from '@docusaurus/Translate';
+import { PageMetadata } from '@docusaurus/theme-common';
+
+export default function NotFound() {
+  return (
+    <>
+      <PageMetadata
+        title={translate({
+          id: 'theme.NotFound.title',
+          message: 'Page Not Found',
+        })}
+      />
+        <main className="container conver-404 margin-vert--xl">
+          <div className="row">
+            <div className="col col--6 col--offset-3">
+              <h1 className="hero__title not-found">
+                <Translate
+                  id="theme.NotFound.title"
+                  description="The title of the 404 page"
+                >
+                  Page Not Found
+                </Translate>
+              </h1>
+              <p className="not-found">
+                <Translate
+                  id="theme.NotFound.p1"
+                  description="The first paragraph of the 404 page"
+                >
+                  The link you clicked may be broken or the page may have been
+                  removed.
+                </Translate>
+              </p>
+              <div className="intro-text-button">
+                <div>
+                  <a className="button button--primary button-404" href="/">
+                    Go Home!
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import {translate} from '@docusaurus/Translate';
+import {PageMetadata} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import NotFoundContent from '@theme/NotFound/Content';
+export default function Index() {
+  const title = translate({
+    id: 'theme.NotFound.title',
+    message: 'Page Not Found',
+  });
+  return (
+    <>
+      <PageMetadata title={title} />
+      <Layout>
+        <NotFoundContent />
+      </Layout>
+    </>
+  );
+}

package/template/src/theme/NotFound.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import Translate, { translate } from '@docusaurus/Translate';
+import { PageMetadata } from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+
+export default function NotFound() {
+  return (
+    <>
+      <PageMetadata
+        title={translate({
+          id: 'theme.NotFound.title',
+          message: 'Page Not Found',
+        })}
+      />
+      <Layout className="conver-404">
+        <main className="container margin-vert--xl">
+          <div className="row">
+            <div className="col col--6 col--offset-3">
+              <h1 className="hero__title not-found">
+                <Translate
+                  id="theme.NotFound.title"
+                  description="The title of the 404 page"
+                >
+                  Page Not Found
+                </Translate>
+              </h1>
+              <p className="not-found">
+                <Translate
+                  id="theme.NotFound.p1"
+                  description="The first paragraph of the 404 page"
+                >
+                  The link you clicked may be broken or the page may have been
+                  removed.
+                </Translate>
+              </p>
+              <div className="intro-text-button">
+                <div>
+                  <a className="button button--primary button-404" href="/">
+                    Go Home!
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </Layout>
+    </>
+  );
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+export default function PaginatorNavLink(props) {
+  const {permalink, title, subLabel, isNext} = props;
+  return (
+    <Link
+      className={clsx(
+        'pagination-nav__link',
+        isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
+      )}
+      to={permalink}>
+      {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
+      <div className="pagination-nav__label">{title}</div>
+    </Link>
+  );
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import TOCItems from '@theme/TOCItems';
+import styles from './styles.module.css';
+// Using a custom className
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
+export default function TOC({className, ...props}) {
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}

package/template/src/theme/TOCItems/Tree.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+// Recursive component rendering the toc tree
+function TOCItemTree({toc, className, linkClassName, isChild}) {
+  if (!toc.length) {
+    return null;
+  }
+  return (
+    <ul className={isChild ? undefined : className}>
+      {toc.map((heading) => (
+        <li key={heading.id}>
+          <Link
+            to={`#${heading.id}`}
+            className={linkClassName ?? undefined}
+            // Developer provided the HTML, so assume it's safe.
+            dangerouslySetInnerHTML={{__html: heading.value}}
+          />
+          <TOCItemTree
+            isChild
+            toc={heading.children}
+            className={className}
+            linkClassName={linkClassName}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+// Memo only the tree root is enough
+export default React.memo(TOCItemTree);

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

@@ -0,0 +1,47 @@
+import React, {useMemo} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {
+  useTOCHighlight,
+  useFilteredAndTreeifiedTOC,
+} from '@docusaurus/theme-common/internal';
+import TOCItemTree from '@theme/TOCItems/Tree';
+export default function TOCItems({
+  toc,
+  className = 'table-of-contents table-of-contents__left-border',
+  linkClassName = 'table-of-contents__link',
+  linkActiveClassName = undefined,
+  minHeadingLevel: minHeadingLevelOption,
+  maxHeadingLevel: maxHeadingLevelOption,
+  ...props
+}) {
+  const themeConfig = useThemeConfig();
+  const minHeadingLevel =
+    minHeadingLevelOption ?? themeConfig.tableOfContents.minHeadingLevel;
+  const maxHeadingLevel =
+    maxHeadingLevelOption ?? themeConfig.tableOfContents.maxHeadingLevel;
+  const tocTree = useFilteredAndTreeifiedTOC({
+    toc,
+    minHeadingLevel,
+    maxHeadingLevel,
+  });
+  const tocHighlightConfig = useMemo(() => {
+    if (linkClassName && linkActiveClassName) {
+      return {
+        linkClassName,
+        linkActiveClassName,
+        minHeadingLevel,
+        maxHeadingLevel,
+      };
+    }
+    return undefined;
+  }, [linkClassName, linkActiveClassName, minHeadingLevel, maxHeadingLevel]);
+  useTOCHighlight(tocHighlightConfig);
+  return (
+    <TOCItemTree
+      toc={tocTree}
+      className={className}
+      linkClassName={linkClassName}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export default function TabItem({ children, hidden, className }) {
+  return (
+    <div
+      role="tabpanel"
+      className={clsx(styles.tabItemContent, className)}
+      {...{ hidden }}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+.tabItem > *:last-child {
+  margin-bottom: 0;
+}
+
+.tabItemContent {
+  padding: 0.25rem 1rem;
+  border-radius: 0.5rem;
+  border: 0.25px solid var(--ifm-color-primary-lightest);
+  background-color: var(--ifm-background-color);
+}

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

@@ -0,0 +1,189 @@
+// src/components/theme/Tabs/index.js
+import React, { cloneElement, useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import {
+  useScrollPositionBlocker,
+  useTabs,
+} from '@docusaurus/theme-common/internal';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import styles from './styles.module.css';
+
+function TabList({
+  className,
+  block,
+  selectedValue,
+  selectValue,
+  tabValues,
+  queryString,
+}) {
+  const tabListRef = useRef(null);
+  const tabRefs = [];
+  const { blockElementScrollPositionUntilNextRender } =
+    useScrollPositionBlocker();
+  const isInitialLoad = useRef(true);
+
+  // Handle initial tab selection from URL and scroll to make tabs visible
+  useEffect(() => {
+    if (window.location.search && queryString && isInitialLoad.current) {
+      const params = new URLSearchParams(window.location.search);
+      const parameterName =
+        typeof queryString === 'string' ? queryString : 'tabs';
+      const queryValue = params.get(parameterName);
+
+      if (queryValue && queryValue !== selectedValue) {
+        selectValue(queryValue);
+
+        requestAnimationFrame(() => {
+          if (tabListRef.current) {
+            const headerOffset =
+              document.querySelector('header')?.offsetHeight || 0;
+            const tabListPosition =
+              tabListRef.current.getBoundingClientRect().top + window.scrollY;
+
+            window.scrollTo({
+              top: tabListPosition - headerOffset - 20,
+              behavior: 'instant',
+            });
+          }
+        });
+
+        isInitialLoad.current = false;
+      }
+    }
+  }, [queryString, selectedValue, selectValue, tabValues]);
+
+  // Handle click events on anchor links
+  useEffect(() => {
+    const handleClick = (event) => {
+      const anchor = event.target.closest('a[href^="#"]');
+      if (anchor) {
+        // When clicking an anchor link, remove query parameters
+        const newUrl = `${window.location.pathname}${anchor.hash}`;
+        window.history.pushState({}, '', newUrl);
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  const handleTabChange = (event) => {
+    const newTab = event.currentTarget;
+    const newTabIndex = tabRefs.indexOf(newTab);
+    const newTabValue = tabValues[newTabIndex].value;
+
+    if (newTabValue !== selectedValue) {
+      blockElementScrollPositionUntilNextRender(newTab);
+      selectValue(newTabValue);
+
+      // Always update URL with the tab query parameter
+      const parameterName =
+        typeof queryString === 'string' ? queryString : 'tabs';
+      const newUrl = `${window.location.pathname}?${parameterName}=${newTabValue}${window.location.hash}`;
+      window.history.pushState({}, '', newUrl);
+    }
+  };
+
+  const handleKeydown = (event) => {
+    let focusElement = null;
+    switch (event.key) {
+      case 'Enter': {
+        handleTabChange(event);
+        break;
+      }
+      case 'ArrowRight': {
+        const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
+        focusElement = tabRefs[nextTab] ?? tabRefs[0];
+        break;
+      }
+      case 'ArrowLeft': {
+        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
+        focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1];
+        break;
+      }
+      default:
+        break;
+    }
+    focusElement?.focus();
+  };
+
+  return (
+    <ul
+      ref={tabListRef}
+      role="tablist"
+      aria-orientation="horizontal"
+      className={clsx(
+        'tabs',
+        {
+          'tabs--block': block,
+        },
+        className,
+        styles.roundedTabList
+      )}
+    >
+      {tabValues.map(({ value, label, icon: Icon, attributes }) => (
+        <li
+          role="tab"
+          tabIndex={selectedValue === value ? 0 : -1}
+          aria-selected={selectedValue === value}
+          key={value}
+          ref={(tabControl) => tabRefs.push(tabControl)}
+          onKeyDown={handleKeydown}
+          onClick={handleTabChange}
+          {...attributes}
+          className={clsx('tabs__item', styles.tabItem, attributes?.className, {
+            'tabs__item--active': selectedValue === value,
+            [styles.activeTabItem]: selectedValue === value,
+          })}
+        >
+          {Icon && <Icon style={{ marginRight: '8px' }} />}
+          {label ?? value}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function TabContent({ lazy, children, selectedValue }) {
+  const childTabs = (Array.isArray(children) ? children : [children]).filter(
+    Boolean
+  );
+  if (lazy) {
+    const selectedTabItem = childTabs.find(
+      (tabItem) => tabItem.props.value === selectedValue
+    );
+    if (!selectedTabItem) {
+      return null;
+    }
+    return cloneElement(selectedTabItem, { className: 'margin-top--sm' });
+  }
+  return (
+    <div>
+      {childTabs.map((tabItem, i) =>
+        cloneElement(tabItem, {
+          key: i,
+          hidden: tabItem.props.value !== selectedValue,
+        })
+      )}
+    </div>
+  );
+}
+
+function TabsComponent(props) {
+  const tabs = useTabs(props);
+  return (
+    <div
+      className={clsx('tabs-container', styles.tabList)}
+      id={props.queryString}
+    >
+      <TabList {...props} {...tabs} />
+      <TabContent {...props} {...tabs} />
+    </div>
+  );
+}
+
+export default function Tabs(props) {
+  const isBrowser = useIsBrowser();
+
+  return <TabsComponent key={String(isBrowser)} {...props} />;
+}

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

@@ -0,0 +1,74 @@
+/* styles.module.css */
+
+.tabs {
+  padding: 0px 0;
+}
+
+.tabList {
+  margin-bottom: 0;
+}
+
+.tabList ul {
+  margin-bottom: 0px;
+}
+
+.tabList li {
+  margin-bottom: 0px;
+}
+
+.tabList p {
+  margin: 0.75em 0;
+}
+
+.tabList h4 {
+  margin-top: 1.25em;
+}
+
+.tabItem {
+  margin-top: 0rem !important;
+  font-weight: 600;
+  font-size: 17px;
+  padding: 0.25rem 0.75rem 0.2rem 0.75rem;
+  border-radius: 9999px; /* Fully rounded corners */
+  border: none;
+  transition:
+    background-color 0.05s ease,
+    color 0.05s ease,
+    box-shadow 0.05s ease;
+  cursor: pointer;
+  background-color: var(--ifm-background-color);
+}
+
+.tabItem:hover {
+  background-color: var(--ifm-color-primary-lightest);
+  color: #333333;
+}
+
+.roundedTabList {
+  display: flex;
+  gap: 0.45rem;
+  flex-wrap: wrap; /* Allow tabs to wrap to the next line */
+}
+
+/* Media query to reduce the gap when tabs stack on smaller screens */
+@media (max-width: 768px) {
+  .roundedTabList {
+    gap: 0.35rem; /* Reduce the gap when stacked on smaller screens */
+  }
+}
+
+.activeTabItem {
+  background-color: var(--ifm-color-primary-darker);
+  color: white;
+  /* Prevent hover effect on active tab */
+  pointer-events: none;
+  transition: none;
+}
+
+[data-theme='dark'] .activeTabItem {
+  color: var(--neutral-slate-900-value, #0f172a);
+}
+
+.tabItemContent > *:last-child {
+  margin-bottom: 0;
+}

package/template/static/img/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect width="32" height="32" rx="6" fill="#7c3aed"/>
+  <text x="16" y="22" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="bold" fill="white">D</text>
+</svg>

package/template/static/img/oops-404.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.1"/>
+      <stop offset="100%" style="stop-color:#2dd4bf;stop-opacity:0.1"/>
+    </linearGradient>
+  </defs>
+  <rect width="400" height="300" fill="url(#grad)" rx="20"/>
+  <text x="200" y="140" text-anchor="middle" font-family="system-ui" font-size="72" font-weight="700" fill="#7c3aed" opacity="0.3">404</text>
+  <text x="200" y="180" text-anchor="middle" font-family="system-ui" font-size="16" fill="#64748b">Page not found</text>
+</svg>

package/template/static/searchIndex.json

@@ -0,0 +1 @@
+[]