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

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 />