Skip to content

fix: search button is shown on 404 if it starts with awesome privacysomething #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dottmp merged 2 commits into from
Apr 10, 2026
Merged

fix: search button is shown on 404 if it starts with awesome privacysomething #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a681e7
feat: theme flickering (#138)
dottmp Apr 10, 2026
8a5c88c
fix: check base or base with / in navbar to correctly render search b…
dottmp Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 1 addition & 7 deletions src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
<!doctype html>
<html lang="en" data-theme="catppuccin">
<html lang="en" data-theme="kanagawa">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
try {
let theme = localStorage.getItem('theme');
if (theme) document.documentElement.setAttribute('data-theme', theme);
} catch (e) {}
</script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
Expand Down
25 changes: 15 additions & 10 deletions src/lib/components/navbar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,25 @@
import Search from '$lib/features/awesome-privacy/components/search.svelte';
import { cn } from '$lib/utils/cn';

const drawerId = 'navbar-drawer';

let { search }: { search: LayoutData['search'] } = $props();
const DRAWER_ID = 'navbar-drawer';

let drawer: HTMLInputElement | undefined;

function isPath(base: string) {
const pathname = page.url.pathname;

return pathname === base || pathname.startsWith(base + '/');
}

function toggleDrawer() {
const drawer = document.getElementById(drawerId) as HTMLInputElement;
const drawer = document.getElementById(DRAWER_ID) as HTMLInputElement;

if (drawer) {
drawer.checked = !drawer.checked;
}
}

let { search }: { search: LayoutData['search'] } = $props();
</script>

<nav class="w-full bg-base-100 shadow-sm">
Expand All @@ -37,9 +44,7 @@

<div class="ml-auto flex items-center gap-2">
<!-- awesome-privacy search trigger (desktop) -->
<div
class={cn('hidden', page.url.pathname.startsWith(resolve('/awesome-privacy')) && 'block')}
>
<div class={cn('hidden', isPath(resolve('/awesome-privacy')) && 'block')}>
<Search {search} />
</div>

Expand All @@ -48,17 +53,17 @@

<!-- mobile drawer -->
<div class="drawer drawer-end ml-auto w-fit md:hidden">
<input bind:this={drawer} id={drawerId} type="checkbox" class="drawer-toggle" />
<input bind:this={drawer} id={DRAWER_ID} type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<label
for={drawerId}
for={DRAWER_ID}
class="drawer-button btn btn-square text-base-content/50 btn-ghost"
>
<Icons.menu class="text-lg" />
</label>
</div>
<div class="drawer-side">
<label for={drawerId} aria-label="close drawer" class="drawer-overlay"></label>
<label for={DRAWER_ID} aria-label="close drawer" class="drawer-overlay"></label>

<div class="flex min-h-full w-80 flex-col bg-base-200 *:w-full">
<div class="w-full bg-base-100 pt-2 pb-1">
Expand Down
15 changes: 13 additions & 2 deletions src/lib/components/theme-change.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,18 @@
import { THEMES } from '$lib/configs';
import { cn } from '$lib/utils/cn';

const DEFAULT = 'kanagawa';

type ThemeChangeProps = HTMLAttributes<HTMLDivElement> & {
variant?: 'dropdown' | 'select';
};

let { variant = 'dropdown', class: klass, ...props }: ThemeChangeProps = $props();

let defaultTheme = $state(
typeof window !== 'undefined' ? (localStorage.getItem('theme') ?? DEFAULT) : DEFAULT
);

onMount(() => {
themeChange(false);
});
Expand All @@ -30,7 +36,6 @@
<button tabindex="0" class="btn gap-1 btn-ghost btn-sm">
<span class="sr-only">Select Theme</span>
<Icons.theme class="size-4" />

<Icons.chevronDown class="inline-block size-4 opacity-60" />
</button>
<ul
Expand All @@ -47,12 +52,18 @@
class="theme-controller btn btn-block w-full justify-start capitalize btn-ghost sm:btn-sm"
aria-label={theme}
value={theme}
checked={theme === defaultTheme}
/>
</li>
{/each}
</ul>
{:else}
<select data-choose-theme class="select appearance-none" aria-label="Select Theme">
<select
data-choose-theme
class="select appearance-none"
aria-label="Select Theme"
bind:value={defaultTheme}
>
{#each THEMES as theme (theme)}
<option class="theme-controller" aria-label={theme} value={theme}>{theme}</option>
{/each}
Expand Down
Loading