<!-- Accessible Footer Component -->
<footer class="footer" role="contentinfo" aria-label="Site footer">
<div class="footer__container container">
<!-- Back to top button -->
<button class="back-to-top"
id="back-to-top"
aria-label="Back to top"
title="Back to top">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M10 5l-7 7h4v6h6v-6h4l-7-7z"/>
</svg>
</button>
<div class="footer__content">
<!-- Brand section -->
<div class="footer__brand">
<div class="footer__logo-wrapper">
<img src="{{ '/assets/img/logo.svg' | relative_url }}"
alt=""
class="footer__logo"
width="48"
height="48"
loading="lazy">
<div>
<h2 class="footer__title">Caxton</h2>
<p class="footer__tagline">Multi-Agent Application Server</p>
</div>
</div>
<p class="footer__description">
Production-ready application server for multi-agent systems.
Deploy agents, route messages, debug with confidence.
</p>
<div class="footer__badges">
<span class="badge badge--neutral">v{{ site.data.release.version | default: '0.1.0-dev' }}</span>
<span class="badge badge--neutral">MIT/Apache 2.0</span>
</div>
</div>
<!-- Links sections -->
<div class="footer__links-grid">
<div class="footer__links-section">
<h3 class="footer__links-title">Documentation</h3>
<ul class="footer__links-list" role="list">
<li><a href="{{ '/docs/' | relative_url }}">Overview</a></li>
<li><a href="{{ '/docs/quickstart/' | relative_url }}">Quick Start</a></li>
<li><a href="https://docs.rs/caxton/latest/caxton/" target="_blank" rel="noopener noreferrer">API Reference
<svg class="footer__external-icon" width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-label="Opens in new window">
<path d="M10.5 1.5v3h-1v-2L5 7l-.7-.7L8.8 2h-2v-1h3z"/>
<path d="M9.5 7.5v3h-8v-8h3v-1h-4v10h10v-4h-1z"/>
</svg>
</a></li>
<li><a href="{{ '/adr/' | relative_url }}">Architecture</a></li>
</ul>
</div>
<div class="footer__links-section">
<h3 class="footer__links-title">Community</h3>
<ul class="footer__links-list" role="list">
<li>
<a href="{{ site.social.github }}"
target="_blank"
rel="noopener noreferrer">
GitHub
<svg class="footer__external-icon" width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-label="Opens in new window">
<path d="M10.5 1.5v3h-1v-2L5 7l-.7-.7L8.8 2h-2v-1h3z"/>
<path d="M9.5 7.5v3h-8v-8h3v-1h-4v10h10v-4h-1z"/>
</svg>
</a>
</li>
<li>
<a href="{{ site.social.github }}/discussions"
target="_blank"
rel="noopener noreferrer">
Discussions
<svg class="footer__external-icon" width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-label="Opens in new window">
<path d="M10.5 1.5v3h-1v-2L5 7l-.7-.7L8.8 2h-2v-1h3z"/>
<path d="M9.5 7.5v3h-8v-8h3v-1h-4v10h10v-4h-1z"/>
</svg>
</a>
</li>
<li>
<a href="{{ site.social.github }}/issues"
target="_blank"
rel="noopener noreferrer">
Issues
<svg class="footer__external-icon" width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-label="Opens in new window">
<path d="M10.5 1.5v3h-1v-2L5 7l-.7-.7L8.8 2h-2v-1h3z"/>
<path d="M9.5 7.5v3h-8v-8h3v-1h-4v10h10v-4h-1z"/>
</svg>
</a>
</li>
<li>
<a href="{{ site.social.github }}/blob/main/CONTRIBUTING.md"
target="_blank"
rel="noopener noreferrer">
Contributing
<svg class="footer__external-icon" width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-label="Opens in new window">
<path d="M10.5 1.5v3h-1v-2L5 7l-.7-.7L8.8 2h-2v-1h3z"/>
<path d="M9.5 7.5v3h-8v-8h3v-1h-4v10h10v-4h-1z"/>
</svg>
</a>
</li>
</ul>
</div>
<div class="footer__links-section">
<h3 class="footer__links-title">Resources</h3>
<ul class="footer__links-list" role="list">
<li><a href="{{ '/docs/security/' | relative_url }}">Security</a></li>
<li><a href="{{ '/docs/roadmap/' | relative_url }}">Roadmap</a></li>
<li><a href="{{ site.social.github }}/releases" target="_blank" rel="noopener noreferrer">
Releases
<svg class="footer__external-icon" width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-label="Opens in new window">
<path d="M10.5 1.5v3h-1v-2L5 7l-.7-.7L8.8 2h-2v-1h3z"/>
<path d="M9.5 7.5v3h-8v-8h3v-1h-4v10h10v-4h-1z"/>
</svg>
</a></li>
<li><a href="{{ site.social.github }}/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">
License
<svg class="footer__external-icon" width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-label="Opens in new window">
<path d="M10.5 1.5v3h-1v-2L5 7l-.7-.7L8.8 2h-2v-1h3z"/>
<path d="M9.5 7.5v3h-8v-8h3v-1h-4v10h10v-4h-1z"/>
</svg>
</a></li>
</ul>
</div>
</div>
</div>
<!-- Bottom bar -->
<div class="footer__bottom">
<p class="footer__copyright">
© {{ 'now' | date: '%Y' }} Caxton Project. Dual-licensed under MIT or Apache 2.0.
</p>
<div class="footer__social">
<a href="{{ site.social.github }}"
class="footer__social-link"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.84 9.49.5.09.68-.22.68-.48 0-.24-.01-.87-.01-1.71-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.89 1.52 2.34 1.08 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.56-1.11-4.56-4.93 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.64 0 0 .84-.27 2.75 1.02.8-.22 1.65-.33 2.5-.33.85 0 1.7.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.37.2 2.39.1 2.64.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85 0 1.34-.01 2.42-.01 2.75 0 .27.18.58.69.48C19.14 20.16 22 16.42 22 12c0-5.523-4.477-10-10-10z"/>
</svg>
</a>
</div>
</div>
</div>
</footer>
<style>
.footer {
background-color: var(--bg-tertiary);
border-top: 1px solid var(--color-surface0);
margin-top: var(--space-24);
padding: var(--space-12) 0 var(--space-6);
position: relative;
}
.footer__container {
position: relative;
}
.back-to-top {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary);
color: var(--text-on-primary);
border: none;
border-radius: var(--radius-full);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all var(--transition-base);
z-index: var(--z-sticky);
box-shadow: var(--shadow-lg);
&.back-to-top--visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
&:hover {
background-color: var(--color-sapphire);
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
&:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
@media (max-width: 768px) {
bottom: var(--space-4);
right: var(--space-4);
width: 40px;
height: 40px;
}
}
.footer__content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-12);
margin-bottom: var(--space-8);
@media (max-width: 1024px) {
grid-template-columns: 1fr;
gap: var(--space-8);
}
}
.footer__brand {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.footer__logo-wrapper {
display: flex;
align-items: center;
gap: var(--space-4);
}
.footer__logo {
width: 48px;
height: 48px;
}
.footer__title {
font-size: var(--font-size-xl);
font-weight: var(--font-bold);
margin: 0;
color: var(--text-primary);
}
.footer__tagline {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin: 0;
}
.footer__description {
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
max-width: 400px;
}
.footer__badges {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.footer__links-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
@media (max-width: 768px) {
grid-template-columns: 1fr;
gap: var(--space-6);
}
}
.footer__links-section {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.footer__links-title {
font-size: var(--font-size-base);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin: 0;
}
.footer__links-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-2);
a {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--text-secondary);
text-decoration: none;
transition: color var(--transition-fast);
&:hover {
color: var(--text-primary);
}
&:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
}
}
.footer__external-icon {
opacity: 0.5;
}
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-6);
border-top: 1px solid var(--color-surface0);
@media (max-width: 768px) {
flex-direction: column;
gap: var(--space-4);
text-align: center;
}
}
.footer__copyright {
color: var(--text-muted);
font-size: var(--font-size-sm);
margin: 0;
}
.footer__social {
display: flex;
gap: var(--space-3);
}
.footer__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--text-secondary);
transition: all var(--transition-fast);
&:hover {
color: var(--text-primary);
transform: translateY(-2px);
}
&:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
}
</style>
<script>
// Back to top button functionality
document.addEventListener('DOMContentLoaded', function() {
const backToTop = document.getElementById('back-to-top');
let scrollTimer;
function toggleBackToTop() {
if (window.scrollY > 500) {
backToTop.classList.add('back-to-top--visible');
} else {
backToTop.classList.remove('back-to-top--visible');
}
}
// Debounced scroll event
window.addEventListener('scroll', function() {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(toggleBackToTop, 100);
});
// Click handler
backToTop.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Initial check
toggleBackToTop();
});
</script>