create-trellis-docs 1.0.0

package/template/src/theme/BlogSidebar/Desktop/styles.module.css

@@ -0,0 +1,60 @@
+.sidebar {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + -1rem);
+  width: 100%;
+  max-width: 100%;
+}
+
+.sidebarItemTitle {
+  font-size: var(--ifm-h3-font-size);
+  font-weight: var(--ifm-font-weight-bold);
+}
+
+.sidebarItemList {
+  font-size: 0.9rem;
+}
+
+.sidebarItem {
+  margin-top: 0.7rem;
+}
+
+.sidebarItemLink {
+  color: var(--ifm-font-color-base);
+  display: block;
+}
+
+.sidebarItemLink:hover {
+  text-decoration: none;
+}
+
+.sidebarItemLinkActive {
+  color: var(--ifm-color-primary) !important;
+}
+
+@media (max-width: 996px) {
+  .sidebar {
+    display: none;
+  }
+}
+
+@media (max-width: 1200px) {
+  .sidebar {
+    display: none;
+  }
+}
+
+.yearGroupHeading {
+  margin-top: 1.6rem;
+  margin-bottom: 0.4rem;
+  font-size: 1.1rem;
+  font-weight: var(--ifm-font-weight-bold);
+}
+
+
+.sidebarContainer {
+  overflow: hidden;
+  min-width: 0;
+}

package/template/src/theme/BlogSidebar/Mobile/index.js

