add note annotations (#361)

Author: Rich-Harris

apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md

@@ -16,7 +16,7 @@ You can build your entire app with Svelte (for example, using an application fra
 
 ## How to use this tutorial
 
-> You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte.
+> [!NOTE] You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte.
 
 This tutorial is split into four main parts:
 

apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/index.md

@@ -23,4 +23,4 @@ Add a `<script>` tag to the top of `App.svelte` that imports `Nested.svelte`...
 
 Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in.
 
-> Component names are capitalised, to distinguish them from HTML elements.
+> [!NOTE] Component names are capitalised, to distinguish them from HTML elements.

apps/svelte.dev/content/tutorial/01-svelte/01-introduction/06-html-tags/index.md

@@ -13,4 +13,4 @@ In Svelte, you do this with the special `{@html ...}` tag:
 <p>{+++@html+++ string}</p>
 ```
 
-> **Warning!** Svelte doesn't perform any sanitization of the expression inside `{@html ...}` before it gets inserted into the DOM. This isn't an issue if the content is something you trust like an article you wrote yourself. However if it's some untrusted user content, e.g. a comment on an article, then it's critical that you manually escape it, otherwise you risk exposing your users to <a href="https://owasp.org/www-community/attacks/xss/" target="_blank">Cross-Site Scripting</a> (XSS) attacks.
+> [!NOTE] Important: Svelte doesn't perform any sanitization of the expression inside `{@html ...}` before it gets inserted into the DOM. This isn't an issue if the content is something you trust like an article you wrote yourself. However if it's some untrusted user content, e.g. a comment on an article, then it's critical that you manually escape it, otherwise you risk exposing your users to <a href="https://owasp.org/www-community/attacks/xss/" target="_blank">Cross-Site Scripting</a> (XSS) attacks.

apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/02-deep-state/index.md

@@ -29,4 +29,4 @@ function addNumber() {
 }
 ```
 
-> Deep reactivity is implemented using [proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), and mutations to the proxy do not affect the original object.
+> [!NOTE] Deep reactivity is implemented using [proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), and mutations to the proxy do not affect the original object.

apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-effects/index.md

@@ -6,7 +6,7 @@ So far we've talked about reactivity in terms of state. But that's only half of
 
 The thing that reacts is called an _effect_. You've already encountered effects — the ones that Svelte creates on your behalf to update the DOM in response to state changes — but you can also create your own with the `$effect` rune.
 
-> Most of the time, you shouldn't. `$effect` is best thought of as an escape hatch, rather than something to use frequently. If you can put your side effects in an [event handler](dom-events), for example, that's almost always preferable.
+> [!NOTE] Most of the time, you shouldn't. `$effect` is best thought of as an escape hatch, rather than something to use frequently. If you can put your side effects in an [event handler](dom-events), for example, that's almost always preferable.
 
 Let's say we want to use `setInterval` to keep track of how long the component has been mounted. Create the effect:
 
@@ -45,4 +45,4 @@ The cleanup function is called immediately before the effect function re-runs wh
 
 If the effect function doesn't read any state when it runs, it will only run once, when the component mounts.
 
-> Effects do not run during server-side rendering.
+> [!NOTE] Effects do not run during server-side rendering.

apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md

@@ -23,7 +23,7 @@ We _could_ fix it by adding the prop...
 <PackageInfo +++{...pkg}+++ />
 ```
 
-> Conversely, you can get an object containing all the props that were passed into a component using a rest property...
+> [!NOTE] Conversely, you can get an object containing all the props that were passed into a component using a rest property...
 >
 > ```js
 > let { name, ...stuff } = $props();

apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md

@@ -20,7 +20,7 @@ Instead of laboriously copying, pasting and editing, we can get rid of all but t
 </div>
 ```
 
-> The expression (`colors`, in this case) can be any iterable or array-like object — in other words, anything that works with [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from).
+> [!NOTE] The expression (`colors`, in this case) can be any iterable or array-like object — in other words, anything that works with [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from).
 
 Now we need to use the `color` variable in place of `"red"`:
 

apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md

@@ -11,7 +11,7 @@ Click the 'Remove first thing' button a few times, and notice what happens:
 1. It removes the last component.
 2. It then updates the `name` value in the remaining DOM nodes, but not the emoji.
 
-> If you're coming from React, this might seem strange, because you're used to the entire component re-rendering when state changes. Svelte works differently: the component 'runs' once, and subsequent updates are 'fine-grained'. This makes things faster and gives you more control.
+> [!NOTE] If you're coming from React, this might seem strange, because you're used to the entire component re-rendering when state changes. Svelte works differently: the component 'runs' once, and subsequent updates are 'fine-grained'. This makes things faster and gives you more control.
 
 One way to fix it would be to make `emoji` a [`$derived`](derived-state) value. But it makes more sense to remove the first `<Thing>` component altogether than to remove the _last_ one and update all the others.
 
@@ -24,4 +24,4 @@ To do that, we specify a unique _key_ for each iteration of the `each` block:
 {/each}
 ```
 
-> You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.
+> [!NOTE] You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.

apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.md

@@ -15,7 +15,7 @@ Most web applications have to deal with asynchronous data at some point. Svelte
 {/await}+++
 ```
 
-> Only the most recent `promise` is considered, meaning you don't need to worry about race conditions.
+> [!NOTE] Only the most recent `promise` is considered, meaning you don't need to worry about race conditions.
 
 If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves:
 

apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md

@@ -14,4 +14,4 @@ We can also use `bind:value` with `<select>` elements:
 
 Note that the `<option>` values are objects rather than strings. Svelte doesn't mind.
 
-> Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template.
+> [!NOTE] Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template.