@rizom/site-rizom 0.2.0-alpha.142

package/src/ui/Badge.tsx

@@ -0,0 +1,14 @@
+import type { JSX, ComponentChildren } from "preact";
+import { cn } from "./cn";
+
+export interface BadgeProps {
+  children?: ComponentChildren;
+  className?: string;
+}
+
+const BASE =
+  "inline-flex items-center px-5 py-2 border border-accent text-accent rounded-[20px] font-label text-label-md font-semibold tracking-[0.09375em] uppercase";
+
+export const Badge = ({ children, className }: BadgeProps): JSX.Element => (
+  <span className={cn(BASE, className)}>{children}</span>
+);

package/src/ui/Button.tsx

@@ -0,0 +1,56 @@
+import type { JSX, ComponentChildren } from "preact";
+import { cn } from "./cn";
+
+export type ButtonVariant = "primary" | "primary-strong" | "secondary";
+export type ButtonSize = "md" | "lg";
+
+export interface ButtonProps {
+  href: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  block?: boolean;
+  className?: string;
+  children?: ComponentChildren;
+}
+
+const BASE =
+  "inline-flex items-center justify-center cursor-pointer border border-solid transition-all [gap:var(--rizom-btn-gap)] [border-radius:var(--rizom-btn-radius)] [font-family:var(--rizom-btn-font-family)] [font-style:var(--rizom-btn-font-style)] [letter-spacing:var(--rizom-btn-letter-spacing)] [text-transform:var(--rizom-btn-text-transform)]";
+const VARIANT: Record<ButtonVariant, string> = {
+  primary:
+    "[font-weight:var(--rizom-btn-primary-font-weight)] [color:var(--rizom-btn-primary-color)] [background:var(--rizom-btn-primary-bg)] [border-color:var(--rizom-btn-primary-border-color)] [border-width:var(--rizom-btn-primary-border-width)] [box-shadow:var(--rizom-btn-primary-shadow)] hover:[color:var(--rizom-btn-primary-hover-color)] hover:[background:var(--rizom-btn-primary-hover-bg)] hover:[border-color:var(--rizom-btn-primary-hover-border-color)] hover:[border-width:var(--rizom-btn-primary-hover-border-width)] hover:[box-shadow:var(--rizom-btn-primary-hover-shadow)] hover:[transform:var(--rizom-btn-primary-hover-transform)]",
+  "primary-strong":
+    "duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)] [font-weight:var(--rizom-btn-primary-strong-font-weight)] [color:var(--rizom-btn-primary-strong-color)] [background:var(--rizom-btn-primary-strong-bg)] [border-color:var(--rizom-btn-primary-strong-border-color)] [border-width:var(--rizom-btn-primary-strong-border-width)] [box-shadow:var(--rizom-btn-primary-strong-shadow)] hover:[color:var(--rizom-btn-primary-strong-hover-color)] hover:[background:var(--rizom-btn-primary-strong-hover-bg)] hover:[border-color:var(--rizom-btn-primary-strong-hover-border-color)] hover:[border-width:var(--rizom-btn-primary-strong-hover-border-width)] hover:[box-shadow:var(--rizom-btn-primary-strong-hover-shadow)] hover:[transform:var(--rizom-btn-primary-strong-hover-transform)]",
+  secondary:
+    "[font-weight:var(--rizom-btn-secondary-font-weight)] [color:var(--rizom-btn-secondary-color)] [background:var(--rizom-btn-secondary-bg)] [border-color:var(--rizom-btn-secondary-border-color)] [border-width:var(--rizom-btn-secondary-border-width)] [box-shadow:var(--rizom-btn-secondary-shadow)] hover:[color:var(--rizom-btn-secondary-hover-color)] hover:[background:var(--rizom-btn-secondary-hover-bg)] hover:[border-color:var(--rizom-btn-secondary-hover-border-color)] hover:[border-width:var(--rizom-btn-secondary-hover-border-width)] hover:[box-shadow:var(--rizom-btn-secondary-hover-shadow)] hover:[transform:var(--rizom-btn-secondary-hover-transform)]",
+};
+const SIZE: Record<ButtonSize, string> = {
+  md: "text-base [padding:var(--rizom-btn-md-padding)]",
+  lg: "text-body-md md:text-body-lg [padding:var(--rizom-btn-lg-padding-mobile)] md:[padding:var(--rizom-btn-lg-padding-desktop)]",
+};
+const BLOCK = "w-full md:w-auto";
+
+export const Button = ({
+  href,
+  variant = "primary",
+  size = "md",
+  block = false,
+  className,
+  children,
+}: ButtonProps): JSX.Element => (
+  <a
+    href={href}
+    className={cn(
+      "rizom-btn",
+      `rizom-btn-${variant}`,
+      `rizom-btn-${size}`,
+      block && "rizom-btn-block",
+      BASE,
+      VARIANT[variant],
+      SIZE[size],
+      block && BLOCK,
+      className,
+    )}
+  >
+    {children}
+  </a>
+);

