Restyle site to match DevNinja theme (product, not book)

README.md

@@ -1,18 +1,18 @@
 # Interview Prep
 
-Coding, system design, and AI in one place — published as a real HTML book, rewritten for how interviewers score answers.
+FAANG-style interview preparation for coding, system design, and AI — a DevNinja product site.
 
 **Live site:** [https://interview-prep.devninja.in/](https://interview-prep.devninja.in/)
 
 ## What's inside
 
 1. **Competitive Programming** — patterns from arrays and hashing through graphs, DP, and bit manipulation (Python & Java).
 2. **System Design** — fundamentals, building blocks, and case studies (URL shortener, WhatsApp, Instagram, Amazon, S3, YouTube, Uber).
-3. **AI Engineering** — a deep story-driven path: LLMs, prompting, RAG, memory, agents, MCP, skills, and designing a full assistant (`content/ai/`).
-4. **Interview Labs** — 55 FAANG-frequency questions (20 coding, 18 system design, 17 AI) with why-asked, level expectations (Junior→Principal), expected arcs, follow-ups, common mistakes, and production examples.
+3. **AI Engineering** — LLMs, prompting, RAG, memory, agents, MCP, skills, and designing a full assistant (`content/ai/`).
+4. **Interview Labs** — 55 FAANG-frequency questions with why-asked, level expectations, expected arcs, follow-ups, mistakes, and production examples.
 5. **Guides** — interview playbook, role learning paths, comparisons, company guides, behavioral/HR, and cheat sheets.
 
-Chapters are normal web pages (selectable text + code blocks). Topic diagrams are freshly drawn SVGs — not PDF page screenshots. Labs track practiced questions in the browser (localStorage).
+The site uses the **DevNinja** visual system (sky primary, zinc neutrals, system typography) shared with [devninja.in](https://devninja.in/).
 
 ## Local preview
 
@@ -22,42 +22,20 @@ python3 -m http.server 8080
 
 Then open `http://localhost:8080` or any file under `chapters/`.
 
-## Regenerate from the PDF / diagrams
+## Regenerate
 
 ```bash
 pip install pymupdf
-python3 scripts/generate_diagrams.py   # native SVG topic diagrams
-python3 scripts/build_chapters.py      # HTML chapters from PDF (skips hand-authored AI; re-applies interview labs)
-python3 scripts/assemble_ai_chapters.py  # deep AI section from content/ai/
-python3 scripts/assemble_interview.py    # Interview Labs + enrichment + chapter drills
-python3 scripts/assemble_guides.py       # Playbook, paths, comparisons, companies, behavioral
+python3 scripts/generate_diagrams.py
+python3 scripts/build_chapters.py
+python3 scripts/assemble_ai_chapters.py
+python3 scripts/assemble_interview.py
+python3 scripts/assemble_guides.py
 ```
 
 ## Cloudflare Workers
 
 Primary URL: [https://interview-prep.devninja.in/](https://interview-prep.devninja.in/)
 
 - `src/index.js` serves `env.ASSETS`
-- `.assetsignore` excludes `.git`
-- Deploy command: `npx wrangler deploy`
-
-## Files
-
-| Path | Purpose |
-|------|---------|
-| `index.html` | Landing page & table of contents |
-| `chapters/` | HTML chapters (text, code, embedded diagrams) |
-| `chapters/interview-*.html` | Coding / System Design / AI Interview Labs |
-| `chapters/*-playbook|paths|comparisons|…` | Interview guides |
-| `assets/diagrams/` | Diagram images only |
-| `assets/interview-prep.pdf` | Original PDF |
-| `assets/nav.json` | Chapter navigation |
-| `scripts/assemble_interview.py` | Builds labs, injects enrichment + topic drills |
-| `scripts/assemble_guides.py` | Builds guide pages |
-| `scripts/interview_enrichment.py` | Per-question interviewer lens data |
-| `read.html` | Redirects into the chapter reader |
-
-## Keyboard (reader)
-
-- `←` / `→` — previous / next chapter
-- `Esc` — close mobile contents
+- Deploy: `npx wrangler deploy`

chapters/00-how-to-use.html

@@ -5,10 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>00 · How to use this book — Interview Prep</title>
   <meta name="description" content="00 · How to use this book — Interview Prep book chapter" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="../css/styles.css" />
+<link rel="stylesheet" href="../css/styles.css" />
   <link rel="stylesheet" href="../css/chapter.css" />
 </head>
 <body class="chapter-page" data-chapter="00-how-to-use" data-part="cp">
@@ -19,7 +16,7 @@
     <main class="chapter-main" id="content">
       <div class="chapter-toolbar">
         <button class="icon-btn menu-toggle" id="menu-toggle" type="button" aria-label="Open contents">☰</button>
-        <a class="brand" href="../">Interview Prep <span>Book</span></a>
+        <a class="brand" href="../">Interview Prep <span>DevNinja</span></a>
         <div class="toolbar-spacer"></div>
         <a class="btn btn-ghost btn-small" href="../">Home</a>
       </div>

chapters/01-approaching.html

@@ -5,10 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>01 · Approaching any problem — Interview Prep</title>
   <meta name="description" content="01 · Approaching any problem — Interview Prep book chapter" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="../css/styles.css" />
+<link rel="stylesheet" href="../css/styles.css" />
   <link rel="stylesheet" href="../css/chapter.css" />
 </head>
 <body class="chapter-page" data-chapter="01-approaching" data-part="cp">
@@ -19,7 +16,7 @@
     <main class="chapter-main" id="content">
       <div class="chapter-toolbar">
         <button class="icon-btn menu-toggle" id="menu-toggle" type="button" aria-label="Open contents">☰</button>
-        <a class="brand" href="../">Interview Prep <span>Book</span></a>
+        <a class="brand" href="../">Interview Prep <span>DevNinja</span></a>
         <div class="toolbar-spacer"></div>
         <a class="btn btn-ghost btn-small" href="../">Home</a>
       </div>

chapters/02-big-o.html

@@ -5,10 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>02 · Big O and complexity — Interview Prep</title>
   <meta name="description" content="02 · Big O and complexity — Interview Prep book chapter" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="../css/styles.css" />
+<link rel="stylesheet" href="../css/styles.css" />
   <link rel="stylesheet" href="../css/chapter.css" />
 </head>
 <body class="chapter-page" data-chapter="02-big-o" data-part="cp">
@@ -19,7 +16,7 @@
     <main class="chapter-main" id="content">
       <div class="chapter-toolbar">
         <button class="icon-btn menu-toggle" id="menu-toggle" type="button" aria-label="Open contents">☰</button>
-        <a class="brand" href="../">Interview Prep <span>Book</span></a>
+        <a class="brand" href="../">Interview Prep <span>DevNinja</span></a>
         <div class="toolbar-spacer"></div>
         <a class="btn btn-ghost btn-small" href="../">Home</a>
       </div>

chapters/03-arrays.html

@@ -5,10 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>03 · Arrays and hashing — Interview Prep</title>
   <meta name="description" content="03 · Arrays and hashing — Interview Prep book chapter" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="../css/styles.css" />
+<link rel="stylesheet" href="../css/styles.css" />
   <link rel="stylesheet" href="../css/chapter.css" />
   <link rel="stylesheet" href="../css/interview.css" />
 </head>
@@ -20,7 +17,7 @@
     <main class="chapter-main" id="content">
       <div class="chapter-toolbar">
         <button class="icon-btn menu-toggle" id="menu-toggle" type="button" aria-label="Open contents">☰</button>
-        <a class="brand" href="../">Interview Prep <span>Book</span></a>
+        <a class="brand" href="../">Interview Prep <span>DevNinja</span></a>
         <div class="toolbar-spacer"></div>
         <a class="btn btn-ghost btn-small" href="../">Home</a>
       </div>

chapters/04-two-pointers.html

@@ -5,10 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>04 · Two pointers — Interview Prep</title>
   <meta name="description" content="04 · Two pointers — Interview Prep book chapter" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="../css/styles.css" />
+<link rel="stylesheet" href="../css/styles.css" />
   <link rel="stylesheet" href="../css/chapter.css" />
   <link rel="stylesheet" href="../css/interview.css" />
 </head>
@@ -20,7 +17,7 @@
     <main class="chapter-main" id="content">
       <div class="chapter-toolbar">
         <button class="icon-btn menu-toggle" id="menu-toggle" type="button" aria-label="Open contents">☰</button>
-        <a class="brand" href="../">Interview Prep <span>Book</span></a>
+        <a class="brand" href="../">Interview Prep <span>DevNinja</span></a>
         <div class="toolbar-spacer"></div>
         <a class="btn btn-ghost btn-small" href="../">Home</a>
       </div>

chapters/05-sliding-window.html

@@ -5,10 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>05 · Sliding window — Interview Prep</title>
   <meta name="description" content="05 · Sliding window — Interview Prep book chapter" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="../css/styles.css" />
+<link rel="stylesheet" href="../css/styles.css" />
   <link rel="stylesheet" href="../css/chapter.css" />
   <link rel="stylesheet" href="../css/interview.css" />
 </head>
@@ -20,7 +17,7 @@
     <main class="chapter-main" id="content">
       <div class="chapter-toolbar">
         <button class="icon-btn menu-toggle" id="menu-toggle" type="button" aria-label="Open contents">☰</button>
-        <a class="brand" href="../">Interview Prep <span>Book</span></a>
+        <a class="brand" href="../">Interview Prep <span>DevNinja</span></a>
         <div class="toolbar-spacer"></div>
         <a class="btn btn-ghost btn-small" href="../">Home</a>
       </div>

chapters/06-stack.html

@@ -5,10 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>06 · Stack — Interview Prep</title>
   <meta name="description" content="06 · Stack — Interview Prep book chapter" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="../css/styles.css" />
+<link rel="stylesheet" href="../css/styles.css" />
   <link rel="stylesheet" href="../css/chapter.css" />
 </head>
 <body class="chapter-page" data-chapter="06-stack" data-part="cp">
@@ -19,7 +16,7 @@
     <main class="chapter-main" id="content">
       <div class="chapter-toolbar">
         <button class="icon-btn menu-toggle" id="menu-toggle" type="button" aria-label="Open contents">☰</button>
-        <a class="brand" href="../">Interview Prep <span>Book</span></a>
+        <a class="brand" href="../">Interview Prep <span>DevNinja</span></a>
         <div class="toolbar-spacer"></div>
         <a class="btn btn-ghost btn-small" href="../">Home</a>
       </div>

chapters/07-binary-search.html

@@ -5,10 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>07 · Binary search — Interview Prep</title>
   <meta name="description" content="07 · Binary search — Interview Prep book chapter" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="../css/styles.css" />
+<link rel="stylesheet" href="../css/styles.css" />
   <link rel="stylesheet" href="../css/chapter.css" />
   <link rel="stylesheet" href="../css/interview.css" />
 </head>
@@ -20,7 +17,7 @@
     <main class="chapter-main" id="content">
       <div class="chapter-toolbar">
         <button class="icon-btn menu-toggle" id="menu-toggle" type="button" aria-label="Open contents">☰</button>
-        <a class="brand" href="../">Interview Prep <span>Book</span></a>
+        <a class="brand" href="../">Interview Prep <span>DevNinja</span></a>
         <div class="toolbar-spacer"></div>
         <a class="btn btn-ghost btn-small" href="../">Home</a>
       </div>

chapters/08-linked-lists.html

@@ -5,10 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>08 · Linked lists — Interview Prep</title>
   <meta name="description" content="08 · Linked lists — Interview Prep book chapter" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="../css/styles.css" />
+<link rel="stylesheet" href="../css/styles.css" />
   <link rel="stylesheet" href="../css/chapter.css" />
   <link rel="stylesheet" href="../css/interview.css" />
 </head>
@@ -20,7 +17,7 @@
     <main class="chapter-main" id="content">
       <div class="chapter-toolbar">
         <button class="icon-btn menu-toggle" id="menu-toggle" type="button" aria-label="Open contents">☰</button>
-        <a class="brand" href="../">Interview Prep <span>Book</span></a>
+        <a class="brand" href="../">Interview Prep <span>DevNinja</span></a>
         <div class="toolbar-spacer"></div>
         <a class="btn btn-ghost btn-small" href="../">Home</a>
       </div>

chapters/09-trees.html

@@ -5,10 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>09 · Trees and BST — Interview Prep</title>
   <meta name="description" content="09 · Trees and BST — Interview Prep book chapter" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="../css/styles.css" />
+<link rel="stylesheet" href="../css/styles.css" />
   <link rel="stylesheet" href="../css/chapter.css" />
   <link rel="stylesheet" href="../css/interview.css" />
 </head>
@@ -20,7 +17,7 @@
     <main class="chapter-main" id="content">
       <div class="chapter-toolbar">
         <button class="icon-btn menu-toggle" id="menu-toggle" type="button" aria-label="Open contents">☰</button>
-        <a class="brand" href="../">Interview Prep <span>Book</span></a>
+        <a class="brand" href="../">Interview Prep <span>DevNinja</span></a>
         <div class="toolbar-spacer"></div>
         <a class="btn btn-ghost btn-small" href="../">Home</a>
       </div>

chapters/10-heaps.html

@@ -5,10 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>10 · Heaps and priority queues — Interview Prep</title>
   <meta name="description" content="10 · Heaps and priority queues — Interview Prep book chapter" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="../css/styles.css" />
+<link rel="stylesheet" href="../css/styles.css" />
   <link rel="stylesheet" href="../css/chapter.css" />
 </head>
 <body class="chapter-page" data-chapter="10-heaps" data-part="cp">
@@ -19,7 +16,7 @@
     <main class="chapter-main" id="content">
       <div class="chapter-toolbar">
         <button class="icon-btn menu-toggle" id="menu-toggle" type="button" aria-label="Open contents">☰</button>
-        <a class="brand" href="../">Interview Prep <span>Book</span></a>
+        <a class="brand" href="../">Interview Prep <span>DevNinja</span></a>
         <div class="toolbar-spacer"></div>
         <a class="btn btn-ghost btn-small" href="../">Home</a>
       </div>

chapters/11-backtracking.html

@@ -5,10 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>11 · Backtracking — Interview Prep</title>
   <meta name="description" content="11 · Backtracking — Interview Prep book chapter" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="../css/styles.css" />
+<link rel="stylesheet" href="../css/styles.css" />
   <link rel="stylesheet" href="../css/chapter.css" />
 </head>
 <body class="chapter-page" data-chapter="11-backtracking" data-part="cp">
@@ -19,7 +16,7 @@
     <main class="chapter-main" id="content">
       <div class="chapter-toolbar">
         <button class="icon-btn menu-toggle" id="menu-toggle" type="button" aria-label="Open contents">☰</button>
-        <a class="brand" href="../">Interview Prep <span>Book</span></a>
+        <a class="brand" href="../">Interview Prep <span>DevNinja</span></a>
         <div class="toolbar-spacer"></div>
         <a class="btn btn-ghost btn-small" href="../">Home</a>
       </div>