The tutorial intro and "next steps" pages were plain headings with no
send-off. Bookend each tutorial with Angie: a greeting pose welcoming
learners on the intro page, and a superhero pose congratulating them on
the completion page, each beside a speech bubble.
The bubble treatment from the 404 page lived inside the not-found
component, so it's extracted into a reusable docs-content style
(docs-tutorial-mascot) usable from tutorial markdown, and applied to the
intro and completion pages of the Learn Angular, Signals, and Signal
Forms tutorials.
(cherry picked from commit d2c0e1ec77)
Fenced shell code blocks prepended a `$` prompt to every rendered line via a CSS `::before`, including blank lines are not commands to run.
(cherry picked from commit aca7371431)
Several adev states show only plain text today. This brings the Angie
mascot into them for warmer, more on-brand empty states, with no change
to copy or behavior:
- Search dialog: a magnifying-glass Angie on "Start typing to see
results", a questioning Angie on "No results found".
- API reference: a questioning Angie on "No API items found." and on the
package filter's "No results found".
- Deprecated API pages: the back-turned orthos pose in the shared
deprecation warning.
The mascots are decorative (aria-hidden) and sized per placement; the
poses are added as SVG assets under assets/images/angie/.
Also moves the Shiki highlighter init in the jsdoc-transforms spec into a
beforeAll, fixing a flake where the spec failed under randomized test
order.
(cherry picked from commit 95fbd0bd48)
The "Prefer" / "Avoid" code block headers rendered the style label as
plain inline text joined to the title with a bare "-" separator, giving
the two block types little visual distinction. The taller label also left
the prefer/avoid header at a different height from the plain filename
header, so the copy button's single "top" value could not center it in
both.
Style the label as a small uppercased pill tinted with the block's style
color, drop the "-" separator, add a subtle inset accent under the header,
and swap the heavier "dangerous" icon on "Avoid" for "close". Give every
header a fixed height with box-sizing: border-box and vertically center
its contents so all variants render at the same height and the copy button
stays centered.
This supersedes #69638, folding in its centering fix for the copy button
offset that #69030 introduced.
(cherry picked from commit 95a953145e)
Removes the fixed font size from table headers to ensure they scale properly and do not appear smaller than the table content.
(cherry picked from commit 7a7a612e48)
When a documentation table has a wide content column, the narrow header
columns get squeezed and inline-code header labels break mid-word at
their hyphens. On the MCP server tools page this rendered the `local-only`
and `read-only` column headers as `local-` / `only` and `read-` / `only`.
Apply `white-space: nowrap` to `code` inside `th` so header tokens stay on
a single line. The rule is scoped to headers, whose labels are always
short, so long code signatures in body cells continue to wrap and no
table gains a horizontal scrollbar.
(cherry picked from commit 50bb0d6bfe)
Follow-up to #69205. After switching adev's COEP to `credentialless`, the
cross-origin YouTube iframe in `<docs-video>` loads in Chromium and Safari but
not Firefox, whose `credentialless` policy does not extend to nested frames. The
result was a COEP error screen instead of the player.
Render `<docs-video>` as a lightweight thumbnail facade instead of embedding the
iframe directly. The thumbnail is a cross-origin subresource, so it loads under
`credentialless` in every browser. `DocViewer` then upgrades the facade to the
inline player on hydration in browsers that can load the embed (Chromium,
Safari), preserving the previous behavior there. On Firefox the facade stays a
plain link that opens the video on YouTube (with autoplay), which replaces the
error screen.
The thumbnail uses `maxresdefault` and falls back to `hqdefault` when a video
has no max-resolution image.
(cherry picked from commit 43acead06d)
Reveal code copy controls on hover and focus so long code snippets stay readable while keyboard access and copy state feedback remain intact.
(cherry picked from commit b7cb5844cf)
#68940 introduced a regression that broke style for wrapped `code` blocks.
Simplifying the style by droping the unecessary gradient + before workaround fixes the issue.
(cherry picked from commit ec4f08bb94)
Remove inline-block layout behavior from inline code elements
to improve wrapping and spacing in multiline documentation
paragraphs.
(cherry picked from commit fdf0bf9a62)
Updates the Playground card copy and adds a `titleInline` attribute on
<docs-card> so the icon and title sit on the same row. Existing cards
are unaffected.
Inline code elements inside table cells inherited `width: 100%` from
the global code styles, causing short codes like `s`, `dev` to stack
vertically instead of rendering on the same line. Add `min-width` to
table cells containing code to ensure proper inline layout.
Add CSS rule to hide the last empty line in code blocks to prevent displaying
unnecessary empty lines when source files end with a newline character.
The empty line remains in the DOM for proper copy-paste functionality.
take the full width of the page for all the pages that use docs-viewer, also reserve an area for table of contents on-demand
Resolves: #52648
PR Close#58831
Fix visibility issue with text inside polygon nodes in mermaid diagrams when using dark mode theme to ensure proper contrast and readability
PR Close#59285
Since code lines are wrapped in `<button>`-s, the native font styles overrides the parent's one which results in the font-family and font-size (esp. Safari) difference. This change fixes that.
PR Close#59072
Change diagram colors to:
- Better match the overall site theme.
- Improve dark theme.
- Make the diagram easier to understand. "Unchecked" nodes have no color and "Checked" nodes match the color of the "Event" node that triggered the change detection.
Fixes#56314
PR Close#58223
To increase the ease of development we are moving @angular/docs into the adev directory within this repo. While
we are doing this to improve our development experience in the short term, efforts are also in place
to maintain a division between this @angular/docs (shared) code and adev itself, so that it can be extracted
back out in the future when components is ready to leverage it as well.
PR Close#57132
Kam