package/src/ui/Divider.tsx

@@ -0,0 +1,12 @@
+import type { JSX } from "preact";
+import { cn } from "./cn";
+
+export interface DividerProps {
+  className?: string;
+}
+
+const BASE = "w-[60px] h-px bg-[var(--color-divider)] mx-auto";
+
+export const Divider = ({ className }: DividerProps): JSX.Element => (
+  <div className={cn(BASE, className)} />
+);

package/src/ui/Footer.tsx

@@ -0,0 +1,76 @@
+import type { JSX } from "preact";
+import { cn } from "./cn";
+import { externalLinkProps } from "./external-link";
+import type { RizomBrandSuffix, RizomFooterTagline, RizomLink } from "./types";
+import { GUTTER } from "./Section";
+
+const LINK_CLS =
+  "text-label-md text-theme-light hover:text-theme transition-colors";
+
+const TOGGLE_CLS =
+  "bg-transparent border border-theme-light rounded-md px-2.5 py-1.5 cursor-pointer text-theme-light text-label-md font-body transition-colors hover:text-theme hover:border-theme";
+
+interface FooterProps {
+  brandSuffix: RizomBrandSuffix;
+  metaLabel: string;
+  tagline?: RizomFooterTagline;
+  links: RizomLink[];
+  className?: string;
+}
+
+export const Footer = ({
+  brandSuffix,
+  metaLabel,
+  tagline,
+  links,
+  className,
+}: FooterProps): JSX.Element => (
+  <footer
+    className={cn(
+      `flex flex-col gap-4 ${GUTTER} py-8 md:flex-row md:items-center md:justify-between md:gap-6 md:py-6 border-t border-theme-light text-center md:text-left`,
+      className,
+    )}
+  >
+    <div className="flex flex-col items-center gap-1.5 md:items-start max-w-[560px]">
+      <div className="flex flex-col items-center gap-1.5 md:flex-row md:items-center md:gap-3">
+        <span className="font-nav text-[15px]">
+          <span className="font-bold">rizom</span>
+          <span className="font-bold text-accent">.</span>
+          <span className="text-theme-muted">{brandSuffix}</span>
+        </span>
+        <span className="text-label-md text-theme-light">{metaLabel}</span>
+      </div>
+      {tagline ? (
+        <p className="text-label-md leading-[1.6] text-theme-light">
+          {tagline.prefix ?? ""}
+          <a
+            href={tagline.link.href}
+            className="text-accent hover:opacity-75 transition-opacity"
+          >
+            {tagline.link.label}
+          </a>
+          {tagline.suffix ?? ""}
+        </p>
+      ) : null}
+    </div>
+    <div className="flex flex-wrap items-center justify-center gap-4 md:justify-end md:gap-6">
+      {links.map((link) => (
+        <a
+          key={link.href + link.label}
+          href={link.href}
+          {...externalLinkProps(link)}
+          className={LINK_CLS}
+        >
+          {link.label}
+        </a>
+      ))}
+      <button
+        id="themeToggle"
+        aria-label="Toggle light mode"
+        className={TOGGLE_CLS}
+      >
+        ☀ Light
+      </button>
+    </div>
+  </footer>
+);

package/src/ui/Header.tsx

