The Copilot Reader

A research-website hub from the New Future of Work team at Microsoft Research. Each post is a deep dive into how AI is reshaping how we work — from millions of Copilot conversations to controlled studies of how mindsets shape AI adoption.

The site is a static React SPA deployed to GitHub Pages.

Stack

• Vite 8 + React 19 + TypeScript 6
• Tailwind CSS v4 (@theme inline design tokens, oklch palette, light/dark)
• react-router-dom 7 (SPA, client-side routing)
• Recharts (data viz), lucide-react (icons)
• MDX 3 for prose-heavy posts (@mdx-js/rollup + @mdx-js/react)
• Self-hosted variable fonts: Fraunces, Inter, JetBrains Mono via @fontsource-variable/*

Quick start

npm install
npm run dev      # http://localhost:5173/copilot-reader/
npm run build    # tsc -b && vite build  →  dist/
npm run preview  # serve the production build locally

Node version: requires Node 20.19+ (Vite 8 / rolldown). On Node 20.18 the rolldown native binding fails to install as an optional dep — upgrade first.

Repository layout

copilot_reader/
├── .github/workflows/deploy.yml          # GH Pages CI
├── public/
│   ├── favicon.svg
│   └── 404.html                          # SPA-on-GH-Pages redirect shim
├── src/
│   ├── main.tsx                          # entry: fonts + globals + <App>
│   ├── App.tsx                           # router + shell wiring
│   ├── styles/
│   │   ├── globals.css                   # design tokens (the brand source of truth)
│   │   └── editorial.css                 # editorial typography utilities
│   ├── components/
│   │   ├── shell/                        # SiteHeader, MicrosoftFooter
│   │   ├── post/                         # PostFrame, MDXComponents
│   │   └── viz/                          # Reveal, ChartFrame (shared post primitives)
│   ├── content/
│   │   ├── types.ts                      # PostMeta interface
│   │   ├── posts.ts                      # auto-discovery registry — DO NOT EDIT to add posts
│   │   └── posts/
│   │       ├── _template/                # copy-paste starter for new posts
│   │       └── five-million-conversations/  # Vol. 1: Counts et al. 2025
│   ├── pages/
│   │   ├── HomePage.tsx                  # post index
│   │   ├── PostPage.tsx                  # generic post wrapper (lazy-loads body)
│   │   └── NotFoundPage.tsx
│   └── lib/
│       ├── posts.ts                      # listPosts / getPost / listSlugs
│       └── utils.ts                      # cn() helper
└── vite.config.ts                        # base /copilot-reader/, MDX plugin, @ alias

Adding a post

See CONTRIBUTING.md for the full recipe in both authoring modes (MDX in-repo / zip-import) and the file-by-file migration procedure for finished React-app zips from Lovable.dev / v0.dev / similar tools.

The short version:

1. Copy src/content/posts/_template/ to src/content/posts/<your-slug>/
2. Edit meta.ts and either post.mdx (prose) or post.tsx (custom React)
3. Commit. The site auto-discovers it.

No edits to routes, the homepage, or any registry file are required.

Brand

The full design system lives in src/styles/globals.css. All colors are oklch. Available tokens:

• Editorial palette: bg-paper, bg-paper-warm, text-ink, text-ink-soft, text-ink-muted, border-rule, bg-highlight
• Six analytic accents: bg-accent-1 (terracotta) through bg-accent-6 (slate-blue)
• Recharts colors: var(--color-chart-1) through var(--color-chart-5)
• Editorial typography classes: editorial-h1/-h2/-h3, editorial-lede, editorial-body, eyebrow, pull-quote, drop-cap, marker-highlight, hairline, reveal

Format tags

Every post declares a kind: PostKind in its meta.ts. The tag is shown as a small eyebrow chip on the homepage card and post header, and signals what kind of read the piece is.

Tag	Used for
SIX KEY FINDINGS	Numbered structural framing — N discrete findings, each with a short summary and (optional) click-to-reveal depth
FIELD EXPERIMENT	Narrative deep-dive of an empirical experiment with treatment/control
DATA STORY	Narrative analysis of platform telemetry without an experiment
BRIEFING	Short, single-finding piece

Adding a new tag requires editing the PostKind union in src/content/types.ts AND updating this table — a deliberate editorial decision, not a free-form metadata field.

Deploy

GitHub Actions auto-deploys to GitHub Pages on every push to main. Site URL: https://microsoft.github.io/copilot-reader/

License

MIT — see LICENSE. Copyright (c) Microsoft Corporation.