29fa3956f9
**Newsletter Modal Implementation**: - Added modal subscription forms to blog pages - Improved UX with dedicated modal instead of anchor links - Location: public/blog.html, public/blog-post.html **Blog JavaScript Enhancements**: - Enhanced blog.js and blog-post.js with modal handling - Newsletter form submission logic - Location: public/js/blog.js, public/js/blog-post.js **Deployment Script Improvements**: - Added pre-deployment checks (server running, version parameters) - Enhanced visual feedback with status indicators (✓/✗/⚠) - Version parameter staleness detection - Location: scripts/deploy-full-project-SAFE.sh **Demo Page Cleanup**: - Minor refinements to demo pages - Location: public/demos/*.html **Routes Enhancement**: - Newsletter route additions - Location: src/routes/index.js 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
307 lines
14 KiB
HTML
307 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title id="page-title">Loading... | Tractatus Blog</title>
|
|
<meta id="page-description" name="description" content="Tractatus AI Safety Framework blog post">
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
|
|
<!-- Open Graph Meta Tags (Facebook, LinkedIn) -->
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:site_name" content="Tractatus AI Safety Framework">
|
|
<meta id="og-title" property="og:title" content="Loading...">
|
|
<meta id="og-description" property="og:description" content="Tractatus AI Safety Framework blog post">
|
|
<meta id="og-url" property="og:url" content="">
|
|
<meta id="og-image" property="og:image" content="https://agenticgovernance.digital/images/tractatus-icon.svg">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta id="article-published-time" property="article:published_time" content="">
|
|
<meta id="article-author" property="article:author" content="">
|
|
<meta property="article:section" content="AI Safety">
|
|
|
|
<!-- Twitter Card Meta Tags -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@tractatusai">
|
|
<meta id="twitter-title" name="twitter:title" content="Loading...">
|
|
<meta id="twitter-description" name="twitter:description" content="Tractatus AI Safety Framework blog post">
|
|
<meta id="twitter-image" name="twitter:image" content="https://agenticgovernance.digital/images/tractatus-icon.svg">
|
|
<meta id="twitter-image-alt" name="twitter:image:alt" content="Tractatus AI Safety Framework">
|
|
|
|
<!-- 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.1760254958072">
|
|
<style>
|
|
/* Accessibility: Skip link */
|
|
.skip-link { position: absolute; left: -9999px; top: 0; }
|
|
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }
|
|
|
|
/* Accessibility: Focus indicators (WCAG 2.4.7) */
|
|
a:focus, button:focus, input:focus, select:focus, textarea:focus {
|
|
outline: 3px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
a:focus:not(:focus-visible) { outline: none; }
|
|
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
|
|
|
/* Blog content styling */
|
|
.blog-content {
|
|
line-height: 1.8;
|
|
}
|
|
.blog-content h2 {
|
|
font-size: 1.875rem;
|
|
font-weight: 700;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
color: #1f2937;
|
|
}
|
|
.blog-content h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
color: #374151;
|
|
}
|
|
.blog-content p {
|
|
margin-bottom: 1.25rem;
|
|
color: #4b5563;
|
|
}
|
|
.blog-content ul, .blog-content ol {
|
|
margin-bottom: 1.25rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
.blog-content li {
|
|
margin-bottom: 0.5rem;
|
|
color: #4b5563;
|
|
}
|
|
.blog-content code {
|
|
background-color: #f3f4f6;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.875rem;
|
|
}
|
|
.blog-content pre {
|
|
background-color: #1f2937;
|
|
color: #f9fafb;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
overflow-x: auto;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.blog-content pre code {
|
|
background-color: transparent;
|
|
color: #f9fafb;
|
|
padding: 0;
|
|
}
|
|
.blog-content blockquote {
|
|
border-left: 4px solid #6366f1;
|
|
padding-left: 1rem;
|
|
margin: 1.5rem 0;
|
|
font-style: italic;
|
|
color: #6b7280;
|
|
}
|
|
.blog-content a {
|
|
color: #6366f1;
|
|
text-decoration: underline;
|
|
}
|
|
.blog-content a:hover {
|
|
color: #4f46e5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Skip Link for Keyboard Navigation -->
|
|
<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.1760254958072"></script>
|
|
|
|
<!-- Breadcrumb -->
|
|
<div class="bg-white border-b border-gray-200">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|
<nav class="flex items-center space-x-2 text-sm">
|
|
<a href="/" class="text-gray-500 hover:text-gray-700">Home</a>
|
|
<span class="text-gray-400">/</span>
|
|
<a href="/blog.html" class="text-gray-500 hover:text-gray-700">Blog</a>
|
|
<span class="text-gray-400">/</span>
|
|
<span id="breadcrumb-title" class="text-gray-900 font-medium">Loading...</span>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
|
|
<!-- Loading State -->
|
|
<div id="loading-state" class="text-center py-12">
|
|
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mb-4"></div>
|
|
<p class="text-gray-500">Loading post...</p>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div id="error-state" class="hidden bg-red-50 border border-red-200 rounded-lg p-6">
|
|
<div class="flex items-start">
|
|
<svg class="h-6 w-6 text-red-600 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-red-900 mb-2">Post Not Found</h2>
|
|
<p class="text-red-700 mb-4" id="error-message">The blog post you're looking for could not be found.</p>
|
|
<a href="/blog.html" class="text-red-800 underline hover:text-red-900">← Back to blog</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Post Content -->
|
|
<article id="post-content" class="hidden">
|
|
<!-- Post Header -->
|
|
<header class="mb-8">
|
|
<div class="mb-4">
|
|
<span id="post-category" class="inline-block bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full"></span>
|
|
</div>
|
|
<h1 id="post-title" class="text-4xl md:text-5xl font-bold text-gray-900 mb-4"></h1>
|
|
<div class="flex items-center text-gray-600 text-sm space-x-4">
|
|
<div class="flex items-center">
|
|
<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
|
</svg>
|
|
<span id="post-author"></span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
|
</svg>
|
|
<time id="post-date"></time>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<span id="post-read-time"></span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Tags -->
|
|
<div id="post-tags-container" class="mb-8 hidden">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
|
|
</svg>
|
|
<div id="post-tags" class="flex gap-2 flex-wrap"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Disclosure (if AI-assisted) -->
|
|
<div id="ai-disclosure" class="hidden bg-blue-50 border border-blue-200 rounded-lg p-4 mb-8">
|
|
<div class="flex items-start">
|
|
<svg class="h-5 w-5 text-blue-600 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<div class="text-sm text-blue-800">
|
|
<strong>AI-Assisted Content:</strong> This post was drafted with AI assistance and reviewed by a human editor, demonstrating the Tractatus framework's boundary enforcement (inst_016, inst_017, inst_018).
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Post Body -->
|
|
<div id="post-body" class="blog-content prose prose-lg max-w-none mb-12"></div>
|
|
|
|
<!-- Post Footer -->
|
|
<footer class="border-t border-gray-200 pt-8">
|
|
<!-- Share Section -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Share this post</h3>
|
|
<div class="flex gap-3">
|
|
<button id="share-twitter" class="flex items-center gap-2 px-4 py-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition">
|
|
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
|
|
</svg>
|
|
Twitter
|
|
</button>
|
|
<button id="share-linkedin" class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
|
|
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
|
</svg>
|
|
LinkedIn
|
|
</button>
|
|
<button id="copy-link" class="flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition">
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
|
</svg>
|
|
Copy Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back to Blog -->
|
|
<div>
|
|
<a href="/blog.html" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
|
|
<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
|
</svg>
|
|
Back to all posts
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
|
|
<!-- Related Posts -->
|
|
<div id="related-posts-section" class="hidden mt-16 border-t border-gray-200 pt-12">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-8">Related Posts</h2>
|
|
<div id="related-posts" class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Related posts will be inserted here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-gray-900 text-gray-400 py-12 mt-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
<div>
|
|
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
|
|
<p class="text-sm">
|
|
Preserving human agency through architectural constraints, not aspirational goals.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-white font-bold mb-4">Audience Paths</h3>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a href="/researcher.html" class="hover:text-white">Researchers</a></li>
|
|
<li><a href="/implementer.html" class="hover:text-white">Implementers</a></li>
|
|
<li><a href="/leader.html" class="hover:text-white">Leaders</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-white font-bold mb-4">Resources</h3>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a href="/docs.html" class="hover:text-white">Documentation</a></li>
|
|
<li><a href="/blog.html" class="hover:text-white">Blog</a></li>
|
|
<li><a href="/demos/classification-demo.html" class="hover:text-white">Interactive Demos</a></li>
|
|
<li><a href="/" class="hover:text-white">Home</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-white font-bold mb-4">Community</h3>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a href="/media-inquiry.html" class="hover:text-white">Media Inquiries</a></li>
|
|
<li><a href="/case-submission.html" class="hover:text-white">Submit Case Study</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
|
<p class="text-gray-500">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
|
<p>© 2025 Tractatus AI Safety Framework. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Load Blog Post JavaScript -->
|
|
<script src="/js/blog-post.js?v=1760394750"></script>
|
|
|
|
</body>
|
|
</html>
|