0ef138f6ab
SUMMARY: Implemented Phase 3 Tasks 3.6.1 and 3.6.2: Enhanced documentation with interactive code copy buttons and collapsible table of contents. CHANGES: 1. Created code-copy-button.js (new): - Auto-detects all <pre> code blocks - Adds "Copy" button to top-right of each block - Clipboard API with fallback for older browsers - Visual feedback: "✓ Copied!" on success - Styled to work on dark code backgrounds - Listens for 'documentLoaded' event for dynamic content - Accessible with aria-label 2. Created toc.js (new): - Automatically builds TOC from h1, h2, h3 headings - Sticky sidebar on desktop (lg:block) - Collapsible on mobile with toggle button - Scroll spy with Intersection Observer - Highlights current section - Smooth scroll to sections - Updates URL hash on navigation - Auto-collapses on mobile after clicking link 3. Updated docs-viewer.html: - Added TOC sidebar (sticky, desktop-only) - Improved layout with flex containers - Added both components to script imports - Maintained existing document viewer functionality FEATURES: Code Copy Buttons: - Button text: "Copy" → "✓ Copied!" → "Copy" - 2-second success/error feedback - Works on all <pre><code> blocks - Respects code indentation Table of Contents: - Auto-generated from headings with IDs - 3-level hierarchy (h1, h2, h3) - Visual active indicator (blue border + bold) - Mobile toggle with chevron icon - Sticky positioning on desktop - Smooth scroll behavior ACCESSIBILITY: ✓ Zero CSP violations maintained ✓ Keyboard navigation supported ✓ ARIA labels on interactive elements ✓ Semantic HTML (nav, aside) ✓ Focus indicators PERFORMANCE: - Intersection Observer for scroll spy (better than scroll listeners) - Minimal DOM manipulation - CSS transitions for smooth UX - Lazy initialization UI_TRANSFORMATION_PROJECT_PLAN.md: ✓ Phase 3 Task 3.6.1: Code snippet copy buttons ✓ Phase 3 Task 3.6.2: Collapsible table of contents NEXT STEPS: - Deploy to production for testing - Phase 3 Task 3.2: Interactive architecture diagram (complex, deferred) 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
77 lines
3.1 KiB
HTML
77 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Documentation - Tractatus Framework</title>
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
|
<style>
|
|
/* Prose styling for document content */
|
|
.prose h1 { @apply text-3xl font-bold mt-8 mb-4 text-gray-900; }
|
|
.prose h2 { @apply text-2xl font-bold mt-6 mb-3 text-gray-900; }
|
|
.prose h3 { @apply text-xl font-semibold mt-4 mb-2 text-gray-800; }
|
|
.prose p { @apply my-4 text-gray-700 leading-relaxed; }
|
|
.prose ul { @apply my-4 list-disc list-inside text-gray-700; }
|
|
.prose ol { @apply my-4 list-decimal list-inside text-gray-700; }
|
|
.prose code { @apply bg-gray-100 px-1 py-0.5 rounded text-sm font-mono text-red-600; }
|
|
.prose pre { @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4; }
|
|
.prose pre code { @apply bg-transparent text-gray-100 p-0; }
|
|
.prose a { @apply text-blue-600 hover:text-blue-700 underline; }
|
|
.prose blockquote { @apply border-l-4 border-blue-500 pl-4 italic text-gray-600 my-4; }
|
|
.prose strong { @apply font-semibold text-gray-900; }
|
|
.prose em { @apply italic; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-white border-b border-gray-200 sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex items-center">
|
|
<a href="/" class="text-xl font-bold text-gray-900">Tractatus Framework</a>
|
|
</div>
|
|
<div class="flex items-center space-x-6">
|
|
<a href="/docs.html" class="text-gray-700 hover:text-gray-900">Documentation</a>
|
|
<a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex">
|
|
<!-- Sidebar -->
|
|
<aside class="w-64 bg-white border-r border-gray-200 min-h-screen p-6">
|
|
<h2 class="text-sm font-semibold text-gray-900 uppercase mb-4">Framework Docs</h2>
|
|
<nav id="doc-navigation" class="space-y-2">
|
|
<!-- Will be populated by JavaScript -->
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Document Viewer -->
|
|
<main class="flex-1 flex">
|
|
<div class="flex-1 p-8">
|
|
<div id="document-viewer" class="prose max-w-none"></div>
|
|
</div>
|
|
|
|
<!-- Table of Contents (Sticky) -->
|
|
<aside class="hidden lg:block w-64 bg-white border-l border-gray-200 p-6 sticky top-16 h-screen overflow-y-auto">
|
|
<div id="table-of-contents">
|
|
<!-- Will be populated by toc.js -->
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/js/utils/api.js?v=0.1.0.1760254958072"></script>
|
|
<script src="/js/utils/router.js?v=0.1.0.1760254958072"></script>
|
|
<script src="/js/components/document-viewer.js?v=0.1.0.1760254958072"></script>
|
|
<script src="/js/components/code-copy-button.js"></script>
|
|
<script src="/js/components/toc.js"></script>
|
|
<script src="/js/docs-viewer-app.js?v=0.1.0.1760254958072"></script>
|
|
|
|
</body>
|
|
</html>
|