nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed shortcut label to be platform specific + home removed

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-09 10:53:13 +02:00
parent 12c7ead7df
commit 7daf044c9f
2 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/react/Search.tsx
+10 -6
View File
@@ -34,13 +34,17 @@ export default function Search() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [activeIdx, setActiveIdx] = useState(0); const [activeIdx, setActiveIdx] = useState(0);
const [isMac, setIsMac] = useState(false);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const listRef = useRef<HTMLUListElement>(null); const listRef = useRef<HTMLUListElement>(null);
useEffect(() => {
setIsMac(/Mac|iPhone|iPad|iPod/i.test(navigator.userAgent));
}, []);
// Global Cmd/Ctrl+K + Esc listener // Global Cmd/Ctrl+K + Esc listener
useEffect(() => { useEffect(() => {
function onKey(e: KeyboardEvent) { function onKey(e: KeyboardEvent) {
const isMac = navigator.platform.toLowerCase().includes('mac');
const mod = isMac ? e.metaKey : e.ctrlKey; const mod = isMac ? e.metaKey : e.ctrlKey;
if (mod && e.key.toLowerCase() === 'k') { if (mod && e.key.toLowerCase() === 'k') {
e.preventDefault(); e.preventDefault();
@@ -51,7 +55,7 @@ export default function Search() {
} }
window.addEventListener('keydown', onKey); window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey);
}, [open]); }, [open, isMac]);
// Lazy fetch posts on first open // Lazy fetch posts on first open
useEffect(() => { useEffect(() => {
@@ -124,8 +128,8 @@ export default function Search() {
<button <button
type="button" type="button"
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
aria-label="Search posts (Ctrl+K)" aria-label={`Search posts (${isMac ? '⌘' : 'Ctrl'}+K)`}
title="Search (Ctrl+K)" title={`Search (${isMac ? '⌘' : 'Ctrl'}+K)`}
className="text-subtext0 hover:text-text transition-colors flex items-center gap-2 px-2 py-1 rounded-md hover:bg-surface0/60" className="text-subtext0 hover:text-text transition-colors flex items-center gap-2 px-2 py-1 rounded-md hover:bg-surface0/60"
> >
<svg <svg
@@ -143,8 +147,8 @@ export default function Search() {
<circle cx="11" cy="11" r="8" /> <circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" /> <path d="m21 21-4.3-4.3" />
</svg> </svg>
<kbd className="hidden md:inline-flex items-center gap-0.5 text-[10px] font-mono text-subtext0 px-1.5 py-0.5 rounded border border-surface1 bg-surface0/60"> <kbd className="hidden md:inline-flex items-center gap-1 text-[10px] font-mono text-subtext0 px-1.5 py-0.5 rounded border border-surface1 bg-surface0/60">
<span>⌘</span><span>K</span> <span>{isMac ? '⌘' : 'Ctrl'}</span><span className="opacity-50">+</span><span>K</span>
</kbd> </kbd>
</button> </button>
frontend/src/layouts/Layout.astro
-1
View File
@@ -111,7 +111,6 @@ const fullTitle = `${title} | ${siteConfig.title}`;
)} )}
</div> </div>
<div class="flex gap-2 md:gap-3 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end"> <div class="flex gap-2 md:gap-3 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end">
<a href="/" class="text-subtext0 hover:text-text transition-colors px-2 py-1">Home</a>
<Search client:load /> <Search client:load />
{isAdmin && ( {isAdmin && (
<div class="flex items-center gap-1 pl-2 ml-1 border-l border-surface1/60"> <div class="flex items-center gap-1 pl-2 ml-1 border-l border-surface1/60">