@highjumpdigitalsoftware/blog-kit 0.6.0

package/astro/Checklist.astro

@@ -0,0 +1,24 @@
+---
+interface ChecklistEntry {
+  title: string;
+  sub?: string;
+  done?: boolean;
+}
+interface Props {
+  items: ChecklistEntry[];
+}
+const { items } = Astro.props;
+---
+{items && items.length > 0 && (
+  <ul class="bk-checklist">
+    {items.map((it) => (
+      <li class={`bk-checklist__item${it.done ? " bk-checklist__item--done" : ""}`}>
+        <span class="bk-checklist__box" aria-hidden="true">{it.done ? "✓" : ""}</span>
+        <span class="bk-checklist__text">
+          <span class="bk-checklist__title">{it.title}</span>
+          {it.sub && <span class="bk-checklist__sub">{it.sub}</span>}
+        </span>
+      </li>
+    ))}
+  </ul>
+)}

package/astro/ChecklistItem.astro

@@ -0,0 +1,15 @@
+---
+interface Props {
+  checked: boolean;
+  label: string;
+  description?: string;
+}
+const { checked, label, description } = Astro.props;
+---
+<div class={`bk-checklist-item${checked ? " bk-checklist-item--checked" : ""}`}>
+  <span class="bk-checklist-item__box" aria-hidden={!checked}>{checked ? "✓" : ""}</span>
+  <span class="bk-checklist-item__text">
+    <span class="bk-checklist-item__label">{label}</span>
+    {description && <span class="bk-checklist-item__desc">{description}</span>}
+  </span>
+</div>

package/astro/CodeSnippet.astro

@@ -0,0 +1,20 @@
+---
+import { ICONS } from "../core/icons";
+interface Props {
+  code: string;
+  language?: string;
+  filename?: string;
+}
+const { code, language = "text", filename } = Astro.props;
+const label = filename || (language !== "text" ? language : "code");
+---
+<div class="bk-code" data-bk-code>
+  <div class="bk-code__bar">
+    <span class="bk-code__label">{label}</span>
+    <button type="button" class="bk-code__copy" data-bk-code-copy>
+      <span class="bk-code__copy-icon" set:html={ICONS.copy} />
+      <span class="bk-code__copy-label">Copy</span>
+    </button>
+  </div>
+  <pre class="bk-code__pre"><code class={`bk-code__code language-${language}`}>{code}</code></pre>
+</div>

package/astro/ComparisonTable.astro

