feat: Add research papers modal to homepage hero button
Replace direct link to architectural-alignment.html with a modal showing all research papers grouped by recency, with a footer link to /docs.html for broader documentation discovery. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
TheFlow
parent
2928ddd439
commit
737593de2d
2 changed files with 177 additions and 3 deletions
|
|
@ -73,11 +73,11 @@
|
|||
Some decisions require human judgment — architecturally enforced, not left to AI discretion, however well trained.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="/architectural-alignment.html"
|
||||
class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-white text-blue-700 hover:shadow-lg hover:-translate-y-1"
|
||||
<button data-research-papers-trigger
|
||||
class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-white text-blue-700 hover:shadow-lg hover:-translate-y-1 cursor-pointer"
|
||||
data-i18n="hero.cta_research">
|
||||
Read the Research
|
||||
</a>
|
||||
</button>
|
||||
<a href="/village-case-study.html"
|
||||
class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-emerald-500 text-white hover:bg-emerald-600 hover:shadow-lg hover:-translate-y-1"
|
||||
data-i18n="hero.cta_production">
|
||||
|
|
@ -554,5 +554,8 @@
|
|||
<!-- Newsletter Subscription Modal -->
|
||||
<script src="/js/components/newsletter.js?v=0.1.2.1770452675442"></script>
|
||||
|
||||
<!-- Research Papers Modal -->
|
||||
<script src="/js/components/research-papers-modal.js?v=0.1.2.1770452675442"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
171
public/js/components/research-papers-modal.js
Normal file
171
public/js/components/research-papers-modal.js
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
/**
|
||||
* Research Papers Modal Component
|
||||
* Displays curated research papers grouped by recency when triggered
|
||||
* from the homepage hero "Read the Research" button.
|
||||
*/
|
||||
|
||||
class ResearchPapersModal {
|
||||
constructor() {
|
||||
this.isOpen = false;
|
||||
this.papers = [
|
||||
{
|
||||
group: 'Recent Papers',
|
||||
items: [
|
||||
{
|
||||
code: 'STO-RES-0010',
|
||||
title: 'Taonga-Centred Steering Governance',
|
||||
subtitle: 'Polycentric Authority for Sovereign Small Language Models',
|
||||
description: 'Proposes polycentric governance replacing platform hierarchy with co-equal steering authorities, drawing on te ao M\u0101ori concepts.',
|
||||
date: 'February 2026',
|
||||
status: 'Draft',
|
||||
href: '/docs-viewer.html?doc=taonga-centred-steering-governance-polycentric-ai'
|
||||
},
|
||||
{
|
||||
code: 'STO-RES-0009',
|
||||
title: 'Steering Vectors and Mechanical Bias',
|
||||
subtitle: 'Inference-Time Debiasing for Sovereign Small Language Models',
|
||||
description: 'Investigates whether LLM biases operate at a sub-reasoning level and how sovereign SLM deployments enable inference-time debiasing.',
|
||||
date: 'February 2026',
|
||||
status: 'v1.1',
|
||||
href: '/docs-viewer.html?doc=steering-vectors-mechanical-bias-sovereign-ai'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
group: 'Foundational Papers',
|
||||
items: [
|
||||
{
|
||||
code: 'STO-INN-0003',
|
||||
title: 'Architectural Alignment',
|
||||
subtitle: 'Interrupting Neural Reasoning Through Constitutional Inference Gating',
|
||||
description: 'The core Tractatus paper presenting architectural alignment as a formal specification for interrupted neural reasoning. Available in three editions.',
|
||||
date: 'January 2026',
|
||||
status: 'v2.1 \u2014 3 editions',
|
||||
href: '/architectural-alignment.html'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.renderModal();
|
||||
this.attachEventListeners();
|
||||
}
|
||||
|
||||
renderModal() {
|
||||
const papersHTML = this.papers.map(group => `
|
||||
<div class="mb-6 last:mb-0">
|
||||
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">${group.group}</h3>
|
||||
<div class="space-y-3">
|
||||
${group.items.map(paper => `
|
||||
<a href="${paper.href}"
|
||||
class="block border border-gray-200 rounded-lg p-4 hover:border-blue-300 hover:bg-blue-50/50 transition-colors group">
|
||||
<div class="flex items-start justify-between gap-3 mb-1">
|
||||
<h4 class="font-semibold text-gray-900 group-hover:text-blue-700 transition-colors">${paper.title}</h4>
|
||||
<span class="shrink-0 text-xs font-mono bg-gray-100 text-gray-600 px-2 py-0.5 rounded">${paper.code}</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-2">${paper.subtitle}</p>
|
||||
<p class="text-sm text-gray-500 mb-2">${paper.description}</p>
|
||||
<div class="flex items-center gap-3 text-xs text-gray-400">
|
||||
<span>${paper.date}</span>
|
||||
<span class="inline-block bg-gray-100 text-gray-600 px-2 py-0.5 rounded">${paper.status}</span>
|
||||
</div>
|
||||
</a>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
const modalHTML = `
|
||||
<div id="research-papers-modal" class="hidden fixed inset-0 z-50" role="dialog" aria-modal="true" aria-labelledby="research-papers-title">
|
||||
<div id="research-papers-backdrop" class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm"></div>
|
||||
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4">
|
||||
<div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl relative flex flex-col max-h-[90vh]">
|
||||
<button id="research-papers-close"
|
||||
class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors z-10"
|
||||
aria-label="Close research papers modal">
|
||||
<svg class="w-6 h-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 class="p-6 pb-0">
|
||||
<div class="flex items-center gap-3 mb-1">
|
||||
<div class="inline-flex items-center justify-center w-10 h-10 bg-blue-100 rounded-lg">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 id="research-papers-title" class="text-xl font-bold text-gray-900">Research Papers</h2>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-4 ml-13">Published research from the Tractatus project</p>
|
||||
</div>
|
||||
|
||||
<div class="overflow-y-auto px-6 pb-2 flex-1">
|
||||
${papersHTML}
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-100 px-6 py-4">
|
||||
<a href="/docs.html"
|
||||
class="flex items-center justify-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-700 transition-colors">
|
||||
Browse All Documentation
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', modalHTML);
|
||||
}
|
||||
|
||||
attachEventListeners() {
|
||||
const backdrop = document.getElementById('research-papers-backdrop');
|
||||
const closeBtn = document.getElementById('research-papers-close');
|
||||
|
||||
backdrop.addEventListener('click', () => this.close());
|
||||
closeBtn.addEventListener('click', () => this.close());
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && this.isOpen) {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.closest('[data-research-papers-trigger]')) {
|
||||
e.preventDefault();
|
||||
this.open();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
open() {
|
||||
const modal = document.getElementById('research-papers-modal');
|
||||
modal.classList.remove('hidden');
|
||||
this.isOpen = true;
|
||||
document.body.classList.add('overflow-hidden');
|
||||
}
|
||||
|
||||
close() {
|
||||
const modal = document.getElementById('research-papers-modal');
|
||||
modal.classList.add('hidden');
|
||||
this.isOpen = false;
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.researchPapersModal = new ResearchPapersModal();
|
||||
});
|
||||
} else {
|
||||
window.researchPapersModal = new ResearchPapersModal();
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue