docs(docs): add wrapper badge component, make backlinks collapsible, and include solution code for Gas Station problem

apps/docs/components.ts

@@ -9,10 +9,11 @@ export default defineComponents({
   mdx: {
     Carousel: "./components/Carousel.astro",
     CarouselImage: "./components/CarouselImage.astro",
+    // MDX's own content wrapper: problem pages' topic + explanation badges, from
+    // `topics:` / `video:` frontmatter, between the description and the body.
+    wrapper: "./components/ProblemBadges.astro",
   },
   layout: {
-    // Problem pages' topic + explanation badges, from `topics:` / `video:` frontmatter.
-    PageHeader: "./components/ProblemBadges.astro",
     // Topic landing + guide pages' "what links here": every problem pointing at the page.
     PageFooter: "./components/BacklinksList.astro",
   },

apps/docs/components/BacklinksList.astro

@@ -15,10 +15,14 @@
  *
  * Problem pages are recognised by their `<num>. <name>` title, the shape
  * `apps/cli/sync.ts` writes.
+ *
+ * The list is a native `<details>`, open on load: the chevron at the top
+ * right of the header row collapses it like an accordion, with no JS.
  */
 import { getEntry } from "astro:content";
 import data from "blume:data";
 import { withBase } from "blume/components/islands/base-path.ts";
+import Icon from "blume/components/Icon.astro";
 import { tagTarget, type TopicTag } from "../topic-landings.ts";
 
 interface Props {
@@ -61,11 +65,17 @@ const backlinks = problems.some((p) => p.route.path === route)
 
 {
   backlinks.length > 0 && (
-    <section aria-labelledby="backlinks" class="not-prose mx-auto mt-12 max-w-content border-border border-t pt-6">
-      <h2 class="mb-2 flex items-baseline gap-2 font-medium text-muted-foreground text-xs uppercase tracking-wide" id="backlinks">
-        Backlinks
-        <span class="tabular-nums">{backlinks.length}</span>
-      </h2>
+    <details
+      class="group not-prose mx-auto mt-12 max-w-content border-border border-t pt-6"
+      open
+    >
+      <summary class="mb-2 flex cursor-pointer list-none items-center justify-between gap-2 text-muted-foreground transition-colors hover:text-foreground [&::-webkit-details-marker]:hidden">
+        <h2 class="flex items-baseline gap-2 font-medium text-xs uppercase tracking-wide" id="backlinks">
+          Backlinks
+          <span class="tabular-nums">{backlinks.length}</span>
+        </h2>
+        <Icon class="shrink-0 transition-transform group-open:rotate-180" name="chevron-down" size={16} />
+      </summary>
       <ul class="text-sm">
         {backlinks.map((p) => (
           <li>
@@ -79,6 +89,6 @@ const backlinks = problems.some((p) => p.route.path === route)
           </li>
         ))}
       </ul>
-    </section>
+    </details>
   )
 }

apps/docs/components/ProblemBadges.astro

@@ -1,10 +1,13 @@
 ---
 /**
- * The `PageHeader` slot: the badge row above a page's title. Blume hands the
- * slot only the route, so the page's frontmatter is looked up through the
- * route manifest — the same `getEntry` call Blume's own page template makes.
- * Pages with none of the keys below (landing pages, the changelog) render
- * nothing.
+ * The MDX `wrapper`: the badge row between a page's description and its body.
+ * Blume's page template renders the title and description itself and then
+ * the MDX content, with no slot in between, so wrapping the content is the
+ * only way to land right after the description. MDX hands a wrapper no
+ * route, so it is read off the URL, and the page's frontmatter is then
+ * looked up through the route manifest — the same `getEntry` call Blume's own
+ * page template makes. Pages with none of the keys below (landing pages, the
+ * changelog) render only their content.
  *
  * - `topics:` (problem pages, written by `apps/cli/sync.ts`) is LeetCode's own
  *   topic tags. A tag the campaign teaches (`topic-landings.ts`) links to that
@@ -20,14 +23,15 @@
 import { getEntry } from "astro:content";
 import data from "blume:data";
 import Badge from "blume/components/content/Badge.astro";
-import { withBase } from "blume/components/islands/base-path.ts";
+import { stripBase, withBase } from "blume/components/islands/base-path.ts";
 import { tagTarget, type TopicTag } from "../topic-landings.ts";
 
-interface Props {
-  route: string;
-}
-
-const { route } = Astro.props;
+// `/sub/tree-dfs/invert-binary-tree/` (or `.../index.html` in a static build)
+// -> `/tree-dfs/invert-binary-tree`, the base-less shape of `data.routes`.
+const route =
+  stripBase(import.meta.env.BASE_URL ?? "/", Astro.url.pathname)
+    .replace(/(\/index)?\.html$/u, "")
+    .replace(/(.)\/+$/u, "$1");
 const at = data.routes.find((r: { path: string }) => r.path === route);
 const entry = at ? await getEntry(at.collection, at.entryId) : undefined;
 const tags: TopicTag[] = entry?.data.topics ?? [];
@@ -47,7 +51,7 @@ const linkClass = "no-underline transition-opacity hover:opacity-80";
 
 {
   (badges.length > 0 || video || list) && (
-    <div class="not-prose mx-auto mb-4 flex max-w-content flex-wrap gap-1.5">
+    <div class="not-prose mb-6 flex flex-wrap gap-1.5">
       {badges.map((b) => (
         <a
           href={b.href}
@@ -75,3 +79,5 @@ const linkClass = "no-underline transition-opacity hover:opacity-80";
     </div>
   )
 }
+
+<slot />

apps/docs/content/(05-decision-space)/greedy/134-gas-station.mdx

@@ -32,4 +32,16 @@ sidebar:
 ```py
 class Solution:
     def canCompleteCircuit(self, gas: list[int], cost: list[int]) -> int:
+        start, tank, total = 0, 0, 0
+
+        for i in range(len(gas)):
+            drive = gas[i] - cost[i]
+            tank = tank + drive
+
+            if tank < 0:
+                tank = 0
+                start = i + 1
+            total = total + drive
+
+        return start if total >= 0 else -1
 ```