docs(console): update the sveltekit guide (#6130)

* docs(console): update the sveltekit guide

update the sveltekit guide

* chore(console): reorg the display user section in svltekit

reorg the display user section in svltekit

* refactor(console): improve content

---------

Co-authored-by: Gao Sun <gao@silverhand.io>

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

@@ -5,16 +5,19 @@ 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();
 
 <Steps>
 
 <Step
-  title="Installation"
-  subtitle="Install Logto SDK"
+  title="Install Logto SDK"
 >
+
+Use your favorite package manager to install the Logto SDK:
+
 <Tabs>
 <TabItem value="npm" label="npm">
 
@@ -40,13 +43,19 @@ pnpm add @logto/sveltekit
 </Tabs>
 </Step>
 
+<Step title="Configure redirect URIs" subtitle="2 URIs">
+
+<RedirectUrisWeb />
+
+</Step>
+
 <Step title="Add Logto hook">
 
 Create a `hooks.server.ts` file in your project `src` root if you don't have one. This file is used to define server hooks for your SvelteKit app.
 
 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(
@@ -55,15 +64,13 @@ export const handle = handleLogto(
     appId: '${props.app.id}',
     appSecret: '${props.app.secret}',
   },
-  {
-    encryptionKey: '${cookieEncryptionKey}', // Random-generated
-  }
+  { encryptionKey: '${cookieEncryptionKey}' } // Random-generated key
 );`}
 </Code>
 
-Since these information are sensitive, it's recommended to use environment variables:
+Since these information are sensitive, it's recommended to use environment variables. For example:
 
-<Code className="language-ts">
+<Code className="language-ts" title="src/hooks.server.ts">
     {`import { handleLogto } from '@logto/sveltekit';
 import { env } from '$env/dynamic/private';
 
@@ -73,23 +80,21 @@ export const handle = handleLogto(
     appId: env.LOGTO_APP_ID,
     appSecret: env.LOGTO_APP_SECRET,
   },
-  {
-    encryptionKey: env.LOGTO_COOKIE_ENCRYPTION_KEY,
-  }
+  { encryptionKey: env.LOGTO_COOKIE_ENCRYPTION_KEY }
 );`}
 </Code>
 
 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 {
@@ -107,24 +112,10 @@ 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.
-
-<UriInputField name="redirectUris" />
-
-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" />
-
 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,21 +132,25 @@ 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>
 ```
 
 </Step>
 
+<Step title="Checkpoint" subtitle="Test your app">
+
+<Checkpoint />
+
+</Step>
+
 <Step title="Display user information">
 
 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 +160,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;
@@ -183,10 +177,4 @@ In your Svelte component:
 
 </Step>
 
-<Step title="Checkpoint: Test your app">
-
-<Checkpoint />
-
-</Step>
-
 </Steps>