docs: use svelte 5 syntax (#13030)

* docs: use svelte 5 syntax

* apply change to other pages too

---------

Co-authored-by: Chew Tee Ming <chew.tee.ming@nindatech.com>

Author: devunt

documentation/docs/20-core-concepts/10-routing.md

@@ -330,7 +330,7 @@ By exporting `POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`/`HEAD` handlers, `+server.j
 <input type="number" bind:value={b}> =
 {total}
 
-<button on:click={add}>Calculate</button>
+<button onclick={add}>Calculate</button>
 ```
 
 ```js

documentation/docs/20-core-concepts/20-load.md

@@ -661,7 +661,7 @@ export async function load({ fetch, depends }) {
 </script>
 
 <p>random number: {data.number}</p>
-<button on:click={rerunLoadFunction}>Update random number</button>
+<button onclick={rerunLoadFunction}>Update random number</button>
 ```
 
 ### When do load functions rerun?

documentation/docs/20-core-concepts/30-form-actions.md

@@ -451,7 +451,7 @@ We can also implement progressive enhancement ourselves, without `use:enhance`,
 	}
 </script>
 
-<form method="POST" on:submit|preventDefault={handleSubmit}>
+<form method="POST" onsubmit|preventDefault={handleSubmit}>
 	<!-- content -->
 </form>
 ```
@@ -484,7 +484,7 @@ Form actions are the preferred way to send data to the server, since they can be
 	}
 </script>
 
-<button on:click={rerun}>Rerun CI</button>
+<button onclick={rerun}>Rerun CI</button>
 ```
 
 ```js

documentation/docs/30-advanced/67-shallow-routing.md

@@ -57,7 +57,7 @@ For this to work, you need to load the data that the `+page.svelte` expects. A c
 {#each data.thumbnails as thumbnail}
 	<a
 		href="/photos/{thumbnail.id}"
-		on:click={async (e) => {
+		onclick={async (e) => {
 			if (innerWidth < 640        // bail if the screen is too small
 				|| e.shiftKey             // or the link is opened in a new window
 				|| e.metaKey || e.ctrlKey // or a new tab (mac: metaKey, win/linux: ctrlKey)
@@ -86,7 +86,7 @@ For this to work, you need to load the data that the `+page.svelte` expects. A c
 {/each}
 
 {#if $page.state.selected}
-	<Modal on:close={() => history.back()}>
+	<Modal onclose={() => history.back()}>
 		<!-- pass page data to the +page.svelte component,
 		     just like SvelteKit would on navigation -->
 		<PhotoPage data={$page.state.selected} />