@@ -0,0 +1,103 @@
+---
+interface ComparisonItem {
+  feature: string;
+  optionA: string;
+  optionB: string;
+  winner?: "a" | "b" | "tie";
+}
+interface Props {
+  title?: string;
+  optionALabel: string;
+  optionBLabel: string;
+  items?: ComparisonItem[];
+}
+
+const TICK = "✓";
+const CROSS = "✕";
+
+type Cell = { kind: "yes" | "no" | "text"; text: string };
+
+/** Normalise a cell value: tick/"yes" and cross/"no" become glyph marks. */
+function resolveCell(text: string): Cell {
+  const v = String(text ?? "").trim();
+  const lower = v.toLowerCase();
+  if (v === TICK || lower === "yes") return { kind: "yes", text: TICK };
+  if (v === CROSS || lower === "no") return { kind: "no", text: CROSS };
+  return { kind: "text", text: v };
+}
+
+const { title, optionALabel, optionBLabel, items = [] } = Astro.props;
+const list = items ?? [];
+---
+{list.length > 0 && (
+  <div class="bk-comparison">
+    {title && <h3 class="bk-comparison__title">{title}</h3>}
+
+    <div class="bk-comparison__cards">
+      {list.map((item) => {
+        const a = resolveCell(item.optionA);
+        const b = resolveCell(item.optionB);
+        return (
+          <div class="bk-comparison__card">
+            <div class="bk-comparison__card-feature">{item.feature}</div>
+            <div class={`bk-comparison__card-row${item.winner === "a" ? " bk-comparison__card-row--best" : ""}`}>
+              <span class="bk-comparison__card-label">{optionALabel}</span>
+              {a.kind === "yes"
+                ? <span class="bk-comparison__mark bk-comparison__mark--yes">{a.text}</span>
+                : a.kind === "no"
+                ? <span class="bk-comparison__mark bk-comparison__mark--no">{a.text}</span>
+                : <span class={item.winner === "a" ? "bk-comparison__value--best" : undefined}>{a.text}</span>}
+            </div>
+            <div class={`bk-comparison__card-row${item.winner === "b" ? " bk-comparison__card-row--best" : ""}`}>
+              <span class="bk-comparison__card-label">{optionBLabel}</span>
+              {b.kind === "yes"
+                ? <span class="bk-comparison__mark bk-comparison__mark--yes">{b.text}</span>
+                : b.kind === "no"
+                ? <span class="bk-comparison__mark bk-comparison__mark--no">{b.text}</span>
+                : <span class={item.winner === "b" ? "bk-comparison__value--best" : undefined}>{b.text}</span>}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+
+    <div class="bk-comparison__table-wrap" data-bk-comparison>
+      <div class="bk-comparison__scroll">
+        <table class="bk-comparison__table">
+          <thead>
+            <tr>
+              <th class="bk-comparison__th">Feature</th>
+              <th class="bk-comparison__th">{optionALabel}</th>
+              <th class="bk-comparison__th">{optionBLabel}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {list.map((item) => {
+              const a = resolveCell(item.optionA);
+              const b = resolveCell(item.optionB);
+              return (
+                <tr class="bk-comparison__tr">
+                  <td class="bk-comparison__td bk-comparison__td--feature">{item.feature}</td>
+                  <td class={`bk-comparison__td${item.winner === "a" ? " bk-comparison__td--best" : ""}`}>
+                    {a.kind === "yes"
+                      ? <span class="bk-comparison__mark bk-comparison__mark--yes">{a.text}</span>
+                      : a.kind === "no"
+                      ? <span class="bk-comparison__mark bk-comparison__mark--no">{a.text}</span>
+                      : <span class={item.winner === "a" ? "bk-comparison__value--best" : undefined}>{a.text}</span>}
+                  </td>
+                  <td class={`bk-comparison__td${item.winner === "b" ? " bk-comparison__td--best" : ""}`}>
+                    {b.kind === "yes"
+                      ? <span class="bk-comparison__mark bk-comparison__mark--yes">{b.text}</span>
+                      : b.kind === "no"
+                      ? <span class="bk-comparison__mark bk-comparison__mark--no">{b.text}</span>
+                      : <span class={item.winner === "b" ? "bk-comparison__value--best" : undefined}>{b.text}</span>}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+)}

package/astro/Definition.astro

@@ -0,0 +1,30 @@
+---
+interface Props {
+  term: string;
+  name?: string;
+  pronunciation?: string;
+}
+const { term, name, pronunciation } = Astro.props;
+// `term` is meant to be a 2-3 char monogram. If an author passes a full
+// phrase, derive initials so the tile doesn't overflow.
+const rawTerm = String(term ?? "").trim();
+const looksLikePhrase = rawTerm.length > 4 || /\s|-/.test(rawTerm);
+const monogram = looksLikePhrase
+  ? rawTerm
+      .split(/[\s-]+/)
+      .map((w) => w[0])
+      .filter(Boolean)
+      .join("")
+      .slice(0, 3)
+      .toUpperCase()
+  : rawTerm.toUpperCase();
+const resolvedName = name ?? (looksLikePhrase ? rawTerm : undefined);
+---
+<div class="bk-definition">
+  <div class="bk-definition__monogram" aria-hidden="true">{monogram}</div>
+  <div class="bk-definition__content">
+    {resolvedName && <p class="bk-definition__name">{resolvedName}</p>}
+    {pronunciation && <p class="bk-definition__pronunciation">{pronunciation}</p>}
+    <p class="bk-definition__body"><slot /></p>
+  </div>
+</div>

package/astro/DeliveryComparison.astro

@@ -0,0 +1,40 @@
+---
+interface DeliveryComparisonRow {
+  label: string;
+  sub?: string;
+  values: string[];
+}
+interface Props {
+  columns?: string[];
+  rows?: DeliveryComparisonRow[];
+}
+
+const { columns = [], rows = [] } = Astro.props;
+const cols = columns ?? [];
+const list = rows ?? [];
+---
+{list.length > 0 && (
+  <div class="bk-delivery-comparison" data-bk-delivery-comparison>
+    <div class="bk-delivery-comparison__scroll">
+      <table class="bk-delivery-comparison__table">
+        <thead>
+          <tr>
+            <th class="bk-delivery-comparison__th" />
+            {cols.map((c) => <th class="bk-delivery-comparison__th">{c}</th>)}
+          </tr>
+        </thead>
+        <tbody>
+          {list.map((r) => (
+            <tr class="bk-delivery-comparison__tr">
+              <td class="bk-delivery-comparison__td bk-delivery-comparison__td--label">
+                <strong class="bk-delivery-comparison__label">{r.label}</strong>
+                {r.sub}
+              </td>
+              {r.values.map((v) => <td class="bk-delivery-comparison__td">{v}</td>)}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  </div>
+)}

package/astro/FAQList.astro

@@ -0,0 +1,43 @@
+---
+interface FAQItem {
+  q: string;
+  a: string;
+}
+interface Props {
+  items?: FAQItem[];
+  heading?: string;
+}
+
+/** Split an answer body into paragraphs on blank lines. */
+function toParagraphs(a: string): string[] {
+  return String(a ?? "")
+    .split(/\n{2,}/)
+    .filter(Boolean);
+}
+
+const { items, heading } = Astro.props;
+const list = items ?? [];
+---
+<div class="bk-faq" data-bk-faq>
+  {heading && <p class="bk-faq__heading">{heading}</p>}
+  <div class="bk-faq__list">
+    {list.length > 0
+      ? list.map((it, i) => (
+          <details class="bk-faq__item" open={i === 0}>
+            <summary class="bk-faq__summary">
+              <span class="bk-faq__question">{it.q}</span>
+              <span class="bk-faq__toggle" aria-hidden="true">
+                <span class="bk-faq__bar bk-faq__bar--h" />
+                <span class="bk-faq__bar bk-faq__bar--v" />
+              </span>
+            </summary>
+            <div class="bk-faq__answer">
+              {toParagraphs(it.a).map((p) => (
+                <p class="bk-faq__para" set:html={p} />
+              ))}
+            </div>
+          </details>
+        ))
+      : <slot />}
+  </div>
+</div>

package/astro/FurtherReading.astro

@@ -0,0 +1,34 @@
+---
+interface FurtherReadingSource {
+  title: string;
+  source: string;
+  url: string;
+}
+interface Props {
+  sources?: FurtherReadingSource[];
+  heading?: string;
+}
+
+const { sources, heading } = Astro.props;
+const list = sources ?? [];
+---
+{list.length > 0 && (
+  <div class="bk-further-reading">
+    <p class="bk-further-reading__title">{heading ?? "Further reading"}</p>
+    <ul class="bk-further-reading__list">
+      {list.map((s) => (
+        <li class="bk-further-reading__item">
+          <a
+            class="bk-further-reading__link"
+            href={s.url}
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
+            {s.title}
+          </a>
+          <span class="bk-further-reading__source">{s.source}</span>
+        </li>
+      ))}
+    </ul>
+  </div>
+)}

package/astro/ImageFeature.astro

@@ -0,0 +1,22 @@
+---
+interface Props {
+  src: string;
+  alt: string;
+  caption?: string;
+  credit?: string;
+  position?: "left" | "right" | "full";
+}
+const { src, alt, caption, credit, position = "full" } = Astro.props;
+const pos = position === "left" || position === "right" ? position : "full";
+---
+<figure class={`bk-image-feature bk-image-feature--${pos}`}>
+  <div class="bk-image-feature__frame">
+    <img class="bk-image-feature__img" src={src} alt={alt} loading="lazy" decoding="async" />
+  </div>
+  {(caption || credit) && (
+    <figcaption class="bk-image-feature__caption">
+      {caption && <span class="bk-image-feature__text">{caption}</span>}
+      {credit && <span class="bk-image-feature__credit">{credit}</span>}
+    </figcaption>
+  )}
+</figure>

package/astro/Infographic.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+  src: string;
+  alt: string;
+}
+const { src, alt } = Astro.props;
+---
+{src && (
+  <figure class="bk-infographic">
+    <img class="bk-infographic__img" src={src} alt={alt} loading="lazy" decoding="async" />
+  </figure>
+)}

package/astro/KeyMetric.astro

@@ -0,0 +1,40 @@
+---
+import { ICONS } from "../core/icons";
+
+interface Props {
+  number: string;
+  label?: string;
+  title?: string;
+  sub?: string;
+  source?: string;
+  sourceUrl?: string;
+}
+
+const { number, label, title, sub, source, sourceUrl } = Astro.props;
+---
+<div class="bk-key-metric">
+  <div class="bk-key-metric__num">{number}</div>
+  <div class="bk-key-metric__copy">
+    {label && <div class="bk-key-metric__label">{label}</div>}
+    {title && <p class="bk-key-metric__title" set:html={title} />}
+    {sub && <p class="bk-key-metric__sub">{sub}</p>}
+    {source &&
+      (sourceUrl ? (
+        <a
+          class="bk-key-metric__source bk-key-metric__source--link"
+          href={sourceUrl}
+          target="_blank"
+          rel="nofollow noopener noreferrer"
+        >
+          <span class="bk-key-metric__source-kicker">Source</span>
+          {source}
+          <span class="bk-key-metric__source-icon" aria-hidden="true" set:html={ICONS["external"]} />
+        </a>
+      ) : (
+        <div class="bk-key-metric__source">
+          <span class="bk-key-metric__source-kicker">Source</span>
+          {source}
+        </div>
+      ))}
+  </div>
+</div>

package/astro/KeywordTable.astro

@@ -0,0 +1,69 @@
+---
+interface KeywordRow {
+  keyword: string;
+  volume: string;
+  difficulty: number;
+  was?: number | string;
+  now: number | string;
+  delta: number | string;
+}
+interface Props {
+  rows?: KeywordRow[];
+}
+
+/** Bucket a 0–100 difficulty score into low / med / high. */
+function difficultyBucket(difficulty: number): "low" | "med" | "high" {
+  return difficulty < 40 ? "low" : difficulty < 60 ? "med" : "high";
+}
+
+/** A negative delta means the rank dropped (down); anything else is up. */
+function deltaDirection(delta: number | string): "up" | "down" {
+  return delta && String(delta).startsWith("-") ? "down" : "up";
+}
+
+/** Show the magnitude when numeric, else the raw value. */
+function deltaDisplay(delta: number | string): number | string {
+  return Math.abs(Number(delta)) || delta;
+}
+
+const { rows = [] } = Astro.props;
+const list = rows ?? [];
+---
+{list.length > 0 && (
+  <div class="bk-keyword-table" data-bk-keyword-table>
+    <div class="bk-keyword-table__scroll">
+      <table class="bk-keyword-table__table">
+        <thead>
+          <tr>
+            <th class="bk-keyword-table__th">Keyword</th>
+            <th class="bk-keyword-table__th bk-keyword-table__th--r">Volume</th>
+            <th class="bk-keyword-table__th">Difficulty</th>
+            <th class="bk-keyword-table__th bk-keyword-table__th--r">Was</th>
+            <th class="bk-keyword-table__th bk-keyword-table__th--r">Now</th>
+            <th class="bk-keyword-table__th bk-keyword-table__th--r">Δ</th>
+          </tr>
+        </thead>
+        <tbody>
+          {list.map((r) => {
+            const diff = difficultyBucket(r.difficulty);
+            const direction = deltaDirection(r.delta);
+            return (
+              <tr class="bk-keyword-table__tr">
+                <td class="bk-keyword-table__td bk-keyword-table__td--kw">{r.keyword}</td>
+                <td class="bk-keyword-table__td bk-keyword-table__td--r">{r.volume}</td>
+                <td class="bk-keyword-table__td">
+                  <span class={`bk-keyword-table__diff bk-keyword-table__diff--${diff}`}>{r.difficulty}</span>
+                </td>
+                <td class="bk-keyword-table__td bk-keyword-table__td--r bk-keyword-table__rank">{r.was ?? "—"}</td>
+                <td class="bk-keyword-table__td bk-keyword-table__td--r bk-keyword-table__rank">{r.now}</td>
+                <td class="bk-keyword-table__td bk-keyword-table__td--r">
+                  <span class={`bk-keyword-table__delta bk-keyword-table__delta--${direction}`}>{deltaDisplay(r.delta)}</span>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  </div>
+)}

package/astro/List.astro

@@ -0,0 +1,46 @@
+---
+import { ICONS } from "../core/icons";
+
+type ListVariant = "ordered" | "bullet" | "check";
+interface Props {
+  variant?: ListVariant | string;
+  items: string[];
+  heading?: string;
+}
+
+const VARIANTS: Record<string, ListVariant> = {
+  ordered: "ordered",
+  numbered: "ordered",
+  number: "ordered",
+  bullet: "bullet",
+  bulleted: "bullet",
+  dot: "bullet",
+  check: "check",
+  checked: "check",
+  checklist: "check",
+};
+
+const { variant, items, heading } = Astro.props;
+const v = VARIANTS[(variant ?? "bullet").toLowerCase().trim()] ?? "bullet";
+const Tag = v === "ordered" ? "ol" : "ul";
+const hasItems = Array.isArray(items) && items.length > 0;
+---
+{hasItems && (
+  <div class={`bk-list bk-list--${v}`}>
+    {heading && <p class="bk-list__heading">{heading}</p>}
+    <Tag class="bk-list__items">
+      {items.map((item, i) => (
+        <li class="bk-list__item">
+          {v === "ordered" ? (
+            <span class="bk-list__marker" aria-hidden="true">{String(i + 1).padStart(2, "0")}</span>
+          ) : v === "check" ? (
+            <span class="bk-list__marker" aria-hidden="true" set:html={ICONS["check-tick"]} />
+          ) : (
+            <span class="bk-list__marker" aria-hidden="true" />
+          )}
+          <span class="bk-list__text" set:html={item} />
+        </li>
+      ))}
+    </Tag>
+  </div>
+)}

package/astro/MetricHighlight.astro

@@ -0,0 +1,77 @@
+---
+import { ICONS } from "../core/icons";
+
+interface Metric {
+  value: string;
+  label: string;
+  change?: string;
+  source?: string;
+  sourceUrl?: string;
+}
+
+interface Props {
+  metrics?: Metric[];
+}
+
+const { metrics = [] } = Astro.props;
+const single = metrics.length === 1 ? metrics[0] : null;
+const cols = metrics.length === 2 ? 2 : metrics.length === 3 ? 3 : 4;
+---
+{metrics.length === 0 ? null : single ? (
+  <div class="bk-metric-highlight bk-metric-highlight--hero">
+    <div class="bk-metric-highlight__hero-value">{single.value}</div>
+    <div class="bk-metric-highlight__hero-body">
+      {single.change && <div class="bk-metric-highlight__hero-change">{single.change}</div>}
+      <div class="bk-metric-highlight__hero-label">{single.label}</div>
+      {single.source &&
+        (single.sourceUrl ? (
+          <a
+            class="bk-metric-highlight__source bk-metric-highlight__source--dark bk-metric-highlight__source--link"
+            href={single.sourceUrl}
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
+            <span class="bk-metric-highlight__source-kicker">Source</span>
+            {single.source}
+            <span class="bk-metric-highlight__source-icon" aria-hidden="true" set:html={ICONS["external"]} />
+          </a>
+        ) : (
+          <div class="bk-metric-highlight__source bk-metric-highlight__source--dark">
+            <span class="bk-metric-highlight__source-kicker">Source</span>
+            {single.source}
+          </div>
+        ))}
+    </div>
+  </div>
+) : (
+  <div class={`bk-metric-highlight bk-metric-highlight--grid bk-metric-highlight--${cols}`}>
+    {metrics.map((metric) => (
+      <div class="bk-metric-highlight__card">
+        <div class="bk-metric-highlight__value">{metric.value}</div>
+        <div class="bk-metric-highlight__label">{metric.label}</div>
+        {metric.change && <div class="bk-metric-highlight__change">{metric.change}</div>}
+        {metric.source && (
+          <div class="bk-metric-highlight__source-wrap">
+            {metric.sourceUrl ? (
+              <a
+                class="bk-metric-highlight__source bk-metric-highlight__source--link"
+                href={metric.sourceUrl}
+                target="_blank"
+                rel="nofollow noopener noreferrer"
+              >
+                <span class="bk-metric-highlight__source-kicker">Source</span>
+                {metric.source}
+                <span class="bk-metric-highlight__source-icon" aria-hidden="true" set:html={ICONS["external"]} />
+              </a>
+            ) : (
+              <div class="bk-metric-highlight__source">
+                <span class="bk-metric-highlight__source-kicker">Source</span>
+                {metric.source}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+)}

package/astro/NewsletterCTA.astro

@@ -0,0 +1,40 @@
+---
+interface Props {
+  heading?: string;
+  description?: string;
+  action?: string;
+  placeholder?: string;
+  buttonText?: string;
+}
+const {
+  heading = "One email, once a week.",
+  description = "Field-tested ideas for turning chat traffic into revenue. No filler.",
+  action = "/api/newsletter",
+  placeholder = "you@studio.com",
+  buttonText = "Subscribe",
+} = Astro.props;
+---
+<div class="bk-newsletter">
+  <span class="bk-newsletter__glow" aria-hidden="true"></span>
+  <div class="bk-newsletter__copy">
+    <h3 class="bk-newsletter__heading">{heading}</h3>
+    <p class="bk-newsletter__desc">{description}</p>
+  </div>
+  <div class="bk-newsletter__action">
+    <form class="bk-newsletter__form" action={action} method="post">
+      <label class="bk-newsletter__honeypot" aria-hidden="true">
+        Leave this field empty
+        <input type="text" name="website" tabindex="-1" autocomplete="off" />
+      </label>
+      <input
+        class="bk-newsletter__input"
+        type="email"
+        name="email"
+        required
+        placeholder={placeholder}
+        autocomplete="email"
+      />
+      <button class="bk-newsletter__button" type="submit">{buttonText}</button>
+    </form>
+  </div>
+</div>

package/astro/NumberedCard.astro

@@ -0,0 +1,6 @@
+---
+interface Props { number?: number | string; title?: string; description?: string; }
+const { number, title, description } = Astro.props;
+const n = String(number ?? "").padStart(2, "0");
+---
+<div class="bk-numbered-card"><span class="bk-numbered-card__badge">{n}</span>{title ? <h4 class="bk-numbered-card__title">{title}</h4> : null}<p class="bk-numbered-card__body">{description}<slot /></p></div>