docs(docs): improve system design guide and simplify custom page tabs

apps/docs/blume.config.ts

@@ -145,8 +145,8 @@ export default defineConfig({
     // The two custom pages (pages/*.astro) as header tabs. Neither is a
     // content folder, so the tabs scope nothing out of the sidebar tree.
     tabs: [
-      { label: "Changelog", path: "/changelog", icon: "clock" },
-      { label: "Appendix", path: "/appendix", icon: "library" },
+      { label: "Changelog", path: "/changelog" },
+      { label: "Appendix", path: "/appendix" },
     ],
   },
 });

apps/docs/content/system-design/index.mdx

@@ -1,11 +1,15 @@
 ---
 title: System Design
-description: Notes for system design interviews — how to scope a problem, size it, and pick the parts that carry the load.
+description: "Notes on System Design Interview — An Insider's Guide (Volumes 1 and 2): how to scope a problem, size it, and pick the parts that carry the load."
 icon: network
-sidebar:
-  label: Overview
 ---
 
+These notes follow Alex Xu's [System Design Interview — An Insider's Guide](https://bytebytego.com/courses/system-design-interview), [Volumes 1 and 2](https://www.goodreads.com/book/show/54109255-system-design-interview-an-insider-s-guide).
+
+:::note
+These notes are a work in progress.
+:::
+
 ## How an interview runs
 
 <Steps>
@@ -25,3 +29,102 @@ sidebar:
     Take the hardest part (a hot key, fan-out, a consistency guarantee) and work through its tradeoffs.
   </Step>
 </Steps>
+
+## Foundations
+
+<CardGroup cols={3}>
+  <Card title="Scaling" href="/system-design/scaling" icon="trending-up">
+    From one server to millions of users.
+  </Card>
+  <Card title="Estimation" href="/system-design/back-of-the-envelope-estimation" icon="calculator">
+    Back-of-the-envelope QPS and storage.
+  </Card>
+  <Card title="Interview Framework" href="/system-design/interview-framework" icon="list-checks">
+    The four steps of the interview.
+  </Card>
+</CardGroup>
+
+## Core designs
+
+<CardGroup cols={3}>
+  <Card title="Rate Limiter" href="/system-design/rate-limiter" icon="gauge">
+    Token and leaking buckets, windows.
+  </Card>
+  <Card title="Consistent Hashing" href="/system-design/consistent-hashing" icon="orbit">
+    Hash rings and virtual nodes.
+  </Card>
+  <Card title="Key-Value Store" href="/system-design/key-value-store" icon="database">
+    Quorums, vector clocks, gossip.
+  </Card>
+  <Card title="Unique ID Generator" href="/system-design/unique-id-generator" icon="fingerprint">
+    Snowflake and its alternatives.
+  </Card>
+  <Card title="URL Shortener" href="/system-design/url-shortener" icon="link">
+    Base 62 and redirects.
+  </Card>
+  <Card title="Web Crawler" href="/system-design/web-crawler" icon="bug">
+    The URL frontier and politeness.
+  </Card>
+  <Card title="Notification System" href="/system-design/notification-system" icon="bell">
+    Push, SMS and email at scale.
+  </Card>
+  <Card title="News Feed System" href="/system-design/news-feed-system" icon="newspaper">
+    Fanout on write and on read.
+  </Card>
+  <Card title="Chat System" href="/system-design/chat-system" icon="message-circle">
+    WebSockets and presence.
+  </Card>
+  <Card title="Search Autocomplete" href="/system-design/search-autocomplete" icon="text-cursor-input">
+    Tries and top-k prefixes.
+  </Card>
+  <Card title="YouTube" href="/system-design/youtube" icon="video">
+    Upload, transcode, stream.
+  </Card>
+  <Card title="Google Drive" href="/system-design/google-drive" icon="hard-drive">
+    Block storage and sync.
+  </Card>
+</CardGroup>
+
+## Advanced designs
+
+<CardGroup cols={3}>
+  <Card title="Proximity Service" href="/system-design/proximity-service" icon="map-pin">
+    Geohash, quadtrees, S2.
+  </Card>
+  <Card title="Nearby Friends" href="/system-design/nearby-friends" icon="users">
+    Live locations over pub/sub.
+  </Card>
+  <Card title="Google Maps" href="/system-design/google-maps" icon="map">
+    Tiles, routing and ETAs.
+  </Card>
+  <Card title="Distributed Message Queue" href="/system-design/distributed-message-queue" icon="send">
+    Partitions and consumer groups.
+  </Card>
+  <Card title="Metrics Monitoring" href="/system-design/metrics-monitoring" icon="activity">
+    Time series and alerting.
+  </Card>
+  <Card title="Ad Click Aggregation" href="/system-design/ad-click-event-aggregation" icon="mouse-pointer-click">
+    Exactly-once stream counts.
+  </Card>
+  <Card title="Hotel Reservation" href="/system-design/hotel-reservation-system" icon="bed">
+    Inventory without double booking.
+  </Card>
+  <Card title="Email Service" href="/system-design/distributed-email-service" icon="mail">
+    Mail storage and search.
+  </Card>
+  <Card title="S3-like Object Storage" href="/system-design/s3-object-storage" icon="archive">
+    Erasure coding and metadata.
+  </Card>
+  <Card title="Gaming Leaderboard" href="/system-design/gaming-leaderboard" icon="trophy">
+    Redis sorted sets.
+  </Card>
+  <Card title="Payment System" href="/system-design/payment-system" icon="credit-card">
+    Ledgers and reconciliation.
+  </Card>
+  <Card title="Digital Wallet" href="/system-design/digital-wallet" icon="wallet">
+    Distributed transactions, event sourcing.
+  </Card>
+  <Card title="Stock Exchange" href="/system-design/stock-exchange" icon="chart-candlestick">
+    Order books and sequencers.
+  </Card>
+</CardGroup>