@highjumpdigitalsoftware/blog-kit 0.6.0

package/astro/ProConBlock.astro

@@ -0,0 +1,38 @@
+---
+interface Props {
+  pros?: string[];
+  cons?: string[];
+}
+const { pros = [], cons = [] } = Astro.props;
+const hasAny = (pros?.length ?? 0) > 0 || (cons?.length ?? 0) > 0;
+---
+{hasAny && (
+  <div class="bk-procon">
+    {pros.length > 0 && (
+      <div class="bk-procon__card bk-procon__card--pro" data-kind="pro">
+        <h4 class="bk-procon__heading">Pros</h4>
+        <ul class="bk-procon__list">
+          {pros.map((item) => (
+            <li class="bk-procon__item">
+              <span class="bk-procon__mark" aria-hidden="true">✓</span>
+              <span class="bk-procon__text">{item}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )}
+    {cons.length > 0 && (
+      <div class="bk-procon__card bk-procon__card--con" data-kind="con">
+        <h4 class="bk-procon__heading">Cons</h4>
+        <ul class="bk-procon__list">
+          {cons.map((item) => (
+            <li class="bk-procon__item">
+              <span class="bk-procon__mark" aria-hidden="true">✕</span>
+              <span class="bk-procon__text">{item}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )}
+  </div>
+)}

package/astro/ProseList.astro

@@ -0,0 +1,46 @@
+---
+import { cx } from "../core/lib";
+
+interface ProseListItem {
+  title?: string;
+  description?: string;
+}
+interface Props {
+  variant?: "ul" | "ol";
+  items?: Array<string | ProseListItem>;
+  divided?: boolean;
+}
+
+const { variant = "ul", items = [], divided = false } = Astro.props;
+const list = Array.isArray(items) ? items : [];
+const v: "ul" | "ol" = variant === "ol" ? "ol" : "ul";
+const Tag = v === "ol" ? "ol" : "ul";
+const isGrid = list.some(
+  (it) => it && typeof it === "object" && (it.title || it.description)
+);
+const cls = cx(
+  "bk-prose-list",
+  `bk-prose-list--${v}`,
+  divided && "bk-prose-list--divided",
+  isGrid && "bk-prose-list--grid"
+);
+---
+{list.length > 0 && (
+  <Tag class={cls}>
+    {list.map((item) => {
+      if (isGrid) {
+        const obj = item && typeof item === "object" ? item : { description: String(item ?? "") };
+        return (
+          <li class="bk-prose-list__item">
+            <span class="bk-prose-list__marker" aria-hidden="true" />
+            <span class="bk-prose-list__title" set:html={obj.title || ""} />
+            <span class="bk-prose-list__desc" set:html={obj.description || ""} />
+          </li>
+        );
+      }
+      return (
+        <li class="bk-prose-list__item" set:html={typeof item === "string" ? item : ""} />
+      );
+    })}
+  </Tag>
+)}

package/astro/QuoteBlock.astro

@@ -0,0 +1,72 @@
+---
+import { ICONS } from "../core/icons";
+
+interface Props {
+  quote?: string;
+  author?: string;
+  role?: string;
+  company?: string;
+  source?: string;
+  sourceUrl?: string;
+  avatarUrl?: string;
+}
+
+/**
+ * Google's public favicon-resolver URL for the source URL's host, or null when
+ * the URL is missing/unparseable so the avatar slot can be dropped entirely.
+ */
+function deriveFaviconUrl(sourceUrl?: string): string | null {
+  if (!sourceUrl) return null;
+  try {
+    const host = new URL(sourceUrl).hostname;
+    if (!host) return null;
+    return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=64`;
+  } catch {
+    return null;
+  }
+}
+
+const { quote, author, role, company, source, sourceUrl, avatarUrl } = Astro.props;
+const subtitle = [role, company].filter(Boolean).join(" · ");
+const avatarSrc = avatarUrl ?? deriveFaviconUrl(sourceUrl);
+---
+<figure class="bk-quote">
+  <span class="bk-quote__mark" aria-hidden>&ldquo;</span>
+  <blockquote class="bk-quote__body">{quote ?? <slot />}</blockquote>
+  {(author || subtitle) && (
+    <figcaption class="bk-quote__cite">
+      {avatarSrc && (
+        <img
+          class="bk-quote__avatar"
+          src={avatarSrc}
+          alt=""
+          aria-hidden
+          width={40}
+          height={40}
+        />
+      )}
+      <span class="bk-quote__who">
+        {author && <cite class="bk-quote__author">{author}</cite>}
+        {subtitle && <span class="bk-quote__role">{subtitle}</span>}
+      </span>
+    </figcaption>
+  )}
+  {source &&
+    (sourceUrl ? (
+      <a
+        class="bk-quote__source bk-quote__source--link"
+        href={sourceUrl}
+        target="_blank"
+        rel="nofollow noopener noreferrer"
+      >
+        <span class="bk-quote__source-kicker">Source</span>
+        {source}
+        <span class="bk-quote__source-icon" set:html={ICONS["external"]} />
+      </a>
+    ) : (
+      <div class="bk-quote__source">
+        <span class="bk-quote__source-kicker">Source</span>
+        {source}
+      </div>
+    ))}
+</figure>

package/astro/RegionCallout.astro

@@ -0,0 +1,24 @@
+---
+interface Office {
+  name: string;
+  phone?: string;
+  flag?: string;
+}
+
+interface Props {
+  offices?: Office[];
+}
+
+const { offices = [] } = Astro.props;
+---
+<div class="bk-region-callout">
+  {offices.map((o) => (
+    <div class="bk-region-callout__cell">
+      <div class="bk-region-callout__flag" {...(o.flag ? { style: `background:${o.flag}` } : {})} />
+      <div class="bk-region-callout__info">
+        <div class="bk-region-callout__name">{o.name}</div>
+        {o.phone && <div class="bk-region-callout__phone">{o.phone}</div>}
+      </div>
+    </div>
+  ))}
+</div>

package/astro/RelatedPosts.astro

@@ -0,0 +1,47 @@
+---
+interface RelatedPost {
+  slug: string;
+  title: string;
+  excerpt?: string;
+  date?: string;
+  category?: string;
+  featuredImage?: string;
+  featuredImageAlt?: string;
+}
+interface Props {
+  posts: RelatedPost[];
+  heading?: string;
+  hrefBase?: string;
+}
+const { posts, heading = "Keep reading", hrefBase = "/blog/" } = Astro.props;
+---
+{posts && posts.length > 0 && (
+  <div class="bk-related">
+    <p class="bk-related__eyebrow">{heading}</p>
+    <div class="bk-related__grid">
+      {posts.map((post, i) => (
+        <a class="bk-related__card" href={`${hrefBase}${post.slug}`}>
+          <div
+            class={`bk-related__thumb${post.featuredImage ? "" : ` bk-related__thumb--g${(i % 3) + 1}`}`}
+            aria-hidden={post.featuredImage ? undefined : true}
+          >
+            {post.featuredImage && (
+              <img
+                class="bk-related__img"
+                src={post.featuredImage}
+                alt={post.featuredImageAlt || ""}
+                loading="lazy"
+                decoding="async"
+              />
+            )}
+          </div>
+          <div class="bk-related__body">
+            {post.category && <span class="bk-related__cat">{post.category}</span>}
+            <h5 class="bk-related__title">{post.title}</h5>
+            {post.excerpt && <p class="bk-related__excerpt">{post.excerpt}</p>}
+          </div>
+        </a>
+      ))}
+    </div>
+  </div>
+)}

package/astro/ResultsStrip.astro

@@ -0,0 +1,59 @@
+---
+import { ICONS } from "../core/icons";
+
+interface Kpi {
+  label: string;
+  num: string;
+  delta?: string;
+  deltaDirection?: "up" | "down";
+  source?: string;
+  sourceUrl?: string;
+}
+
+interface Props {
+  kpis?: Kpi[];
+}
+
+const { kpis = [] } = Astro.props;
+---
+{kpis && kpis.length > 0 && (
+  <div class="bk-results-strip">
+    {kpis.map((k) => (
+      <div class="bk-results-strip__cell">
+        <div class="bk-results-strip__label">{k.label}</div>
+        <div class="bk-results-strip__num">{k.num}</div>
+        {k.delta && (
+          <div
+            class={`bk-results-strip__delta${
+              k.deltaDirection === "down" ? " bk-results-strip__delta--down" : ""
+            }`}
+          >
+            {k.delta}
+          </div>
+        )}
+        {k.source &&
+          (k.sourceUrl ? (
+            <a
+              class="bk-results-strip__source bk-results-strip__source--link"
+              href={k.sourceUrl}
+              target="_blank"
+              rel="nofollow noopener noreferrer"
+            >
+              <span class="bk-results-strip__source-kicker">Source</span>
+              {k.source}
+              <span
+                class="bk-results-strip__source-icon"
+                aria-hidden="true"
+                set:html={ICONS["external"]}
+              />
+            </a>
+          ) : (
+            <div class="bk-results-strip__source">
+              <span class="bk-results-strip__source-kicker">Source</span>
+              {k.source}
+            </div>
+          ))}
+      </div>
+    ))}
+  </div>
+)}

package/astro/ScoreBar.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+  label: string;
+  score: number;
+  maxScore?: number;
+}
+
+const { label, score, maxScore = 10 } = Astro.props;
+const percentage = Math.max(0, Math.min(100, (score / maxScore) * 100));
+---
+<div class="bk-score-bar">
+  <div class="bk-score-bar__head">
+    <span class="bk-score-bar__label">{label}</span>
+    <span class="bk-score-bar__score">{score}</span>
+  </div>
+  <div class="bk-score-bar__track">
+    <div class="bk-score-bar__fill" style={`width: ${percentage}%`} />
+  </div>
+</div>

package/astro/SerpPreview.astro

@@ -0,0 +1,35 @@
+---
+import { ICONS } from "../core/icons";
+
+interface SerpResult {
+  title: string;
+  url: string;
+  description: string;
+  ad?: boolean;
+}
+
+interface Props {
+  query: string;
+  results?: SerpResult[];
+}
+
+const { query, results = [] } = Astro.props;
+---
+<div class="bk-serp-preview">
+  <div class="bk-serp-preview__bar">
+    <span class="bk-serp-preview__bar-icon" aria-hidden="true" set:html={ICONS["search"]} />
+    <input class="bk-serp-preview__input" value={query} readonly />
+  </div>
+  <div class="bk-serp-preview__results">
+    {results.map((r) => (
+      <div class="bk-serp-preview__result">
+        {r.ad && (
+          <span class="bk-serp-preview__tag bk-serp-preview__tag--ad">Sponsored</span>
+        )}
+        <span class="bk-serp-preview__url" set:html={r.url} />
+        <h4 class="bk-serp-preview__heading">{r.title}</h4>
+        <p class="bk-serp-preview__desc" set:html={r.description} />
+      </div>
+    ))}
+  </div>
+</div>

package/astro/ServicePromoCard.astro

@@ -0,0 +1,21 @@
+---
+import { ICONS } from "../core/icons";
+
+interface Props {
+  title: string;
+  sub?: string;
+  href?: string;
+  icon?: string;
+  arrowLabel?: string;
+}
+
+const { title, sub, href = "#", icon, arrowLabel = "Learn more →" } = Astro.props;
+---
+<a class="bk-service-promo-card" href={href}>
+  <span class="bk-service-promo-card__icon" aria-hidden="true" set:html={icon || ICONS["search"]} />
+  <span class="bk-service-promo-card__body">
+    <span class="bk-service-promo-card__title">{title}</span>
+    {sub && <span class="bk-service-promo-card__sub">{sub}</span>}
+  </span>
+  <span class="bk-service-promo-card__arrow">{arrowLabel}</span>
+</a>

package/astro/StatCard.astro

@@ -0,0 +1,48 @@
+---
+import { ICONS } from "../core/icons";
+
+interface Props {
+  value: string;
+  label: string;
+  description?: string;
+  unit?: string;
+  source?: string;
+  sourceUrl?: string;
+}
+
+/** Split a raw value like "3.2×" into its numeric head and trailing unit. */
+function splitValue(raw: string): { num: string; unit: string } {
+  const m = raw.match(/^([\d.,\-+]+)(.*)$/);
+  if (!m) return { num: raw, unit: "" };
+  return { num: m[1], unit: m[2].trim() };
+}
+
+const { value, label, description, unit, source, sourceUrl } = Astro.props;
+const parts = unit !== undefined ? { num: value, unit } : splitValue(value);
+---
+<div class="bk-stat-card">
+  <div class="bk-stat-card__value">
+    <span class="bk-stat-card__num">{parts.num}</span>
+    {parts.unit && <span class="bk-stat-card__unit">{parts.unit}</span>}
+  </div>
+  <div class="bk-stat-card__label">{label}</div>
+  {description && <div class="bk-stat-card__desc">{description}</div>}
+  {source &&
+    (sourceUrl ? (
+      <a
+        class="bk-stat-card__source bk-stat-card__source--link"
+        href={sourceUrl}
+        target="_blank"
+        rel="nofollow noopener noreferrer"
+      >
+        <span class="bk-stat-card__source-kicker">Source</span>
+        {source}
+        <span class="bk-stat-card__source-icon" aria-hidden="true" set:html={ICONS["external"]} />
+      </a>
+    ) : (
+      <div class="bk-stat-card__source">
+        <span class="bk-stat-card__source-kicker">Source</span>
+        {source}
+      </div>
+    ))}
+</div>

package/astro/StepBlock.astro

@@ -0,0 +1,5 @@
+---
+interface Props { stepNumber?: number | string; title?: string; }
+const { stepNumber, title } = Astro.props;
+---
+<div class="bk-step"><div class="bk-step__num">{stepNumber}</div><div class="bk-step__main">{title ? <h3 class="bk-step__title">{title}</h3> : null}<div class="bk-step__body"><slot /></div></div></div>

package/astro/TableOfContents.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+  heading?: string;
+  scope?: string;
+}
+const { heading, scope } = Astro.props;
+const label = heading ?? "In this article";
+---
+<nav class="bk-toc" data-bk-toc data-bk-toc-scope={scope ?? "article"} aria-label={label}>
+  <p class="bk-toc__heading">{label}</p>
+  <ul class="bk-toc__list"></ul>
+</nav>

package/astro/TimelineBlock.astro

@@ -0,0 +1,30 @@
+---
+/* blog-kit Astro adapter — TimelineBlock
+   Thin wrapper emitting the SAME markup/classes as the React adapter.
+   Styling: core/css/components.css. No <style> block — the kit's CSS is
+   shared/global so React and Astro render byte-identically. */
+interface TimelineEvent {
+  date: string;
+  title: string;
+  description: string;
+}
+interface Props {
+  events?: TimelineEvent[];
+}
+const { events = [] } = Astro.props;
+---
+{events.length > 0 ? (
+  <div class="bk-timeline">
+    <span class="bk-timeline__rail" aria-hidden="true" />
+    {events.map((event) => (
+      <div class="bk-timeline__item">
+        <span class="bk-timeline__dot" aria-hidden="true" />
+        <div class="bk-timeline__date">{event.date}</div>
+        <h4 class="bk-timeline__title">{event.title}</h4>
+        <p class="bk-timeline__desc">{event.description}</p>
+      </div>
+    ))}
+  </div>
+) : (
+  <div class="bk-timeline"><slot /></div>
+)}

package/astro/TipBox.astro

@@ -0,0 +1,14 @@
+---
+interface Props {
+  tip: string;
+  context?: string;
+}
+const { tip, context } = Astro.props;
+---
+<div class="bk-tip">
+  <span class="bk-tip__badge">Pro tip</span>
+  <p class="bk-tip__body">
+    <strong class="bk-tip__lead">{tip}</strong>
+    {context ? <span class="bk-tip__context"> {context}</span> : null}
+  </p>
+</div>

package/astro/TrafficChart.astro

@@ -0,0 +1,61 @@
+---
+interface Series {
+  current?: number[];
+  previous?: number[];
+}
+interface Props {
+  title?: string;
+  series?: Series;
+  labels?: string[];
+}
+
+const W = 600;
+const H = 220;
+const PAD = 40;
+
+const {
+  title = "Organic sessions · 6 months",
+  series = {},
+  labels = [],
+} = Astro.props;
+
+const current = series.current || [];
+const previous = series.previous || [];
+const max = Math.max(...current, ...previous, 1);
+const xs = (i: number, len: number) =>
+  PAD + 20 + ((W - PAD - 30) * i) / Math.max(len - 1, 1);
+const ys = (v: number) => H - 30 - ((H - 50) * v) / max;
+const points = (arr: number[]) =>
+  arr.map((v, i) => `${xs(i, arr.length)},${ys(v)}`).join(" ");
+---
+<div class="bk-traffic-chart">
+  <div class="bk-traffic-chart__head">
+    <div class="bk-traffic-chart__title">{title}</div>
+    <div class="bk-traffic-chart__legend">
+      <span class="bk-traffic-chart__item">
+        <span class="bk-traffic-chart__dot" />This period
+      </span>
+      <span class="bk-traffic-chart__item">
+        <span class="bk-traffic-chart__dot bk-traffic-chart__dot--prev" />Previous period
+      </span>
+    </div>
+  </div>
+  <svg class="bk-traffic-chart__svg" viewBox={`0 0 ${W} ${H}`} role="img">
+    <line class="bk-traffic-chart__axis" x1={PAD} y1={20} x2={PAD} y2={H - 30} />
+    <line class="bk-traffic-chart__axis" x1={PAD} y1={H - 30} x2={W - 10} y2={H - 30} />
+    {previous.length > 0 && (
+      <polyline class="bk-traffic-chart__line bk-traffic-chart__line--prev" points={points(previous)} />
+    )}
+    {current.length > 0 && (
+      <polyline class="bk-traffic-chart__line" points={points(current)} />
+    )}
+    {current.map((v, i) => (
+      <circle class="bk-traffic-chart__pt" cx={xs(i, current.length)} cy={ys(v)} r={4} />
+    ))}
+    <g class="bk-traffic-chart__labels">
+      {labels.map((l, i) => (
+        <text x={xs(i, labels.length) - 10} y={H - 10}>{l}</text>
+      ))}
+    </g>
+  </svg>
+</div>

package/astro/VerdictCard.astro

@@ -0,0 +1,48 @@
+---
+/* blog-kit Astro adapter — VerdictCard
+   Thin wrapper: all styling lives in core/css/components.css (.bk-verdict-card).
+   Byte-identical markup to the React adapter. */
+interface Props {
+  verdict: string;
+  score?: number;
+  summary: string;
+  kicker?: string;
+  bullets?: string[];
+  winner?: string;
+}
+const {
+  verdict,
+  score,
+  summary,
+  kicker = "The verdict",
+  bullets,
+  winner,
+} = Astro.props;
+---
+<div class="bk-verdict-card">
+  <div class="bk-verdict-card__header">
+    <span class="bk-verdict-card__kicker">{kicker}</span>
+    {score !== undefined && (
+      <span class="bk-verdict-card__score">
+        {score}
+        <span class="bk-verdict-card__score-max">/10</span>
+      </span>
+    )}
+  </div>
+  <div class="bk-verdict-card__body">
+    {winner && (
+      <div class="bk-verdict-card__winner">
+        Winner: <span class="bk-verdict-card__winner-name">{winner}</span>
+      </div>
+    )}
+    <h3 class="bk-verdict-card__verdict">{verdict}</h3>
+    <p class="bk-verdict-card__summary">{summary}</p>
+    {bullets && bullets.length > 0 && (
+      <div class="bk-verdict-card__bullets">
+        {bullets.map((b) => (
+          <span class="bk-verdict-card__chip">{b}</span>
+        ))}
+      </div>
+    )}
+  </div>
+</div>

package/astro/blogkit/Article.astro

@@ -0,0 +1,63 @@
+---
+/* ============================================================
+   <Article> — the single-post route surface for ASTRO.
+   ------------------------------------------------------------
+   The Astro counterpart of package/article.tsx. Source-agnostic:
+   it asks the kit's Astro data layer for the post + the RUNTIME-
+   COMPILED body HTML, then renders it under `.blog-root` with the
+   standard tail (author / newsletter / related). Identical markup
+   to the Next path and to the vendored Astro path — eject-safe.
+
+   The body is compiled from a remote MDX string at REQUEST time
+   (see @highjumpdigitalsoftware/blog-kit/astro -> renderMdxToHtml), so a newly
+   published post renders with no redeploy. <BlogBehaviors /> wires
+   the interactive components client-side, exactly as the vendored
+   Astro integration does.
+
+   Usage in a route (app/src/pages/blog/[slug].astro):
+     const data = await loadArticle(config, slug);
+     if (!data) return Astro.redirect("/404");  // or set status 404
+     <Article data={data} config={config} />
+   ============================================================ */
+import type { ArticleData, ResolvedConfig } from "@highjumpdigitalsoftware/blog-kit/astro";
+import { articleHref } from "@highjumpdigitalsoftware/blog-kit/astro";
+import BlogBehaviors from "../BlogBehaviors.astro";
+import AuthorCard from "../AuthorCard.astro";
+import NewsletterCTA from "../NewsletterCTA.astro";
+import RelatedPosts from "../RelatedPosts.astro";
+
+interface Props {
+  data: ArticleData;
+  config: ResolvedConfig;
+  /** Set false to omit the AuthorCard / Newsletter / Related tail. Default true. */
+  showTail?: boolean;
+}
+
+const { data, config, showTail = true } = Astro.props;
+const { post, bodyHtml, related } = data;
+
+const hrefBase =
+  `/${config.listing.articleBasePath.replace(/^\/+|\/+$/g, "")}/`.replace(
+    "//",
+    "/",
+  );
+const authorName = String(post.author ?? config.brand.name);
+const authorRole = String((post as Record<string, unknown>).authorRole ?? config.brand.name);
+const authorBio = (post as Record<string, unknown>).authorBio as string | undefined;
+---
+
+<div class="blog-root">
+  <slot name="hero" />
+  <BlogBehaviors />
+  <div class="bk-prose" set:html={bodyHtml} />
+
+  {showTail && (
+    <div style="margin-top:48px">
+      <AuthorCard name={authorName} role={authorRole} bio={authorBio} />
+      <NewsletterCTA />
+      {related.length > 0 && (
+        <RelatedPosts posts={related} hrefBase={hrefBase} />
+      )}
+    </div>
+  )}
+</div>