feat: Add progressive enhancement for SVG logo in header

This commit is contained in:
Paul Gauthier (aider) 2025-03-20 08:06:28 -07:00
parent bbf219ecd2
commit bed836b15a

View file

@ -13,7 +13,7 @@
<header>
<div class="container">
<nav>
<a href="#" class="logo">aider</a>
<a href="#" class="logo" id="logo-container">aider</a>
<div class="nav-links">
<a href="#features">Features</a>
<a href="#getting-started">Getting Started</a>
@ -505,5 +505,31 @@ aider --model o3-mini --api-key openai=&lt;key&gt;</code></pre>
<!-- Add Prism.js for syntax highlighting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<!-- Logo Progressive Enhancement -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const logoContainer = document.getElementById('logo-container');
const textContent = logoContainer.textContent; // Save the text for fallback
// Create new image element
const logoImg = new Image();
logoImg.src = '/assets/logo.svg';
logoImg.alt = 'Aider Logo';
logoImg.style.height = '1.8rem';
logoImg.style.verticalAlign = 'middle';
// Only replace if image loads successfully
logoImg.onload = function() {
logoContainer.textContent = ''; // Clear text
logoContainer.appendChild(logoImg);
};
// If image fails to load, do nothing (keep the text)
logoImg.onerror = function() {
console.log('SVG logo failed to load, keeping text fallback');
};
});
</script>
</body>
</html>