Skip to content

overhaul legacy mode callouts #167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 28, 2024
Merged

overhaul legacy mode callouts #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d871fef
overhaul legacy mode callouts
Rich-Harris Sep 28, 2024
ba37480
use icon for OTP
Rich-Harris Sep 28, 2024
b1011ba
ul
Rich-Harris Sep 28, 2024
7aeb942
tweaks
Rich-Harris Sep 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 53 additions & 63 deletions apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,22 +40,18 @@ class Todo {
}
```

<details class="legacy">
<summary>Legacy mode</summary>

In Svelte 4, state was implicitly reactive if the variable was declared at the top level

```svelte
<script>
let count = 0;
</script>

<button on:click={() => count++}>
clicks: {count}
</button>
```

</details>
> [!LEGACY]
> In Svelte 4, state was implicitly reactive if the variable was declared at the top level
>
> ```svelte
> <script>
> let count = 0;
> </script>
>
> <button on:click={() => count++}>
> clicks: {count}
> </button>
> ```

## `$derived`

Expand All @@ -78,26 +74,23 @@ The expression inside `$derived(...)` should be free of side-effects. Svelte wil

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

<details class="legacy">
<summary>Legacy mode</summary>
In Svelte 4, you could use reactive statements for this.

```svelte
<script>
let count = 0;
$: doubled = count * 2;
</script>

<button on:click={() => count++}>
{doubled}
</button>

<p>{count} doubled is {doubled}</p>
```

This only worked at the top level of a component.

</details>
> [!LEGACY]
> In Svelte 4, you could use reactive statements for this.
>
> ```svelte
> <script>
> let count = 0;
> $: doubled = count * 2;
> </script>
>
> <button on:click={() => count++}>
> {doubled}
> </button>
>
> <p>{count} doubled is {doubled}</p>
> ```
>
> This only worked at the top level of a component.

## `$effect`

Expand Down Expand Up @@ -125,30 +118,27 @@ To run _side-effects_ when the component is mounted to the DOM, and when values

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.

<details class="legacy">
<summary>Legacy mode</summary>
In Svelte 4, you could use reactive statements for this.

```svelte
<script>
let size = 50;
let color = '#ff3e00';

let canvas;

$: {
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

// this will re-run whenever `color` or `size` change
context.fillStyle = color;
context.fillRect(0, 0, size, size);
}
</script>

<canvas bind:this={canvas} width="100" height="100" />
```

This only worked at the top level of a component.

</details>
> [!LEGACY]
> In Svelte 4, you could use reactive statements for this.
>
> ```svelte
> <script>
> let size = 50;
> let color = '#ff3e00';
>
> let canvas;
>
> $: {
> const context = canvas.getContext('2d');
> context.clearRect(0, 0, canvas.width, canvas.height);
>
> // this will re-run whenever `color` or `size` change
> context.fillStyle = color;
> context.fillRect(0, 0, size, size);
> }
> </script>
>
> <canvas bind:this={canvas} width="100" height="100" />
> ```
>
> This only worked at the top level of a component.
29 changes: 29 additions & 0 deletions apps/svelte.dev/src/lib/icons/contents.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 39 additions & 23 deletions apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,19 +36,24 @@

<aside class="on-this-page">
<label>
<input type="checkbox" checked aria-label="Toggle 'on this page' menu" />
<input type="checkbox" aria-label="Toggle 'on this page' menu" />
On this page
</label>

<nav>
<!-- TODO hide top link on mobile -->
<a href="/{document.slug}" class:active={current === ''}>
{document.metadata.title}
</a>

{#each document.sections as section}
<a href="#{section.slug}" class:active={current === section.slug}>{section.title}</a>
{/each}
<ul>
<li>
<a href="/{document.slug}" class:active={current === ''}>
{document.metadata.title}
</a>
</li>

{#each document.sections as section}
<li>
<a href="#{section.slug}" class:active={current === section.slug}>{section.title}</a>
</li>
{/each}
</ul>
</nav>
</aside>

Expand All @@ -57,15 +62,18 @@
nav {
padding-top: 0.8rem;

ul {
margin: 0;
list-style: none;
}

/* Only show the title link if it's in the sidebar */
li:first-child {
display: none;
}

a {
display: block;
color: var(--sk-text-3);
box-shadow: none; /* unfortunate hack to unset some other CSS */

/* Only show the title link if it's in the sidebar */
&:first-child {
display: none;
}
}
}

Expand All @@ -76,16 +84,23 @@

@media (max-width: 1199px) {
margin: 4rem 0;
background: var(--sk-back-3);
padding: 1rem;

&:not(:has(a:nth-child(2))) {
&:not(:has(li:nth-child(2))) {
/* hide widget if there are no subheadings */
display: none;
}

label {
position: relative;
display: flex;
align-items: center;
background: url($lib/icons/contents.svg) 0 50% no-repeat;
background-size: 2rem 2rem;
padding: 0.2rem 0 0 3rem;
height: 3rem;
font-size: var(--sk-text-xs);
text-transform: uppercase;
color: var(--sk-text-4);

&::before {
content: '';
Expand All @@ -96,14 +111,14 @@
height: 1em;
background: url($lib/icons/chevron.svg);
background-size: contain;
rotate: 0deg;
rotate: -90deg;
transition: rotate 0.2s;
}
}

label:has(:checked) {
&::before {
rotate: -90deg;
rotate: 90deg;
}

& + nav {
Expand All @@ -122,6 +137,7 @@

nav {
display: none;
padding: 0 0 0 3rem;
}
}

Expand Down Expand Up @@ -151,8 +167,8 @@
nav {
display: block;

a:first-child {
display: block;
li:first-child {
display: list-item;
}

a.active {
Expand Down
3 changes: 3 additions & 0 deletions packages/site-kit/src/lib/icons/chevron.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 8 additions & 1 deletion packages/site-kit/src/lib/markdown/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,14 @@ async function parse({
)}<a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${level}>`;
},
code: (source, language) => code(source, language ?? 'js', current),
codespan
codespan,
blockquote: (content) => {
if (content.includes('[!LEGACY]')) {
content = `<details class="legacy"><summary>Legacy mode</summary>${content.replace('[!LEGACY]', '')}</details>`;
}

return `<blockquote>${content}</blockquote>`;
}
});

return content;
Expand Down
49 changes: 38 additions & 11 deletions packages/site-kit/src/lib/styles/text.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,27 +351,54 @@
}

details.legacy {
background-color: hsla(var(--sk-text-warning-hsl), 0.02);
border-radius: var(--sk-border-radius);
padding: 1rem;
margin: 1rem 0;
&::after {
content: '';
background: url(../icons/chevron.svg);
background-size: contain;
position: absolute;
right: 0.5rem;
top: 0.5rem;
width: 2rem;
height: 2rem;
rotate: -90deg;
transition: rotate 0.2s;
pointer-events: none;
}

& > summary {
color: hsl(var(--sk-text-warning-hsl));
font-size: 1.4rem;
font-weight: 600;
position: relative;
display: flex;
align-items: center;
height: 3rem;
color: var(--sk-text-4);
font-family: var(--sk-font-heading);
font-style: normal;
font-size: var(--sk-text-xs);
user-select: none;

&::after {
position: absolute;
display: flex;
align-items: center;
right: 3rem;
top: 0;
height: 100%;
content: 'show all';
float: right;
}
}

&[open] > summary {
margin-bottom: 1.4rem;

&[open] {
&::after {
content: 'hide all';
rotate: 90deg;
}

& > summary {
margin-bottom: 1.4rem;

&::after {
content: 'hide all';
}
}
}

Expand Down
Loading