feat(website): add PageHeader component

ZAHON · ZAHON · commit 6ca1f129d220 · 2025-01-13T10:05:36.000+01:00
diff --git a/apps/website/src/components/page-header/index.ts b/apps/website/src/components/page-header/index.ts
@@ -0,0 +1 @@
+export { default as PageHeader } from './page-header.astro';
diff --git a/apps/website/src/components/page-header/page-header-github-link/index.ts b/apps/website/src/components/page-header/page-header-github-link/index.ts
@@ -0,0 +1 @@
+export { default as PageHeaderGithubLink } from './page-header-github-link.astro';
diff --git a/apps/website/src/components/page-header/page-header-github-link/page-header-github-link.astro b/apps/website/src/components/page-header/page-header-github-link/page-header-github-link.astro
@@ -0,0 +1,23 @@
+---
+import { Icon } from 'astro-icon/components';
+import { ButtonLink } from '@/ui/astro/button-link';
+import { AccessibleIcon } from '@/ui/astro/accessible-icon';
+import { VisuallyHidden } from '@/ui/astro/visually-hidden';
+import { pageHeaderGithubLinkStyles } from './page-header-github-link.styles';
+---
+
+<ButtonLink.Root
+  href="https://github.com/ZAHON/qwik-primitives"
+  external={true}
+  openInNewTab={true}
+  shape="icon"
+  color="default"
+  variant="ghost"
+  class={pageHeaderGithubLinkStyles()}
+>
+  <AccessibleIcon.Root>
+    <Icon name="github-logo" height={16} width={16} />
+  </AccessibleIcon.Root>
+
+  <VisuallyHidden.Root>View GitHub</VisuallyHidden.Root>
+</ButtonLink.Root>
diff --git a/apps/website/src/components/page-header/page-header-github-link/page-header-github-link.styles.ts b/apps/website/src/components/page-header/page-header-github-link/page-header-github-link.styles.ts
@@ -0,0 +1,3 @@
+import { cva } from 'class-variance-authority';
+
+export const pageHeaderGithubLinkStyles = cva(['hidden', 'lg:inline-flex']);
diff --git a/apps/website/src/components/page-header/page-header-logo-home-link/index.ts b/apps/website/src/components/page-header/page-header-logo-home-link/index.ts
@@ -0,0 +1 @@
+export { default as PageHeaderLogoHomeLink } from './page-header-logo-home-link.astro';
diff --git a/apps/website/src/components/page-header/page-header-logo-home-link/page-header-logo-home-link.astro b/apps/website/src/components/page-header/page-header-logo-home-link/page-header-logo-home-link.astro
@@ -0,0 +1,16 @@
+---
+import { Link } from '@/ui/astro/link';
+import { AccessibleIcon } from '@/ui/astro/accessible-icon';
+import { VisuallyHidden } from '@/ui/astro/visually-hidden';
+import { QwikLogoAndText } from '@/svgs/qwik-logo-and-text';
+
+const pathname = new URL(Astro.request.url).pathname;
+---
+
+<Link.Root aria-current={pathname === '/' ? 'page' : undefined} href="/" color="default" highContrast={true}>
+  <AccessibleIcon.Root>
+    <QwikLogoAndText height={28} width={94} />
+  </AccessibleIcon.Root>
+
+  <VisuallyHidden.Root>Qwik Primitives home page</VisuallyHidden.Root>
+</Link.Root>
diff --git a/apps/website/src/components/page-header/page-header-nav/index.ts b/apps/website/src/components/page-header/page-header-nav/index.ts
@@ -0,0 +1 @@
+export { default as PageHeaderNav } from './page-header-nav.astro';
diff --git a/apps/website/src/components/page-header/page-header-nav/page-header-nav.astro b/apps/website/src/components/page-header/page-header-nav/page-header-nav.astro
@@ -0,0 +1,7 @@
+---
+import { pageHeaderNavStyles } from './page-header-nav.styles';
+---
+
+<nav aria-label="Main navigation" class={pageHeaderNavStyles()}>
+  <slot />
+</nav>
diff --git a/apps/website/src/components/page-header/page-header-nav/page-header-nav.styles.ts b/apps/website/src/components/page-header/page-header-nav/page-header-nav.styles.ts
@@ -0,0 +1,11 @@
+import { cva } from 'class-variance-authority';
+
+export const pageHeaderNavStyles = cva([
+  'px-4',
+  'mx-auto',
+  'h-full',
+  'max-w-screen-2xl',
+  'flex',
+  'items-center',
+  'justify-between',
+]);
diff --git a/apps/website/src/components/page-header/page-header-scroll-watcher/index.ts b/apps/website/src/components/page-header/page-header-scroll-watcher/index.ts
@@ -0,0 +1 @@
+export { default as PageHeaderScrollWatcher } from './page-header-scroll-watcher.astro';
diff --git a/apps/website/src/components/page-header/page-header-scroll-watcher/page-header-scroll-watcher.astro b/apps/website/src/components/page-header/page-header-scroll-watcher/page-header-scroll-watcher.astro
@@ -0,0 +1 @@
+<div data-page-header-scroll-watcher></div>
diff --git a/apps/website/src/components/page-header/page-header-scrolling-script/index.ts b/apps/website/src/components/page-header/page-header-scrolling-script/index.ts
@@ -0,0 +1 @@
+export { default as PageHeaderScrollingScript } from './page-header-scrolling-script.astro';
diff --git a/apps/website/src/components/page-header/page-header-scrolling-script/page-header-scrolling-script.astro b/apps/website/src/components/page-header/page-header-scrolling-script/page-header-scrolling-script.astro
@@ -0,0 +1,23 @@
+<script>
+  (() => {
+    const pageHeader = document.querySelector<HTMLElement>('[data-page-header]');
+    const paheHeaderScrollWatcher = document.querySelector<HTMLDivElement>('[data-page-header-scroll-watcher]');
+
+    if (pageHeader && paheHeaderScrollWatcher) {
+      const navbarObserver = new IntersectionObserver(
+        (entries) => {
+          const isIntersecting = entries[0].isIntersecting;
+
+          if (!isIntersecting) {
+            pageHeader.setAttribute('data-scrolling-down', '');
+          } else {
+            pageHeader.removeAttribute('data-scrolling-down');
+          }
+        },
+        { rootMargin: '30px 0px 0px 0px' }
+      );
+
+      navbarObserver.observe(paheHeaderScrollWatcher);
+    }
+  })();
+</script>
diff --git a/apps/website/src/components/page-header/page-header-theme-switch/index.ts b/apps/website/src/components/page-header/page-header-theme-switch/index.ts
@@ -0,0 +1 @@
+export { PageHeaderThemeSwitch } from './page-header-theme-switch';
diff --git a/apps/website/src/components/page-header/page-header-theme-switch/page-header-theme-switch.tsx b/apps/website/src/components/page-header/page-header-theme-switch/page-header-theme-switch.tsx
@@ -0,0 +1,24 @@
+import { component$, $ } from '@builder.io/qwik';
+import { BaseButton } from '@/ui/qwik/base-button';
+import { AccessibleIcon } from '@/ui/qwik/accessible-icon';
+import { VisuallyHidden } from '@/ui/qwik/visually-hidden';
+import { SunIcon } from '@/ui/qwik/icons/sun-icon';
+import { MoonIcon } from '@/ui/qwik/icons/moon-icon';
+
+export const PageHeaderThemeSwitch = component$(() => {
+  const handleClick$ = $((event: PointerEvent, currentTarget: HTMLButtonElement) => {
+    const toggleThemeEvent = new CustomEvent('toggle-theme', { bubbles: true, cancelable: false });
+    currentTarget.dispatchEvent(toggleThemeEvent);
+  });
+
+  return (
+    <BaseButton.Root shape="icon" color="default" variant="ghost" onClick$={handleClick$}>
+      <AccessibleIcon.Root>
+        <SunIcon height={16} width={16} class="block dark:hidden" />
+        <MoonIcon height={16} width={16} class="hidden dark:block" />
+      </AccessibleIcon.Root>
+
+      <VisuallyHidden.Root>Toggle theme</VisuallyHidden.Root>
+    </BaseButton.Root>
+  );
+});
diff --git a/apps/website/src/components/page-header/page-header-version-badge/index.ts b/apps/website/src/components/page-header/page-header-version-badge/index.ts
@@ -0,0 +1 @@
+export { default as PageHeaderVersionBadge } from './page-header-version-badge.astro';
diff --git a/apps/website/src/components/page-header/page-header-version-badge/page-header-version-badge.astro b/apps/website/src/components/page-header/page-header-version-badge/page-header-version-badge.astro
@@ -0,0 +1,18 @@
+---
+import { Badge } from '@/ui/astro/badge';
+
+let version: string | undefined = undefined;
+
+try {
+  const response = await fetch('https://registry.npmjs.org/qwik-primitives/latest');
+  const data = (await response.json()) as unknown;
+
+  if (typeof data === 'object' && data !== null && 'version' in data && typeof data.version === 'string') {
+    version = data.version;
+  }
+} catch {
+  version = undefined;
+}
+---
+
+{version && <Badge.Root size="2">v{version}</Badge.Root>}
diff --git a/apps/website/src/components/page-header/page-header.astro b/apps/website/src/components/page-header/page-header.astro
@@ -0,0 +1,43 @@
+---
+import { QuickNav } from '@/components/quick-nav';
+import { MobileMenu } from '@/components/mobile-menu';
+import { Separator } from '@/ui/astro/separator';
+import { PageHeaderScrollWatcher } from './page-header-scroll-watcher';
+import { PageHeaderNav } from './page-header-nav';
+import { PageHeaderLogoHomeLink } from './page-header-logo-home-link';
+import { PageHeaderVersionBadge } from './page-header-version-badge';
+import { PageHeaderGithubLink } from './page-header-github-link';
+import { PageHeaderThemeSwitch } from './page-header-theme-switch';
+import { PageHeaderScrollingScript } from './page-header-scrolling-script';
+import { pageHeaderStyles } from './page-header.styles';
+
+const pathname = new URL(Astro.request.url).pathname;
+const variant = ['/'].includes(pathname) ? 'ghost' : 'default';
+---
+
+{variant === 'ghost' && <PageHeaderScrollWatcher />}
+
+<header data-page-header={variant === 'ghost' ? '' : undefined} class={pageHeaderStyles({ variant })}>
+  <PageHeaderNav>
+    <div class="flex items-center gap-x-3">
+      <PageHeaderLogoHomeLink />
+      <PageHeaderVersionBadge />
+    </div>
+
+    <div class="flex h-full items-center">
+      <QuickNav variant="desktop" />
+
+      <Separator.Root orientation="vertical" class="ml-3 mr-1.5 hidden h-1/2 lg:block" />
+
+      <div class="flex gap-x-1.5">
+        <PageHeaderGithubLink />
+        <PageHeaderThemeSwitch />
+        <MobileMenu>
+          <QuickNav slot="header" variant="mobile" />
+        </MobileMenu>
+      </div>
+    </div>
+  </PageHeaderNav>
+
+  {variant === 'ghost' && <PageHeaderScrollingScript />}
+</header>
diff --git a/apps/website/src/components/page-header/page-header.styles.ts b/apps/website/src/components/page-header/page-header.styles.ts
@@ -0,0 +1,28 @@
+import { cva } from 'class-variance-authority';
+
+export const pageHeaderStyles = cva(['fixed', 'z-50', 'top-0', 'h-12', 'w-dvw'], {
+  variants: {
+    variant: {
+      default: [
+        'bg-background',
+        'shadow-[var(--page-header-shadow-color)_0px_1px_0px_0px]',
+
+        '[--page-header-shadow-color:#00002D17]',
+        'dark:[--page-header-shadow-color:#D3EDF81D]',
+      ],
+      ghost: [
+        'bg-transparent',
+        '[--page-header-shadow-color:transparent]',
+        'shadow-[var(--page-header-shadow-color)_0px_1px_0px_0px]',
+
+        'motion-safe:transition',
+        'motion-safe:ease-linear',
+        'motion-safe:duration-100',
+
+        'data-[scrolling-down]:bg-background',
+        'data-[scrolling-down]:[--page-header-shadow-color:#00002D17]',
+        'dark:data-[scrolling-down]:[--page-header-shadow-color:#D3EDF81D]',
+      ],
+    },
+  },
+});

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as PageHeader } from './page-header.astro';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as PageHeaderGithubLink } from './page-header-github-link.astro';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { cva } from 'class-variance-authority';`
	`2`	`+`
	`3`	`+export const pageHeaderGithubLinkStyles = cva(['hidden', 'lg:inline-flex']);`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as PageHeaderLogoHomeLink } from './page-header-logo-home-link.astro';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as PageHeaderNav } from './page-header-nav.astro';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as PageHeaderScrollWatcher } from './page-header-scroll-watcher.astro';`