john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
tractatus/public
History
TheFlow 8cc2c0c289 feat(phase3): add code snippet copy buttons and collapsible TOC 
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>
2025-10-19 15:27:33 +13:00
..
.well-known security: comprehensive security audit and hardening 2025-10-10 05:34:40 +13:00
about style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
admin style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
css feat(phase3): implement scroll animations with Intersection Observer 2025-10-19 15:09:59 +13:00
demos style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
downloads docs: regenerate PDFs and update documentation metadata 2025-10-14 10:53:48 +13:00
fonts fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
images fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
js feat(phase3): add code snippet copy buttons and collapsible TOC 2025-10-19 15:27:33 +13:00
koha fix(a11y): improve text contrast on koha transparency page 2025-10-19 14:07:38 +13:00
locales fix(i18n): resolve footer translation keys showing on non-homepage pages 2025-10-19 14:49:17 +13:00
about.html feat(phase3): apply scroll animations site-wide to all key pages 2025-10-19 15:23:26 +13:00
api-reference.html style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
architecture.html feat(phase3): apply scroll animations site-wide to all key pages 2025-10-19 15:23:26 +13:00
blog-post.html style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
blog.html style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
case-submission.html fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
check-version.html style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
docs-viewer.html feat(phase3): add code snippet copy buttons and collapsible TOC 2025-10-19 15:27:33 +13:00
docs.html perf(docs): fix CLS and improve accessibility across pages 2025-10-19 14:04:33 +13:00
faq.html style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
favicon-new.svg fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
favicon.ico feat: implement Rule Manager and Project Manager admin systems 2025-10-11 17:16:51 +13:00
favicon.svg feat: comprehensive documentation improvements and GitHub integration 2025-10-09 14:33:14 +13:00
implementer.html feat(phase3): apply scroll animations site-wide to all key pages 2025-10-19 15:23:26 +13:00
index.html feat(phase3): implement scroll animations with Intersection Observer 2025-10-19 15:09:59 +13:00
koha.html style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
leader.html feat(phase3): apply scroll animations site-wide to all key pages 2025-10-19 15:23:26 +13:00
manifest.json style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
media-inquiry.html fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
media-triage-transparency.html style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
privacy.html fix(i18n): add cache-busting version strings to privacy page scripts 2025-10-19 14:56:25 +13:00
researcher.html feat(phase3): apply scroll animations site-wide to all key pages 2025-10-19 15:23:26 +13:00
service-worker.js style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
version.json style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00