feat: enhance blog layout with footer and improved navigation; add SVG icons for GitHub and Bluesky

This commit is contained in:
2026-05-11 10:23:16 +10:00
parent 0834d30e9b
commit 7091b6844e
7 changed files with 150 additions and 85 deletions

View File

@@ -247,14 +247,17 @@ class StaticBlogGenerator {
'</head>',
'<body class="blog-page">',
'<nav class="quick-links" aria-label="Primary">',
' <div class="quick-links-inner">',
this.renderHeaderLinks(),
' <a class="quick-link rss-link" href="/rss.xml" aria-label="RSS feed" title="RSS feed">',
' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"/></svg>',
' RSS',
' </a>',
' <a class="quick-link rss-link" href="/rss.xml" aria-label="RSS feed" title="RSS feed">',
' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"/></svg>',
' RSS',
' </a>',
' </div>',
'</nav>',
this.renderScrollTopBar(),
bodyHtml,
this.renderFooter(),
' <script type="module" src="/scripts/blogPage.js"></script>',
'</body>',
'</html>'
@@ -274,16 +277,37 @@ class StaticBlogGenerator {
renderScrollTopBar() {
return [
'<header class="blog-scroll-topbar" data-blog-scroll-topbar>',
' <a class="blog-scroll-logo-link" href="/" aria-label="Back to main site">',
' <img src="/logos/LogoFull.svg" alt="lit.ruv.wtf" class="blog-scroll-logo" />',
' </a>',
' <nav class="blog-scroll-links" aria-label="Scrolled navigation">',
' <div class="blog-scroll-topbar-inner">',
' <a class="blog-scroll-logo-link" href="/" aria-label="Back to main site">',
' <img src="/logos/LogoFull.svg" alt="lit.ruv.wtf" class="blog-scroll-logo" />',
' </a>',
' <nav class="blog-scroll-links" aria-label="Scrolled navigation">',
this.renderHeaderLinks(),
' </nav>',
' </nav>',
' </div>',
'</header>'
].join('\n');
}
/**
* @returns {string}
*/
renderFooter() {
return [
'<footer class="blog-footer">',
' <div class="blog-footer-inner">',
' <a href="/" class="blog-footer-logo" aria-label="Back to main site">',
' <img src="/logos/LogoFull.svg" alt="lit.ruv.wtf" class="blog-footer-logo-img" />',
' </a>',
' <div class="blog-footer-links">',
this.renderHeaderLinks(),
' </div>',
` <p class="blog-footer-copy">&copy; ${new Date().getFullYear()} lit.ruv.wtf</p>`,
' </div>',
'</footer>',
].join('\n');
}
/**
* @returns {string}
*/