@@ -0,0 +1,45 @@
+import type { JSX } from "preact";
+import { externalLinkProps } from "./external-link";
+import type { RizomBrandSuffix, RizomLink } from "./types";
+
+const LINK_CLS =
+  "hidden md:inline-block font-body text-[15px] text-theme-muted hover:text-theme transition-colors relative py-1 after:content-[''] after:absolute after:left-0 after:bottom-0 after:h-px after:w-0 after:bg-accent after:transition-all after:duration-300 hover:after:w-full";
+
+interface HeaderProps {
+  brandSuffix: RizomBrandSuffix;
+  navLinks: RizomLink[];
+  primaryCta: RizomLink;
+}
+
+export const Header = ({
+  brandSuffix,
+  navLinks,
+  primaryCta,
+}: HeaderProps): JSX.Element => (
+  <nav className="fixed top-0 left-0 right-0 z-[100] flex items-center justify-between bg-nav-fade px-6 py-4 backdrop-blur-[8px] md:px-10 md:py-5 xl:px-20">
+    <div className="flex items-center gap-0 font-nav text-[20px]">
+      <span className="font-bold text-theme">rizom</span>
+      <span className="font-bold text-accent">.</span>
+      <span className="text-theme-muted">{brandSuffix}</span>
+    </div>
+    <div className="flex items-center gap-3 md:gap-8">
+      {navLinks.map((link) => (
+        <a
+          key={link.href}
+          href={link.href}
+          {...externalLinkProps(link)}
+          className={LINK_CLS}
+        >
+          {link.label}
+        </a>
+      ))}
+      <a
+        href={primaryCta.href}
+        {...externalLinkProps(primaryCta)}
+        className="font-body text-[13px] font-semibold text-theme border border-theme rounded-[8px] px-4 py-2 transition-colors hover:border-accent hover:text-accent md:px-6 md:py-2.5 md:text-[15px]"
+      >
+        {primaryCta.label}
+      </a>
+    </div>
+  </nav>
+);

package/src/ui/Section.tsx

@@ -0,0 +1,22 @@
+import type { JSX, ComponentChildren } from "preact";
+import { cn } from "./cn";
+
+export interface SectionProps {
+  id?: string;
+  className?: string;
+  children?: ComponentChildren;
+}
+
+export const GUTTER = "px-6 md:px-10 xl:px-20";
+
+const BASE = `${GUTTER} relative z-[1]`;
+
+export const Section = ({
+  id,
+  className,
+  children,
+}: SectionProps): JSX.Element => (
+  <section id={id} className={cn(BASE, className)}>
+    {children}
+  </section>
+);

package/src/ui/SideNav.tsx

@@ -0,0 +1,22 @@
+import type { JSX } from "preact";
+import type { RizomSideNavItem } from "./types";
+
+interface SideNavProps {
+  items: RizomSideNavItem[];
+}
+
+export const SideNav = ({ items }: SideNavProps): JSX.Element => (
+  <aside
+    aria-hidden="true"
+    className="fixed right-8 top-1/2 z-[90] hidden -translate-y-1/2 flex-col gap-[18px] px-2 py-4 xl:flex"
+  >
+    {items.map((dot) => (
+      <a
+        key={dot.href}
+        href={dot.href}
+        className="side-nav-dot"
+        data-label={dot.label}
+      />
+    ))}
+  </aside>
+);

package/src/ui/cn.ts

@@ -0,0 +1 @@
+export { cn } from "@rizom/ui";

package/src/ui/external-link.ts

@@ -0,0 +1,8 @@
+import type { RizomLink } from "./types";
+
+export function externalLinkProps(link: Pick<RizomLink, "external">): {
+  target?: string;
+  rel?: string;
+} {
+  return link.external ? { target: "_blank", rel: "noopener noreferrer" } : {};
+}

package/src/ui/frame.tsx

