gb/mercury
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

feat: implement no-client-JavaScript support for back-to-top and search (WIP)

Browse source
This commit is contained in:
grassblock 2025-05-22 21:43:35 +08:00
parent 5c3eba62b1
commit a7fea79d98
4 changed files with 29 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/BackToTop.astro
View file

@ -1,7 +1,8 @@
--- ---
import {siteConfig} from "../config";
const noscript = siteConfig.noClientJavaScript
--- ---
<button id="toTopBtn" title="Go to top">Top</button> {noscript ? <a href="#top"><button id="toTopBtn" style="display: block" title="Go to top">Top</button></a> : <button id="toTopBtn" title="Go to top">Top</button>
<script> <script>
// Get the button // Get the button
let toTopButton = document.getElementById("toTopBtn"); let toTopButton = document.getElementById("toTopBtn");
@ -31,4 +32,4 @@
document.documentElement.scrollTop = 0; document.documentElement.scrollTop = 0;
} }
} }
</script> </script>}

14
src/components/Search.astro
View file

@ -1,5 +1,17 @@
--- ---
import {siteConfig} from "../config";
const noscript = siteConfig.noClientJavaScript
--- ---
{noscript ?
<form class="search-container" action="https://www.google.com/search" method="GET" target="_blank">
<div>
<label for="search-input"><span class="command">search</span></label>
<input name="q" type="text" id="search-input" class="search-input" autocomplete="off" placeholder="Type to search..." />
<input type="hidden" name="as_sitesearch" value={Astro.url.host} />
</div>
<input type="submit" style="display: none" />
</form>
:
<div class="search-container"> <div class="search-container">
<div class="command-prompt"> <div class="command-prompt">
<span class="command">search</span> <span class="command">search</span>
@ -92,7 +104,7 @@
document.getElementById('search-results').innerHTML = '<p>Loading search index...</p>'; document.getElementById('search-results').innerHTML = '<p>Loading search index...</p>';
} }
}); });
</script> </script>}
<style> <style>
.search-container { .search-container {

9
src/config.ts
View file

@ -3,6 +3,13 @@ export const siteConfig = {
title: '/var/log/mercury', title: '/var/log/mercury',
description: 'A blog about software development, technology, and life.', description: 'A blog about software development, technology, and life.',
homepageOgImage: '', homepageOgImage: '',
// features
noClientJavaScript: false, // disable client-side javascript, this will:
// 1. disable all built-in client-side javascript from rendering
// 2. the full text search will be redirected to a search engine
// 3. the comments will be replaced with email reply
// 4. the night mode & back to top will not use Javascript to function
// 5. the neko will be force-disabled
// site components // site components
navBarItems: [ navBarItems: [
// additional items in the navbar // additional items in the navbar
@ -16,7 +23,7 @@ export const siteConfig = {
customFooter: '<i>I have no mouth, and I must SCREAM</i>', customFooter: '<i>I have no mouth, and I must SCREAM</i>',
// comments // comments
comments: { comments: {
type: 'artalk', // 'artalk','giscus','fediverse','hatsu' type: 'artalk', // 'artalk','giscus','fediverse','email','hatsu'
artalk: { artalk: {
instanceDomain: '', // the domain of your artalk instance instanceDomain: '', // the domain of your artalk instance
}, },

5
src/layouts/Layout.astro
View file

@ -15,6 +15,8 @@ interface Props {
ogImage?: string; ogImage?: string;
} }
const noscript = siteConfig.noClientJavaScript
const defaultTitle = siteConfig.title const defaultTitle = siteConfig.title
const formattedRootPath = defaultTitle.toLowerCase().replace(/\s+/g, '-'); const formattedRootPath = defaultTitle.toLowerCase().replace(/\s+/g, '-');
const relativePath = Astro.url.pathname const relativePath = Astro.url.pathname
@ -41,6 +43,7 @@ const { title = pageTitle, description = siteConfig.description, ogImage = "" }
</head> </head>
<body> <body>
<main> <main>
{noscript && <div id="top" style="visibility: hidden">Back To Top</div>}
<div class="container"> <div class="container">
<div class="terminal-path"> <div class="terminal-path">
{path} {path}
@ -70,7 +73,7 @@ const { title = pageTitle, description = siteConfig.description, ogImage = "" }
<p>Powered by <a href="https://git.gb0.dev/gb/mercury" target="_blank"><Logo width={16} height={16} /> mercury</a></p> <p>Powered by <a href="https://git.gb0.dev/gb/mercury" target="_blank"><Logo width={16} height={16} /> mercury</a></p>
</div> </div>
</footer> </footer>
{ siteConfig.neko.enabled && { !noscript || siteConfig.neko.enabled &&
<> <>
<script is:inline define:vars={{ nekoType }}> <script is:inline define:vars={{ nekoType }}>
window.NekoType = nekoType; window.NekoType = nekoType;