Skip to content

Commit 234af76

Browse files
Rich-HarrisRich-Harris
authored
overhaul legacy mode callouts (#167)
* overhaul legacy mode callouts * use icon for OTP * ul * tweaks
1 parent f5eee77 commit 234af76

File tree

6 files changed

+170
-98
lines changed

6 files changed

+170
-98
lines changed

‎apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md‎

Lines changed: 53 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -40,22 +40,18 @@ class Todo {
4040
}
4141
```
4242

43-
<details class="legacy">
44-
<summary>Legacy mode</summary>
45-
46-
In Svelte 4, state was implicitly reactive if the variable was declared at the top level
47-
48-
```svelte
49-
<script>
50-
let count = 0;
51-
</script>
52-
53-
<button on:click={() => count++}>
54-
clicks: {count}
55-
</button>
56-
```
57-
58-
</details>
43+
> [!LEGACY]
44+
> In Svelte 4, state was implicitly reactive if the variable was declared at the top level
45+
>
46+
> ```svelte
47+
> <script>
48+
> let count = 0;
49+
> </script>
50+
>
51+
> <button on:click={() => count++}>
52+
> clicks: {count}
53+
> </button>
54+
> ```
5955
6056
## `$derived`
6157
@@ -78,26 +74,23 @@ The expression inside `$derived(...)` should be free of side-effects. Svelte wil
7874

7975
As with `$state`, you can mark class fields as `$derived`.
8076

81-
<details class="legacy">
82-
<summary>Legacy mode</summary>
83-
In Svelte 4, you could use reactive statements for this.
84-
85-
```svelte
86-
<script>
87-
let count = 0;
88-
$: doubled = count * 2;
89-
</script>
90-
91-
<button on:click={() => count++}>
92-
{doubled}
93-
</button>
94-
95-
<p>{count} doubled is {doubled}</p>
96-
```
97-
98-
This only worked at the top level of a component.
99-
100-
</details>
77+
> [!LEGACY]
78+
> In Svelte 4, you could use reactive statements for this.
79+
>
80+
> ```svelte
81+
> <script>
82+
> let count = 0;
83+
> $: doubled = count * 2;
84+
> </script>
85+
>
86+
> <button on:click={() => count++}>
87+
> {doubled}
88+
> </button>
89+
>
90+
> <p>{count} doubled is {doubled}</p>
91+
> ```
92+
>
93+
> This only worked at the top level of a component.
10194
10295
## `$effect`
10396
@@ -125,30 +118,27 @@ To run _side-effects_ when the component is mounted to the DOM, and when values
125118
126119
The function passed to `$effect` will run when the component mounts, and will re-run after any changes to the values it reads that were declared with `$state` or `$derived` (including those passed in with `$props`). Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
127120

128-
<details class="legacy">
129-
<summary>Legacy mode</summary>
130-
In Svelte 4, you could use reactive statements for this.
131-
132-
```svelte
133-
<script>
134-
let size = 50;
135-
let color = '#ff3e00';
136-
137-
let canvas;
138-
139-
$: {
140-
const context = canvas.getContext('2d');
141-
context.clearRect(0, 0, canvas.width, canvas.height);
142-
143-
// this will re-run whenever `color` or `size` change
144-
context.fillStyle = color;
145-
context.fillRect(0, 0, size, size);
146-
}
147-
</script>
148-
149-
<canvas bind:this={canvas} width="100" height="100" />
150-
```
151-
152-
This only worked at the top level of a component.
153-
154-
</details>
121+
> [!LEGACY]
122+
> In Svelte 4, you could use reactive statements for this.
123+
>
124+
> ```svelte
125+
> <script>
126+
> let size = 50;
127+
> let color = '#ff3e00';
128+
>
129+
> let canvas;
130+
>
131+
> $: {
132+
> const context = canvas.getContext('2d');
133+
> context.clearRect(0, 0, canvas.width, canvas.height);
134+
>
135+
> // this will re-run whenever `color` or `size` change
136+
> context.fillStyle = color;
137+
> context.fillRect(0, 0, size, size);
138+
> }
139+
> </script>
140+
>
141+
> <canvas bind:this={canvas} width="100" height="100" />
142+
> ```
143+
>
144+
> This only worked at the top level of a component.

‎apps/svelte.dev/src/lib/icons/contents.svg‎

Lines changed: 29 additions & 0 deletions
Loading

‎apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte‎

Lines changed: 39 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -36,19 +36,24 @@
3636

3737
<aside class="on-this-page">
3838
<label>
39-
<input type="checkbox" checked aria-label="Toggle 'on this page' menu" />
39+
<input type="checkbox" aria-label="Toggle 'on this page' menu" />
4040
On this page
4141
</label>
4242

4343
<nav>
44-
<!-- TODO hide top link on mobile -->
45-
<a href="/{document.slug}" class:active={current === ''}>
46-
{document.metadata.title}
47-
</a>
48-
49-
{#each document.sections as section}
50-
<a href="#{section.slug}" class:active={current === section.slug}>{section.title}</a>
51-
{/each}
44+
<ul>
45+
<li>
46+
<a href="/{document.slug}" class:active={current === ''}>
47+
{document.metadata.title}
48+
</a>
49+
</li>
50+
51+
{#each document.sections as section}
52+
<li>
53+
<a href="#{section.slug}" class:active={current === section.slug}>{section.title}</a>
54+
</li>
55+
{/each}
56+
</ul>
5257
</nav>
5358
</aside>
5459

@@ -57,15 +62,18 @@
5762
nav {
5863
padding-top: 0.8rem;
5964
65+
ul {
66+
margin: 0;
67+
list-style: none;
68+
}
69+
70+
/* Only show the title link if it's in the sidebar */
71+
li:first-child {
72+
display: none;
73+
}
74+
6075
a {
61-
display: block;
6276
color: var(--sk-text-3);
63-
box-shadow: none; /* unfortunate hack to unset some other CSS */
64-
65-
/* Only show the title link if it's in the sidebar */
66-
&:first-child {
67-
display: none;
68-
}
6977
}
7078
}
7179
@@ -76,16 +84,23 @@
7684
7785
@media (max-width: 1199px) {
7886
margin: 4rem 0;
79-
background: var(--sk-back-3);
80-
padding: 1rem;
8187
82-
&:not(:has(a:nth-child(2))) {
88+
&:not(:has(li:nth-child(2))) {
8389
/* hide widget if there are no subheadings */
8490
display: none;
8591
}
8692
8793
label {
8894
position: relative;
95+
display: flex;
96+
align-items: center;
97+
background: url($lib/icons/contents.svg) 0 50% no-repeat;
98+
background-size: 2rem 2rem;
99+
padding: 0.2rem 0 0 3rem;
100+
height: 3rem;
101+
font-size: var(--sk-text-xs);
102+
text-transform: uppercase;
103+
color: var(--sk-text-4);
89104
90105
&::before {
91106
content: '';
@@ -96,14 +111,14 @@
96111
height: 1em;
97112
background: url($lib/icons/chevron.svg);
98113
background-size: contain;
99-
rotate: 0deg;
114+
rotate: -90deg;
100115
transition: rotate 0.2s;
101116
}
102117
}
103118
104119
label:has(:checked) {
105120
&::before {
106-
rotate: -90deg;
121+
rotate: 90deg;
107122
}
108123
109124
& + nav {
@@ -122,6 +137,7 @@
122137
123138
nav {
124139
display: none;
140+
padding: 0 0 0 3rem;
125141
}
126142
}
127143
@@ -151,8 +167,8 @@
151167
nav {
152168
display: block;
153169
154-
a:first-child {
155-
display: block;
170+
li:first-child {
171+
display: list-item;
156172
}
157173
158174
a.active {

‎packages/site-kit/src/lib/icons/chevron.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎packages/site-kit/src/lib/markdown/renderer.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,14 @@ async function parse({
258258
)}<a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${level}>`;
259259
},
260260
code: (source, language) => code(source, language ?? 'js', current),
261-
codespan
261+
codespan,
262+
blockquote: (content) => {
263+
if (content.includes('[!LEGACY]')) {
264+
content = `<details class="legacy"><summary>Legacy mode</summary>${content.replace('[!LEGACY]', '')}</details>`;
265+
}
266+
267+
return `<blockquote>${content}</blockquote>`;
268+
}
262269
});
263270

