From d2c645bef8960c5455699c64caa1a85b52a4604d Mon Sep 17 00:00:00 2001 From: Prad Nukala Date: Tue, 29 Sep 2026 17:03:28 -0400 Subject: [PATCH] docs(docs): add wrapper badge component, make backlinks collapsible, and include solution code for Gas Station problem --- apps/docs/components.ts | 5 ++-- apps/docs/components/BacklinksList.astro | 22 ++++++++++---- apps/docs/components/ProblemBadges.astro | 30 +++++++++++-------- .../greedy/134-gas-station.mdx | 12 ++++++++ 4 files changed, 49 insertions(+), 20 deletions(-) diff --git a/apps/docs/components.ts b/apps/docs/components.ts index 1bd3c9c..8ee4e7a 100644 --- a/apps/docs/components.ts +++ b/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", }, diff --git a/apps/docs/components/BacklinksList.astro b/apps/docs/components/BacklinksList.astro index eb7d976..2d06413 100644 --- a/apps/docs/components/BacklinksList.astro +++ b/apps/docs/components/BacklinksList.astro @@ -15,10 +15,14 @@ * * Problem pages are recognised by their `. ` title, the shape * `apps/cli/sync.ts` writes. + * + * The list is a native `
`, 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 && ( -
-

- Backlinks - {backlinks.length} -

+
+ +

+ Backlinks + {backlinks.length} +

+ +
    {backlinks.map((p) => (
  • @@ -79,6 +89,6 @@ const backlinks = problems.some((p) => p.route.path === route)
    • ))}
-
+
) } diff --git a/apps/docs/components/ProblemBadges.astro b/apps/docs/components/ProblemBadges.astro index 6d0bbfb..88d7c64 100644 --- a/apps/docs/components/ProblemBadges.astro +++ b/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) && ( -
+
{badges.map((b) => ( ) } + + diff --git a/apps/docs/content/(05-decision-space)/greedy/134-gas-station.mdx b/apps/docs/content/(05-decision-space)/greedy/134-gas-station.mdx index 58b6b89..364a2b7 100644 --- a/apps/docs/content/(05-decision-space)/greedy/134-gas-station.mdx +++ b/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 ```