stropress 0.0.1

package/dist/theme-default/src/components/HomePage.astro

@@ -0,0 +1,198 @@
+---
+import Icon from "./Icon.astro";
+import { getResolvedSiteConfig, type HomeAction } from "../lib/config";
+
+const resolvedConfig = getResolvedSiteConfig(Astro.url.pathname);
+const homeConfig = resolvedConfig.homeConfig;
+const siteTitle = resolvedConfig.siteTitle;
+const siteDescription = resolvedConfig.siteDescription;
+
+const heroTitle = homeConfig.title || siteTitle;
+const heroTagline = homeConfig.tagline || siteDescription;
+const heroDescription = homeConfig.description || siteDescription;
+const actions = homeConfig.actions || [];
+const features = homeConfig.features || [];
+
+const getActionClass = (action: HomeAction) =>
+  action.theme === "alt" ? "action alt" : "action brand";
+---
+
+<section class="hero">
+  <p class="eyebrow">Stropress</p>
+  <h1>{heroTitle}</h1>
+  <p class="tagline">{heroTagline}</p>
+  <p class="description">{heroDescription}</p>
+
+  {
+    actions.length > 0 && (
+      <div class="actions">
+        {actions.map((action) => (
+          <a class={getActionClass(action)} href={action.link}>
+            {action.text}
+          </a>
+        ))}
+      </div>
+    )
+  }
+</section>
+
+{
+  features.length > 0 && (
+    <section class="features">
+      {features.map((feature) => (
+        <article class="feature-card">
+          <Icon
+            name={feature.icon}
+            class="feature-icon"
+            aria-hidden="true"
+            stroke-width={1.8}
+          />
+          <h2>{feature.title}</h2>
+          <p>{feature.details}</p>
+        </article>
+      ))}
+    </section>
+  )
+}
+
+<style>
+  .hero {
+    padding: 1.5rem;
+  }
+
+  .eyebrow {
+    display: inline-flex;
+    margin: 0 0 1rem;
+    padding: 0.15rem 0;
+    border-radius: 0;
+    background: transparent;
+    color: rgba(var(--foreground-color) / 1);
+    font-size: 0.82rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    border-bottom: 1px solid
+      color-mix(in srgb, rgba(var(--foreground-color) / 1) 18%, transparent);
+  }
+
+  h1 {
+    margin: 0;
+    max-width: 10ch;
+    font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
+    font-size: clamp(3.4rem, 9vw, 6.8rem);
+    line-height: 0.95;
+    letter-spacing: -0.04em;
+  }
+
+  .tagline {
+    margin: 1.25rem 0 0;
+    max-width: 24ch;
+    font-size: clamp(1.35rem, 3vw, 2rem);
+    color: rgba(var(--foreground-color) / 1);
+  }
+
+  .description {
+    margin: 1rem 0 0;
+    max-width: 60ch;
+    font-size: 1.05rem;
+    line-height: 1.8;
+    color: rgba(var(--muted-color) / 1);
+  }
+
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.9rem;
+    margin-top: 2rem;
+  }
+
+  .action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 148px;
+    padding: 0.9rem 1.2rem;
+    border-radius: 0;
+    font-weight: 700;
+    transition:
+      transform 140ms ease,
+      background 140ms ease;
+  }
+
+  .action:hover {
+    transform: translateY(-1px);
+  }
+
+  .action.brand {
+    background: rgba(var(--primary-color) / 1);
+    color: rgba(var(--primary-foreground-color) / 1);
+  }
+
+  .action.alt {
+    background: rgba(var(--secondary-color) / 1);
+    border: 1px solid
+      color-mix(in srgb, rgba(var(--foreground-color) / 1) 14%, transparent);
+    color: rgba(var(--foreground-color) / 1);
+  }
+
+  .features {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0;
+    margin-top: 3rem;
+    border-top: 1px solid
+      color-mix(in srgb, rgba(var(--foreground-color) / 1) 12%, transparent);
+  }
+
+  .feature-card {
+    padding: 1.5rem;
+    border-right: 1px solid
+      color-mix(in srgb, rgba(var(--foreground-color) / 1) 12%, transparent);
+    background: transparent;
+  }
+
+  .feature-card:last-child {
+    border-right: 0;
+  }
+
+  .feature-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.4rem;
+    height: 2.4rem;
+    margin-bottom: 1rem;
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    color: rgba(var(--foreground-color) / 1);
+  }
+
+  .feature-card h2 {
+    margin: 0;
+    font-size: 1.1rem;
+  }
+
+  .feature-card p {
+    margin: 0.75rem 0 0;
+    color: rgba(var(--muted-color) / 1);
+    line-height: 1.7;
+  }
+
+  @media (max-width: 900px) {
+    .features {
+      grid-template-columns: 1fr;
+    }
+
+    .feature-card {
+      padding-right: 0;
+      border-right: 0;
+      border-bottom: 1px solid
+        color-mix(in srgb, rgba(var(--foreground-color) / 1) 12%, transparent);
+    }
+
+    .feature-card:last-child {
+      border-bottom: 0;
+    }
+  }
+</style>

