docs: fix broken GitHub code-reference blocks after fumadocs migration (#12213)

# Which Problems Are Solved

Pages in `apps/docs` that embed source from GitHub via the Docusaurus
convention

````
```js reference

https://github.com/zitadel/actions/blob/main/examples/org_metadata_claim.js
```
````

stopped working after the migration from Docusaurus to fumadocs. The old
`docusaurus-theme-github-codeblock` plugin used to fetch the file and
render it; fumadocs has no support for that meta, so the page rendered
the raw URL as plain code-block text. Visible at
`/docs/apis/actions/code-examples` and 16 other pages.

# How the Problems Are Solved

- Converted every ```` ```<lang> reference\n<URL>\n``` ```` block (46
total across 17 `.mdx` files) to the native fumadocs JSX form:
`<GithubCodeBlock url="<URL>" />`. The existing `<details>`/`<summary>`
collapsibles around blocks are kept — they're an authoring choice, not
part of the rendering bug.
- Updated `apps/docs/components/github-code-block.tsx` to render via
`DynamicCodeBlock` from `fumadocs-ui/components/dynamic-codeblock`
(proper shiki highlighting) instead of raw `CodeBlock` + `Pre` (which
produced unhighlighted output). Also fixed language detection so a URL
hash like `#L10-L20` no longer pollutes the language token.
- Registered `GithubCodeBlock` globally in
`apps/docs/mdx-components.tsx`, matching how every other shared
component (`APIPage`, `Callout`, `Tab/Tabs`, `Step/Steps`, `Admonition`,
`TerminologyUpdate`) is exposed. MDX files no longer need a local
`import`.

# Additional Changes

- Normalized the two MDX files that were already using the JSX form
(`examples/secure-api/python-django.mdx`,
`examples/secure-api/java-spring.mdx`): removed their now-redundant
local `import { GithubCodeBlock }` and rewrote 9 long-form
`<GithubCodeBlock url="..."></GithubCodeBlock>` tags to self-closing for
consistency.

# Additional Context

Verified locally with `pnpm --filter @zitadel/docs dev`:

- `/docs/apis/actions/code-examples` — 20 shiki-highlighted code blocks
rendered inside the `<details>` collapsibles (was 0).
- `/docs/apis/openidoauth/claims` — line-range hashes (`#L9-L11`)
honored.
- `/docs/examples/login/flutter` — mixed languages (xml/dart/html)
detected and highlighted.
- `/docs/guides/integrate/external-audit-log` — edge case of fenced
reference indented inside a numbered list also converted and rendered.

Greps:
- `^[ \t]*\`\`\`[a-zA-Z0-9]+ reference` in `apps/docs/content/**/*.mdx`
→ 0 matches.
- `<GithubCodeBlock url="` in `apps/docs/content/**/*.mdx` → 55 matches.
- `from '@/components/github-code-block'` in
`apps/docs/content/**/*.mdx` → 0 matches.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
Florian Forster
2026-05-28 11:02:44 -07:00
committed by GitHub
co-authored by Claude Opus 4.7
parent c73e58489b
commit f4f43f5248
21 changed files with 103 additions and 186 deletions
@@ -24,9 +24,7 @@ Extend the claims by a hardcoded value.
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/add_claim.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/add_claim.js" />
</details>
@@ -37,9 +35,7 @@ Extend the claims by dynamically reading metadata from a user and sets the pictu
<details open="">
<summary>{props.summary ? props.summary : 'Code example'}</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/add_picture_claim_from_idp_metadata.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/add_picture_claim_from_idp_metadata.js" />
</details>
@@ -50,9 +46,7 @@ Extend the claims by dynamically reading metadata from an organization and sets
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/org_metadata_claim.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/org_metadata_claim.js" />
</details>
@@ -63,9 +57,7 @@ Some products require specific role mapping from ZITADEL, no worries we got you
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/custom_roles.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/custom_roles.js" />
</details>
@@ -76,9 +68,7 @@ There's even a possibility to use the metadata of organizations the user is gran
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/custom_roles_org_metadata.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/custom_roles_org_metadata.js" />
</details>
@@ -98,9 +88,7 @@ Some products require specific role mapping from ZITADEL, no worries we got you
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/set_custom_attribute.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/set_custom_attribute.js" />
</details>
@@ -111,9 +99,7 @@ Extend the attributes by dynamically reading metadata from an organization and s
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/org_metadata_attribute.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/org_metadata_attribute.js" />
</details>
@@ -135,9 +121,7 @@ Useful if you trust the provided information or don't want the users to verify t
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/verify_email.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/verify_email.js" />
</details>
@@ -155,9 +139,7 @@ Allows you to assign default roles to a user after the user was created or feder
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/add_user_grant.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/add_user_grant.js" />
</details>
@@ -177,9 +159,7 @@ Adding metadata to users allows you to set default metadata on users.
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/add_metadata.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/add_metadata.js" />
</details>
@@ -199,9 +179,7 @@ If you use [Okta as an identity provider](/guides/integrate/identity-providers/o
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/okta_identity_provider.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/okta_identity_provider.js" />
</details>
@@ -212,9 +190,7 @@ If you use [Gitlab as an identity provider](/guides/integrate/identity-providers
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/gitlab_identity_provider.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/gitlab_identity_provider.js" />
</details>
@@ -225,9 +201,7 @@ If you use [GitHub as an identity provider](/guides/integrate/identity-providers
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/github_identity_provider.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/github_identity_provider.js" />
</details>
@@ -238,9 +212,7 @@ If you use a [generic OIDC identity provider](/guides/integrate/identity-provide
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/set_idp_picture_metadata.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/set_idp_picture_metadata.js" />
</details>
@@ -251,9 +223,7 @@ If you use [Okta as an identity provider](/guides/integrate/identity-providers/o
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/okta_saml_prefil_register_form.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/okta_saml_prefil_register_form.js" />
</details>
@@ -264,9 +234,7 @@ If you use [Microsoft Entra as SAML identity provider](/guides/integrate/identit
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/entra_id_saml_prefil_register_form.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/entra_id_saml_prefil_register_form.js" />
</details>
@@ -277,9 +245,7 @@ If you use a [SAML identity provider like mocksaml](/guides/integrate/identity-p
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/post_auth_saml.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/post_auth_saml.js" />
</details>
@@ -305,9 +271,7 @@ Execution paths might change based on the application initiating the authenticat
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/execute_action_on_specific_app.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/execute_action_on_specific_app.js" />
</details>
@@ -327,9 +291,7 @@ Your action can also check for errors during the login process.
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/post_auth_log.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/post_auth_log.js" />
</details>
@@ -342,7 +304,5 @@ Allows you to limit the user interaction. The error thrown will be shown to the
<details open="">
<summary>Code example</summary>
```js reference
https://github.com/zitadel/actions/blob/main/examples/throw_error.js
```
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/throw_error.js" />
</details>