Under the hood

A stark, server-rendered serif page driven by content/schedule.ts. The deliberately "no-CSS" Times New Roman look is the point — it contrasts the rest of the site. Renders UPCOMING + RECENTLY queues with a visible last-updated date.

import type { Metadata } from 'next';
import Link from 'next/link';
import { Fragment } from 'react';

import { Jsonld } from '@/components/Jsonld';
import { PageFrame } from '@/components/shell/PageFrame';
import { getSchedule } from '@/lib/content';
import type { CodeRef, TaggingData } from '@/lib/lens';
import { normalizeView } from '@/lib/lens';
import { absoluteUrl, pageMetadata, SITE, websiteJsonLd, type JsonLd } from '@/lib/seo';
import type { ChangeLogEntry, ScheduleEntry } from '@/content/schedule';

import styles from './content.module.css';

const TITLE = 'Content';
const DESCRIPTION =
  'The kaspirius content schedule — what is publishing next and what recently went up. Updated regularly; dates are guesses, mediums change.';

export const metadata: Metadata = pageMetadata({
  title: TITLE,
  description: DESCRIPTION,
  path: '/content',
});

const CODE_REFS: CodeRef[] = [
  {
    title: 'Content / schedule page',
    file: 'app/content/page.tsx',
    explanation:
      'A stark, server-rendered serif page driven by content/schedule.ts. The deliberately "no-CSS" Times New Roman look is the point — it contrasts the rest of the site. Renders UPCOMING + RECENTLY queues with a visible last-updated date.',
  },
  {
    title: 'schedule data',
    file: 'content/schedule.ts',
    explanation:
      'The git-versioned schedule itself: a typed array of upcoming/recent entries with ISO dates. Editing the page is editing this file.',
  },
];

/** ISO (or fuzzy "2026-08") → comp style "2026.06.20" / "2026.08.xx". */
function formatDate(iso: string): string {
  const [y, m, d] = iso.split('-');
  return d ? `${y}.${m}.${d}` : `${y}.${m}.xx`;
}

function isInternal(href: string): boolean {
  return href.startsWith('/');
}

