@founderhq/next-blog 0.9.0

package/src/templates/blog-components.tsx.txt

@@ -0,0 +1,603 @@
+"use client";
+
+import {
+  type CSSProperties,
+  type FormEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  articlePath,
+  normalizeRoutePrefix,
+  type BlogArticle,
+  type BlogAuthor,
+  type BlogCta,
+  type BlogNewsletter,
+  type BlogPagination,
+  type BlogSite,
+  type BlogTocItem,
+} from "@founderhq/next-blog";
+
+// Editable FounderHQ blog template. Change the markup/classes to match your site.
+function cx(...values: Array<string | false | null | undefined>) {
+  return values.filter(Boolean).join(" ");
+}
+
+function joinPath(base: string, segment: string) {
+  return `${base.replace(/\/+$/, "")}/${segment.replace(/^\/+/, "")}`;
+}
+
+const TOC_RAIL = 8;
+
+function getLineOffset(level: number) {
+  if (level <= 2) return TOC_RAIL;
+  if (level === 3) return TOC_RAIL + 8;
+  return TOC_RAIL + 16;
+}
+
+function getItemOffset(level: number) {
+  if (level <= 2) return TOC_RAIL + 12;
+  if (level === 3) return TOC_RAIL + 24;
+  return TOC_RAIL + 36;
+}
+
+function getScrollParent(element: HTMLElement | null): HTMLElement | null {
+  let node = element?.parentElement ?? null;
+  while (node) {
+    const overflowY = getComputedStyle(node).overflowY;
+    if (overflowY === "auto" || overflowY === "scroll") return node;
+    node = node.parentElement;
+  }
+  return null;
+}
+
+function escapeSelectorValue(value: string) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/["\\]/g, "\\$&");
+}
+
+function resolveHeadingElement(id: string): HTMLElement | null {
+  return (
+    document.getElementById(id) ??
+    document.querySelector<HTMLElement>(
+      `[data-toc-id="${escapeSelectorValue(id)}"]`,
+    )
+  );
+}
+
+type TocPosition = [top: number, bottom: number, x: number];
+
+type TocRail = {
+  width: number;
+  height: number;
+  d: string;
+  positions: TocPosition[];
+};
+
+function defaultTocSelect(item: BlogTocItem) {
+  resolveHeadingElement(item.id)?.scrollIntoView({
+    block: "start",
+    behavior: "smooth",
+  });
+}
+
+export function BlogToc({
+  items,
+  onSelect = defaultTocSelect,
+  className,
+}: {
+  items: BlogTocItem[];
+  onSelect?: (item: BlogTocItem) => void;
+  className?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [rail, setRail] = useState<TocRail | null>(null);
+  const [activeIds, setActiveIds] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+
+  const measure = useCallback(() => {
+    const container = containerRef.current;
+    if (!container || container.clientHeight === 0) return;
+    if (items.length === 0) {
+      setRail(null);
+      return;
+    }
+
+    const rows = container.querySelectorAll<HTMLElement>("[data-toc-item]");
+    let width = 0;
+    let height = 0;
+    let d = "";
+    const positions: TocPosition[] = [];
+
+    items.forEach((item, index) => {
+      const row = rows[index];
+      if (!row) return;
+      const styles = getComputedStyle(row);
+      const x = getLineOffset(item.level) + 0.5;
+      const top = row.offsetTop + parseFloat(styles.paddingTop);
+      const bottom =
+        row.offsetTop + row.clientHeight - parseFloat(styles.paddingBottom);
+
+      width = Math.max(width, x + 8);
+      height = Math.max(height, bottom);
+
+      if (positions.length === 0) {
+        d += `M${x} ${top} L${x} ${bottom}`;
+      } else {
+        const [, previousBottom, previousX] = positions[positions.length - 1];
+        d += ` C ${previousX} ${top - 4} ${x} ${previousBottom + 4} ${x} ${top} L${x} ${bottom}`;
+      }
+
+      positions.push([top, bottom, x]);
+    });
+
+    setRail({ width, height, d, positions });
+  }, [items]);
+
+  const measureRef = useRef(measure);
+  useEffect(() => {
+    measureRef.current = measure;
+  }, [measure]);
+
+  const layoutSignature = useMemo(
+    () => items.map((item) => `${item.id}:${item.level}`).join("/"),
+    [items],
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const run = () => measureRef.current();
+    if (typeof ResizeObserver === "undefined") {
+      run();
+      return;
+    }
+    const observer = new ResizeObserver(run);
+    observer.observe(container);
+    run();
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    measureRef.current();
+  }, [layoutSignature]);
+
+  useEffect(() => {
+    const headings = items
+      .map((item) => ({ id: item.id, el: resolveHeadingElement(item.id) }))
+      .filter(
+        (entry): entry is { id: string; el: HTMLElement } => entry.el !== null,
+      );
+    const scroller =
+      headings.length > 0 ? getScrollParent(headings[0].el) : null;
+    const idByElement = new Map<Element, string>(
+      headings.map((entry) => [entry.el, entry.id]),
+    );
+    const visible = new Set<string>();
+
+    const recompute = () => {
+      if (visible.size > 0) {
+        setActiveIds(new Set(visible));
+        return;
+      }
+      const top = scroller ? scroller.getBoundingClientRect().top : 0;
+      let nearestId: string | null = null;
+      let nearestGap = Number.POSITIVE_INFINITY;
+      for (const heading of headings) {
+        const gap = top - heading.el.getBoundingClientRect().top;
+        if (gap >= 0 && gap < nearestGap) {
+          nearestGap = gap;
+          nearestId = heading.id;
+        }
+      }
+      setActiveIds(nearestId ? new Set([nearestId]) : new Set());
+    };
+
+    if (headings.length === 0) {
+      recompute();
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const id = idByElement.get(entry.target);
+          if (!id) continue;
+          if (entry.isIntersecting) visible.add(id);
+          else visible.delete(id);
+        }
+        recompute();
+      },
+      { root: scroller, threshold: 0 },
+    );
+    for (const heading of headings) observer.observe(heading.el);
+    recompute();
+    return () => observer.disconnect();
+  }, [items]);
+
+  const active = useMemo(() => {
+    const useFallback = activeIds.size === 0;
+    let start = -1;
+    let end = -1;
+    items.forEach((item, index) => {
+      const on = useFallback ? Boolean(item.isActive) : activeIds.has(item.id);
+      if (!on) return;
+      if (start === -1) start = index;
+      end = index;
+    });
+    return { start, end };
+  }, [items, activeIds]);
+
+  const activeStart = active.start;
+  const activeEnd = active.end;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || activeStart === -1) return;
+    const scroller = getScrollParent(container);
+    if (!scroller || scroller.scrollHeight <= scroller.clientHeight) return;
+
+    const rows = container.querySelectorAll<HTMLElement>("[data-toc-item]");
+    const startRow = rows[activeStart];
+    const endRow = rows[activeEnd] ?? startRow;
+    if (!startRow) return;
+
+    const margin = 36;
+    const view = scroller.getBoundingClientRect();
+    const top = startRow.getBoundingClientRect().top;
+    const bottom = endRow.getBoundingClientRect().bottom;
+
+    if (top < view.top + margin) {
+      scroller.scrollTop -= view.top + margin - top;
+    } else if (bottom > view.bottom - margin) {
+      scroller.scrollTop += bottom - (view.bottom - margin);
+    }
+  }, [activeStart, activeEnd]);
+
+  const hasThumb =
+    rail !== null && active.start !== -1 && rail.positions[active.start] != null;
+  const trackTop = hasThumb ? rail.positions[active.start][0] : 0;
+  const trackBottom = hasThumb ? rail.positions[active.end][1] : 0;
+
+  if (items.length === 0) return null;
+
+  return (
+    <div
+      ref={containerRef}
+      role="navigation"
+      className={cx("fhq-blog-toc", className)}
+      aria-label="Article outline"
+    >
+      {rail ? (
+        <div
+          aria-hidden
+          className="fhq-blog-toc__rail"
+          style={{ width: rail.width, height: rail.height }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox={`0 0 ${rail.width} ${rail.height}`}
+            className="fhq-blog-toc__rail-svg"
+            style={{ width: rail.width, height: rail.height }}
+          >
+            <path d={rail.d} fill="none" strokeWidth="1" />
+          </svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox={`0 0 ${rail.width} ${rail.height}`}
+            className="fhq-blog-toc__rail-svg fhq-blog-toc__rail-svg--active"
+            style={{
+              width: rail.width,
+              height: rail.height,
+              opacity: hasThumb ? 1 : 0,
+              clipPath: `polygon(0 ${trackTop}px, 100% ${trackTop}px, 100% ${trackBottom}px, 0 ${trackBottom}px)`,
+            }}
+          >
+            <path d={rail.d} fill="none" strokeWidth="1" />
+          </svg>
+        </div>
+      ) : null}
+      {items.map((item, index) => (
+        <button
+          key={`${item.id}-${item.pos ?? index}`}
+          type="button"
+          data-toc-item
+          data-active={
+            index >= active.start && index <= active.end ? "true" : undefined
+          }
+          onClick={() => onSelect(item)}
+          style={{ paddingInlineStart: getItemOffset(item.level) }}
+          className="fhq-blog-toc__item"
+        >
+          <span>{item.text}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function BlogImage({
+  image,
+  priority = false,
+  className,
+}: {
+  image: NonNullable<BlogArticle["featuredImage"]>;
+  priority?: boolean;
+  className?: string;
+}) {
+  const style = image.aspectRatio
+    ? ({ aspectRatio: image.aspectRatio } as CSSProperties)
+    : undefined;
+  return (
+    <figure className={cx("fhq-blog-image", className)} style={style}>
+      <img
+        src={image.url}
+        alt={image.alt}
+        width={image.width ?? undefined}
+        height={image.height ?? undefined}
+        loading={priority ? "eager" : "lazy"}
+      />
+      {image.caption ? <figcaption>{image.caption}</figcaption> : null}
+    </figure>
+  );
+}
+
+export function AuthorByline({ article }: { article: BlogArticle }) {
+  if (!article.author) return null;
+  return (
+    <div className="fhq-blog-byline">
+      {article.author.avatar ? (
+        <img src={article.author.avatar.url} alt="" width="40" height="40" />
+      ) : null}
+      <div>
+        <div className="fhq-blog-byline__name">{article.author.name}</div>
+        {article.author.title ? (
+          <div className="fhq-blog-byline__title">{article.author.title}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export function BlogCtaBlock({ cta }: { cta: BlogCta }) {
+  return (
+    <aside className={cx("fhq-blog-cta", cta.style && `is-${cta.style}`)}>
+      {cta.eyebrow ? <p className="fhq-blog-eyebrow">{cta.eyebrow}</p> : null}
+      <h2>{cta.heading}</h2>
+      {cta.body ? <p>{cta.body}</p> : null}
+      <a href={cta.buttonUrl}>{cta.buttonLabel}</a>
+    </aside>
+  );
+}
+
+export function BlogNewsletterForm({
+  newsletter,
+  onSubmit,
+}: {
+  newsletter: BlogNewsletter;
+  onSubmit?: (email: string, sourceTag: string | null) => Promise<void> | void;
+}) {
+  const [email, setEmail] = useState("");
+  const [status, setStatus] = useState<"idle" | "submitting" | "done" | "error">(
+    "idle",
+  );
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!email.trim()) return;
+    setStatus("submitting");
+    try {
+      await onSubmit?.(email.trim(), newsletter.sourceTag ?? null);
+      setStatus("done");
+      setEmail("");
+    } catch {
+      setStatus("error");
+    }
+  }
+
+  return (
+    <form className="fhq-blog-newsletter" onSubmit={submit}>
+      <h2>{newsletter.heading}</h2>
+      {newsletter.body ? <p>{newsletter.body}</p> : null}
+      <div className="fhq-blog-newsletter__row">
+        <input
+          type="email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          placeholder="you@example.com"
+          required
+        />
+        <button type="submit" disabled={status === "submitting"}>
+          {newsletter.buttonLabel ?? "Subscribe"}
+        </button>
+      </div>
+      {status === "done" ? <p>You're subscribed.</p> : null}
+      {status === "error" ? <p>Something went wrong.</p> : null}
+    </form>
+  );
+}
+
+export function BlogArticleLayout({
+  article,
+  site,
+  children,
+  sidebar,
+}: {
+  article: BlogArticle;
+  site: BlogSite;
+  children?: ReactNode;
+  sidebar?: ReactNode;
+}) {
+  const toc = article.toc ?? [];
+  return (
+    <main className="fhq-blog-article">
+      <article>
+        <a className="fhq-blog-back" href={normalizeRoutePrefix(site.routePrefix)}>
+          Blog
+        </a>
+        <h1>{article.title}</h1>
+        <AuthorByline article={article} />
+        {article.featuredImage ? (
+          <BlogImage image={article.featuredImage} priority />
+        ) : null}
+        <div className="fhq-blog-layout">
+          <div className="fhq-blog-prose">
+            {children ?? (
+              <div
+                dangerouslySetInnerHTML={{ __html: article.contentHtml ?? "" }}
+              />
+            )}
+          </div>
+          <aside className="fhq-blog-sidebar">
+            {sidebar ?? <BlogToc items={toc} />}
+          </aside>
+        </div>
+      </article>
+    </main>
+  );
+}
+
+export function BlogIndex({
+  articles,
+  site,
+  className,
+  searchAction,
+  searchInitialQuery,
+  title,
+  description,
+  pagination,
+}: {
+  articles: BlogArticle[];
+  site: BlogSite;
+  className?: string;
+  searchAction?: string;
+  searchInitialQuery?: string;
+  title?: string;
+  description?: string | null;
+  pagination?: BlogPagination | null;
+}) {
+  return (
+    <main className={cx("fhq-blog-index", className)}>
+      <header>
+        <h1>{title ?? `${site.siteName} Blog`}</h1>
+        {description ? <p>{description}</p> : null}
+        <BlogSearchBox
+          initialQuery={searchInitialQuery}
+          action={searchAction ?? joinPath(normalizeRoutePrefix(site.routePrefix), "search")}
+        />
+      </header>
+      <div className="fhq-blog-grid">
+        {articles.map((article) => (
+          <article className="fhq-blog-card" key={article.slug}>
+            {article.featuredImage ? <BlogImage image={article.featuredImage} /> : null}
+            <h2>
+              <a href={articlePath(article, site)}>{article.title}</a>
+            </h2>
+            {article.excerpt ? <p>{article.excerpt}</p> : null}
+          </article>
+        ))}
+      </div>
+      <BlogPaginationLinks pagination={pagination} />
+    </main>
+  );
+}
+
+export function BlogPaginationLinks({
+  pagination,
+}: {
+  pagination?: BlogPagination | null;
+}) {
+  if (!pagination || pagination.totalPages <= 1) return null;
+  return (
+    <nav className="fhq-blog-pagination" aria-label="Blog pagination">
+      {pagination.prevHref ? <a href={pagination.prevHref}>Previous</a> : <span />}
+      <span>
+        Page {pagination.page} of {pagination.totalPages}
+      </span>
+      {pagination.nextHref ? <a href={pagination.nextHref}>Next</a> : <span />}
+    </nav>
+  );
+}
+
+export function BlogDirectory({
+  title,
+  description,
+  items,
+}: {
+  title: string;
+  description?: string | null;
+  items: Array<{
+    title: string;
+    href: string;
+    description?: string | null;
+    image?: BlogAuthor["avatar"] | null;
+  }>;
+}) {
+  return (
+    <main className="fhq-blog-index">
+      <header>
+        <h1>{title}</h1>
+        {description ? <p>{description}</p> : null}
+      </header>
+      <div className="fhq-blog-grid">
+        {items.map((item) => (
+          <article className="fhq-blog-card" key={item.href}>
+            {item.image ? <BlogImage image={item.image} /> : null}
+            <h2>
+              <a href={item.href}>{item.title}</a>
+            </h2>
+            {item.description ? <p>{item.description}</p> : null}
+          </article>
+        ))}
+      </div>
+    </main>
+  );
+}
+
+export function BlogSearchBox({
+  initialQuery = "",
+  action = "/blog/search",
+  onSearch,
+}: {
+  initialQuery?: string;
+  action?: string;
+  onSearch?: (query: string) => void;
+}) {
+  const [query, setQuery] = useState(initialQuery);
+  const canSubmit = useMemo(() => query.trim().length > 0, [query]);
+
+  return (
+    <form
+      className="fhq-blog-search"
+      action={action}
+      method="get"
+      onSubmit={(event) => {
+        if (!canSubmit) {
+          event.preventDefault();
+          return;
+        }
+        if (onSearch) {
+          event.preventDefault();
+          onSearch(query.trim());
+        }
+      }}
+    >
+      <input
+        name="q"
+        type="search"
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        placeholder="Search articles"
+      />
+      <button type="submit" disabled={!canSubmit}>
+        Search
+      </button>
+    </form>
+  );
+}