235 lines
9.4 KiB
HTML
235 lines
9.4 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-new.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.1761434644902">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.0.1761434644902">
|
|
<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.1761434644902"></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 -->
|
|
</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 -->
|
|
|
|
<!-- Load Blog Post JavaScript -->
|
|
<script src="/js/blog-post.js?v=0.1.0.1761434644902"></script>
|
|
|
|
<!-- Footer Component -->
|
|
<script src="/js/components/footer.js?v=0.1.0.1761434644902"></script>
|
|
|
|
</body>
|
|
</html>
|