@@ -0,0 +1,38 @@
+import React, {memo} from 'react';
+import {
+  useVisibleBlogSidebarItems,
+  BlogSidebarItemList,
+} from '@docusaurus/plugin-content-blog/client';
+import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
+import BlogSidebarContent from '@theme/BlogSidebar/Content';
+import styles from './styles.module.css';
+const ListComponent = ({items}) => {
+  return (
+    <BlogSidebarItemList
+      items={items}
+      ulClassName="menu__list"
+      liClassName="menu__list-item"
+      linkClassName="menu__link"
+      linkActiveClassName="menu__link--active"
+    />
+  );
+};
+function BlogSidebarMobileSecondaryMenu({sidebar}) {
+  const items = useVisibleBlogSidebarItems(sidebar.items);
+  return (
+    <BlogSidebarContent
+      items={items}
+      ListComponent={ListComponent}
+      yearGroupHeadingClassName={styles.yearGroupHeading}
+    />
+  );
+}
+function BlogSidebarMobile(props) {
+  return (
+    <NavbarSecondaryMenuFiller
+      component={BlogSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}
+export default memo(BlogSidebarMobile);

package/template/src/theme/BlogSidebar/Mobile/styles.module.css

@@ -0,0 +1,3 @@
+.yearGroupHeading {
+  margin: 1rem 0.75rem 0.5rem;
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import {useWindowSize} from '@docusaurus/theme-common';
+import BlogSidebarDesktop from '@theme/BlogSidebar/Desktop';
+import BlogSidebarMobile from '@theme/BlogSidebar/Mobile';
+export default function BlogSidebar({sidebar}) {
+  const windowSize = useWindowSize();
+  if (!sidebar?.items.length) {
+    return null;
+  }
+  // Mobile sidebar doesn't need to be server-rendered
+  if (windowSize === 'mobile') {
+    return <BlogSidebarMobile sidebar={sidebar} />;
+  }
+  return <BlogSidebarDesktop sidebar={sidebar} />;
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Details as DetailsGeneric } from '@docusaurus/theme-common/Details';
+import styles from './styles.module.css';
+
+const InfimaClasses = 'alert alert--info';
+
+export default function Details({ ...props }) {
+  return (
+    <div className={styles.padding}>
+    <DetailsGeneric
+      {...props}
+      className={clsx(
+        InfimaClasses,
+        styles.details,
+        styles.detailsContainer,
+        styles.summaryHeading,
+        props.className
+      )}
+    />
+    </div>
+  );
+}

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

@@ -0,0 +1,52 @@
+/* styles.module.css */
+
+/* Define variables for light mode */
+:root {
+  --details-bg-color: #F6F8FA;
+  --details-border-color: #3856A616;
+  --details-text-color: #333333;
+  --details-link-color: var(--brand-primary-600-value);
+  --details-padding: 16px;
+}
+
+/* Define variables for dark mode */
+[data-theme='dark'] {
+  --details-bg-color: #2E2E2E;
+  --details-border-color: #565656;
+  --details-text-color: #DDDDDD;
+  --details-link-color: var(--accent-teal-400-value);
+  --details-padding: 16px;
+}
+
+.padding {
+  padding: 0 0;
+}
+
+/* details */
+.details {
+  --docusaurus-details-decoration-color: var(--details-link-color);
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  margin: 0 0 var(--ifm-spacing-vertical);
+  border: 0.01px solid var(--details-border-color);
+  color: var(--details-text-color);
+}
+
+.detailsContainer {
+  background-color: var(--details-bg-color);
+
+
+}
+
+.detailsContainer a {
+  color: var(--details-link-color);
+  text-decoration: none;
+}
+
+/* summary */
+.summaryHeading {
+  font-size: 17px;
+  font-weight: 500;
+  margin-top: 1.5rem;
+  vertical-align: bottom;
+}
+

package/template/src/theme/DocBreadcrumbs/Items/Home/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import {translate} from '@docusaurus/Translate';
+
+export default function HomeBreadcrumbItem() {
+  const homeHref = useBaseUrl('/');
+  return (
+    <li className="breadcrumbs__item">
+      <Link
+        aria-label={translate({
+          id: 'theme.docs.breadcrumbs.home',
+          message: 'Home page',
+          description: 'The ARIA label for the home page in the breadcrumbs',
+        })}
+        className="breadcrumbs__link"
+        href={homeHref}>Home
+
+      </Link>
+    </li>
+  );
+}

package/template/src/theme/DocBreadcrumbs/Items/Home/styles.module.css

@@ -0,0 +1,7 @@
+.breadcrumbHomeIcon {
+  position: relative;
+  top: 0px;
+  vertical-align: top;
+  height: 1.1rem;
+  width: 1.1rem;
+}

package/template/src/theme/DocBreadcrumbs/StructuredData/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Head from '@docusaurus/Head';
+import {useBreadcrumbsStructuredData} from '@docusaurus/plugin-content-docs/client';
+export default function DocBreadcrumbsStructuredData(props) {
+  const structuredData = useBreadcrumbsStructuredData({
+    breadcrumbs: props.breadcrumbs,
+  });
+  return (
+    <Head>
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+    </Head>
+  );
+}

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useSidebarBreadcrumbs} from '@docusaurus/plugin-content-docs/client';
+import {useHomePageRoute} from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import {translate} from '@docusaurus/Translate';
+import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
+import DocBreadcrumbsStructuredData from '@theme/DocBreadcrumbs/StructuredData';
+import styles from './styles.module.css';
+// TODO move to design system folder
+function BreadcrumbsItemLink({children, href, isLast}) {
+  const className = 'breadcrumbs__link';
+  if (isLast) {
+    return <span className={className}>{children}</span>;
+  }
+  return href ? (
+    <Link className={className} href={href}>
+      <span>{children}</span>
+    </Link>
+  ) : (
+    <span className={className}>{children}</span>
+  );
+}
+// TODO move to design system folder
+function BreadcrumbsItem({children, active}) {
+  return (
+    <li
+      className={clsx('breadcrumbs__item', {
+        'breadcrumbs__item--active': active,
+      })}>
+      {children}
+    </li>
+  );
+}
+export default function DocBreadcrumbs() {
+  const breadcrumbs = useSidebarBreadcrumbs();
+  const homePageRoute = useHomePageRoute();
+  if (!breadcrumbs) {
+    return null;
+  }
+  return (
+    <>
+      <DocBreadcrumbsStructuredData breadcrumbs={breadcrumbs} />
+      <nav
+        className={clsx(
+          ThemeClassNames.docs.docBreadcrumbs,
+          styles.breadcrumbsContainer,
+        )}
+        aria-label={translate({
+          id: 'theme.docs.breadcrumbs.navAriaLabel',
+          message: 'Breadcrumbs',
+          description: 'The ARIA label for the breadcrumbs',
+        })}>
+        <ul className="breadcrumbs">
+          {homePageRoute && <HomeBreadcrumbItem />}
+          {breadcrumbs.map((item, idx) => {
+            const isLast = idx === breadcrumbs.length - 1;
+            const href =
+              item.type === 'category' && item.linkUnlisted
+                ? undefined
+                : item.href;
+            return (
+              <BreadcrumbsItem key={idx} active={isLast}>
+                <BreadcrumbsItemLink href={href} isLast={isLast}>
+                  {item.label}
+                </BreadcrumbsItemLink>
+              </BreadcrumbsItem>
+            );
+          })}
+        </ul>
+      </nav>
+    </>
+  );
+}

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

@@ -0,0 +1,5 @@
+.breadcrumbsContainer {
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.75rem;
+  margin-top: -25rem;
+}

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {
+  useDocById,
+  findFirstSidebarItemLink,
+} from '@docusaurus/plugin-content-docs/client';
+import {usePluralForm} from '@docusaurus/theme-common';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import {translate} from '@docusaurus/Translate';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+function useCategoryItemsPlural() {
+  const {selectMessage} = usePluralForm();
+  return (count) =>
+    selectMessage(
+      count,
+      translate(
+        {
+          message: '1 item|{count} items',
+          id: 'theme.docs.DocCard.categoryDescription.plurals',
+          description:
+            'The default description for a category card in the generated index about how many items this category includes',
+        },
+        {count},
+      ),
+    );
+}
+function CardContainer({className, href, children}) {
+  return (
+    <Link
+      href={href}
+      className={clsx('card', styles.cardContainer)}>
+      {children}
+    </Link>
+  );
+}
+function CardLayout({className, href, title, description}) {
+  return (
+    <CardContainer href={href}>
+      <h3 className={clsx(styles.cardTitle)} title={title}>
+      {title}
+      </h3>
+      {description && (
+        <p
+          className={clsx(styles.cardDescription)}
+          title={description}>
+          {description}
+        </p>
+      )}
+    </CardContainer>
+  );
+}
+function CardCategory({item}) {
+  const href = findFirstSidebarItemLink(item);
+  const categoryItemsPlural = useCategoryItemsPlural();
+  // Unexpected: categories that don't have a link have been filtered upfront
+  if (!href) {
+    return null;
+  }
+  return (
+    <CardLayout
+      className={item.className}
+      href={href}
+      icon="🗃️"
+      title={item.label}
+      description={item.description ?? categoryItemsPlural(item.items.length)}
+    />
+  );
+}
+function CardLink({item}) {
+  const icon = isInternalUrl(item.href) ? '📄️' : '🔗';
+  const doc = useDocById(item.docId ?? undefined);
+  return (
+    <CardLayout
+      className={item.className}
+      href={item.href}
+      icon={icon}
+      title={item.label}
+      description={item.description ?? doc?.description}
+    />
+  );
+}
+export default function DocCard({item}) {
+  switch (item.type) {
+    case 'link':
+      return <CardLink item={item} />;
+    case 'category':
+      return <CardCategory item={item} />;
+    default:
+      throw new Error(`unknown item type ${JSON.stringify(item)}`);
+  }
+}

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

@@ -0,0 +1,53 @@
+.cardContainer {
+  --ifm-link-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
+  --ifm-link-hover-decoration: none;
+
+  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
+  border: 0px solid var(--ifm-color-emphasis-200);
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
+
+  padding: 0 20px 20px 20px;
+}
+
+.cardContainer p {
+  font-size: 0.88rem;
+  font-stretch: semi-condensed;
+}
+
+.cardContainer h3 {
+  font-size: 22px;
+  margin: 0;
+}
+
+[data-theme='dark'] .cardContainer {
+  background-color: var(--ifm-background-color);
+}
+
+.cardContainer:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
+}
+
+.cardContainer *:last-child {
+  margin-bottom: 0;
+}
+
+.cardTitle {
+  color: var(--ifm-color-primary);
+  padding: 20px 0 0 0;
+  font-size: 1.2rem;
+  margin-bottom: 0px;
+}
+
+
+.cardDescription {
+  font-size: 0.75rem;
+  color: #333;
+  font-stretch: semi-condensed;
+}
+
+[data-theme='dark'] .cardDescription {
+  color: white;
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+import {
+  useCurrentSidebarCategory,
+  filterDocCardListItems,
+} from '@docusaurus/theme-common';
+import DocCard from '@theme/DocCard';
+function DocCardListForCurrentSidebarCategory({className}) {
+  const category = useCurrentSidebarCategory();
+  return <DocCardList items={category.items} className={className} />;
+}
+export default function DocCardList(props) {
+  const {items, className} = props;
+  if (!items) {
+    return <DocCardListForCurrentSidebarCategory {...props} />;
+  }
+  const filteredItems = filterDocCardListItems(items);
+  return (
+    <section className={clsx('row', className)}>
+      {filteredItems.map((item, index) => (
+        <article key={index} className="col col--6 margin-bottom--md margin-top--sm">
+          <DocCard item={item} />
+        </article>
+      ))}
+    </section>
+  );
+}

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

@@ -0,0 +1,7 @@
+.docCardListItem {
+  margin-bottom: 2rem;
+}
+
+.docCardListItem > * {
+  height: 100%;
+}

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Heading from '@theme/Heading';
+import MDXContent from '@theme/MDXContent';
+import Translate from '@docusaurus/Translate';
+import LastUpdated from '@theme/LastUpdated';
+import IconEdit from '@theme/Icon/Edit';
+import styles from './styles.module.css';
+
+function useSyntheticTitle() {
+  const { metadata, frontMatter, contentTitle } = useDoc();
+  const shouldRender = !frontMatter.hide_title && typeof contentTitle === 'undefined';
+  return shouldRender ? metadata.title : null;
+}
+
+// Component for the "Edit This Page" link
+function EditThisPage({ editUrl }) {
+  return (
+    <a
+      href={editUrl}
+      target="_blank"
+      rel="noreferrer noopener"
+      className={ThemeClassNames.common.editThisPage}
+    >
+      <IconEdit />
+      <Translate
+        id="theme.common.editThisPage"
+        description="The link label to edit the current page"
+      >
+        Edit this page
+      </Translate>
+    </a>
+  );
+}
+
+// Component for the "Suggest an Edit" link
+function SuggestEdit() {
+  const { metadata } = useDoc();
+  const { siteConfig } = useDocusaurusContext();
+  const repoUrl = siteConfig.customFields?.repoUrl || '';
+  if (!repoUrl) return null;
+  const issueURL = `${repoUrl}/issues/new?title=${encodeURIComponent(metadata.title)}&body=${encodeURIComponent(`Issue with: ${metadata.permalink}`)}`;
+  return (
+    <a
+      href={issueURL}
+      target="_blank"
+      rel="noreferrer noopener"
+      className={ThemeClassNames.common.editThisPage}
+    >
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" style={{ marginRight: 6 }}>
+        <path d="M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .5.4 1 1 1h6c.6 0 1-.5 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7z"/>
+      </svg>
+      <Translate
+        id="theme.common.openDocIssue"
+        description="The link label to open a doc issue on the current page"
+      >
+        Suggest an Edit
+      </Translate>
+    </a>
+  );
+}
+
+// Component to display the last updated date and edit links
+function LastUpdatedRow({ lastUpdatedAt, formattedLastUpdatedAt, editUrl }) {
+  return (
+    <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, styles.row)}>
+      <div className={clsx(styles.lastUpdated)}>
+        {lastUpdatedAt && (
+          <LastUpdated
+            lastUpdatedAt={lastUpdatedAt}
+            formattedLastUpdatedAt={formattedLastUpdatedAt}
+          />
+        )}
+      </div>
+      <div className={clsx(styles.editThisPage)}>
+        <SuggestEdit />
+        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+        {editUrl && <EditThisPage editUrl={editUrl} />}
+      </div>
+    </div>
+  );
+}
+
+// Main header component to display the last updated date and edit links
+function DocItemHeader() {
+  const { metadata } = useDoc();
+  const { lastUpdatedAt, formattedLastUpdatedAt, editUrl } = metadata;
+  const canDisplayLastUpdatedRow = !!lastUpdatedAt || !!editUrl;
+
+  if (!canDisplayLastUpdatedRow) {
+    return null;
+  }
+
+  return (
+    <div className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
+      <LastUpdatedRow
+        lastUpdatedAt={lastUpdatedAt}
+        formattedLastUpdatedAt={formattedLastUpdatedAt}
+        editUrl={editUrl}
+      />
+    </div>
+  );
+}
+
+export default function DocItemContent({children}) {
+  const syntheticTitle = useSyntheticTitle();
+  return (
+    <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
+      {syntheticTitle && (
+        <header>
+          <Heading as="h1">{syntheticTitle}</Heading>
+          <DocItemHeader />
+        </header>
+      )}
+      <MDXContent>{children}</MDXContent>
+    </div>
+  );
+}