function EntryRows({ entries, muted }: { entries: ScheduleEntry[]; muted?: boolean }) {
  return (
    <div className={`${styles.grid} ${muted ? styles.gridMuted : ''}`}>
      {entries.map((e, i) => (
        <Fragment key={i}>
          <div>{formatDate(e.date)}</div>
          <div>
            {e.description}
            {e.href ? (
              <>
                {' '}
                {isInternal(e.href) ? (
                  <Link href={e.href}>{e.href.includes('article') ? 'read it' : e.href}</Link>
                ) : (
                  <a href={e.href} target="_blank" rel="noreferrer">
                    {e.href.replace(/^https?:\/\//, '')}
                  </a>
                )}
              </>
            ) : null}
          </div>
        </Fragment>
      ))}
    </div>
  );
}

function ChangeLogRows({ entries }: { entries: ChangeLogEntry[] }) {
  return (
    <div className={`${styles.grid} ${styles.gridMuted}`}>
      {entries.map((e, i) => (
        <Fragment key={i}>
          <div>{formatDate(e.date)}</div>
          <div>{e.href ? <Link href={e.href}>{e.label}</Link> : e.label}</div>
        </Fragment>
      ))}
    </div>
  );
}

function ContentPage_View() {
  const schedule = getSchedule();
  return (
    <div className={styles.root}>
      <div className={styles.wrap}>
        {/* No visible nav — kept crawlable for internal linking / GEO. */}
        <nav className="sr-only" aria-label="Sections">
          <Link href="/home">home</Link>
          <Link href="/articles">articles</Link>
        </nav>

        <h1 className={styles.h1}>kaspirius // content schedule</h1>
        <p className={styles.lead}>
          What is publishing next on kaspirius, and what recently went up.
        </p>
        <p className={styles.updated}>
          last updated {formatDate(schedule.updated)} — no css to speak of, subject to change
          like everything else.
        </p>
        <hr className={styles.rule} />

        <p className={styles.sectionLabel}>UPCOMING</p>
        {schedule.upcoming.length ? (
          <EntryRows entries={schedule.upcoming} />
        ) : (
          <p className={styles.lead}>TBD</p>
        )}

        <hr className={styles.rule} />
        <p className={styles.sectionLabel}>RECENTLY</p>
        {schedule.recently.length ? (
          <EntryRows entries={schedule.recently} muted />
        ) : (
          <p className={styles.lead}>TBD</p>
        )}

        <hr className={styles.rule} />
        <p className={styles.sectionLabel}>CHANGE LOG</p>
        <p className={styles.lead}>When each page first went live. Grows as the site does.</p>
        <ChangeLogRows entries={schedule.changelog} />

        <hr className={styles.rule} />
        <p className={styles.footer}>
          dates are guesses. mediums change. that&apos;s the whole idea.
        </p>
      </div>
    </div>
  );
}

export default async function ContentPage({
  searchParams,
}: {
  searchParams: Promise<{ view?: string }>;
}) {
  const { view: rawView } = await searchParams;
  const view = normalizeView(rawView);
  const schedule = getSchedule();

  const creativeWork: JsonLd = {
    '@context': 'https://schema.org',
    '@type': 'CreativeWork',
    name: 'kaspirius content schedule',
    description: DESCRIPTION,
    url: absoluteUrl('/content'),
    dateModified: schedule.updated,
    author: { '@type': 'Person', name: SITE.author, url: SITE.url },
  };
  const jsonLd = [websiteJsonLd(), creativeWork];

  const tagging: TaggingData = {
    title: TITLE,
    description: DESCRIPTION,
    canonical: absoluteUrl('/content'),
    updated: schedule.updated,
    headings: [{ level: 1, text: 'kaspirius // content schedule' }],
    jsonLd,
  };

  return (
    <>
      <Jsonld data={jsonLd} />
      <PageFrame
        view={view}
        basePath="/content"
        content={<ContentPage_View />}
        tagging={tagging}
        code={CODE_REFS}
      />
    </>
  );
}

The git-versioned schedule itself: a typed array of upcoming/recent entries with ISO dates. Editing the page is editing this file.

/* ──────────────────────────────────────────────────────────────────────────
   content/schedule.ts — the public publishing schedule (Spec §8).

   Git-versioned data, rendered server-side by /content (Stage 4). UPCOMING and
   RECENTLY are real plans (empty → the page shows "TBD"). CHANGE LOG records
   when pages first went live and grows as we keep building.
   ────────────────────────────────────────────────────────────────────────── */

export interface ScheduleEntry {
  /** ISO date, or a fuzzy marker like "2026-08" when only the month is known. */
  date: string;
  /** Plain-text description. Links are added at the view layer. */
  description: string;
  /** Optional outbound/internal link target for the entry. */
  href?: string;
}

export interface ChangeLogEntry {
  /** ISO date the page/section first went live. */
  date: string;
  /** What was published. */
  label: string;
  /** Optional internal link to the page. */
  href?: string;
}

export interface ScheduleData {
  /** ISO date this schedule was last edited (drives the visible stamp). */
  updated: string;
  upcoming: ScheduleEntry[];
  recently: ScheduleEntry[];
  /** When pages first went live — newest first; expands as we build. */
  changelog: ChangeLogEntry[];
}

export const schedule: ScheduleData = {
  updated: '2026-06-18',
  upcoming: [],
  recently: [],
  changelog: [
    {
      date: '2026-06-18',
      label:
        'More toys — rituals (golden hour, full moon, calendar oddities, birthday door, live counters, streak, watch-it-grow, decaying page), generative (kaleidoscope, flow field, text particles), and arcade classics (2048, minesweeper, breakout); plus a back-to-landing link everywhere',
    },
    {
      date: '2026-06-18',
      label:
        'Arcade opened — 22 more toys, games & tools (coin flip, dice, tarot, spinner, cards, red-black, reaction, typing, BPM, colour test, illusions, fingerprint, game of life, spirograph, seed art, mandelbrot, calculator, currency, country guess, trivia, cookie clicker)',
    },
    { date: '2026-06-18', label: 'Hi-Lo — the first arcade game', href: '/hi-lo' },
    { date: '2026-06-18', label: 'Animals — visuals wall', href: '/animals' },
    { date: '2026-06-18', label: 'Flowers — visuals wall', href: '/flowers' },
    { date: '2026-06-18', label: 'Articles + first article', href: '/articles' },
    { date: '2026-06-18', label: 'Home', href: '/home' },
    { date: '2026-06-18', label: 'Schedule', href: '/content' },
    { date: '2026-06-18', label: 'Landing', href: '/' },
  ],
};