From 2c2cf21542ba841f5e77ce1154214373225c9884 Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Sun, 31 May 2026 19:33:43 +0200
Subject: [PATCH 1/4] fix(css): keep docs-ext-link underline continuous across
 descenders

Browser default text-decoration-skip-ink: auto breaks the underline
around any descender (commas, p, g, y, etc.), making links like
'Audit, Deny, and Warn' render with visible gaps. Set it to 'none'
so the underline stays continuous.

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 src/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.css b/src/index.css
index 15209128..4b4236b5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -924,6 +924,7 @@ html {
   text-decoration-thickness: 2px;
   text-underline-offset: 2px;
   text-decoration-color: hsl(var(--primary));
+  text-decoration-skip-ink: none;
   border-radius: 2px;
   transition: color 200ms ease, text-decoration-color 200ms ease;
 }

From 16247513d06e05adc98d91af25dc1694ee75299d Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Sun, 31 May 2026 19:47:19 +0200
Subject: [PATCH 2/4] fix: render inline markdown in author-controlled string
 fields

Short single-line YAML fields (audience, tool.description, step.title,
adventure.story, contributor.about, rewards.eligibility, tier.description,
rewards.rankingNote) were rendered as plain text, so markdown syntax such
as backticks for inline code, **bold**, and [links](url) appeared
literally instead of being formatted. The 'familiarity with basic
`kubectl` and YAML will help.' string on the lex-imperfecta beginner
page surfaced this.

Add a MarkdownInline component (react-markdown configured to unwrap <p>
and strip block-level elements via disallowedElements) and route every
author-controlled prose field through it. Plain text passes through
unchanged so non-markdown content keeps rendering correctly.

Extract the shared inline renderers (a, code, strong, em) into
markdownInlineComponents.tsx so both MarkdownContent and MarkdownInline
use the same styling.

Document the rule in CLAUDE.md and styleguide.md.

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 CLAUDE.md                                   |  1 +
 src/components/AdventureCard.tsx            |  3 +-
 src/components/ChallengeBuildersSection.tsx |  3 +-
 src/components/MarkdownContent.tsx          | 62 ++-------------------
 src/components/MarkdownInline.tsx           | 29 ++++++++++
 src/components/RewardsCard.tsx              |  7 ++-
 src/components/WalkthroughSection.tsx       |  3 +-
 src/components/markdownInlineComponents.tsx | 57 +++++++++++++++++++
 src/pages/AdventureDetail.tsx               |  3 +-
 src/pages/ChallengeDetail.tsx               |  5 +-
 src/test/markdownInline.test.tsx            | 53 ++++++++++++++++++
 styleguide.md                               | 18 ++++++
 12 files changed, 179 insertions(+), 65 deletions(-)
 create mode 100644 src/components/MarkdownInline.tsx
 create mode 100644 src/components/markdownInlineComponents.tsx
 create mode 100644 src/test/markdownInline.test.tsx

diff --git a/CLAUDE.md b/CLAUDE.md
index 2dc6578f..67dc2fb1 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -195,6 +195,7 @@ When diagnosing a bug, especially in the production build, follow these rules wi
 - **Buttons:** use raw `<button>` elements with the CSS utility classes defined in `src/index.css` (`.btn-primary`, `.btn-ghost`, `.btn-soft`, `.btn-inverse`, `.btn-ghost-inverse`). There is no `Button` component wrapper and no `@radix-ui/react-slot` dependency. See `styleguide.md` for which class to use on which background color.
 - **Toasts:** if toast notifications are ever needed, install `sonner` and add `src/components/ui/sonner.tsx` (shadcn pattern). Mount `<Toaster>` in the nearest layout that actually triggers a toast. Do not install speculatively.
 - **TooltipProvider** is intentionally not mounted in `Layout.tsx` until a call site exists. Wrap only the subtree that uses `<Tooltip>` with `<TooltipProvider>` at that point.
+- **Author-controlled strings render through markdown.** Every YAML/TS field that holds prose written by a challenge author (e.g. `level.audience`, `tool.description`, `adventure.story`, `step.title`, `contributor.about`, `rewards.eligibility`, `tier.description`, `rewards.rankingNote`) must be rendered through `<MarkdownInline>` (single-line, no wrapping `<p>`) or `<MarkdownContent>` (multi-paragraph). Never render an author-controlled string as `{value}` directly. Plain prose passes through `<MarkdownInline>` unchanged, so this is safe for fields that may or may not contain markdown. Identifier fields (`id`, URLs, enum values like `difficulty`, emoji) are not author prose and are rendered directly.
 
 ### Component CSS patterns
 
