create-trellis-docs 1.0.0

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+export default function FooterLinkItem({item}) {
+  const {to, href, label, prependBaseUrlToHref, className, ...props} = item;
+  const toUrl = useBaseUrl(to);
+  const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
+  return (
+    <Link
+      className={clsx('footer__link-item', className)}
+      {...(href
+        ? {
+            href: prependBaseUrlToHref ? normalizedHref : href,
+          }
+        : {
+            to: toUrl,
+          })}
+      {...props}>
+      {label}
+      {href && !isInternalUrl(href) && <IconExternalLink />}
+    </Link>
+  );
+}

package/template/src/theme/Footer/Links/MultiColumn/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import LinkItem from '@theme/Footer/LinkItem';
+function ColumnLinkItem({item}) {
+  return item.html ? (
+    <li
+      className={clsx('footer__item', item.className)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: item.html}}
+    />
+  ) : (
+    <li key={item.href ?? item.to} className="footer__item">
+      <LinkItem item={item} />
+    </li>
+  );
+}
+function Column({column}) {
+  return (
+    <div
+      className={clsx(
+        ThemeClassNames.layout.footer.column,
+        'col footer__col',
+        column.className,
+      )}>
+      <div className="footer__title">{column.title}</div>
+      <ul className="footer__items clean-list">
+        {column.items.map((item, i) => (
+          <ColumnLinkItem key={i} item={item} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+export default function FooterLinksMultiColumn({columns}) {
+  return (
+    <div className="row footer__links">
+      {columns.map((column, i) => (
+        <Column key={i} column={column} />
+      ))}
+    </div>
+  );
+}

package/template/src/theme/Footer/Links/Simple/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'clsx';
+import LinkItem from '@theme/Footer/LinkItem';
+function Separator() {
+  return <span className="footer__link-separator">·</span>;
+}
+function SimpleLinkItem({item}) {
+  return item.html ? (
+    <span
+      className={clsx('footer__link-item', item.className)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: item.html}}
+    />
+  ) : (
+    <LinkItem item={item} />
+  );
+}
+export default function FooterLinksSimple({links}) {
+  return (
+    <div className="footer__links text--center">
+      <div className="footer__links">
+        {links.map((item, i) => (
+          <React.Fragment key={i}>
+            <SimpleLinkItem item={item} />
+            {links.length !== i + 1 && <Separator />}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
+import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
+import FooterLinksSimple from '@theme/Footer/Links/Simple';
+export default function FooterLinks({links}) {
+  return isMultiColumnFooterLinks(links) ? (
+    <FooterLinksMultiColumn columns={links} />
+  ) : (
+    <FooterLinksSimple links={links} />
+  );
+}

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+import styles from './styles.module.css';
+function LogoImage({logo}) {
+  const {withBaseUrl} = useBaseUrlUtils();
+  const sources = {
+    light: withBaseUrl(logo.src),
+    dark: withBaseUrl(logo.srcDark ?? logo.src),
+  };
+  return (
+    <ThemedImage
+      className={clsx('footer__logo', logo.className)}
+      alt={logo.alt}
+      sources={sources}
+      width={logo.width}
+      height={logo.height}
+      style={logo.style}
+    />
+  );
+}
+export default function FooterLogo({logo}) {
+  return logo.href ? (
+    <Link
+      href={logo.href}
+      className={styles.footerLogoLink}
+      target={logo.target}>
+      <LogoImage logo={logo} />
+    </Link>
+  ) : (
+    <LogoImage logo={logo} />
+  );
+}

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

@@ -0,0 +1,9 @@
+.footerLogoLink {
+  opacity: 0.5;
+  transition: opacity var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.footerLogoLink:hover {
+  opacity: 1;
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import FooterLinks from '@theme/Footer/Links';
+import FooterLogo from '@theme/Footer/Logo';
+import FooterCopyright from '@theme/Footer/Copyright';
+import FooterLayout from '@theme/Footer/Layout';
+function Footer() {
+  const {footer} = useThemeConfig();
+  if (!footer) {
+    return null;
+  }
+  const {copyright, links, logo, style} = footer;
+  return (
+    <FooterLayout
+      style={style}
+      links={links && links.length > 0 && <FooterLinks links={links} />}
+      logo={logo && <FooterLogo logo={logo} />}
+      copyright={copyright && <FooterCopyright copyright={copyright} />}
+    />
+  );
+}
+export default React.memo(Footer);

package/template/src/theme/MDXComponents/Heading.js

@@ -0,0 +1,120 @@
+// src/theme/MDXComponents/Heading.js
+import React, { useState, useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+function LinkIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default function MDXHeading(props) {
+  const [showMessage, setShowMessage] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const buttonRef = useRef(null);
+  
+  const canCopy = typeof window !== 'undefined' &&
+    window.navigator.clipboard &&
+    typeof window.navigator.clipboard.writeText === 'function';
+
+  const copyToClipboard = async () => {
+    if (canCopy && props.id) {
+      try {
+        const url = new URL(window.location.href);
+        url.hash = `#${props.id}`;
+        await window.navigator.clipboard.writeText(url.toString());
+        setShowMessage(true);
+        
+        // Force blur using ref
+        if (buttonRef.current) {
+          buttonRef.current.blur();
+        }
+        
+        // Additional force blur attempts
+        if (document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur();
+        }
+      } catch (error) {
+        console.error('Failed to copy link:', error);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (showMessage) {
+      const timer = setTimeout(() => {
+        setShowMessage(false);
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [showMessage]);
+
+  // Determine if button should be visible
+  const showButton = isHovered && !showMessage;
+
+  // Wrap the heading content with copy functionality
+  const headingContent = (
+    <span 
+      className={styles.headingContent}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <span className={styles.headingText}>{props.children}</span>
+      {props.id && canCopy && (
+        <span 
+          className={clsx(
+            styles.copyButtonWrapper,
+            (showButton || showMessage) && styles.visible
+          )}
+        >
+          <button
+            ref={buttonRef}
+            onClick={copyToClipboard}
+            className={styles.copyButton}
+            title="Copy link to this section"
+            type="button"
+            aria-label="Copy link to this section"
+            style={{ visibility: showButton ? 'visible' : 'hidden' }}
+          >
+            <LinkIcon />
+          </button>
+          {showMessage && (
+            <span className={styles.copyMessage} role="status" aria-live="polite">
+              Link copied!
+            </span>
+          )}
+        </span>
+      )}
+    </span>
+  );
+
+  // Use the default Docusaurus Heading component with our custom content
+  return (
+    <Heading {...props} className={clsx(styles.headingWithCopy, props.className)}>
+      {headingContent}
+    </Heading>
+  );
+}

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

@@ -0,0 +1,17 @@
+// src/theme/MDXComponents/index.js
+import React from 'react';
+// Import MDX components from Docusaurus
+import MDXComponents from '@theme-original/MDXComponents';
+import MDXHeading from '@theme/MDXComponents/Heading';
+
+export default {
+  // Inherit all existing MDX components
+  ...MDXComponents,
+  // Override heading components with our custom implementation
+  h1: (props) => <MDXHeading as="h1" {...props} />,
+  h2: (props) => <MDXHeading as="h2" {...props} />,
+  h3: (props) => <MDXHeading as="h3" {...props} />,
+  h4: (props) => <MDXHeading as="h4" {...props} />,
+  h5: (props) => <MDXHeading as="h5" {...props} />,
+  h6: (props) => <MDXHeading as="h6" {...props} />,
+};

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

@@ -0,0 +1,110 @@
+/* src/theme/MDXComponents/styles.module.css */
+
+.headingWithCopy {
+    display: block;
+    position: relative;
+  }
+  
+  .headingContent {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    position: relative;
+  }
+  
+  .headingText {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .copyButtonWrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin-left: 8px;
+    flex-shrink: 0;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+  
+  /* Show wrapper when it has the visible class */
+  .copyButtonWrapper.visible {
+    opacity: 1;
+  }
+  
+  .copyButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    color: var(--ifm-color-emphasis-600, var(--ifm-color-gray-500));
+    transition: color 0.2s, background-color 0.2s;
+    border-radius: 4px;
+  }
+  
+  .copyButton:hover {
+    color: var(--ifm-color-primary);
+    background-color: var(--ifm-hover-overlay);
+    border-radius: 16px;
+  }
+  
+  /* Remove focus outline since we're controlling visibility manually */
+  .copyButton:focus {
+    outline: none;
+  }
+  
+  .copyButton:focus-visible {
+    outline: 2px solid var(--ifm-color-primary);
+    outline-offset: 2px;
+  }
+  
+  .copyMessage {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    background-color: var(--ifm-color-primary);
+    color: var(--ifm-color-primary-contrast-background, white);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 1;
+    transition: opacity 0.2s;
+    z-index: 10;
+    pointer-events: none;
+    box-shadow: var(--ifm-global-shadow-lw);
+    animation: fadeIn 0.2s ease-out;
+  }
+  
+  /* Add animation for the copy message */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  /* Responsive adjustments - always show on mobile */
+  @media (max-width: 996px) {
+    .copyButtonWrapper {
+      opacity: 1;
+    }
+    
+    .copyButton {
+      visibility: visible !important;
+    }
+  }
+
+  /* Hide the default hash-link since we're replacing it with our copy button */
+.headingWithCopy :global(.hash-link) {
+    display: none !important;
+  }

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import {MDXProvider} from '@mdx-js/react';
+import MDXComponents from '@theme/MDXComponents';
+export default function MDXContent({children}) {
+  return <MDXProvider components={MDXComponents}>{children}</MDXProvider>;
+}

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

@@ -0,0 +1,110 @@
+import React, {useState, useRef, useEffect} from 'react';
+import clsx from 'clsx';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import NavbarItem from '@theme/NavbarItem';
+
+export default function DropdownNavbarItemDesktop({
+  items,
+  position,
+  className,
+  onClick,
+  ...props
+}) {
+  const dropdownRef = useRef(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const timeoutRef = useRef(null);
+  
+
+  // Clear any pending timeout when component unmounts
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (!dropdownRef.current || dropdownRef.current.contains(event.target)) {
+        return;
+      }
+      setShowDropdown(false);
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    document.addEventListener('focusin', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener('focusin', handleClickOutside);
+    };
+  }, [dropdownRef]);
+
+  const handleMouseEnter = () => {
+    // Clear any pending hide timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setShowDropdown(true);
+  };
+
+  const handleMouseLeave = () => {
+    // Add a small delay before hiding to prevent flickering
+    // when moving between dropdown trigger and menu
+    timeoutRef.current = setTimeout(() => {
+      setShowDropdown(false);
+    }, 150);
+  };
+
+  const handleToggleClick = (e) => {
+    e.preventDefault();
+    setShowDropdown(!showDropdown);
+  };
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={clsx('navbar__item', 'dropdown', {
+        'dropdown--right': position === 'right',
+        'dropdown--show': showDropdown,
+      })}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}>
+      <NavbarNavLink
+        aria-haspopup="true"
+        aria-expanded={showDropdown}
+        role="button"
+        href={props.to ? undefined : '#'}
+        className={clsx('navbar__link', className)}
+        {...props}
+        onClick={props.to ? undefined : handleToggleClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            setShowDropdown(!showDropdown);
+          }
+        }}>
+        {props.children ?? props.label}
+      </NavbarNavLink>
+      <ul className="dropdown__menu custom-dropdown__menu">
+        {items.map((childItemProps, i) => (
+          <NavbarItem
+            isDropdownItem
+            activeClassName="dropdown__link--active"
+            className="custom-dropdown__item"
+            {...childItemProps}
+            key={i}
+            onClick={() => {
+              // Close dropdown after selecting an item
+              setShowDropdown(false);
+            }}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,136 @@
+import React, {useEffect} from 'react';
+import clsx from 'clsx';
+import {
+  isRegexpStringMatch,
+  useCollapsible,
+  Collapsible,
+} from '@docusaurus/theme-common';
+import {isSamePath, useLocalPathname} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import NavbarItem from '@theme/NavbarItem';
+import styles from './styles.module.css';
+function isItemActive(item, localPathname) {
+  if (isSamePath(item.to, localPathname)) {
+    return true;
+  }
+  if (isRegexpStringMatch(item.activeBaseRegex, localPathname)) {
+    return true;
+  }
+  if (item.activeBasePath && localPathname.startsWith(item.activeBasePath)) {
+    return true;
+  }
+  return false;
+}
+function containsActiveItems(items, localPathname) {
+  return items.some((item) => isItemActive(item, localPathname));
+}
+function CollapseButton({collapsed, onClick}) {
+  return (
+    <button
+      aria-label={
+        collapsed
+          ? translate({
+              id: 'theme.navbar.mobileDropdown.collapseButton.expandAriaLabel',
+              message: 'Expand the dropdown',
+              description:
+                'The ARIA label of the button to expand the mobile dropdown navbar item',
+            })
+          : translate({
+              id: 'theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel',
+              message: 'Collapse the dropdown',
+              description:
+                'The ARIA label of the button to collapse the mobile dropdown navbar item',
+            })
+      }
+      aria-expanded={!collapsed}
+      type="button"
+      className="clean-btn menu__caret"
+      onClick={onClick}
+    />
+  );
+}
+function useItemCollapsible({active}) {
+  const {collapsed, toggleCollapsed, setCollapsed} = useCollapsible({
+    initialState: () => !active,
+  });
+  // Expand if any item active after a navigation
+  useEffect(() => {
+    if (active) {
+      setCollapsed(false);
+    }
+  }, [active, setCollapsed]);
+  return {
+    collapsed,
+    toggleCollapsed,
+  };
+}
+export default function DropdownNavbarItemMobile({
+  items,
+  className,
+  position, // Need to destructure position from props so that it doesn't get passed on.
+  onClick,
+  ...props
+}) {
+  const localPathname = useLocalPathname();
+  const isActive = isSamePath(props.to, localPathname);
+  const containsActive = containsActiveItems(items, localPathname);
+  const {collapsed, toggleCollapsed} = useItemCollapsible({
+    active: isActive || containsActive,
+  });
+  // # hash permits to make the <a> tag focusable in case no link target
+  // See https://github.com/facebook/docusaurus/pull/6003
+  // There's probably a better solution though...
+  const href = props.to ? undefined : '#';
+  return (
+    <li
+      className={clsx('menu__list-item', {
+        'menu__list-item--collapsed': collapsed,
+      })}>
+      <div
+        className={clsx('menu__list-item-collapsible', {
+          'menu__list-item-collapsible--active': isActive,
+        })}>
+        <NavbarNavLink
+          role="button"
+          className={clsx(
+            styles.dropdownNavbarItemMobile,
+            'menu__link menu__link--sublist',
+            className,
+          )}
+          href={href}
+          {...props}
+          onClick={(e) => {
+            // Prevent navigation when link is "#"
+            if (href === '#') {
+              e.preventDefault();
+            }
+            // Otherwise we let navigation eventually happen, and/or collapse
+            toggleCollapsed();
+          }}>
+          {props.children ?? props.label}
+        </NavbarNavLink>
+        <CollapseButton
+          collapsed={collapsed}
+          onClick={(e) => {
+            e.preventDefault();
+            toggleCollapsed();
+          }}
+        />
+      </div>
+
+      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
+        {items.map((childItemProps, i) => (
+          <NavbarItem
+            mobile
+            isDropdownItem
+            onClick={onClick}
+            activeClassName="menu__link--active"
+            {...childItemProps}
+            key={i}
+          />
+        ))}
+      </Collapsible>
+    </li>
+  );
+}

package/template/src/theme/NavbarItem/DropdownNavbarItem/Mobile/styles.module.css

@@ -0,0 +1,3 @@
+.dropdownNavbarItemMobile {
+  cursor: pointer;
+}