dev-api-ui 0.1.7

package/ui/components/ArticlePage.tsx

@@ -0,0 +1,673 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ArticleKind =
+  | 'Guide'
+  | 'Blog'
+  | 'Methodology'
+  | 'Learn'
+  | 'Report'
+  | 'FAQ'
+  | 'Glossary'
+  | 'Coverage';
+
+interface RelatedCard {
+  type: string;
+  title: string;
+  href?: string;
+}
+
+interface CompareRow {
+  q: string;
+  naive: string;
+  pit: string;
+}
+
+interface AuthorCard {
+  initials: string;
+  name: string;
+  bio: string;
+}
+
+export interface ArticlePageProps {
+  kind: ArticleKind;
+  breadcrumb: string;
+  title: string;
+  lede: string;
+  date: string;
+  readTime: string;
+  author: AuthorCard;
+  keyPoints: string[];
+  compareRows: CompareRow[];
+  related: RelatedCard[];
+  brand?: string;
+  apiUrl?: string;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function InlineCode({ children }: { children: string }) {
+  return (
+    <code
+      style={{
+        fontFamily: 'var(--mono)',
+        fontSize: 14,
+        background: '#F2F2EF',
+        border: '0.5px solid var(--hairline-2)',
+        borderRadius: 3,
+        padding: '1px 5px',
+      }}
+    >
+      {children}
+    </code>
+  );
+}
+
+function CheckIcon(): ReactNode {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="15"
+      height="15"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M5 12l4 4 10-10" />
+    </svg>
+  );
+}
+
+function ArrowIcon(): ReactNode {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="13"
+      height="13"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M5 12h14" />
+      <path d="M13 6l6 6-6 6" />
+    </svg>
+  );
+}
+
+// ─── Sub-sections ─────────────────────────────────────────────────────────────
+
+function KeyPoints({ points }: { points: string[] }) {
+  return (
+    <section style={{ padding: '22px 0' }}>
+      <div
+        style={{
+          background: 'var(--surface)',
+          border: '0.5px solid var(--hairline-2)',
+          borderRadius: 8,
+          padding: '18px 22px',
+        }}
+      >
+        <div
+          style={{
+            fontSize: 11,
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '.07em',
+            color: 'var(--tertiary)',
+            marginBottom: 12,
+          }}
+        >
+          Key points
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+          {points.map((k, i) => (
+            <div
+              key={i}
+              style={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: 10,
+                fontSize: 15,
+                color: 'var(--secondary)',
+              }}
+            >
+              <span style={{ flex: 'none', color: 'var(--accent)', marginTop: 2 }}>
+                <CheckIcon />
+              </span>
+              <span>{k}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CompareTable({ rows }: { rows: CompareRow[] }) {
+  const cols = [
+    { key: 'q', label: 'Query' },
+    { key: 'naive', label: 'Naive store' },
+    { key: 'pit', label: 'Point-in-time' },
+  ];
+  return (
+    <div
+      style={{
+        background: 'var(--surface)',
+        border: '0.5px solid var(--hairline-2)',
+        borderRadius: 8,
+        overflow: 'hidden',
+        marginTop: 18,
+      }}
+    >
+      {/* Tinted header */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gap: 16,
+          padding: '10px 18px',
+          borderBottom: '0.5px solid var(--hairline-2)',
+          background: '#F4F4F1',
+        }}
+      >
+        {cols.map((c) => (
+          <span
+            key={c.key}
+            style={{
+              fontSize: 10,
+              fontWeight: 600,
+              textTransform: 'uppercase',
+              letterSpacing: '.07em',
+              color: 'var(--tertiary)',
+            }}
+          >
+            {c.label}
+          </span>
+        ))}
+      </div>
+      {/* Rows — horizontal hairlines, no zebra */}
+      {rows.map((r, i) => (
+        <div
+          key={i}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr 1fr',
+            gap: 16,
+            padding: '12px 18px',
+            borderBottom: '0.5px solid var(--hairline)',
+            fontSize: 14,
+          }}
+        >
+          <span style={{ color: 'var(--secondary)' }}>{r.q}</span>
+          <span style={{ color: 'var(--down)' }}>{r.naive}</span>
+          <span style={{ color: 'var(--accent)' }}>{r.pit}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function PullQuote({ children }: { children: string }) {
+  return (
+    <div
+      style={{
+        margin: '30px 0',
+        padding: '4px 0',
+        borderTop: '0.5px solid var(--hairline)',
+        borderBottom: '0.5px solid var(--hairline)',
+      }}
+    >
+      <p
+        style={{
+          fontSize: 22,
+          color: 'var(--ink)',
+          lineHeight: 1.5,
+          fontWeight: 500,
+          padding: '20px 0',
+        }}
+      >
+        {children}
+      </p>
+    </div>
+  );
+}
+
+function AuthorSection({ author }: { author: AuthorCard }) {
+  return (
+    <section
+      style={{
+        padding: '30px 0',
+        marginTop: 18,
+        borderTop: '0.5px solid var(--hairline)',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+        <span
+          style={{
+            width: 44,
+            height: 44,
+            borderRadius: '50%',
+            background: 'var(--ink)',
+            color: '#fff',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontFamily: 'var(--mono)',
+            fontSize: 15,
+            fontWeight: 600,
+            flex: 'none',
+          }}
+        >
+          {author.initials}
+        </span>
+        <div>
+          <div style={{ fontSize: 15, fontWeight: 500 }}>{author.name}</div>
+          <div style={{ fontSize: 13, color: 'var(--tertiary)' }}>{author.bio}</div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function RelatedCards({ cards }: { cards: RelatedCard[] }) {
+  return (
+    <section
+      style={{
+        maxWidth: 1100,
+        margin: '0 auto',
+        padding: '8px 32px 0',
+      }}
+    >
+      <div style={{ borderTop: '0.5px solid var(--hairline)', paddingTop: 30 }}>
+        <h2
+          style={{
+            fontFamily: 'var(--mono)',
+            fontSize: 20,
+            fontWeight: 600,
+            letterSpacing: '-.01em',
+            marginBottom: 16,
+          }}
+        >
+          Keep reading
+        </h2>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+            gap: 14,
+          }}
+        >
+          {cards.map((a, i) => (
+            <a
+              key={i}
+              href={a.href ?? '#'}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 8,
+                background: 'var(--surface)',
+                border: '0.5px solid var(--hairline-2)',
+                borderRadius: 8,
+                padding: '18px 20px',
+                color: 'inherit',
+                textDecoration: 'none',
+                minHeight: 112,
+              }}
+            >
+              <span
+                style={{
+                  fontSize: 11,
+                  fontWeight: 600,
+                  textTransform: 'uppercase',
+                  letterSpacing: '.07em',
+                  color: 'var(--accent)',
+                }}
+              >
+                {a.type}
+              </span>
+              <span
+                style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)', lineHeight: 1.4 }}
+              >
+                {a.title}
+              </span>
+              <span
+                style={{
+                  marginTop: 'auto',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 6,
+                  fontSize: 13,
+                  fontWeight: 500,
+                  color: 'var(--accent)',
+                }}
+              >
+                Read <ArrowIcon />
+              </span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export default function ArticlePage({
+  kind,
+  breadcrumb,
+  title,
+  lede,
+  date,
+  readTime,
+  author,
+  keyPoints,
+  compareRows,
+  related,
+  brand = 'Console',
+  apiUrl = 'https://api.console.dev',
+}: ArticlePageProps) {
+  return (
+    <>
+      {/* Reading column */}
+      <article style={{ maxWidth: 740, margin: '0 auto', padding: '0 28px' }}>
+
+        {/* Header */}
+        <header style={{ padding: '34px 0 26px', borderBottom: '0.5px solid var(--hairline)' }}>
+          {/* Breadcrumb */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              fontSize: 13,
+              color: 'var(--tertiary)',
+            }}
+          >
+            <a href="#" style={{ color: 'var(--secondary)', textDecoration: 'none' }}>
+              {kind}
+            </a>
+            <span>/</span>
+            <span style={{ color: 'var(--ink)' }}>{breadcrumb}</span>
+          </div>
+
+          {/* Eyebrow */}
+          <div
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 8,
+              fontSize: 12,
+              fontWeight: 600,
+              letterSpacing: '.04em',
+              textTransform: 'uppercase',
+              color: 'var(--accent)',
+              marginTop: 18,
+            }}
+          >
+            <span
+              style={{
+                width: 6,
+                height: 6,
+                borderRadius: '50%',
+                background: 'var(--accent)',
+                display: 'inline-block',
+              }}
+            />
+            {kind}
+          </div>
+
+          {/* H1 */}
+          <h1
+            style={{
+              fontFamily: 'var(--mono)',
+              fontSize: 34,
+              fontWeight: 600,
+              letterSpacing: '-.02em',
+              marginTop: 12,
+              lineHeight: 1.14,
+            }}
+          >
+            {title}
+          </h1>
+
+          {/* Lede */}
+          <p
+            style={{
+              fontSize: 19,
+              color: 'var(--secondary)',
+              lineHeight: 1.55,
+              marginTop: 14,
+            }}
+          >
+            {lede}
+          </p>
+
+          {/* Byline */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 14,
+              flexWrap: 'wrap',
+              marginTop: 18,
+              fontSize: 13,
+              color: 'var(--tertiary)',
+            }}
+          >
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+              <span
+                style={{
+                  width: 24,
+                  height: 24,
+                  borderRadius: '50%',
+                  background: 'var(--ink)',
+                  color: '#fff',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontFamily: 'var(--mono)',
+                  fontSize: 11,
+                  fontWeight: 600,
+                }}
+              >
+                {author.initials}
+              </span>
+              <span style={{ color: 'var(--ink)', fontWeight: 500 }}>{author.name}</span>
+            </span>
+            <span>·</span>
+            <span>{date}</span>
+            <span>·</span>
+            <span>{readTime}</span>
+          </div>
+        </header>
+
+        {/* Lede paragraph (answer-first) */}
+        <section style={{ padding: '26px 0 4px' }}>
+          <p style={{ fontSize: 18, color: 'var(--ink)', lineHeight: 1.65 }}>
+            <b style={{ fontWeight: 600 }}>
+              Point-in-time data returns the value that was actually published as of a given
+              timestamp
+            </b>
+            , with no later revisions folded in. It is the difference between a backtest you can
+            trust and one quietly contaminated by information the market did not yet have.
+          </p>
+        </section>
+
+        {/* Key points box */}
+        <KeyPoints points={keyPoints} />
+
+        {/* Body sections */}
+        <section style={{ padding: '8px 0 0' }}>
+
+          <h2
+            id="what-it-means"
+            style={{
+              fontFamily: 'var(--mono)',
+              fontSize: 22,
+              fontWeight: 600,
+              letterSpacing: '-.01em',
+              margin: '30px 0 4px',
+              scrollMarginTop: 70,
+            }}
+          >
+            What &quot;point-in-time&quot; means
+          </h2>
+          <p
+            style={{ fontSize: 17, color: '#3A3D44', lineHeight: 1.7, marginTop: 16 }}
+          >
+            Most data providers serve you the <em>current best estimate</em> of a historical value.
+            When a figure is revised — a GDP print restated, a settlement corrected — the old number
+            silently disappears. Query last March today and you get March as it is understood now,
+            not as it was understood in March.
+          </p>
+          <p
+            style={{ fontSize: 17, color: '#3A3D44', lineHeight: 1.7, marginTop: 16 }}
+          >
+            A point-in-time store keeps every vintage. Ask for the value{' '}
+            <InlineCode>as_of=2026-03-14</InlineCode> and you receive exactly what a subscriber
+            would have seen on that date, revisions excluded.
+          </p>
+
+          <h2
+            id="look-ahead"
+            style={{
+              fontFamily: 'var(--mono)',
+              fontSize: 22,
+              fontWeight: 600,
+              letterSpacing: '-.01em',
+              margin: '30px 0 4px',
+              scrollMarginTop: 70,
+            }}
+          >
+            Why look-ahead bias ruins backtests
+          </h2>
+          <p
+            style={{ fontSize: 17, color: '#3A3D44', lineHeight: 1.7, marginTop: 16 }}
+          >
+            If your historical series contains values that were only knowable later, your strategy is
+            implicitly trading on the future. Returns look spectacular in simulation and collapse in
+            production. The bias is subtle precisely because the numbers are <em>real</em> — just not
+            real <em>yet</em>.
+          </p>
+
+          {/* Warn callout — local inline (fs=15, margin 22px 0 per design; shared Callout default left at 14) */}
+          <div style={{
+            display: 'flex', alignItems: 'flex-start', gap: 12,
+            margin: '22px 0',
+            background: '#F4F4F1', border: '0.5px solid var(--hairline-2)',
+            borderRadius: 8, padding: '16px 18px',
+          }}>
+            <span style={{ flex: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 20, height: 20, color: 'var(--warn)', marginTop: 1 }}>
+              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <path d="M12 9v4" /><path d="M12 17h.01" />
+                <path d="M10.3 4.3 2.5 18a2 2 0 0 0 1.7 3h15.6a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z" />
+              </svg>
+            </span>
+            <div>
+              <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)' }}>The tell</div>
+              <div style={{ fontSize: 15, color: 'var(--secondary)', marginTop: 3, lineHeight: 1.55 }}>
+                A backtest that beats live trading by a wide, consistent margin almost always has a
+                look-ahead leak. Point-in-time data closes the most common one.
+              </div>
+            </div>
+          </div>
+
+          <h2
+            id="how-console-stamps"
+            style={{
+              fontFamily: 'var(--mono)',
+              fontSize: 22,
+              fontWeight: 600,
+              letterSpacing: '-.01em',
+              margin: '30px 0 4px',
+              scrollMarginTop: 70,
+            }}
+          >
+            How {brand} stamps every value
+          </h2>
+          <p
+            style={{ fontSize: 17, color: '#3A3D44', lineHeight: 1.7, marginTop: 16 }}
+          >
+            Every observation we store carries the timestamp it became public. Add an{' '}
+            <InlineCode>as_of</InlineCode> parameter and the API replays the series as it stood on
+            that date — no special endpoint, same envelope.
+          </p>
+
+          {/* Dark code block — static single-pane */}
+          <div style={{ borderRadius: 8, overflow: 'hidden', border: '0.5px solid #23262B', background: 'var(--code-bg)', marginTop: 18 }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '0.5px solid #23262B', padding: '10px 14px' }}>
+              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--code-dim, #6B7480)' }}>replay · point-in-time</span>
+              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--code-dim, #6B7480)' }}>copy</span>
+            </div>
+            <pre style={{ margin: 0, padding: '16px', fontFamily: 'var(--mono)', fontSize: 13, lineHeight: 1.7, color: 'var(--code-fg)', overflowX: 'auto' }}>
+              <span style={{ color: '#5BC0EB' }}>$</span>{` curl ${apiUrl}/v1/fx/eurusd?as_of=2026-03-14\n`}
+              <span style={{ color: '#6B7480' }}>{'# → the rate as published on 2026-03-14, not today\'s restatement'}</span>
+            </pre>
+          </div>
+
+          <h2
+            id="compare"
+            style={{
+              fontFamily: 'var(--mono)',
+              fontSize: 22,
+              fontWeight: 600,
+              letterSpacing: '-.01em',
+              margin: '30px 0 8px',
+              scrollMarginTop: 70,
+            }}
+          >
+            Naive vs point-in-time
+          </h2>
+
+          {/* Compare table — tinted header, horizontal hairlines, no zebra */}
+          <CompareTable rows={compareRows} />
+
+          {/* Pull-quote */}
+          <PullQuote>
+            &ldquo;If you cannot reproduce the number you traded on, you do not have a backtest — you have
+            a story.&rdquo;
+          </PullQuote>
+
+          <h2
+            id="putting-together"
+            style={{
+              fontFamily: 'var(--mono)',
+              fontSize: 22,
+              fontWeight: 600,
+              letterSpacing: '-.01em',
+              margin: '10px 0 4px',
+              scrollMarginTop: 70,
+            }}
+          >
+            Putting it together
+          </h2>
+          <p
+            style={{ fontSize: 17, color: '#3A3D44', lineHeight: 1.7, marginTop: 16 }}
+          >
+            Point-in-time is the default on every {brand} series — fx, metals, and power alike. You
+            do not opt in; you opt out by omitting <InlineCode>as_of</InlineCode> to get the latest.
+            Either way, every value names the feed and timestamp it came from, so the number is
+            auditable end to end.
+          </p>
+        </section>
+
+        {/* Author card */}
+        <AuthorSection author={author} />
+
+      </article>
+
+      {/* Keep reading — full-width rail, same max-width as rest of site */}
+      <RelatedCards cards={related} />
+    </>
+  );
+}