Redesign docs site with Tailwind and dark mode

Migrates the documentation site to a new Tailwind CSS-based design with improved accessibility, dark mode support, and a modernized layout. Adds theme toggle and mobile navigation, updates index and static page templates, introduces a new Tailwind CSS source, and updates the GitHub Actions workflow to build CSS assets using Node.js. Also adds package.json and Tailwind config for asset building.

Author: potatoqualitee

.github/workflows/update-assets.yml

@@ -12,6 +12,19 @@ jobs:
         uses: "actions/checkout@v2.3.4"
         with:
           ref: master
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Tailwind CSS
+        run: npm run build:css
+
       - name: "Bump version based on manifest"
         working-directory: assets
         shell: pwsh

assets/css/tailwind-source.css

@@ -0,0 +1,93 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* Light mode defaults */
+  --color-bg: #FFFFFF;
+  --color-bg-secondary: #F8F9FA;
+  --color-text: #0E1A2F;
+  --color-text-secondary: #273B59;
+  --color-border: #C5D1E3;
+  --color-primary: #045BDB;
+}
+
+.dark {
+  /* Dark mode overrides */
+  --color-bg: #0E1A2F;
+  --color-bg-secondary: #0B234A;
+  --color-text: #FFFFFF;
+  --color-text-secondary: #C5D1E3;
+  --color-border: #273B59;
+  --color-primary: #60A5FA;
+}
+
+/* Custom animations */
+@keyframes shimmer {
+  0% { background-position: -1000px 0; }
+  100% { background-position: 1000px 0; }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 20s linear infinite;
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+/* Custom utilities */
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Preserve existing custom styles for docs */
+.back-to-top {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  display: none;
+}
+
+h5.param {
+  background-color: var(--color-bg-secondary);
+  font-family: var(--font-mono);
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.table td:first-child {
+  width: 10em;
+}
+
+/* Syntax highlighting overrides */
+code.hljs-inline {
+  display: inline;
+}
+
+code.wrapped {
+  white-space: pre-wrap;
+}

assets/js/theme-toggle.js

@@ -0,0 +1,34 @@
+// Dark mode theme toggle functionality
+(function() {
+    // Initialize theme from localStorage or default to dark
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+    const html = document.documentElement;
+
+    if (savedTheme === 'dark') {
+        html.classList.add('dark');
+    } else {
+        html.classList.remove('dark');
+    }
+
+    // Toggle function
+    window.toggleTheme = function() {
+        const html = document.documentElement;
+        const isDark = html.classList.contains('dark');
+
+        if (isDark) {
+            html.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+        } else {
+            html.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+        }
+    };
+
+    // Mobile menu toggle
+    window.toggleMobileMenu = function() {
+        const mobileMenu = document.getElementById('mobile-menu');
+        if (mobileMenu) {
+            mobileMenu.classList.toggle('hidden');
+        }
+    };
+})();

assets/templates/index.html.template

@@ -256,6 +256,23 @@ function Split-ArrayInParts($array, [int]$parts) {
     $rtn
 }
 
+# Build Tailwind CSS before generating pages
+Write-Host "Building Tailwind CSS..." -ForegroundColor Cyan
+$repoRoot = [System.IO.Path]::GetFullPath((Join-Path $PSScriptRoot '..\..\..'))
+Push-Location $repoRoot
+try {
+    if (Test-Path "node_modules") {
+        & npm run build:css
+        Write-Host "CSS build complete." -ForegroundColor Green
+    } else {
+        Write-Warning "Node modules not found. Run 'npm install' first. Skipping CSS build."
+    }
+} catch {
+    Write-Warning "Error building CSS: $_. Continuing anyway..."
+} finally {
+    Pop-Location
+}
+
 $sw = [System.Diagnostics.Stopwatch]::StartNew()
 
 #get json index path

assets/templates/page_template_static.html.template

@@ -0,0 +1,16 @@
+{
+  "name": "dbatools-docs",
+  "version": "1.0.0",
+  "description": "dbatools command documentation",
+  "scripts": {
+    "build:css": "tailwindcss -i ./assets/css/tailwind-source.css -o ./assets/css/tailwind.css --minify",
+    "watch:css": "tailwindcss -i ./assets/css/tailwind-source.css -o ./assets/css/tailwind.css --watch",
+    "build": "npm run build:css"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.18"
+  }
+}

assets/templates/to_md.ps1

@@ -0,0 +1,69 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./assets/templates/**/*.{html,template}",
+    "./assets/css/**/*.css"
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#045BDB',
+          dark: '#0B234A',
+        },
+        accent: {
+          red: '#FF5F56',
+          yellow: '#FFBD2E',
+          green: '#27C93F',
+        },
+        theme: {
+          bg: {
+            DEFAULT: '#FFFFFF',
+            dark: '#0E1A2F'
+          },
+          card: {
+            DEFAULT: '#F8F9FA',
+            dark: '#0B234A'
+          },
+          border: {
+            DEFAULT: '#C5D1E3',
+            dark: '#273B59'
+          },
+          text: {
+            DEFAULT: '#0E1A2F',
+            secondary: '#273B59',
+            dark: '#FFFFFF',
+            'secondary-dark': '#C5D1E3'
+          }
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Menlo', 'Monaco', 'monospace'],
+      },
+      fontSize: {
+        'hero': ['clamp(2.5rem, 5vw, 4.5rem)', { lineHeight: '1.1', letterSpacing: '-0.03em', fontWeight: '700' }],
+        'display': ['clamp(2rem, 4vw, 3rem)', { lineHeight: '1.2', letterSpacing: '-0.02em', fontWeight: '600' }],
+        'title': ['clamp(1.5rem, 3vw, 2rem)', { lineHeight: '1.3', letterSpacing: '-0.01em', fontWeight: '600' }],
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.6s ease-out',
+        'slide-up': 'slideUp 0.6s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' }
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' }
+        },
+      }
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+}