create-trellis-docs 1.0.0

package/template/packages/redirects-plugin/index.js

@@ -0,0 +1,167 @@
+// packages/redirects-plugin/index.js
+
+const path = require('path');
+const fs = require('fs-extra');
+
+module.exports = function(context, options) {
+  const {
+    siteConfig: { baseUrl, trailingSlash },
+    siteDir,
+    outDir,
+  } = context;
+  
+  // Get redirects from various possible sources
+  let redirects = [];
+  
+  // 1. Check for redirects in options (from docusaurus.config.js)
+  if (options.redirects && Array.isArray(options.redirects)) {
+    redirects = [...redirects, ...options.redirects];
+    console.log(`Loaded ${options.redirects.length} redirects from config`);
+  }
+  
+  // 2. Check for redirects file specified in options
+  if (options.redirectsFile) {
+    const specifiedPath = path.resolve(siteDir, options.redirectsFile);
+    if (fs.existsSync(specifiedPath)) {
+      try {
+        const fileRedirects = JSON.parse(fs.readFileSync(specifiedPath, 'utf8'));
+        if (Array.isArray(fileRedirects)) {
+          redirects = [...redirects, ...fileRedirects];
+          console.log(`Loaded ${fileRedirects.length} redirects from ${options.redirectsFile}`);
+        }
+      } catch (error) {
+        console.error(`Error loading redirects from ${options.redirectsFile}: ${error.message}`);
+      }
+    }
+  }
+  
+  // 3. Auto-detect redirects.json in common locations (if not specified in options)
+  if (!options.redirectsFile) {
+    const possibleLocations = [
+      path.resolve(siteDir, 'redirects.json'),
+      path.resolve(siteDir, 'config/redirects.json'),
+      path.resolve(siteDir, 'src/redirects.json')
+    ];
+    
+    for (const location of possibleLocations) {
+      if (fs.existsSync(location)) {
+        try {
+          const fileRedirects = JSON.parse(fs.readFileSync(location, 'utf8'));
+          if (Array.isArray(fileRedirects)) {
+            redirects = [...redirects, ...fileRedirects];
+            console.log(`Auto-detected and loaded ${fileRedirects.length} redirects from ${path.relative(siteDir, location)}`);
+            break; // Only use the first valid file found
+          }
+        } catch (error) {
+          console.warn(`Found redirects file at ${location} but couldn't parse it: ${error.message}`);
+        }
+      }
+    }
+  }
+  
+  return {
+    name: 'redirects-plugin',
+    
+    async loadContent() {
+      console.log('===== REDIRECTS PLUGIN: LOADING CONTENT =====');
+      console.log(`Found ${redirects.length} redirects to process`);
+      console.log(`Trailing slash setting: ${trailingSlash}`);
+      if (redirects.length > 0) {
+        console.log('First redirect:', JSON.stringify(redirects[0]));
+      }
+      return { redirects };
+    },
+    
+    async postBuild({ content }) {
+      console.log('===== REDIRECTS PLUGIN: POST BUILD =====');
+      const { redirects } = content;
+      
+      if (redirects.length === 0) {
+        console.log('No redirects configured. Skipping redirect generation.');
+        return;
+      }
+      
+      console.log(`Processing ${redirects.length} redirects...`);
+      console.log(`Output directory: ${outDir}`);
+      console.log(`Trailing slash setting: ${trailingSlash}`);
+      
+      // For each redirect, create an HTML file with meta refresh
+      await Promise.all(
+        redirects.map(async (redirect, index) => {
+          // Validate redirect object
+          if (!redirect.from || !redirect.to) {
+            console.warn(`Skipping invalid redirect at index ${index}: missing from or to field`);
+            return;
+          }
+          
+          const { from, to, type = 301 } = redirect;
+          
+          // Separate the path from the hash fragment for 'from'
+          const [fromPath, fromHash] = from.split('#');
+          
+          // Normalize the 'from' path - remove trailing slash for file system
+          const normalizedFrom = fromPath.startsWith('/')
+            ? fromPath.endsWith('/') ? fromPath.slice(0, -1) : fromPath
+            : `/${fromPath.endsWith('/') ? fromPath.slice(0, -1) : fromPath}`;
+          
+          // Create the output path (without hash since that's not a file system concept)
+          const outputPath = path.join(outDir, normalizedFrom.slice(1));
+          
+          try {
+            // Handle the 'to' URL with proper trailing slash handling
+            let toUrl;
+            
+            if (to.startsWith('http')) {
+              // External URL - use as-is
+              toUrl = to;
+            } else {
+              // Internal URL - ensure proper format based on trailingSlash setting
+              let processedTo = to.startsWith('/') ? to : `/${to}`;
+              
+              // Apply trailing slash rules
+              if (trailingSlash === true && !processedTo.endsWith('/') && !processedTo.includes('#') && !processedTo.includes('?')) {
+                processedTo = `${processedTo}/`;
+              } else if (trailingSlash === false && processedTo.endsWith('/')) {
+                processedTo = processedTo.slice(0, -1);
+              }
+              
+              // Apply baseUrl
+              toUrl = baseUrl === '/' ? processedTo : `${baseUrl}${processedTo.slice(1)}`;
+            }
+            
+            // Create the HTML file
+            const htmlContent = `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="refresh" content="0; url=${toUrl}">
+    <link rel="canonical" href="${toUrl}" />
+    <title>Redirecting...</title>
+  </head>
+  <body>
+    <p>Redirecting to <a href="${toUrl}">${toUrl}</a>...</p>
+    <script>
+      window.location.href = '${toUrl}';
+    </script>
+  </body>
+</html>`;
+            
+            // Generate file-based redirect (path.html)
+            await fs.ensureFile(`${outputPath}.html`);
+            await fs.writeFile(`${outputPath}.html`, htmlContent);
+            
+            // Also generate directory-based redirect (path/index.html)
+            await fs.ensureDir(outputPath);
+            await fs.writeFile(path.join(outputPath, 'index.html'), htmlContent);
+            
+            console.log(`Created redirect: ${from} → ${toUrl} (${type})`);
+          } catch (error) {
+            console.error(`Error creating redirect for ${from}: ${error.message}`);
+          }
+        })
+      );
+      
+      console.log('Redirect generation complete.');
+    },
+  };
+};

