load metrics component client-side

[narthur]

No description provided.

[Copilot]

Pull Request Overview

This PR shifts the Metrics component to client-side loading and updates related configurations and event handlers.

• Load Metrics client-side via client:load
• Refactor event handlers in Header.svelte and clean up CSS
• Add dependency auditing with Knip and pin tool versions

Reviewed Changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/pages/index.astro	Added client:load to <Metrics> to defer rendering until on client
src/components/Header.svelte	Switched native onclick handlers, added Escape key support, removed button CSS overrides
package.json	Added knip script, moved types and tools to devDependencies, removed node-fetch
.tool-versions	Pinned pnpm and nodejs versions
.github/workflows/ci.yml	Introduced CI job to run knip

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (3)

src/components/Header.svelte:283

• [nitpick] The custom CSS for .nav-actions .button.secondary was removed, which may impact the Sign In button styling. Verify that the default Button variant covers these styles or migrate them into the component.

.nav-actions .button.secondary {

package.json:15

• Removed node-fetch from dependencies—ensure there are no remaining imports of node-fetch or update fetch calls to use the global fetch provided by the runtime.

"node-fetch": "^3.3.2",

src/components/Header.svelte:47

• [nitpick] Prefer using Svelte's on:click directive instead of native onclick to leverage Svelte's event handling and keep code consistent.

onclick={closeMenu}

[Copilot]

Pull Request Overview

This PR modifies the application to load the Metrics component client-side while updating event binding syntax in the Header component and adding new development tooling and CI configurations.

• Adds client:load directive to the Metrics component in index.astro.
• Changes event binding attributes and adjusts markup in Header.svelte.
• Updates package.json scripts and dependencies and introduces CI workflows along with version management.

Reviewed Changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/pages/index.astro	Updated Metrics component to load client-side
src/components/Header.svelte	Revised event binding attributes and adjusted markup/styles
package.json	Added new commands and streamlined dependencies
.tool-versions	Specified pnpm and nodejs versions
.github/workflows/ci.yml	Introduced CI workflows for linting, building, and TypeScript checking

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (3)

src/components/Header.svelte:45

• Changing the Svelte-specific event binding from on:click to onclick may prevent the handler from working as expected. Please revert to the correct Svelte syntax (on:click) to ensure proper event handling.

<div class="backdrop" onclick={closeMenu} aria-hidden="true"></div>

src/components/Header.svelte:66

• The replacement of on:click with onclick for the toggleTheme handler may not trigger the Svelte reactivity. Reintroduce on:click to maintain expected functionality.

onclick={toggleTheme}

src/components/Header.svelte:109

• Using onclick instead of Svelte's on:click for the menu toggle button could break the event binding. Please use on:click to ensure consistency with Svelte’s binding conventions.

onclick={toggleMenu}