package/dist/theme-default/src/components/Icon.astro

@@ -0,0 +1,78 @@
+---
+import GithubIcon from "./GithubIcon.astro";
+import { icons as lucideIcons, type LucideIconComponent } from "@lucide/astro";
+
+interface Props {
+  name?: string;
+  class?: string;
+  color?: string;
+  size?: number | string;
+  title?: string;
+  "stroke-width"?: number | string;
+  "aria-hidden"?: "true" | "false";
+}
+
+const {
+  name,
+  class: className,
+  color,
+  size,
+  title,
+  "stroke-width": strokeWidth,
+  "aria-hidden": ariaHidden,
+} = Astro.props;
+
+const normalizeIconName = (iconName: string) =>
+  iconName
+    .trim()
+    .replace(/(^[a-z])|[-_\s]+([a-zA-Z0-9])/g, (_, first, next) =>
+      (first || next).toUpperCase(),
+    )
+    .replace(/[^a-zA-Z0-9]/g, "");
+
+const resolveIconComponent = (iconName?: string) => {
+  if (!iconName) {
+    return undefined;
+  }
+
+  const normalized = normalizeIconName(iconName);
+  const icon = lucideIcons[normalized] || lucideIcons[iconName];
+
+  return typeof icon === "function" ? (icon as LucideIconComponent) : undefined;
+};
+
+const isGithubIcon = (iconName?: string) => {
+  if (!iconName) {
+    return false;
+  }
+
+  const normalized = normalizeIconName(iconName);
+  return normalized.toLowerCase() === "github";
+};
+
+const LucideIcon = resolveIconComponent(name);
+const useGithubIcon = isGithubIcon(name);
+---
+
+{
+  useGithubIcon ? (
+    <GithubIcon
+      class={className}
+      color={color}
+      size={size}
+      title={title}
+      aria-hidden={ariaHidden}
+    />
+  ) : (
+    LucideIcon && (
+      <LucideIcon
+        class={className}
+        color={color}
+        size={size}
+        title={title}
+        stroke-width={strokeWidth}
+        aria-hidden={ariaHidden}
+      />
+    )
+  )
+}

package/dist/theme-default/src/components/LocaleSelect.astro