diff --git a/src/components/AdventureCard.tsx b/src/components/AdventureCard.tsx
index 2ed78173..4fa6f0ff 100644
--- a/src/components/AdventureCard.tsx
+++ b/src/components/AdventureCard.tsx
@@ -4,6 +4,7 @@ import { Layers } from "lucide-react";
 import type { AdventureCardSummary } from "@/data/adventures";
 import { DifficultyBadge } from "@/components/DifficultyBadge";
 import { ContributorBadge } from "@/components/ContributorBadge";
+import { MarkdownInline } from "@/components/MarkdownInline";
 
 type AdventureCardProps = { adventure: AdventureCardSummary };
 
@@ -23,7 +24,7 @@ export const AdventureCard = ({ adventure }: AdventureCardProps): JSX.Element =>
     <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
       {adventure.title}
     </h3>
-    <p className="mt-2 text-sm text-muted-foreground line-clamp-2">{adventure.story}</p>
+    <p className="mt-2 text-sm text-muted-foreground line-clamp-2"><MarkdownInline source={adventure.story} /></p>
 
     <div className="mt-4 flex flex-wrap items-center gap-2">
       {adventure.levels.map((level) => (
diff --git a/src/components/ChallengeBuildersSection.tsx b/src/components/ChallengeBuildersSection.tsx
index dda362d3..2bf9bb50 100644
--- a/src/components/ChallengeBuildersSection.tsx
+++ b/src/components/ChallengeBuildersSection.tsx
@@ -3,6 +3,7 @@ import { Link } from "react-router";
 import { ADVENTURE_CONTRIBUTORS } from "@/data/adventures";
 import { PersonNameLink } from "@/components/PersonNameLink";
 import { SidebarLayout } from "@/components/SidebarLayout";
+import { MarkdownInline } from "@/components/MarkdownInline";
 
 export const ChallengeBuildersSection = ({ aside }: { aside?: ReactNode }): JSX.Element | null => {
   if (ADVENTURE_CONTRIBUTORS.length === 0) {
@@ -23,7 +24,7 @@ export const ChallengeBuildersSection = ({ aside }: { aside?: ReactNode }): JSX.
           >
             <PersonNameLink name={contributor.name} url={contributor.url} />
             {contributor.about && (
-              <p className="mt-1.5 text-sm text-muted-foreground leading-relaxed">{contributor.about}</p>
+              <p className="mt-1.5 text-sm text-muted-foreground leading-relaxed"><MarkdownInline source={contributor.about} /></p>
             )}
             <p className="mt-6 mb-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">adventures created</p>
             <ul className="space-y-3">
diff --git a/src/components/MarkdownContent.tsx b/src/components/MarkdownContent.tsx
index 61a5dcc5..b31f10c5 100644
--- a/src/components/MarkdownContent.tsx
+++ b/src/components/MarkdownContent.tsx
@@ -1,14 +1,9 @@
 import { useRef, useState, type JSX, type ReactNode } from "react";
 import ReactMarkdown, { type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { Check, Copy, ExternalLink } from "lucide-react";
+import { Check, Copy } from "lucide-react";
 import { getSectionIcon, slugify } from "@/lib/markdown";
-
-const isExternalHref = (href: string | undefined): boolean =>
-  typeof href === "string" && /^https?:\/\//i.test(href);
-
-const isLocalhostHref = (href: string | undefined): boolean =>
-  typeof href === "string" && /^https?:\/\/(localhost|127\.0\.0\.1|\[::1\])(:\d+)?/i.test(href);
+import { inlineComponents } from "@/components/markdownInlineComponents";
 
 const childrenToText = (children: ReactNode): string => {
   if (typeof children === "string" || typeof children === "number") return String(children);
@@ -75,7 +70,11 @@ const CodeBlock = ({ children, showCopy = true }: { children: ReactNode; showCop
   );
 };
 
+// Inline-only renderers (links, inline code, strong, em) live in
+// markdownInlineComponents.tsx so MarkdownInline can reuse them without
+// dragging in the full block-level renderer set.
 const components: Components = {
+  ...inlineComponents,
   h2: ({ children }) => {
     const text = childrenToText(children);
     const slug = slugify(text);
@@ -137,55 +136,6 @@ const components: Components = {
       {children}
     </li>
   ),
-  a: ({ href, children }) => {
-    // Block dangerous URI schemes (XSS protection)
-    if (typeof href === "string" && /^(javascript|data|vbscript):/i.test(href.trim())) {
-      return <span>{children}</span>;
-    }
-    // Render localhost URLs as plain text (not clickable)
-    if (isLocalhostHref(href)) {
-      return <code className="rounded bg-[hsl(var(--surface))] px-1.5 py-0.5 text-sm font-mono text-foreground">{children}</code>;
-    }
-    if (isExternalHref(href)) {
-      return (
-        <a
-          href={href}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="docs-ext-link"
-        >
-          {children}
-          <ExternalLink size={12} aria-hidden="true" className="shrink-0" />
-          <span className="sr-only"> (opens in new tab)</span>
-        </a>
-      );
-    }
-    return (
-      <a
-        href={href}
-        className="docs-ext-link"
-      >
-        {children}
-      </a>
-    );
-  },
-  strong: ({ children }) => (
-    <strong className="font-semibold text-foreground">{children}</strong>
-  ),
-  em: ({ children }) => (
-    <em className="italic text-[hsl(var(--text-secondary))]">{children}</em>
-  ),
-  code: ({ className, children }) => {
-    const isBlock = typeof className === "string" && className.startsWith("language-");
-    if (isBlock) {
-      return <code className={className}>{children}</code>;
-    }
-    return (
-      <code className="rounded-sm border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] px-1.5 py-0.5 font-mono text-[0.85em] text-foreground">
-        {children}
-      </code>
-    );
-  },
   pre: ({ children }) => {
     const child = Array.isArray(children) ? children[0] : children;
     // Show copy for all fenced code blocks; language-tagged and bare blocks both wrap <code>
diff --git a/src/components/MarkdownInline.tsx b/src/components/MarkdownInline.tsx
new file mode 100644
index 00000000..25ab0070
--- /dev/null
+++ b/src/components/MarkdownInline.tsx
@@ -0,0 +1,29 @@
+import type { JSX, ReactNode } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { inlineComponents } from "@/components/markdownInlineComponents";
+
+// Render author-controlled single-line strings as inline markdown. Block
+// elements are unwrapped so the output is safe to drop inside <p>, <span>,
+// <h*>, <button>, etc. without producing invalid HTML.
+const components: Components = {
+  ...inlineComponents,
+  p: ({ children }: { children?: ReactNode }) => <>{children}</>,
+};
+
+const DISALLOWED = ["h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "blockquote", "pre", "hr", "table", "img"];
+
+type MarkdownInlineProps = {
+  source: string;
+};
+
+export const MarkdownInline = ({ source }: MarkdownInlineProps): JSX.Element => (
+  <ReactMarkdown
+    remarkPlugins={[remarkGfm]}
+    components={components}
+    disallowedElements={DISALLOWED}
+    unwrapDisallowed
+  >
+    {source}
+  </ReactMarkdown>
+);
diff --git a/src/components/RewardsCard.tsx b/src/components/RewardsCard.tsx
index 7a845d5a..1fe3a3f6 100644
--- a/src/components/RewardsCard.tsx
+++ b/src/components/RewardsCard.tsx
@@ -3,6 +3,7 @@ import { ExternalLink, Trophy } from "lucide-react";
 import type { AdventureRewards } from "@/data/adventures/types";
 import { COMMUNITY_URL } from "@/data/constants";
 import { formatDeadline } from "@/lib/utils";
+import { MarkdownInline } from "@/components/MarkdownInline";
 
 type RewardsCardProps = {
   rewards: AdventureRewards;
@@ -39,7 +40,7 @@ export const RewardsCard = ({ rewards, compact = false, levelDeadline, deadlineP
         </div>
       ) : (
         <p className="text-xs text-[hsl(var(--text-secondary))] leading-relaxed mb-4">
-          {rewards.eligibility}
+          <MarkdownInline source={rewards.eligibility} />
         </p>
       )
     )}
@@ -54,14 +55,14 @@ export const RewardsCard = ({ rewards, compact = false, levelDeadline, deadlineP
       {rewards.tiers.map((tier) => (
         <div key={tier.label}>
           <p className="text-xs font-semibold text-foreground">{tier.label}</p>
-          <p className="text-xs text-[hsl(var(--text-secondary))]">{tier.description}</p>
+          <p className="text-xs text-[hsl(var(--text-secondary))]"><MarkdownInline source={tier.description} /></p>
         </div>
       ))}
     </div>
 
     {!compact && rewards.rankingNote && (
       <p className="text-xs text-[hsl(var(--text-faint))] leading-relaxed mt-4">
-        {rewards.rankingNote}{" "}
+        <MarkdownInline source={rewards.rankingNote} />{" "}
         {rewards.rankingRulesUrl && (
           <a
             href={rewards.rankingRulesUrl}
diff --git a/src/components/WalkthroughSection.tsx b/src/components/WalkthroughSection.tsx
index c7ed7651..6d932076 100644
--- a/src/components/WalkthroughSection.tsx
+++ b/src/components/WalkthroughSection.tsx
@@ -3,6 +3,7 @@ import type { JSX } from "react";
 import { ChevronDown } from "lucide-react";
 import { CollapsibleSection } from "@/components/CollapsibleSection";
 import { MarkdownContent } from "@/components/MarkdownContent";
+import { MarkdownInline } from "@/components/MarkdownInline";
 import type { WalkthroughStep } from "@/data/adventures";
 
 type WalkthroughSectionProps = {
@@ -40,7 +41,7 @@ export const WalkthroughSection = ({ steps }: WalkthroughSectionProps): JSX.Elem
                   {i + 1}
                 </span>
                 <span className="min-w-0 flex-1 text-sm font-semibold text-foreground">
-                  {step.title ?? `Step ${i + 1}`}
+                  {step.title ? <MarkdownInline source={step.title} /> : `Step ${i + 1}`}
                 </span>
                 <ChevronDown
                   size={16}
diff --git a/src/components/markdownInlineComponents.tsx b/src/components/markdownInlineComponents.tsx
new file mode 100644
index 00000000..6fdb9cd2
--- /dev/null
+++ b/src/components/markdownInlineComponents.tsx
@@ -0,0 +1,57 @@
+import type { Components } from "react-markdown";
+import { ExternalLink } from "lucide-react";
+
+const isExternalHref = (href: string | undefined): boolean =>
+  typeof href === "string" && /^https?:\/\//i.test(href);
+
+const isLocalhostHref = (href: string | undefined): boolean =>
+  typeof href === "string" && /^https?:\/\/(localhost|127\.0\.0\.1|\[::1\])(:\d+)?/i.test(href);
+
+// Inline-only renderers (links, inline code, strong, em). Shared by
+// MarkdownContent and MarkdownInline so all author prose styles consistently.
+export const inlineComponents: Components = {
+  a: ({ href, children }) => {
+    if (typeof href === "string" && /^(javascript|data|vbscript):/i.test(href.trim())) {
+      return <span>{children}</span>;
+    }
+    if (isLocalhostHref(href)) {
+      return <code className="rounded bg-[hsl(var(--surface))] px-1.5 py-0.5 text-sm font-mono text-foreground">{children}</code>;
+    }
+    if (isExternalHref(href)) {
+      return (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="docs-ext-link"
+        >
+          {children}
+          <ExternalLink size={12} aria-hidden="true" className="shrink-0" />
+          <span className="sr-only"> (opens in new tab)</span>
+        </a>
+      );
+    }
+    return (
+      <a href={href} className="docs-ext-link">
+        {children}
+      </a>
+    );
+  },
+  strong: ({ children }) => (
+    <strong className="font-semibold text-foreground">{children}</strong>
+  ),
+  em: ({ children }) => (
+    <em className="italic text-[hsl(var(--text-secondary))]">{children}</em>
+  ),
+  code: ({ className, children }) => {
+    const isBlock = typeof className === "string" && className.startsWith("language-");
+    if (isBlock) {
+      return <code className={className}>{children}</code>;
+    }
+    return (
+      <code className="rounded-sm border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] px-1.5 py-0.5 font-mono text-[0.85em] text-foreground">
+        {children}
+      </code>
+    );
+  },
+};
diff --git a/src/pages/AdventureDetail.tsx b/src/pages/AdventureDetail.tsx
index 3172f325..8b771d47 100644
--- a/src/pages/AdventureDetail.tsx
+++ b/src/pages/AdventureDetail.tsx
@@ -21,6 +21,7 @@ import { RewardsCard } from "@/components/RewardsCard";
 import { AdventureLeaderboard } from "@/components/AdventureLeaderboard";
 import { ContributorBadge } from "@/components/ContributorBadge";
 import { TagChips } from "@/components/TagChips";
+import { MarkdownInline } from "@/components/MarkdownInline";
 import { SITE_URL, BRAND_NAME } from "@/data/constants";
 import { buildPageMeta } from "@/lib/meta";
 import { isDeadlinePast } from "@/lib/utils";
@@ -139,7 +140,7 @@ const AdventureDetail = (): JSX.Element => {
               )}
               <TagChips tags={adventure.tags} />
             </div>
-            <p className="text-[hsl(var(--text-secondary))] leading-relaxed max-w-3xl">{adventure.story}</p>
+            <p className="text-[hsl(var(--text-secondary))] leading-relaxed max-w-3xl"><MarkdownInline source={adventure.story} /></p>
           </div>
 
           {/* Two-column layout */}
diff --git a/src/pages/ChallengeDetail.tsx b/src/pages/ChallengeDetail.tsx
index 826d8493..e9ce1ad4 100644
--- a/src/pages/ChallengeDetail.tsx
+++ b/src/pages/ChallengeDetail.tsx
@@ -3,6 +3,7 @@ import { useParams, Link, useLoaderData } from "react-router";
 import type { MetaFunction, LoaderFunctionArgs } from "react-router";
 import { ArrowLeft, Check, ExternalLink } from "lucide-react";
 import { MarkdownContent } from "@/components/MarkdownContent";
+import { MarkdownInline } from "@/components/MarkdownInline";
 import { ADVENTURES } from "@/data/adventures";
 import { TagChips } from "@/components/TagChips";
 import { CodespacesButton } from "@/components/CodespacesButton";
@@ -138,7 +139,7 @@ const StructuredLayout = ({ adventure, level, rewardsBelowFold }: StructuredLayo
           {level.audience && (
             <CollapsibleSection id="audience" title="Best Suited For">
               <p className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed">
-                {level.audience}
+                <MarkdownInline source={level.audience} />
               </p>
             </CollapsibleSection>
           )}
@@ -253,7 +254,7 @@ const StructuredLayout = ({ adventure, level, rewardsBelowFold }: StructuredLayo
                           ) : (
                             <span className="font-medium text-foreground">{tool.name}</span>
                           )}
-                          {tool.description && <>{" "}- {tool.description}</>}
+                          {tool.description && <>{" "}- <MarkdownInline source={tool.description} /></>}
                         </span>
                       </li>
                     ))}
diff --git a/src/test/markdownInline.test.tsx b/src/test/markdownInline.test.tsx
new file mode 100644
index 00000000..0a5bc89c
--- /dev/null
+++ b/src/test/markdownInline.test.tsx
@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { MarkdownInline } from "@/components/MarkdownInline";
+
+describe("MarkdownInline", () => {
+  it("renders inline code from backticks", () => {
+    const { container } = render(<MarkdownInline source="familiarity with `kubectl` helps" />);
+    const code = container.querySelector("code");
+    expect(code).not.toBeNull();
+    expect(code?.textContent).toBe("kubectl");
+  });
+
+  it("renders bold from **markdown**", () => {
+    const { container } = render(<MarkdownInline source="**important** stuff" />);
+    expect(container.querySelector("strong")?.textContent).toBe("important");
+  });
+
+  it("renders inline links with external target", () => {
+    const { container } = render(<MarkdownInline source="see [docs](https://example.com)" />);
+    const link = container.querySelector("a");
+    expect(link?.getAttribute("href")).toBe("https://example.com");
+    expect(link?.getAttribute("target")).toBe("_blank");
+    expect(link?.getAttribute("rel")).toBe("noopener noreferrer");
+  });
+
+  it("passes plain text through unchanged", () => {
+    const { container } = render(<MarkdownInline source="just plain text" />);
+    expect(container.textContent).toBe("just plain text");
+    expect(container.querySelector("code")).toBeNull();
+    expect(container.querySelector("strong")).toBeNull();
+  });
+
+  it("does not wrap output in a <p> tag", () => {
+    const { container } = render(<MarkdownInline source="hello" />);
+    expect(container.querySelector("p")).toBeNull();
+  });
+
+  it("strips disallowed block elements (headings, lists)", () => {
+    const { container } = render(<MarkdownInline source={"# heading\n\n- item"} />);
+    expect(container.querySelector("h1")).toBeNull();
+    expect(container.querySelector("ul")).toBeNull();
+    expect(container.querySelector("li")).toBeNull();
+  });
+
+  it("blocks dangerous javascript: URLs", () => {
+    const { container } = render(<MarkdownInline source="[click](javascript:alert(1))" />);
+    // react-markdown sanitizes javascript: hrefs to undefined and the custom
+    // renderer also has a defensive check. Either way, no executable href ships.
+    const link = container.querySelector("a");
+    const href = link?.getAttribute("href") ?? "";
+    expect(href.toLowerCase()).not.toContain("javascript:");
+  });
+});
diff --git a/styleguide.md b/styleguide.md
index 962099ef..13f1827b 100644
--- a/styleguide.md
+++ b/styleguide.md
@@ -1115,6 +1115,24 @@ The bundled stack (`react-markdown`, `remark-gfm`, `micromark`, etc.) is code-sp
 
 ---
 
+### `MarkdownInline`
+
+`src/components/MarkdownInline.tsx`
+
+Inline-only variant of `MarkdownContent` for short single-line author strings (e.g. `level.audience`, `tool.description`, `step.title`, `adventure.story`, `contributor.about`, `rewards.eligibility`, `tier.description`, `rewards.rankingNote`). Reuses the `inlineComponents` map exported from `MarkdownContent` (links, inline `<code>`, `<strong>`, `<em>`), replaces `<p>` with a fragment, and strips block-level elements (`h*`, `ul`, `ol`, `li`, `pre`, `blockquote`, `hr`, `table`, `img`) via `disallowedElements` + `unwrapDisallowed`. Safe to drop inside `<p>`, `<span>`, `<h*>`, or `<button>` without producing invalid HTML.
+
+```tsx
+<MarkdownInline source={level.audience} />
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `source` | `string` | Raw Markdown source (typically a single line). Plain text passes through unchanged. |
+
+Use this for any author-controlled string field that may contain inline markdown such as `` `kubectl` ``, `**bold**`, or `[link](url)`. Never render an author-controlled string with `{value}` directly — see the rule in `CLAUDE.md` "Components" section.
+
+---
+
 ### `ChallengesGrid`
 
 `src/components/ChallengesGrid.tsx`

From 692f602006f36d79207eaa65609ecc6df0041d18 Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Sun, 31 May 2026 19:48:03 +0200
Subject: [PATCH 3/4] refactor: reorder adventure detail page sections

Move Overview above Challenges and promote it from a collapsible to a
plain section with an h2. New main column order: Overview, Challenges,
Rewards (when active), Story, Rewards (when past deadline).

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 src/pages/AdventureDetail.tsx | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/pages/AdventureDetail.tsx b/src/pages/AdventureDetail.tsx
index 8b771d47..b5985c66 100644
--- a/src/pages/AdventureDetail.tsx
+++ b/src/pages/AdventureDetail.tsx
@@ -149,6 +149,23 @@ const AdventureDetail = (): JSX.Element => {
             {/* Main content */}
             <div className="space-y-8">
 
+              {/* Overview */}
+              {adventure.overview && adventure.overview.length > 0 && (
+                <section aria-labelledby="overview-heading">
+                  <h2 id="overview-heading" className="text-lg font-semibold text-foreground mb-5">
+                    Overview
+                  </h2>
+                  <ul className="space-y-2.5">
+                    {adventure.overview.map((para, i) => (
+                      <li key={i} className="flex items-start gap-2.5">
+                        <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" aria-hidden="true" />
+                        <p className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed">{para}</p>
+                      </li>
+                    ))}
+                  </ul>
+                </section>
+              )}
+
               {/* Challenges */}
               <section aria-labelledby="challenges-heading">
                 <h2 id="challenges-heading" className="text-lg font-semibold text-foreground mb-5">
@@ -177,20 +194,6 @@ const AdventureDetail = (): JSX.Element => {
                 </div>
               )}
 
-              {/* Your Mission */}
-              {adventure.overview && adventure.overview.length > 0 && (
-                <CollapsibleSection id="overview" title="Overview" defaultOpen={true}>
-                  <ul className="space-y-2.5">
-                    {adventure.overview.map((para, i) => (
-                      <li key={i} className="flex items-start gap-2.5">
-                        <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" aria-hidden="true" />
-                        <p className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed">{para}</p>
-                      </li>
-                    ))}
-                  </ul>
-                </CollapsibleSection>
-              )}
-
               {/* The Story */}
               {adventure.backstory && adventure.backstory.length > 0 && (
                 <CollapsibleSection id="backstory" title="The Story" defaultOpen={true}>

From 77ea60ee831352a9291ce69dffcadce521abad33 Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Sun, 31 May 2026 20:04:17 +0200
Subject: [PATCH 4/4] fix: prevent nested anchors and restore Overview card

- MarkdownInline gains a noLinks prop that strips <a> elements while
  preserving inline formatting. Applied to AdventureCard story (whole
  card is a <Link>) and WalkthroughSection step title (inside a
  <button>) to avoid invalid nested interactive content.
- Restore CollapsibleSection wrapper around Overview on AdventureDetail
  so it keeps its card chrome and collapse toggle. Position above
  Challenges is preserved.
- Add regression tests for noLinks behaviour and for AdventureCard
  never emitting a nested <a> when the story contains markdown links.

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 src/components/AdventureCard.tsx      |  2 +-
 src/components/MarkdownInline.tsx     | 10 ++++--
 src/components/WalkthroughSection.tsx |  2 +-
 src/pages/AdventureDetail.tsx         |  7 ++--
 src/test/adventureCard.test.tsx       | 48 +++++++++++++++++++++++++++
 src/test/markdownInline.test.tsx      | 19 +++++++++++
 6 files changed, 78 insertions(+), 10 deletions(-)
 create mode 100644 src/test/adventureCard.test.tsx

diff --git a/src/components/AdventureCard.tsx b/src/components/AdventureCard.tsx
index 4fa6f0ff..0da9c71c 100644
--- a/src/components/AdventureCard.tsx
+++ b/src/components/AdventureCard.tsx
@@ -24,7 +24,7 @@ export const AdventureCard = ({ adventure }: AdventureCardProps): JSX.Element =>
     <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
       {adventure.title}
     </h3>
-    <p className="mt-2 text-sm text-muted-foreground line-clamp-2"><MarkdownInline source={adventure.story} /></p>
+    <p className="mt-2 text-sm text-muted-foreground line-clamp-2"><MarkdownInline source={adventure.story} noLinks /></p>
 
     <div className="mt-4 flex flex-wrap items-center gap-2">
       {adventure.levels.map((level) => (
diff --git a/src/components/MarkdownInline.tsx b/src/components/MarkdownInline.tsx
index 25ab0070..c6c164e2 100644
--- a/src/components/MarkdownInline.tsx
+++ b/src/components/MarkdownInline.tsx
@@ -11,17 +11,21 @@ const components: Components = {
   p: ({ children }: { children?: ReactNode }) => <>{children}</>,
 };
 
-const DISALLOWED = ["h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "blockquote", "pre", "hr", "table", "img"];
+const DISALLOWED_BLOCK = ["h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "blockquote", "pre", "hr", "table", "img"];
 
 type MarkdownInlineProps = {
   source: string;
+  // Strip markdown links to plain text. Required when rendering inside
+  // another interactive element (<a>, <button>) since HTML forbids nesting
+  // interactive content.
+  noLinks?: boolean;
 };
 
-export const MarkdownInline = ({ source }: MarkdownInlineProps): JSX.Element => (
+export const MarkdownInline = ({ source, noLinks = false }: MarkdownInlineProps): JSX.Element => (
   <ReactMarkdown
     remarkPlugins={[remarkGfm]}
     components={components}
-    disallowedElements={DISALLOWED}
+    disallowedElements={noLinks ? [...DISALLOWED_BLOCK, "a"] : DISALLOWED_BLOCK}
     unwrapDisallowed
   >
     {source}
diff --git a/src/components/WalkthroughSection.tsx b/src/components/WalkthroughSection.tsx
index 6d932076..030c3d92 100644
--- a/src/components/WalkthroughSection.tsx
+++ b/src/components/WalkthroughSection.tsx
@@ -41,7 +41,7 @@ export const WalkthroughSection = ({ steps }: WalkthroughSectionProps): JSX.Elem
                   {i + 1}
                 </span>
                 <span className="min-w-0 flex-1 text-sm font-semibold text-foreground">
-                  {step.title ? <MarkdownInline source={step.title} /> : `Step ${i + 1}`}
+                  {step.title ? <MarkdownInline source={step.title} noLinks /> : `Step ${i + 1}`}
                 </span>
                 <ChevronDown
                   size={16}
diff --git a/src/pages/AdventureDetail.tsx b/src/pages/AdventureDetail.tsx
index b5985c66..e28ce908 100644
--- a/src/pages/AdventureDetail.tsx
+++ b/src/pages/AdventureDetail.tsx
@@ -151,10 +151,7 @@ const AdventureDetail = (): JSX.Element => {
 
               {/* Overview */}
               {adventure.overview && adventure.overview.length > 0 && (
-                <section aria-labelledby="overview-heading">
-                  <h2 id="overview-heading" className="text-lg font-semibold text-foreground mb-5">
-                    Overview
-                  </h2>
+                <CollapsibleSection id="overview" title="Overview" defaultOpen={true}>
                   <ul className="space-y-2.5">
                     {adventure.overview.map((para, i) => (
                       <li key={i} className="flex items-start gap-2.5">
@@ -163,7 +160,7 @@ const AdventureDetail = (): JSX.Element => {
                       </li>
                     ))}
                   </ul>
-                </section>
+                </CollapsibleSection>
               )}
 
               {/* Challenges */}
diff --git a/src/test/adventureCard.test.tsx b/src/test/adventureCard.test.tsx
new file mode 100644
index 00000000..21d591ea
--- /dev/null
+++ b/src/test/adventureCard.test.tsx
@@ -0,0 +1,48 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { AdventureCard } from "@/components/AdventureCard";
+import type { AdventureCardSummary } from "@/data/adventures";
+
+const summary: AdventureCardSummary = {
+  id: "test-adventure",
+  title: "Test Adventure",
+  month: "JAN 2026",
+  story: "join the guild and use [tooling](https://example.com) to **win**",
+  tags: ["a", "b"],
+  contributor: { name: "Test Contributor" },
+  levels: [
+    { id: "beginner", name: "Beginner", difficulty: "beginner", topics: [], learnings: [] },
+  ],
+};
+
+describe("AdventureCard", () => {
+  it("never renders a nested <a> inside the outer card link, even when story contains a markdown link", () => {
+    const { container } = render(
+      <MemoryRouter>
+        <AdventureCard adventure={summary} />
+      </MemoryRouter>
+    );
+    const outerLink = container.querySelector("a[href='/adventures/test-adventure']");
+    expect(outerLink).not.toBeNull();
+    expect(outerLink?.querySelectorAll("a")).toHaveLength(0);
+  });
+
+  it("renders the link text from markdown as plain text inside the card", () => {
+    const { container } = render(
+      <MemoryRouter>
+        <AdventureCard adventure={summary} />
+      </MemoryRouter>
+    );
+    expect(container.textContent).toContain("join the guild and use tooling to win");
+  });
+
+  it("still renders bold formatting from markdown in the story", () => {
+    const { container } = render(
+      <MemoryRouter>
+        <AdventureCard adventure={summary} />
+      </MemoryRouter>
+    );
+    expect(container.querySelector("p.line-clamp-2 strong")?.textContent).toBe("win");
+  });
+});
diff --git a/src/test/markdownInline.test.tsx b/src/test/markdownInline.test.tsx
index 0a5bc89c..e9928463 100644
--- a/src/test/markdownInline.test.tsx
+++ b/src/test/markdownInline.test.tsx
@@ -50,4 +50,23 @@ describe("MarkdownInline", () => {
     const href = link?.getAttribute("href") ?? "";
     expect(href.toLowerCase()).not.toContain("javascript:");
   });
+
+  describe("noLinks", () => {
+    it("renders link text as plain text and omits the <a> element", () => {
+      const { container } = render(
+        <MarkdownInline source="see [docs](https://example.com) for more" noLinks />
+      );
+      expect(container.querySelector("a")).toBeNull();
+      expect(container.textContent).toBe("see docs for more");
+    });
+
+    it("still renders inline formatting (bold, code) when links are stripped", () => {
+      const { container } = render(
+        <MarkdownInline source="**bold** and `code` and [link](https://example.com)" noLinks />
+      );
+      expect(container.querySelector("strong")?.textContent).toBe("bold");
+      expect(container.querySelector("code")?.textContent).toBe("code");
+      expect(container.querySelector("a")).toBeNull();
+    });
+  });
 });