john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: CSP-compliant category collapsing + cache busting

Browse source 
- Remove inline styles from category rendering (CSP violation)
- Apply collapsed state via JavaScript after DOM insertion
- Update cache version to v=0.1.0.1760254264664 across all HTML files
- Categories now properly collapsed on page load (Research, Advanced, Case Studies, Business, Archives)
This commit is contained in:
TheFlow 2025-10-12 20:32:34 +13:00
parent 86b32929c3
commit a5b8f90e88
16 changed files with 54 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/about.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | Tractatus AI Safety Framework</title>
<meta name="description" content="Learn about the Tractatus Framework: our mission, values, team, and commitment to preserving human agency through structural AI safety.">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
/* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; }
@ -26,7 +26,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Hero Section -->
<div class="bg-gradient-to-br from-blue-50 to-purple-50 py-20">

2
public/api-reference.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Reference | Tractatus Framework</title>
<meta name="description" content="Complete API reference for Tractatus Framework - endpoints, authentication, request/response formats, and examples.">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
.endpoint-badge {
@apply inline-block px-2 py-1 rounded text-xs font-mono font-semibold;

6
public/blog-post.html
View file

@ -31,7 +31,7 @@
<!-- RSS Feed -->
<link rel="alternate" type="application/rss+xml" title="Tractatus Blog RSS Feed" href="/api/blog/rss">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
/* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; }
@ -117,7 +117,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Breadcrumb -->
<div class="bg-white border-b border-gray-200">
@ -301,7 +301,7 @@
</footer>
<!-- Load Blog Post JavaScript -->
<script src="/js/blog-post.js?v=0.1.0.1760243560060"></script>
<script src="/js/blog-post.js?v=0.1.0.1760254264664"></script>
</body>
</html>

6
public/blog.html
View file

@ -28,7 +28,7 @@
<!-- RSS Feed -->
<link rel="alternate" type="application/rss+xml" title="Tractatus Blog RSS Feed" href="/api/blog/rss">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
/* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; }
@ -49,7 +49,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Hero Section -->
<div class="bg-gradient-to-br from-indigo-50 to-blue-50 py-20">
@ -216,7 +216,7 @@
</footer>
<!-- Load Blog JavaScript -->
<script src="/js/blog.js?v=0.1.0.1760243560060"></script>
<script src="/js/blog.js?v=0.1.0.1760254264664"></script>
</body>
</html>

4
public/case-submission.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit Case Study | Tractatus AI Safety</title>
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
/* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; }
@ -75,7 +75,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Main Content -->
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

10
public/docs-viewer.html
View file

@ -4,7 +4,7 @@
<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.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
/* Prose styling for document content */
.prose h1 { @apply text-3xl font-bold mt-8 mb-4 text-gray-900; }
@ -56,10 +56,10 @@
</div>
<!-- Scripts -->
<script src="/js/utils/api.js?v=0.1.0.1760243560060"></script>
<script src="/js/utils/router.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/document-viewer.js?v=0.1.0.1760243560060"></script>
<script src="/js/docs-viewer-app.js?v=0.1.0.1760243560060"></script>
<script src="/js/utils/api.js?v=0.1.0.1760254264664"></script>
<script src="/js/utils/router.js?v=0.1.0.1760254264664"></script>
<script src="/js/components/document-viewer.js?v=0.1.0.1760254264664"></script>
<script src="/js/docs-viewer-app.js?v=0.1.0.1760254264664"></script>
</body>
</html>

10
public/docs.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Framework Documentation | Tractatus AI Safety</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
html { scroll-behavior: smooth; }
@ -380,7 +380,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Page Header -->
<div class="bg-white border-b border-gray-200">
@ -717,9 +717,9 @@
</div>
</div>
<script src="/js/components/document-cards.js?v=0.1.0.1760243560060"></script>
<script src="/js/docs-app.js?v=0.1.0.1760243560060"></script>
<script src="/js/docs-search-enhanced.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/document-cards.js?v=0.1.0.1760254264664"></script>
<script src="/js/docs-app.js?v=0.1.0.1760254264664"></script>
<script src="/js/docs-search-enhanced.js?v=0.1.0.1760254264664"></script>
</body>
</html>

6
public/faq.html
View file

@ -6,7 +6,7 @@
<title>Frequently Asked Questions | Tractatus AI Safety Framework</title>
<meta name="description" content="Common questions about Tractatus framework: implementation, performance, relationship to Claude Code, and governance architecture.">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<!-- Syntax highlighting for code blocks -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
@ -183,7 +183,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Hero -->
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-16">
@ -336,7 +336,7 @@
</div>
</footer>
<script src="/js/faq.js?v=0.1.0.1760243560060"></script>
<script src="/js/faq.js?v=0.1.0.1760254264664"></script>
</body>
</html>

