273 lines
12 KiB
HTML
273 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Blog | Tractatus AI Safety Framework</title>
|
|
<meta name="description" content="Insights, updates, and analysis on AI governance, safety frameworks, and the Tractatus boundary enforcement approach.">
|
|
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
|
|
|
<!-- Open Graph Meta Tags (Facebook, LinkedIn) -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="Tractatus AI Safety Framework">
|
|
<meta property="og:title" content="Tractatus Blog - AI Safety and Governance Insights">
|
|
<meta property="og:description" content="Insights, updates, and analysis on AI governance, safety frameworks, and the Tractatus boundary enforcement approach.">
|
|
<meta property="og:url" content="https://agenticgovernance.digital/blog.html">
|
|
<meta 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">
|
|
|
|
<!-- Twitter Card Meta Tags -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@tractatusai">
|
|
<meta name="twitter:title" content="Tractatus Blog - AI Safety and Governance Insights">
|
|
<meta name="twitter:description" content="Insights, updates, and analysis on AI governance, safety frameworks, and the Tractatus boundary enforcement approach.">
|
|
<meta name="twitter:image" content="https://agenticgovernance.digital/images/tractatus-icon.svg">
|
|
<meta 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.1761346024265">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.0.1761346024265">
|
|
<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; }
|
|
</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.1761346024265"></script>
|
|
|
|
<!-- Hero Section -->
|
|
<div class="bg-gradient-to-br from-indigo-50 to-blue-50 py-20">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<h1 class="text-5xl font-bold text-gray-900 mb-6">
|
|
Tractatus Blog
|
|
</h1>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
|
|
Insights on AI governance, safety frameworks, and the boundary between automation and human judgment.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
|
|
<!-- Filters and Search -->
|
|
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<!-- Search Box -->
|
|
<div class="md:col-span-2">
|
|
<label for="search-input" class="block text-sm font-medium text-gray-700 mb-2">Search Posts</label>
|
|
<input
|
|
type="text"
|
|
id="search-input"
|
|
placeholder="Search by title, content, or tags..."
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
|
|
>
|
|
</div>
|
|
|
|
<!-- Category Filter -->
|
|
<div>
|
|
<label for="category-filter" class="block text-sm font-medium text-gray-700 mb-2">Category</label>
|
|
<select
|
|
id="category-filter"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
|
|
>
|
|
<option value="">All Categories</option>
|
|
<option value="Framework Updates">Framework Updates</option>
|
|
<option value="Case Studies">Case Studies</option>
|
|
<option value="Research">Research</option>
|
|
<option value="Implementation">Implementation</option>
|
|
<option value="Community">Community</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Filters Display -->
|
|
<div id="active-filters" class="mt-4 flex items-center gap-2 flex-wrap hidden">
|
|
<span class="text-sm font-medium text-gray-700">Active filters:</span>
|
|
<div id="filter-tags" class="flex gap-2 flex-wrap"></div>
|
|
<button id="clear-filters" class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">
|
|
Clear all
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Count -->
|
|
<div class="mb-6 flex justify-between items-center">
|
|
<p id="results-count" class="text-gray-600">
|
|
<span class="font-semibold" id="post-count">0</span> posts found
|
|
</p>
|
|
<div class="flex items-center gap-2">
|
|
<label for="sort-select" class="text-sm text-gray-600">Sort by:</label>
|
|
<select
|
|
id="sort-select"
|
|
class="px-3 py-1 border border-gray-300 rounded-md text-sm focus:ring-indigo-500 focus:border-indigo-500"
|
|
>
|
|
<option value="date-desc">Newest First</option>
|
|
<option value="date-asc">Oldest First</option>
|
|
<option value="title-asc">Title A-Z</option>
|
|
<option value="title-desc">Title Z-A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blog Posts Grid -->
|
|
<div id="blog-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
|
<!-- Loading state -->
|
|
<div class="col-span-full 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 posts...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div id="empty-state" class="hidden col-span-full text-center py-12">
|
|
<svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">No posts found</h3>
|
|
<p class="text-gray-500">Try adjusting your search or filters</p>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div id="pagination" class="hidden flex justify-center items-center gap-2 mt-12">
|
|
<button id="prev-page" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
Previous
|
|
</button>
|
|
<div id="page-numbers" class="flex gap-1">
|
|
<!-- Page numbers will be inserted here -->
|
|
</div>
|
|
<button id="next-page" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Section -->
|
|
<div class="bg-indigo-50 py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Stay Updated</h2>
|
|
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
|
|
Get notified when we publish new insights on AI governance and safety frameworks.
|
|
</p>
|
|
<button
|
|
id="open-newsletter-modal"
|
|
class="inline-block bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition shadow-md border-2 border-blue-900"
|
|
aria-label="Open newsletter subscription"
|
|
>
|
|
Subscribe to Newsletter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Newsletter Modal -->
|
|
<div id="newsletter-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<h3 class="text-2xl font-bold text-gray-900">Subscribe to Newsletter</h3>
|
|
<button
|
|
id="close-newsletter-modal"
|
|
class="text-gray-400 hover:text-gray-600 transition"
|
|
aria-label="Close newsletter modal"
|
|
>
|
|
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<p class="text-gray-600 mb-6">
|
|
Get updates on AI safety research, framework developments, and case studies delivered to your inbox.
|
|
</p>
|
|
|
|
<form id="newsletter-form" class="space-y-4">
|
|
<div>
|
|
<label for="newsletter-email" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Email Address <span class="text-red-600">*</span>
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="newsletter-email"
|
|
name="email"
|
|
required
|
|
placeholder="you@example.com"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="newsletter-name" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Name (optional)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="newsletter-name"
|
|
name="name"
|
|
placeholder="Your name"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
</div>
|
|
|
|
<div id="newsletter-success" class="hidden bg-green-50 border border-green-200 rounded-md p-3 text-sm text-green-800">
|
|
<strong>Success!</strong> You've been subscribed to our newsletter.
|
|
</div>
|
|
|
|
<div id="newsletter-error" class="hidden bg-red-50 border border-red-200 rounded-md p-3 text-sm text-red-800">
|
|
<strong>Error:</strong> <span id="newsletter-error-message">Failed to subscribe. Please try again.</span>
|
|
</div>
|
|
|
|
<div class="flex gap-3">
|
|
<button
|
|
type="submit"
|
|
id="newsletter-submit"
|
|
class="flex-1 bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Subscribe
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="cancel-newsletter"
|
|
class="px-6 py-3 border border-gray-300 rounded-lg font-semibold text-gray-700 hover:bg-gray-50 transition"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<p class="text-xs text-gray-500 mt-4">
|
|
We respect your privacy. Unsubscribe at any time.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<!-- Internationalization (must load first for footer translations) -->
|
|
<script src="/js/i18n-simple.js?v=0.1.0.1761346024265"></script>
|
|
<script src="/js/components/language-selector.js?v=0.1.0.1761346024265"></script>
|
|
|
|
<!-- Load Blog JavaScript -->
|
|
<script src="/js/blog.js?v=0.1.0.1761346024265"></script>
|
|
|
|
<!-- Footer Component -->
|
|
<script src="/js/components/footer.js?v=0.1.0.1761346024265"></script>
|
|
|
|
</body>
|
|
</html>
|