@@ -0,0 +1,187 @@
+---
+import Icon from "./Icon.astro";
+import type { LocaleLink } from "../lib/config";
+
+interface Props {
+  localeLinks: LocaleLink[];
+}
+
+const { localeLinks } = Astro.props;
+---
+
+{
+  localeLinks.length > 1 && (
+    <div class="locale-switcher" data-locale-switcher>
+      <button
+        type="button"
+        class="locale-popover-trigger"
+        aria-label="Switch language"
+        aria-haspopup="menu"
+        aria-expanded="false"
+        data-locale-trigger
+      >
+        <Icon name="Languages" class="locale-trigger-icon" aria-hidden="true" />
+        <div class="locale-trigger-label">
+          {localeLinks.find((locale) => locale.isActive)?.label}
+        </div>
+      </button>
+      <div
+        class="locale-popover"
+        role="menu"
+        data-state="closed"
+        data-locale-popover
+      >
+        {localeLinks.map((locale) => (
+          <a
+            href={locale.link}
+            role="menuitem"
+            class="locale-popover-item"
+            data-state={locale.isActive ? "active" : "inactive"}
+          >
+            {locale.label}
+          </a>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+<script>
+  const switcher = document.querySelector<HTMLElement>(
+    "[data-locale-switcher]",
+  );
+  const trigger = switcher?.querySelector<HTMLButtonElement>(
+    "[data-locale-trigger]",
+  );
+  const popover = switcher?.querySelector<HTMLElement>("[data-locale-popover]");
+
+  const setOpen = (open: boolean) => {
+    if (!trigger || !popover) {
+      return;
+    }
+
+    popover.dataset.state = open ? "open" : "closed";
+    trigger.setAttribute("aria-expanded", open ? "true" : "false");
+  };
+
+  trigger?.addEventListener("click", () => {
+    if (!popover) {
+      return;
+    }
+
+    setOpen(popover.dataset.state !== "open");
+  });
+
+  document.addEventListener("click", (event) => {
+    if (!switcher) {
+      return;
+    }
+
+    if (!switcher.contains(event.target as Node)) {
+      setOpen(false);
+    }
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      setOpen(false);
+    }
+  });
+</script>
+
+<style is:global>
+  .locale-switcher {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-left: 0.25rem;
+  }
+
+  .locale-popover-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(var(--border-color) / 1);
+    border-radius: 0.5rem;
+    background: rgba(var(--background-color) / 0.95);
+    color: rgba(var(--foreground-color) / 1);
+    width: 2rem;
+    height: 2rem;
+    cursor: pointer;
+  }
+
+  .locale-trigger-label {
+    display: none;
+    margin-left: 0.25rem;
+  }
+  .locale-trigger-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .locale-popover-trigger:focus-visible {
+    outline: 2px solid rgba(var(--foreground-color) / 0.2);
+    outline-offset: 2px;
+  }
+
+  .locale-popover {
+    position: absolute;
+    right: 0;
+    top: calc(100% + 0.35rem);
+    min-width: 8rem;
+    padding: 0.35rem;
+    border: 1px solid rgba(var(--border-color) / 1);
+    border-radius: 0.5rem;
+    background: rgba(var(--background-color) / 1);
+    box-shadow: 0 10px 28px rgba(0 0 0 / 0.14);
+    display: none;
+    z-index: 30;
+  }
+
+  .locale-popover[data-state="open"] {
+    display: grid;
+    gap: 0.15rem;
+  }
+
+  .locale-popover-item {
+    display: block;
+    padding: 0.45rem 0.55rem;
+    border-radius: 0.35rem;
+    font-size: 0.82rem;
+    line-height: 1.2;
+    color: rgba(var(--muted-color) / 1);
+  }
+
+  .locale-popover-item:hover,
+  .locale-popover-item[data-state="active"] {
+    background: rgba(var(--accent-color) / 1);
+    color: rgba(var(--foreground-color) / 1);
+  }
+
+  @media (max-width: 900px) {
+    .locale-switcher {
+      width: 100%;
+      flex-direction: column;
+      align-items: flex-start;
+      order: 4;
+    }
+
+    .locale-popover {
+      position: static;
+      right: auto;
+      top: auto;
+      margin-top: 0.4rem;
+      min-width: 0;
+      width: 100%;
+      box-shadow: none;
+    }
+
+    .locale-popover-trigger {
+      width: unset;
+    }
+
+    .locale-trigger-label {
+      display: inline-block;
+    }
+  }
+</style>

package/dist/theme-default/src/components/NavBar.astro

@@ -0,0 +1,231 @@
+---
+import Icon from "./Icon.astro";
+import SearchInput from "./SearchInput.astro";
+import SearchModal from "./SearchModal.astro";
+import LocaleSelect from "./LocaleSelect.astro";
+import { getCollection } from "astro:content";
+import type { SearchDocument } from "../scripts/search";
+import { getResolvedSiteConfig } from "../lib/config";
+
+interface Props {
+  showSidebarToggle?: boolean;
+}
+
+const { showSidebarToggle = false } = Astro.props;
+
+const pathname = Astro.url.pathname;
+const resolvedConfig = getResolvedSiteConfig(pathname);
+const navItems = resolvedConfig.nav;
+const socialItems = resolvedConfig.socialLinks;
+const localePrefixes = resolvedConfig.localeLinks
+  .map((locale) => locale.key)
+  .filter((key) => key !== "/")
+  .map((key) => key.slice(1, -1));
+const currentLocalePrefix =
+  resolvedConfig.localeKey === "/" ? "" : resolvedConfig.localeKey.slice(1, -1);
+const docs = await getCollection("docs");
+const searchDocuments: SearchDocument[] = docs
+  .filter((entry) => {
+    if (resolvedConfig.localeKey === "/") {
+      return !localePrefixes.some((prefix) =>
+        entry.id.startsWith(`${prefix}/`),
+      );
+    }
+
+    return (
+      entry.id === currentLocalePrefix ||
+      entry.id.startsWith(`${currentLocalePrefix}/`)
+    );
+  })
+  .map((entry) => {
+    const normalizedId = entry.id.endsWith("/index")
+      ? entry.id.slice(0, -"/index".length)
+      : entry.id;
+
+    return {
+      id: entry.id,
+      title: entry.data.title,
+      description: entry.data.description || "",
+      body: entry.body || "",
+      url: normalizedId === "index" ? "/" : `/${normalizedId}`,
+    };
+  });
+---
+
+<header class="header">
+  <div class="header-wrapper">
+    {
+      showSidebarToggle && (
+        <button
+          type="button"
+          class="header-menu-toggle"
+          aria-label="Toggle navigation menu"
+          aria-controls="sidebar-drawer"
+          aria-expanded="false"
+          data-sidebar-toggle
+        >
+          <Icon name="Menu" class="header-menu-icon" aria-hidden="true" />
+        </button>
+      )
+    }
+    <div class="logo">
+      <a
+        href={resolvedConfig.localeKey === "/" ? "/" : resolvedConfig.localeKey}
+      >
+        {resolvedConfig.siteTitle}
+      </a>
+    </div>
+    <SearchInput />
+    {
+      navItems.length > 0 && (
+        <ul class="header-nav-list">
+          {navItems.map((item) => (
+            <li>
+              <a href={item.link} class="nav-link nav-link-text">
+                {item.icon && (
+                  <Icon name={item.icon} class="nav-icon" aria-hidden="true" />
+                )}
+                <span>{item.label}</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      )
+    }
+    <LocaleSelect localeLinks={resolvedConfig.localeLinks} />
+    <ul class="social-links-list">
+      {
+        socialItems.map((item) => (
+          <li>
+            <a
+              href={item.link}
+              class="nav-link"
+              aria-label={item.label}
+              title={item.label}
+            >
+              {item.icon ? (
+                <Icon name={item.icon} class="nav-icon" aria-hidden="true" />
+              ) : (
+                <span>{item.label}</span>
+              )}
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+  <SearchModal documents={searchDocuments} />
+</header>
+
+<style is:global>
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    backdrop-filter: blur(8px);
+    background: rgba(var(--background-color) / 0.85);
+    border-bottom: 1px solid rgba(var(--border-color) / 1);
+  }
+
+  .header-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+    max-width: 80rem;
+    margin: 0 auto;
+  }
+
+  .logo a {
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  .header-nav-list,
+  .social-links-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .header-nav-list {
+    margin-left: auto;
+  }
+
+  .social-links-list {
+    margin-left: 0;
+  }
+
+  .nav-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.35rem 0;
+    font-size: 0.875rem;
+  }
+
+  .nav-link-text {
+    white-space: nowrap;
+  }
+
+  .nav-icon {
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+  }
+
+  .header-menu-toggle {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: 1px solid rgba(var(--border-color) / 1);
+    border-radius: 0.5rem;
+    background: rgba(var(--background-color) / 1);
+    color: rgba(var(--foreground-color) / 1);
+    cursor: pointer;
+    flex: none;
+  }
+
+  .header-menu-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  @media (max-width: 900px) {
+    .header {
+      padding: 0.85rem 1rem;
+    }
+
+    .header-menu-toggle {
+      display: inline-flex;
+    }
+
+    .header-wrapper {
+      flex-wrap: wrap;
+      gap: 0.7rem;
+    }
+
+    .header-nav-list {
+      order: 10;
+      width: 100%;
+      margin-right: 0;
+      flex-wrap: wrap;
+    }
+
+    .social-links-list {
+      order: 11;
+      flex-wrap: wrap;
+      width: auto;
+      justify-content: flex-end;
+      margin-left: auto;
+    }
+  }
+</style>