264271
return content;

‎packages/site-kit/src/lib/styles/text.css‎

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -351,27 +351,54 @@
351351
}
352352

353353
details.legacy {
354-
background-color: hsla(var(--sk-text-warning-hsl), 0.02);
355-
border-radius: var(--sk-border-radius);
356-
padding: 1rem;
357-
margin: 1rem 0;
354+
&::after {
355+
content: '';
356+
background: url(../icons/chevron.svg);
357+
background-size: contain;
358+
position: absolute;
359+
right: 0.5rem;
360+
top: 0.5rem;
361+
width: 2rem;
362+
height: 2rem;
363+
rotate: -90deg;
364+
transition: rotate 0.2s;
365+
pointer-events: none;
366+
}
358367

359368
& > summary {
360-
color: hsl(var(--sk-text-warning-hsl));
361-
font-size: 1.4rem;
362-
font-weight: 600;
369+
position: relative;
370+
display: flex;
371+
align-items: center;
372+
height: 3rem;
373+
color: var(--sk-text-4);
374+
font-family: var(--sk-font-heading);
375+
font-style: normal;
376+
font-size: var(--sk-text-xs);
377+
user-select: none;
363378

364379
&::after {
380+
position: absolute;
381+
display: flex;
382+
align-items: center;
383+
right: 3rem;
384+
top: 0;
385+
height: 100%;
365386
content: 'show all';
366387
float: right;
367388
}
368389
}
369390

370-
&[open] > summary {
371-
margin-bottom: 1.4rem;
372-
391+
&[open] {
373392
&::after {
374-
content: 'hide all';
393+
rotate: 90deg;
394+
}
395+
396+
& > summary {
397+
margin-bottom: 1.4rem;
398+
399+
&::after {
400+
content: 'hide all';
401+
}
375402
}
376403
}
377404

0 commit comments

Comments
 (0)