@kamod-ch/preactpress 1.0.0

package/src/client/theme-default/NavLinks.tsx

@@ -0,0 +1,65 @@
+import type { FunctionalComponent } from 'preact'
+import type { NavItem } from '../../node/siteConfig.js'
+
+interface NavLinksProps {
+  items: NavItem[]
+  routePath: string
+  base: string
+  isActive: (routePath: string, link: string) => boolean
+  withBase: (base: string, link: string) => string
+}
+
+function navItemActive(
+  routePath: string,
+  item: NavItem,
+  isActive: NavLinksProps['isActive']
+): boolean {
+  if (item.link && isActive(routePath, item.link)) return true
+  return (item.items ?? []).some((child) => navItemActive(routePath, child, isActive))
+}
+
+const NavLinks: FunctionalComponent<NavLinksProps> = ({
+  items,
+  routePath,
+  base,
+  isActive,
+  withBase
+}) => (
+  <>
+    {items.map((item) => {
+      if (item.items?.length) {
+        const active = navItemActive(routePath, item, isActive)
+        return (
+          <details key={item.text} class={`pp-nav-dropdown${active ? ' active' : ''}`}>
+            <summary>{item.text}</summary>
+            <div class="pp-nav-dropdown-menu">
+              <NavLinks
+                items={item.items}
+                routePath={routePath}
+                base={base}
+                isActive={isActive}
+                withBase={withBase}
+              />
+            </div>
+          </details>
+        )
+      }
+
+      if (!item.link) return null
+
+      const active = isActive(routePath, item.link)
+      return (
+        <a
+          key={item.link}
+          class={active ? 'active' : ''}
+          href={withBase(base, item.link)}
+          aria-current={active ? 'page' : undefined}
+        >
+          {item.text}
+        </a>
+      )
+    })}
+  </>
+)
+
+export default NavLinks

package/src/client/theme-default/SidebarNav.tsx

@@ -0,0 +1,103 @@
+import type { FunctionalComponent } from 'preact'
+import type { SidebarGroup, SidebarItem } from '../../node/siteConfig.js'
+
+interface SidebarNavProps {
+  groups: SidebarGroup[]
+  routePath: string
+  withBase: (base: string, link: string) => string
+  base: string
+  isActive: (routePath: string, link: string) => boolean
+}
+
+const SidebarItems: FunctionalComponent<{
+  items: SidebarItem[]
+  depth: number
+  routePath: string
+  base: string
+  withBase: SidebarNavProps['withBase']
+  isActive: SidebarNavProps['isActive']
+}> = ({ items, depth, routePath, base, withBase, isActive }) => (
+  <ul class={depth > 0 ? 'pp-sidebar-nested' : undefined}>
+    {items.map((item) => {
+      const nested = item.items?.length
+      const key = item.link ?? item.text
+
+      if (nested) {
+        return (
+          <li key={key} class="pp-sidebar-nested-group">
+            <details class="pp-sidebar-nested-panel" open={item.collapsed !== true}>
+              <summary>{item.text}</summary>
+              <SidebarItems
+                items={item.items!}
+                depth={depth + 1}
+                routePath={routePath}
+                base={base}
+                withBase={withBase}
+                isActive={isActive}
+              />
+            </details>
+          </li>
+        )
+      }
+
+      if (!item.link) return null
+
+      const active = isActive(routePath, item.link)
+      return (
+        <li key={item.link}>
+          <a
+            class={active ? 'active' : ''}
+            href={withBase(base, item.link)}
+            aria-current={active ? 'page' : undefined}
+          >
+            {item.text}
+          </a>
+        </li>
+      )
+    })}
+  </ul>
+)
+
+const SidebarNav: FunctionalComponent<SidebarNavProps> = ({
+  groups,
+  routePath,
+  withBase,
+  base,
+  isActive
+}) => (
+  <>
+    {groups.map((group, gi) => {
+      const body = (
+        <SidebarItems
+          items={group.items}
+          depth={0}
+          routePath={routePath}
+          base={base}
+          withBase={withBase}
+          isActive={isActive}
+        />
+      )
+
+      if (group.text) {
+        return (
+          <details
+            key={gi}
+            class="pp-sidebar-group pp-sidebar-group-collapsible"
+            open={group.collapsed !== true}
+          >
+            <summary class="pp-sidebar-heading">{group.text}</summary>
+            {body}
+          </details>
+        )
+      }
+
+      return (
+        <div key={gi} class="pp-sidebar-group">
+          {body}
+        </div>
+      )
+    })}
+  </>
+)
+
+export default SidebarNav

package/src/client/theme-default/SocialLinks.tsx

@@ -0,0 +1,41 @@
+import type { FunctionalComponent } from 'preact'
+import type { SocialLink } from '../../shared/socialIcons.js'
+import { socialIconSvg, socialLinkLabel } from '../../shared/socialIcons.js'
+
+export interface SocialLinksProps {
+  links: SocialLink[]
+}
+
+const SocialLinks: FunctionalComponent<SocialLinksProps> = ({ links }) => {
+  if (!links.length) return null
+
+  return (
+    <nav class="pp-social-links" aria-label="Social links">
+      {links.map((item, index) => {
+        const svg = socialIconSvg(item.icon)
+        const label = socialLinkLabel(item.icon, item.ariaLabel)
+        return (
+          <a
+            key={`${item.link}-${index}`}
+            class="pp-social-link"
+            href={item.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={label}
+            title={label}
+          >
+            {svg ? (
+              <span class="pp-social-icon" dangerouslySetInnerHTML={{ __html: svg }} />
+            ) : (
+              <span class="pp-social-icon pp-social-icon-fallback" aria-hidden="true">
+                ↗
+              </span>
+            )}
+          </a>
+        )
+      })}
+    </nav>
+  )
+}
+
+export default SocialLinks

package/src/client/theme-default/ThemeToggle.tsx

@@ -0,0 +1,79 @@
+import type { FunctionalComponent } from 'preact'
+import { useEffect } from 'preact/hooks'
+import {
+  PREACTPRESS_THEME_STORAGE_KEY,
+  applyTheme,
+  readStoredTheme,
+  type PreactpressStoredTheme
+} from '../../shared/theme.js'
+
+function toggleTheme(): void {
+  const stored = readStoredTheme()
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  const isDark = stored === 'dark' || (stored === null && prefersDark)
+  const next: PreactpressStoredTheme = isDark ? 'light' : 'dark'
+  applyTheme(next)
+  try {
+    localStorage.setItem(PREACTPRESS_THEME_STORAGE_KEY, next)
+  } catch {
+    /* ignore quota / private mode */
+  }
+}
+
+const ThemeToggle: FunctionalComponent = () => {
+  useEffect(() => {
+    function onStorage(e: StorageEvent): void {
+      if (e.key !== PREACTPRESS_THEME_STORAGE_KEY) return
+      const v = e.newValue
+      applyTheme(v === 'light' || v === 'dark' ? v : null)
+    }
+    window.addEventListener('storage', onStorage)
+    return () => window.removeEventListener('storage', onStorage)
+  }, [])
+
+  return (
+    <button
+      type="button"
+      class="pp-theme-toggle"
+      onClick={toggleTheme}
+      aria-label="Toggle light and dark theme"
+    >
+      <span class="pp-theme-toggle-moon" aria-hidden="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
+          />
+        </svg>
+      </span>
+      <span class="pp-theme-toggle-sun" aria-hidden="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+          />
+        </svg>
+      </span>
+    </button>
+  )
+}
+
+export default ThemeToggle

package/src/client/theme-default/index.ts

@@ -0,0 +1 @@
+export { default } from './Layout.js'