package/template/packages/redirects-plugin/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "redirects-plugin",
+    "version": "1.0.0",
+    "description": "A custom Docusaurus plugin for handling redirects",
+    "main": "index.js",
+    "author": "Patricia McPhee",
+    "license": "MIT",
+    "peerDependencies": {
+      "@docusaurus/core": "3.8.1",
+      "react": "^19.0.0"
+    },
+    "dependencies": {
+      "fs-extra": "^11.1.1"
+    }
+  }

package/template/packages/redirects-plugin/yarn.lock

@@ -0,0 +1,31 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+fs-extra@^11.1.1:
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.3.0.tgz#0daced136bbaf65a555a326719af931adc7a314d"
+  integrity sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+universalify@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==

package/template/redirects.json

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

package/template/scripts/build-tokens.js

@@ -0,0 +1,34 @@
+// scripts/build-tokens.js
+const fs = require('fs');
+const path = require('path');
+
+// Read your design tokens JSON
+const tokens = require('../design-tokens.json');
+
+// Function to convert nested JSON to CSS variables
+function jsonToCss(obj, prefix = '--') {
+  let css = '';
+  
+  for (const [key, value] of Object.entries(obj)) {
+    const varName = prefix + key.replace(/([A-Z])/g, '-$1').toLowerCase();
+    
+    if (typeof value === 'object' && !Array.isArray(value)) {
+      css += jsonToCss(value, varName + '-');
+    } else {
+      css += `  ${varName}: ${value};\n`;
+    }
+  }
+  
+  return css;
+}
+
+// Generate CSS
+const cssContent = `:root {\n${jsonToCss(tokens)}}\n`;
+
+// Write to custom.css or a separate tokens.css file
+fs.writeFileSync(
+  path.join(__dirname, '../src/css/tokens.css'),
+  cssContent
+);
+
+console.log('✅ Design tokens converted to CSS');

