diff --git a/docs/superpowers/plans/2026-08-27-reddit-fonts.md b/docs/superpowers/plans/2026-08-27-reddit-fonts.md new file mode 100644 index 0000000..538e73d --- /dev/null +++ b/docs/superpowers/plans/2026-08-27-reddit-fonts.md @@ -0,0 +1,263 @@ +# Reddit Fonts Override Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Override old Reddit's fonts with Reddit Sans, Reddit Sans Condensed, and Reddit Mono, toggleable from the extension popup. + +**Architecture:** Bundle three variable-weight woff2 files in the extension. A static CSS file declares `@font-face` for each family and applies font overrides when `html.rt-fonts-enabled` is present. The JS layer toggles that class based on a `fontOverride` setting, following the same pattern as card layout and badge layout. + +**Tech Stack:** Firefox WebExtension (Manifest V2), vanilla CSS/JS, woff2 variable fonts. + +## Global Constraints + +- No external network requests — fonts are bundled locally. +- SIL Open Font License 1.1 — no attribution in UI required, but license file ships with fonts. +- Variable fonts only (no static weight files) — one file per family covers all weights. +- Follow existing codebase patterns: IIFE modules, `window.RedditTweaks` namespace, class-toggle gating. + +--- + +### Task 1: Download and bundle font assets + +**Files:** +- Create: `content/fonts/RedditSans[wght].woff2` +- Create: `content/fonts/RedditSansCondensed[wght].woff2` +- Create: `content/fonts/RedditMono[wght].woff2` +- Create: `content/fonts/OFL.txt` + +**Interfaces:** +- Consumes: Nothing +- Produces: Font files at `content/fonts/` referenced by CSS in Task 2 + +- [ ] **Step 1: Create the fonts directory** + +```bash +mkdir -p content/fonts +``` + +- [ ] **Step 2: Download the three variable-weight woff2 files from the reddit/redditsans repo** + +```bash +curl -L -o "content/fonts/RedditSans[wght].woff2" \ + "https://raw.githubusercontent.com/reddit/redditsans/main/fonts/sans/webfonts/RedditSans%5Bwght%5D.woff2" + +curl -L -o "content/fonts/RedditSansCondensed[wght].woff2" \ + "https://raw.githubusercontent.com/reddit/redditsans/main/fonts/sans-condensed/webfonts/RedditSansCondensed%5Bwght%5D.woff2" + +curl -L -o "content/fonts/RedditMono[wght].woff2" \ + "https://raw.githubusercontent.com/reddit/redditsans/main/fonts/mono/webfonts/RedditMono%5Bwght%5D.woff2" +``` + +The `%5B` and `%5D` are URL-encoded brackets for the variable font filenames. + +- [ ] **Step 3: Download the OFL license file** + +```bash +curl -L -o content/fonts/OFL.txt \ + "https://raw.githubusercontent.com/reddit/redditsans/main/OFL.txt" +``` + +- [ ] **Step 4: Verify files downloaded correctly** + +```bash +ls -la content/fonts/ +``` + +Expected: four files — three woff2 files (~81KB, ~94KB, ~96KB) and OFL.txt. + +- [ ] **Step 5: Commit** + +```bash +git add content/fonts/ +git commit -m "feat: bundle Reddit Sans, Condensed, and Mono variable fonts" +``` + +--- + +### Task 2: Create fonts CSS with @font-face and override rules + +**Files:** +- Create: `content/styles/fonts.css` +- Modify: `manifest.json:19` (add CSS to manifest) + +**Interfaces:** +- Consumes: Font files at `content/fonts/` from Task 1 +- Produces: CSS classes gated on `html.rt-fonts-enabled` used by Task 3 + +- [ ] **Step 1: Create `content/styles/fonts.css`** + +```css +/* --- @font-face declarations --- */ +@font-face { + font-family: 'Reddit Sans'; + src: url("../fonts/RedditSans[wght].woff2") format("woff2"); + font-weight: 300 800; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Reddit Sans Condensed'; + src: url("../fonts/RedditSansCondensed[wght].woff2") format("woff2"); + font-weight: 300 800; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Reddit Mono'; + src: url("../fonts/RedditMono[wght].woff2") format("woff2"); + font-weight: 300 800; + font-style: normal; + font-display: swap; +} + +/* --- Font overrides (gated on toggle class) --- */ +html.rt-fonts-enabled, +html.rt-fonts-enabled body, +html.rt-fonts-enabled input, +html.rt-fonts-enabled textarea, +html.rt-fonts-enabled select, +html.rt-fonts-enabled button { + font-family: 'Reddit Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; +} + +html.rt-fonts-enabled .content, +html.rt-fonts-enabled .side, +html.rt-fonts-enabled .footer-parent, +html.rt-fonts-enabled .nav-buttons, +html.rt-fonts-enabled .tabmenu, +html.rt-fonts-enabled .morelink, +html.rt-fonts-enabled .titlebox, +html.rt-fonts-enabled .searchpane, +html.rt-fonts-enabled .infobar { + font-family: inherit !important; +} + +html.rt-fonts-enabled code, +html.rt-fonts-enabled pre, +html.rt-fonts-enabled .md code, +html.rt-fonts-enabled .md pre { + font-family: 'Reddit Mono', 'SF Mono', 'Fira Code', Consolas, monospace !important; +} +``` + +- [ ] **Step 2: Add fonts.css to the manifest CSS array** + +In `manifest.json`, add `"content/styles/fonts.css"` to the `css` array at line 19: + +```json +"css": ["content/styles/badges.css", "content/styles/cards.css", "content/styles/fonts.css"], +``` + +- [ ] **Step 3: Verify the CSS file loads without syntax errors** + +Load the extension in Firefox (`about:debugging` → Load Temporary Add-on) and check the browser console for CSS parse errors. Confirm no errors related to font paths. + +- [ ] **Step 4: Commit** + +```bash +git add content/styles/fonts.css manifest.json +git commit -m "feat: add fonts CSS with @font-face and override rules" +``` + +--- + +### Task 3: Wire settings, class toggle, and popup + +**Files:** +- Modify: `lib/settings.js:22` (add default) +- Modify: `content/main.js:63-84` (add class toggle and storage listener) +- Modify: `popup/popup.html:18-19` (add checkbox) +- Modify: `popup/popup.js:71,288,313-314` (populate, save, listen) + +**Interfaces:** +- Consumes: CSS class `html.rt-fonts-enabled` from Task 2 +- Produces: Complete toggleable font override feature + +- [ ] **Step 1: Add `fontOverride` default to `lib/settings.js`** + +Add `fontOverride: true,` after line 22 (`badgeLayout: true,`): + +```js +const DEFAULTS = { + // ... existing defaults ... + badgeLayout: true, + fontOverride: true, + cardLayout: true, + // ... rest ... +}; +``` + +- [ ] **Step 2: Add class toggle in `content/main.js` init function** + +After the `badgeLayout` class toggle block (line 67-69), add: + +```js +if (settings.fontOverride) { + document.documentElement.classList.add("rt-fonts-enabled"); +} +``` + +- [ ] **Step 3: Add `fontOverride` to the storage change reload check in `content/main.js`** + +In the `browser.storage.onChanged.addListener` callback (around line 80-88), add `fontOverride` to the reload condition: + +```js +if ( + (changes.enabled && changes.enabled.newValue !== changes.enabled.oldValue) || + (changes.badgeLayout && changes.badgeLayout.newValue !== changes.badgeLayout.oldValue) || + (changes.fontOverride && changes.fontOverride.newValue !== changes.fontOverride.oldValue) || + (changes.cardLayout && changes.cardLayout.newValue !== changes.cardLayout.oldValue) +) { + location.reload(); + return; +} +``` + +- [ ] **Step 4: Add checkbox to `popup/popup.html`** + +After the "Badge layout" toggle (line 18-19), add: + +```html + +``` + +- [ ] **Step 5: Wire the checkbox in `popup/popup.js`** + +In `populateControls` (after line 71), add: + +```js +document.getElementById("fontOverride").checked = settings.fontOverride; +``` + +In `saveFromControls` (after `badgeLayout` on line 288), add: + +```js +fontOverride: document.getElementById("fontOverride").checked, +``` + +In `init` (after the `badgeLayout` listener on line 314), add: + +```js +document.getElementById("fontOverride").addEventListener("change", saveFromControls); +``` + +- [ ] **Step 6: Test the toggle** + +1. Load the extension in Firefox. +2. Open old.reddit.com. +3. Verify fonts are Reddit Sans by default (toggle is on). +4. Open popup, uncheck "Reddit fonts", confirm page reloads and fonts revert to old Reddit defaults. +5. Re-check "Reddit fonts", confirm page reloads and fonts switch back to Reddit Sans. +6. Verify monospace elements (`code`, `pre`) use Reddit Mono. + +- [ ] **Step 7: Commit** + +```bash +git add lib/settings.js content/main.js popup/popup.html popup/popup.js +git commit -m "feat: add fontOverride toggle for Reddit Sans fonts" +```