docs(console): update the sveltekit guide

update the sveltekit guide

packages/console/src/assets/docs/guides/web-sveltekit/README.mdx

@@ -5,6 +5,7 @@ import InlineNotification from '@/ds-components/InlineNotification';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
 import Checkpoint from '../../fragments/_checkpoint.md';
+import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
 import { generateStandardSecret } from '@logto/shared/universal';
 
 export const cookieEncryptionKey = generateStandardSecret();
@@ -46,7 +47,7 @@ Create a `hooks.server.ts` file in your project `src` root if you don't have one
 
 In your `hooks.server.ts` file, add the following code to inject the Logto hook into your server:
 
-<Code className="language-tsx">
+<Code className="language-tsx" title="src/hooks.server.ts">
     {`import { handleLogto } from '@logto/sveltekit';
 
 export const handle = handleLogto(
@@ -63,7 +64,7 @@ export const handle = handleLogto(
 
 Since these information are sensitive, it's recommended to use environment variables:
 
-<Code className="language-ts">
+<Code className="language-ts" title="src/hooks.server.ts">
     {`import { handleLogto } from '@logto/sveltekit';
 import { env } from '$env/dynamic/private';
 
@@ -81,15 +82,15 @@ export const handle = handleLogto(
 
 If you have multiple hooks, you can use [the sequence() helper function](https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks) to chain them:
 
-```ts
+```ts title="src/hooks.server.ts"
 import { sequence } from '@sveltejs/kit/hooks';
 
 export const handle = sequence(handleLogto, handleOtherHook);
 ```
 
 Now you can access the Logto client in the `locals` object. For TypeScript, you can add the type to `app.d.ts`:
 
-```ts
+```ts title="src/app.d.ts"
 import type { LogtoClient, UserInfoResponse } from '@logto/sveltekit';
 
 declare global {
@@ -106,25 +107,17 @@ We'll discuss the `user` object later.
 
 </Step>
 
-<Step title="Implement sign-in and sign-out">
-
-<InlineNotification>
-  In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
-</InlineNotification>
-
-First, let's enter your redirect URI. E.g. `http://localhost:3000/callback`. [Redirect URI](https://www.oauth.com/oauth2-servers/redirect-uris/) is an OAuth 2.0 concept which implies the location should redirect after authentication.
+<Step title="Configure redirect URIs" subtitle="2 URIs">
 
-<UriInputField name="redirectUris" />
+  <RedirectUrisWeb />
 
-After signing out, it'll be great to redirect user back to your website. For example, add `http://localhost:3000` as the post sign-out redirect URI below.
-
-<UriInputField name="postLogoutRedirectUris" />
+</Step>
 
+<Step title="Implement sign-in and sign-out">
 In the page where you want to implement sign-in and sign-out, define the following actions:
 
-<Code className="language-ts">
-    {`// +page.server.ts
-import type { Actions } from './$types';
+<Code className="language-ts" title="src/routes/+page.server.ts">
+    {`import type { Actions } from './$types';
 
 export const actions: Actions = {
   signIn: async ({ locals }) => {
@@ -141,8 +134,7 @@ export const actions: Actions = {
 
 Then use these actions in your Svelte component:
 
-```html
-{/* +page.svelte */}
+```html title="src/routes/+page.svelte"
 <form method="POST" action="?/{data.user ? 'signOut' : 'signIn'}">
   <button type="submit">Sign {data.user ? 'out' : 'in'}</button>
 </form>
@@ -154,8 +146,7 @@ Then use these actions in your Svelte component:
 
 To display the user's information, you can inject the `locals.user` object into the layout, thus making it available to all pages:
 
-```ts
-// +layout.server.ts
+```ts title="src/routes/+layout.server.ts"
 import type { LayoutServerLoad } from './$types';
 
 export const load: LayoutServerLoad = async ({ locals }) => {
@@ -165,8 +156,7 @@ export const load: LayoutServerLoad = async ({ locals }) => {
 
 In your Svelte component:
 
-```html
-{/* +page.svelte */}
+```html title="src/routes/+page.svelte"
 <script>
   /** @type {import('./$types').PageData} */
   export let data;