4
public/implementer.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For Implementers | Tractatus AI Safety Framework</title>
<meta name="description" content="Integrate Tractatus framework into your AI systems: practical guides, code examples, and step-by-step implementation for production safety.">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
/* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; }
@ -26,7 +26,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Hero Section -->
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-20">

4
public/index.html
View file

@ -6,7 +6,7 @@
<title>Tractatus AI Safety Framework | Architectural Constraints for Human Agency</title>
<meta name="description" content="World's first production implementation of architectural AI safety constraints. Preserving human agency through structural, not aspirational, guarantees.">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
.gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hover-lift { transition: transform 0.2s; }
@ -29,7 +29,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Hero Section -->
<header role="banner">

22
public/js/docs-app.js
View file

@ -205,16 +205,17 @@ async function loadDocuments() {
html += `
<div class="category-section mb-4" data-category="${categoryId}">
<button class="category-toggle w-full flex items-center justify-between px-3 py-3 text-sm font-bold ${category.textColor} ${category.bgColor} ${category.borderColor} rounded-r hover:shadow-md transition-all"
data-category="${categoryId}">
data-category="${categoryId}"
data-collapsed="${isCollapsed}">
<span class="flex items-center gap-2">
<span class="category-icon">${category.icon}</span>
<span>${category.label.replace(category.icon, '').trim()}</span>
</span>
<svg class="category-arrow w-5 h-5 transition-transform ${isCollapsed ? 'rotate-[-90deg]' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="category-arrow w-5 h-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="category-docs mt-2 pl-2" data-category="${categoryId}" ${isCollapsed ? 'style="display:none"' : ''}>
<div class="category-docs mt-2 pl-2" data-category="${categoryId}" data-collapsed="${isCollapsed}">
`;
// Render documents in category
@ -235,17 +236,18 @@ async function loadDocuments() {
html += `
<div class="category-section mb-4 mt-8" data-category="archives">
<button class="category-toggle w-full flex items-center justify-between px-3 py-3 text-sm font-bold text-gray-600 bg-gray-50 border-l-4 border-gray-400 rounded-r hover:shadow-md transition-all"
data-category="archives">
data-category="archives"
data-collapsed="true">
<span class="flex items-center gap-2">
<span class="category-icon">📦</span>
<span>Archives</span>
<span class="text-xs font-normal text-gray-500">(${archivedDocuments.length} documents)</span>
</span>
<svg class="category-arrow w-5 h-5 transition-transform rotate-[-90deg]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="category-arrow w-5 h-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="category-docs mt-2 pl-2" data-category="archives" style="display:none">
<div class="category-docs mt-2 pl-2" data-category="archives" data-collapsed="true">
`;
// Render archived documents
@ -265,6 +267,14 @@ async function loadDocuments() {
listEl.innerHTML = html;
// Apply collapsed state to categories (CSP-compliant - no inline styles)
listEl.querySelectorAll('.category-docs[data-collapsed="true"]').forEach(docsEl => {
docsEl.style.display = 'none';
});
listEl.querySelectorAll('.category-toggle[data-collapsed="true"] .category-arrow').forEach(arrowEl => {
arrowEl.style.transform = 'rotate(-90deg)';
});
// Add event delegation for document links
listEl.addEventListener('click', function(e) {
// Check for download link first (prevent document load when clicking download)

4
public/koha.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Support Tractatus | Koha Donation System</title>
<meta name="description" content="Support the Tractatus AI Safety Framework. Help fund hosting, development, research, and community building for architectural AI safety.">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
.gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.skip-link { position: absolute; left: -9999px; }
@ -50,7 +50,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Main Content -->
<main id="main-content" class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

4
public/leader.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For AI Leaders | Tractatus AI Safety Framework</title>
<meta name="description" content="Strategic AI governance for executives and research directors. Structural approach to AI safety, compliance, and risk mitigation.">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
.gradient-text {
background: linear-gradient(120deg, #d97706 0%, #f59e0b 100%);
@ -32,7 +32,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Hero Section -->
<div class="bg-gradient-to-br from-gray-50 to-amber-50 pt-20 pb-24">

4
public/media-inquiry.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Inquiry | Tractatus AI Safety</title>
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
.form-group { margin-bottom: 1.5rem; }
.form-label {
@ -65,7 +65,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Main Content -->
<main id="main-content" class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

4
public/privacy.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Privacy Policy | Tractatus AI Safety Framework</title>
<meta name="description" content="Privacy policy for the Tractatus AI Safety Framework. Learn how we collect, use, and protect your data.">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
@ -25,7 +25,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Main Content -->
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

4
public/researcher.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For Researchers | Tractatus AI Safety Framework</title>
<meta name="description" content="Tractatus framework research: architectural constraints, theoretical foundations, and empirical validation of AI safety through structural guarantees.">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
<style>
/* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; }
@ -26,7 +26,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
<script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
<!-- Hero Section -->
<div class="bg-gradient-to-br from-purple-50 to-blue-50 py-20">