package/template/sidebars.js

@@ -0,0 +1,17 @@
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  mainSidebar: [
+    'getting-started',
+    {
+      type: 'category',
+      label: 'Guides',
+      collapsed: false,
+      collapsible: true,
+      items: [
+        'guides/writing-docs',
+      ],
+    },
+  ],
+};
+
+module.exports = sidebars;

package/template/src/components/CustomSearch/CustomSearch.js

@@ -0,0 +1,241 @@
+// src/components/CustomSearch/CustomSearch.js
+import React, { useState, useEffect } from 'react';
+import { useHistory } from '@docusaurus/router';
+import { Input, Modal, List } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import Fuse from 'fuse.js';
+import styles from './styles.module.css';
+
+const { Search } = Input;
+
+const fuseOptions = {
+  includeScore: true,
+  threshold: 0.4,
+  minMatchCharLength: 2,
+  keys: [
+    {
+      name: 'keywords',
+      weight: 0.7
+    },
+    {
+      name: 'title',
+      weight: 0.5
+    },
+    {
+      name: 'description',
+      weight: 0.3
+    }
+  ]
+};
+
+function CustomSearch() {
+  const [searchIndex, setSearchIndex] = useState([]);
+  const [fuse, setFuse] = useState(null);
+  const [searchResults, setSearchResults] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const history = useHistory();
+
+  const handleClear = () => {
+    setSearchTerm('');
+    setSearchResults([]);
+    setModalVisible(false);
+  };
+
+  const handleModalClose = () => {
+    handleClear();
+  };
+
+  useEffect(() => {
+    async function loadSearchIndex() {
+      try {
+        const response = await fetch('/searchIndex.json');
+        if (!response.ok) throw new Error(`Failed to load search index: ${response.statusText}`);
+        const data = await response.json();
+
+        const processedData = data.map(item => ({
+          ...item,
+          keywords: Array.isArray(item.keywords)
+            ? item.keywords.map(k => k?.toLowerCase()?.trim()).filter(Boolean)
+            : [],
+        }));
+
+        setSearchIndex(processedData);
+        setFuse(new Fuse(processedData, fuseOptions));
+        setLoading(false);
+      } catch (error) {
+        console.error('Error loading search index:', error);
+        setLoading(false);
+      }
+    }
+
+    loadSearchIndex();
+  }, []);
+
+  const performSearch = (value) => {
+    if (!value.trim() || !fuse) {
+      setSearchResults([]);
+      return;
+    }
+
+    try {
+      const results = fuse.search(value.trim());
+      const processedResults = Array.from(
+        new Map(
+          results.map(result => [result.item.id, result.item])
+        ).values()
+      );
+
+      setSearchResults(processedResults);
+      setModalVisible(true);
+    } catch (error) {
+      console.error('Search error:', error);
+      setSearchResults([]);
+    }
+  };
+
+  const handleSearchSubmit = (value) => {
+    performSearch(value);
+  };
+
+  const handleSearchChange = (e) => {
+    setSearchTerm(e.target.value);
+  };
+
+  const navigateToPage = (url) => {
+    setModalVisible(false);
+    setSearchTerm('');
+    history.push(url);
+  };
+
+  const formatDate = (lastUpdate) => {
+    if (!lastUpdate) return null;
+
+    try {
+      // Handle both string and object formats
+      const dateStr = typeof lastUpdate === 'string'
+        ? lastUpdate
+        : lastUpdate.date || lastUpdate.lastUpdatedAt;
+
+      if (!dateStr) return null;
+
+      // Parse the date string
+      const date = new Date(dateStr);
+      if (isNaN(date.getTime())) return null;
+
+      return {
+        date: date.toLocaleDateString('en-US', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric'
+        }),
+        author: typeof lastUpdate === 'object' ? lastUpdate.author : null
+      };
+    } catch (error) {
+      console.error('Date formatting error:', error);
+      return null;
+    }
+  };
+
+  const renderLastUpdate = (item) => {
+    const lastUpdateData = item.last_update || item.lastUpdatedAt;
+    const formattedDate = formatDate(lastUpdateData);
+
+    if (!formattedDate) return null;
+
+    return (
+      <div className={styles.searchResultMeta}>
+        <span className={styles.searchResultDate}>
+          Last updated: {formattedDate.date}
+        </span>
+      </div>
+    );
+  };
+
+  const renderTitle = (item) => (
+    <a
+      onClick={() => navigateToPage(item.url)}
+      className={styles.searchResultTitle}
+      role="button"
+      tabIndex={0}
+      onKeyPress={(e) => {
+        if (e.key === 'Enter') {
+          navigateToPage(item.url);
+        }
+      }}
+    >
+      {item.title}
+    </a>
+  );
+
+  return (
+    <div className={styles.searchWrapper}>
+      <Search
+        placeholder="Search documentation..."
+        onSearch={handleSearchSubmit}
+        value={searchTerm}
+        onChange={handleSearchChange}
+        className={styles.searchInput}
+        loading={loading}
+        prefix={<SearchOutlined />}
+        allowClear={true}
+        onClear={handleClear}
+      />
+
+      <Modal
+        title={`Search Results${searchResults.length ? ` (${searchResults.length})` : ''}`}
+        open={modalVisible}
+        onCancel={handleModalClose}
+        footer={null}
+        width={600}
+        className={styles.searchModal}
+        destroyOnClose
+      >
+        <div className={styles.searchModalContent}>
+          {searchResults.length > 0 ? (
+            <List
+              className={styles.searchResultsList}
+              itemLayout="vertical"
+              size="small"
+              pagination={{
+                pageSize: 5,
+                className: styles.searchPagination,
+                size: "small"
+              }}
+              dataSource={searchResults}
+              renderItem={(item) => (
+                <List.Item
+                  key={item.id}
+                  className={styles.searchResultItem}
+                >
+                  <List.Item.Meta
+                    title={renderTitle(item)}
+                    description={
+                      <div className={styles.searchResultContent}>
+                        <div className={styles.searchResultDescription}>
+                          {item.description}
+                        </div>
+                        {renderLastUpdate(item)}
+                      </div>
+                    }
+                  />
+                </List.Item>
+              )}
+            />
+          ) : searchTerm ? (
+            <div className={styles.searchNoResults}>
+              No results found for "{searchTerm}"
+            </div>
+          ) : (
+            <div className={styles.searchInstructions}>
+              Enter your search terms to find documentation
+            </div>
+          )}
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+export default CustomSearch;

package/template/src/components/CustomSearch/CustomSearchContent.js

@@ -0,0 +1,171 @@
+// src/components/CustomSearch/CustomSearchContent.js
+import React, { useState, useEffect } from 'react';
+import { Input, List } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import { useHistory } from '@docusaurus/router';
+import Fuse from 'fuse.js';
+import styles from './styles.module.css';
+
+const { Search } = Input;
+
+const fuseOptions = {
+  includeScore: true,
+  threshold: 0.4,
+  minMatchCharLength: 2,
+  keys: [
+    { name: 'keywords', weight: 0.7 },
+    { name: 'title', weight: 0.5 },
+    { name: 'description', weight: 0.3 }
+  ]
+};
+
+function CustomSearchContent({ onClose, initialSearchTerm = '' }) {
+  const [searchIndex, setSearchIndex] = useState([]);
+  const [fuse, setFuse] = useState(null);
+  const [searchResults, setSearchResults] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
+  const history = useHistory();
+
+  useEffect(() => {
+    loadSearchIndex();
+  }, []);
+
+  const loadSearchIndex = async () => {
+    try {
+      const response = await fetch('/searchIndex.json');
+      if (!response.ok) throw new Error('Failed to load search index');
+      const data = await response.json();
+
+      const processedData = data.map(item => ({
+        ...item,
+        keywords: Array.isArray(item.keywords)
+          ? item.keywords.map(k => k?.toLowerCase()?.trim()).filter(Boolean)
+          : [],
+      }));
+
+      setSearchIndex(processedData);
+      setFuse(new Fuse(processedData, fuseOptions));
+      setLoading(false);
+    } catch (error) {
+      console.error('Error loading search index:', error);
+      setLoading(false);
+    }
+  };
+
+  const performSearch = (value) => {
+    if (!value?.trim() || !fuse) {
+      setSearchResults([]);
+      return;
+    }
+
+    try {
+      const results = fuse.search(value.trim());
+      const processedResults = Array.from(
+        new Map(results.map(result => [result.item.id, result.item])).values()
+      );
+      setSearchResults(processedResults);
+    } catch (error) {
+      console.error('Search error:', error);
+      setSearchResults([]);
+    }
+  };
+
+  const handleSearchSubmit = (value) => {
+    performSearch(value);
+  };
+
+  const handleSearchChange = (e) => {
+    setSearchTerm(e.target.value);
+  };
+
+  const navigateToPage = (url) => {
+    onClose();
+    history.push(url);
+  };
+
+  const formatDate = (lastUpdate) => {
+    if (!lastUpdate?.date) return null;
+    try {
+      const [month, day, year] = lastUpdate.date.split('/').map(num => parseInt(num, 10));
+      const date = new Date(year, month - 1, day);
+      return isNaN(date.getTime()) ? null : {
+        date: date.toLocaleDateString('en-US', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric'
+        })
+      };
+    } catch (error) {
+      return null;
+    }
+  };
+
+  return (
+    <div className={styles.searchModalContent}>
+      <Search
+        placeholder="Search documentation..."
+        onSearch={handleSearchSubmit}
+        value={searchTerm}
+        onChange={handleSearchChange}
+        className={styles.searchInput}
+        loading={loading}
+        prefix={<SearchOutlined />}
+        allowClear
+      />
+
+      <div className={styles.searchResults}>
+        {searchResults.length > 0 ? (
+          <List
+            className={styles.searchResultsList}
+            itemLayout="vertical"
+            size="small"
+            pagination={{
+              pageSize: 5,
+              size: "small"
+            }}
+            dataSource={searchResults}
+            renderItem={(item) => (
+              <List.Item key={item.id} className={styles.searchResultItem}>
+                <List.Item.Meta
+                  title={
+                    <a
+                      onClick={() => navigateToPage(item.url)}
+                      className={styles.searchResultTitle}
+                      role="button"
+                      tabIndex={0}
+                    >
+                      {item.title}
+                    </a>
+                  }
+                  description={
+                    <>
+                      <div className={styles.searchResultDescription}>
+                        {item.description}
+                      </div>
+                      {formatDate(item.last_update) && (
+                        <div className={styles.searchResultDate}>
+                          Last updated: {formatDate(item.last_update).date}
+                        </div>
+                      )}
+                    </>
+                  }
+                />
+              </List.Item>
+            )}
+          />
+        ) : searchTerm ? (
+          <div className={styles.searchNoResults}>
+            No results found for "{searchTerm}"
+          </div>
+        ) : (
+          <div className={styles.searchInstructions}>
+            Enter your search terms to find documentation
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default CustomSearchContent;