@@ -0,0 +1,28 @@
+import type { JSX, ComponentChildren } from "preact";
+
+export type { RizomLayoutProps } from "@rizom/site";
+
+export interface RizomFrameProps {
+  children?: ComponentChildren;
+}
+
+/**
+ * Shared Rizom page frame.
+ *
+ * Owns only the full-page canvas background and the centered page
+ * container. Wrapper sites own their actual chrome/layout composition.
+ */
+export const RizomFrame = ({ children }: RizomFrameProps): JSX.Element => (
+  <>
+    <div
+      id="bgCanvasWrap"
+      className="rizom-frame-canvas-wrap fixed top-0 left-0 w-full h-full pointer-events-none"
+    >
+      <canvas id="heroCanvas" className="w-full h-full block" />
+    </div>
+
+    <div className="max-w-[1440px] mx-auto relative overflow-x-clip">
+      {children}
+    </div>
+  </>
+);

package/src/ui/highlighted-text.tsx

@@ -0,0 +1,45 @@
+import { Fragment, type JSX } from "preact";
+
+const EMPHASIS_PATTERN = /(\*[^*]+\*)/;
+
+/**
+ * Render a content string with two lightweight markup conventions:
+ *
+ * - `\n` in the string produces a `<br />` (for multi-line headlines)
+ * - Any `*...*` run is wrapped in a `<span>` carrying `highlightClass`
+ *
+ * Authors write the phrase as one natural string in markdown content;
+ * the renderer does the structural split. Highlight styling is passed
+ * per-brand (rizom.ai uses accent+midline, rizom.work uses
+ * italic+accent) so each brand owns its own emphasis treatment while
+ * the parsing/structure is shared.
+ */
+export function renderHighlightedText(
+  text: string,
+  highlightClass: string,
+): JSX.Element {
+  const lines = text.split("\n");
+  return (
+    <Fragment>
+      {lines.map((line, lineIdx) => (
+        <Fragment key={lineIdx}>
+          {lineIdx > 0 && <br />}
+          {line.split(EMPHASIS_PATTERN).map((part, partIdx) => {
+            if (
+              part.length >= 3 &&
+              part.startsWith("*") &&
+              part.endsWith("*")
+            ) {
+              return (
+                <span key={partIdx} className={highlightClass}>
+                  {part.slice(1, -1)}
+                </span>
+              );
+            }
+            return <Fragment key={partIdx}>{part}</Fragment>;
+          })}
+        </Fragment>
+      ))}
+    </Fragment>
+  );
+}

package/src/ui/index.ts

@@ -0,0 +1,21 @@
+export { RizomFrame } from "./frame";
+export type { RizomFrameProps, RizomLayoutProps } from "./frame";
+export { Header } from "./Header";
+export { Footer } from "./Footer";
+export { SideNav } from "./SideNav";
+export { Section, GUTTER } from "./Section";
+export type { SectionProps } from "./Section";
+export { Button } from "./Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
+export { Badge } from "./Badge";
+export type { BadgeProps } from "./Badge";
+export { Divider } from "./Divider";
+export type { DividerProps } from "./Divider";
+export { renderHighlightedText } from "./highlighted-text";
+export { socialLinksToRizomLinks } from "./site-info-links";
+export type {
+  RizomBrandSuffix,
+  RizomFooterTagline,
+  RizomLink,
+  RizomSideNavItem,
+} from "./types";

package/src/ui/site-info-links.ts

@@ -0,0 +1,24 @@
+import type { SiteLayoutInfo } from "@rizom/site";
+import type { RizomLink } from "./types";
+
+const DEFAULT_LABELS: Record<string, string> = {
+  github: "GitHub",
+  linkedin: "LinkedIn",
+  instagram: "Instagram",
+  email: "Email",
+  website: "Website",
+};
+
+export function socialLinksToRizomLinks(
+  siteInfo: Pick<SiteLayoutInfo, "socialLinks">,
+  allowedPlatforms?: string[],
+): RizomLink[] {
+  const allowed = allowedPlatforms ? new Set(allowedPlatforms) : undefined;
+
+  return (siteInfo.socialLinks ?? [])
+    .filter((link) => (allowed ? allowed.has(link.platform) : true))
+    .map((link) => ({
+      href: link.url,
+      label: link.label ?? DEFAULT_LABELS[link.platform] ?? link.platform,
+    }));
+}

package/src/ui/types.ts

@@ -0,0 +1,6 @@
+export type {
+  RizomBrandSuffix,
+  RizomFooterTagline,
+  RizomLink,
+  RizomSideNavItem,
+} from "@rizom/site";