Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit d2c0e1e

Browse filesBrowse files
erkamyamanpkozlowski-opensource
erkamyaman
authored and
pkozlowski-opensource
committed
feat(docs-infra): bookend the tutorials with Angie
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.
1 parent 4461e8f commit d2c0e1e
Copy full SHA for d2c0e1e

8 files changed

+83-1Lines changed: 83 additions & 1 deletion

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎adev/shared-docs/styles/docs/_tutorial-mascot.scss‎

Copy file name to clipboard
+52Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@use '../media-queries' as mq;
2+
3+
@mixin docs-tutorial-mascot() {
4+
.docs-tutorial-mascot {
5+
display: flex;
6+
align-items: flex-start;
7+
gap: 1rem;
8+
margin-block: 1.5rem;
9+
10+
&__angie {
11+
flex: none;
12+
width: clamp(150px, 18vw, 200px);
13+
height: auto;
14+
margin: 0;
15+
}
16+
17+
&__bubble {
18+
position: relative;
19+
flex: 0 1 auto;
20+
min-width: 0;
21+
max-width: 34ch;
22+
margin-block-start: 1rem;
23+
margin-inline-start: -0.25rem;
24+
padding: 1rem 1.5rem;
25+
border-radius: 1.25rem;
26+
background: var(--septenary-contrast);
27+
28+
&::before {
29+
content: '';
30+
position: absolute;
31+
inset-block-start: 1.5rem;
32+
inset-inline-start: -0.4rem;
33+
width: 1rem;
34+
height: 1rem;
35+
background: inherit;
36+
transform: rotate(45deg);
37+
}
38+
}
39+
}
40+
41+
@include mq.for-phone-only {
42+
.docs-tutorial-mascot {
43+
&__angie {
44+
width: clamp(104px, 28vw, 140px);
45+
}
46+
47+
&__bubble {
48+
padding: 0.75rem 1.25rem;
49+
}
50+
}
51+
}
52+
}
Collapse file

‎adev/shared-docs/styles/global-styles.scss‎

Copy file name to clipboardExpand all lines: adev/shared-docs/styles/global-styles.scss
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
@use 'docs/pill';
3030
@use 'docs/steps';
3131
@use 'docs/table';
32+
@use 'docs/tutorial-mascot';
3233
@use 'docs/video';
3334
@use 'docs/mermaid';
3435

@@ -81,6 +82,7 @@ $theme: mat.m2-define-light-theme(
8182
@include pill.docs-pill();
8283
@include steps.docs-steps();
8384
@include table.docs-table();
85+
@include tutorial-mascot.docs-tutorial-mascot();
8486
@include video.docs-video();
8587

8688
// Include custom angular.dev styles
Collapse file

‎adev/src/content/tutorials/learn-angular/intro/README.md‎

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/learn-angular/intro/README.md
+5Lines changed: 5 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Welcome to the Angular tutorial
22

3+
<div class="docs-tutorial-mascot">
4+
<img class="docs-tutorial-mascot__angie" src="assets/images/angie/greeting.svg" aria-hidden="true">
5+
<p class="docs-tutorial-mascot__bubble">Welcome! Let's learn the building blocks of Angular.</p>
6+
</div>
7+
38
This interactive tutorial will teach you the basic building blocks to start building great apps with Angular.
49

510
## How to use this tutorial
Collapse file

‎adev/src/content/tutorials/learn-angular/steps/25-next-steps/README.md‎

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/learn-angular/steps/25-next-steps/README.md
+5Lines changed: 5 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Ready to explore more of Angular?
22

3+
<div class="docs-tutorial-mascot">
4+
<img class="docs-tutorial-mascot__angie" src="assets/images/angie/superhero.svg" aria-hidden="true">
5+
<p class="docs-tutorial-mascot__bubble">You've done it! You completed the Learn Angular tutorial and learned the essentials of building apps.</p>
6+
</div>
7+
38
You can also learn more in our [guides](overview) and [reference](api), or `ng new`.
49

510
<docs-card-container>
Collapse file

‎adev/src/content/tutorials/signal-forms/intro/README.md‎

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/signal-forms/intro/README.md
+5Lines changed: 5 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Learn Angular Signal Forms
22

3+
<div class="docs-tutorial-mascot">
4+
<img class="docs-tutorial-mascot__angie" src="assets/images/angie/greeting.svg" aria-hidden="true">
5+
<p class="docs-tutorial-mascot__bubble">Welcome! Let's build forms with signals.</p>
6+
</div>
7+
38
This interactive tutorial will teach you how to build reactive forms using Angular's Signal Forms API.
49

510
## How to use this tutorial
Collapse file

‎adev/src/content/tutorials/signal-forms/steps/6-next-steps/README.md‎

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
+4-1Lines changed: 4 additions & 1 deletion
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# Congratulations!
22

3-
You've completed the Signal Forms tutorial and built a complete login form from scratch!
3+
<div class="docs-tutorial-mascot">
4+
<img class="docs-tutorial-mascot__angie" src="assets/images/angie/superhero.svg" aria-hidden="true">
5+
<p class="docs-tutorial-mascot__bubble">You've done it! You completed the Signal Forms tutorial and built a login form from scratch.</p>
6+
</div>
47

58
## What you learned
69

Collapse file

‎adev/src/content/tutorials/signals/intro/README.md‎

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/signals/intro/README.md
+5Lines changed: 5 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Learn Angular signals
22

3+
<div class="docs-tutorial-mascot">
4+
<img class="docs-tutorial-mascot__angie" src="assets/images/angie/greeting.svg" aria-hidden="true">
5+
<p class="docs-tutorial-mascot__bubble">Welcome! Let's explore signals.</p>
6+
</div>
7+
38
This interactive tutorial will teach you the fundamentals of Angular signals and how to use them to build reactive applications.
49

510
## How to use this tutorial
Collapse file

‎adev/src/content/tutorials/signals/steps/11-next-steps/README.md‎

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/signals/steps/11-next-steps/README.md
+5Lines changed: 5 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Want to dive deeper into signals?
22

3+
<div class="docs-tutorial-mascot">
4+
<img class="docs-tutorial-mascot__angie" src="assets/images/angie/superhero.svg" aria-hidden="true">
5+
<p class="docs-tutorial-mascot__bubble">You've done it! You completed the Signals tutorial and learned to manage reactive state with signals.</p>
6+
</div>
7+
38
You can also learn more about signals with the following resources:
49

510
<docs-card-container>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.