From 08dc2eb29a98ce1e6739680d82779964eab032b4 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Fri, 28 Jun 2024 13:27:11 +0800
Subject: [PATCH 1/3] docs(console): update the sveltekit guide

update the sveltekit guide
---
 .../docs/guides/web-sveltekit/README.mdx      | 38 +++++++------------
 1 file changed, 14 insertions(+), 24 deletions(-)

diff --git a/packages/console/src/assets/docs/guides/web-sveltekit/README.mdx b/packages/console/src/assets/docs/guides/web-sveltekit/README.mdx
index 97b8ddb26d6..61344be4081 100644
--- a/packages/console/src/assets/docs/guides/web-sveltekit/README.mdx
+++ b/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,7 +82,7 @@ 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);
@@ -89,7 +90,7 @@ 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;

From ec133b65c4d51a23d72d1649e1e5727fe18c20d3 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Sun, 30 Jun 2024 18:29:15 +0800
Subject: [PATCH 2/3] chore(console): reorg the display user section in
 svltekit

reorg the display user section in svltekit
---
 .../assets/docs/guides/web-sveltekit/README.mdx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/console/src/assets/docs/guides/web-sveltekit/README.mdx b/packages/console/src/assets/docs/guides/web-sveltekit/README.mdx
index 61344be4081..535f25f2775 100644
--- a/packages/console/src/assets/docs/guides/web-sveltekit/README.mdx
+++ b/packages/console/src/assets/docs/guides/web-sveltekit/README.mdx
@@ -13,8 +13,7 @@ export const cookieEncryptionKey = generateStandardSecret();
 <Steps>
 
 <Step
-  title="Installation"
-  subtitle="Install Logto SDK"
+  title="Install Logto SDK"
 >
 <Tabs>
 <TabItem value="npm" label="npm">
@@ -41,7 +40,7 @@ pnpm add @logto/sveltekit
 </Tabs>
 </Step>
 
-<Step title="Add Logto hook">
+<Step title="Add Logto hook" subtitle="Init Logto client">
 
 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.
 
@@ -142,6 +141,12 @@ Then use these actions in your Svelte component:
 
 </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:
@@ -173,10 +178,4 @@ In your Svelte component:
 
 </Step>
 
-<Step title="Checkpoint: Test your app">
-
-<Checkpoint />
-
-</Step>
-
 </Steps>

From 48eb124d2f3b97170bf64ebdb8b1a7d62db22cc1 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Mon, 1 Jul 2024 13:41:56 +0800
Subject: [PATCH 3/3] refactor(console): improve content

---
 .../docs/guides/web-sveltekit/README.mdx      | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/console/src/assets/docs/guides/web-sveltekit/README.mdx b/packages/console/src/assets/docs/guides/web-sveltekit/README.mdx
index 535f25f2775..ebbe98edd76 100644
--- a/packages/console/src/assets/docs/guides/web-sveltekit/README.mdx
+++ b/packages/console/src/assets/docs/guides/web-sveltekit/README.mdx
@@ -15,6 +15,9 @@ export const cookieEncryptionKey = generateStandardSecret();
 <Step
   title="Install Logto SDK"
 >
+
+Use your favorite package manager to install the Logto SDK:
+
 <Tabs>
 <TabItem value="npm" label="npm">
 
@@ -40,7 +43,13 @@ pnpm add @logto/sveltekit
 </Tabs>
 </Step>
 
-<Step title="Add Logto hook" subtitle="Init Logto client">
+<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.
 
@@ -55,13 +64,11 @@ 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" title="src/hooks.server.ts">
     {`import { handleLogto } from '@logto/sveltekit';
@@ -73,9 +80,7 @@ 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>
 
@@ -106,12 +111,6 @@ We'll discuss the `user` object later.
 
 </Step>
 
-<Step title="Configure redirect URIs" subtitle="2 URIs">
-
-  <RedirectUrisWeb />
-
-</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: