feat(docs): update the auto-generated docs

tutorial/build-with-logto/_template-passwordless.mdx

@@ -29,7 +29,7 @@ export const connector = '${connector}';
 
 ## Create an application in Logto
 
-<CreateApplication type="${appType}" />
+<CreateApplication type="${appType}" framework="${framework}" />
 
 ## Integrate Logto SDK
 
@@ -49,7 +49,10 @@ export const connector = '${connector}';
 
 ## Enable ${connector} connector in Sign-in Experience
 
-<EnablePasswordlessConnector connectorType="${connectorType}" passwordlessSignUpIdentifier="${passwordlessSignUpIdentifier}" />
+<EnablePasswordlessConnector
+  connectorType="${connectorType}"
+  passwordlessSignUpIdentifier="${passwordlessSignUpIdentifier}"
+/>
 
 ## Testing and Validation
 

tutorial/build-with-logto/_template-social.mdx

@@ -29,7 +29,7 @@ export const connector = '${connector}';
 
 ## Create an application in Logto
 
-<CreateApplication type="${appType}" />
+<CreateApplication type="${appType}" framework="${framework}" />
 
 ## Integrate Logto SDK
 

tutorial/build-with-logto/fragments/_create-application.mdx

@@ -2,18 +2,34 @@ import createApp from '../assets/create-application-modal.png';
 
 In you browser, open a new tab and enter the link of Logto Admin Console.
 
-![Create application](../assets/create-application.png)
+![Get Started](../assets/get-started.png)
 
-Once the page is loaded, in the "Get Started" tab, click the "Create" button on the right, and the browser will redirect to the Application tab.
+Once the page is loaded, in the "Get Started" section click the `View all` link to open the application framework list page.
 
 ### Choose your application type
 
-<p>In the opening modal, select the "{props.type}" option as the application type.</p>
+![Framework List](../assets/framework-list.png)
 
-<img src={createApp} alt="Create Application modal" width="700" />
+<p>
+  In the opening modal, scroll to the "{props.type}" section or filter all the available "
+  {props.type}" frameworks using the quick filter checkboxes on the left.
+</p>
+
+<p>
+  Click the{' '}
+  {props.framework
+    .split('or')
+    .map((text) => `"${text.trim()}"`)
+    .join(' or ')}{' '}
+  framework card to start creating your application.
+</p>
 
 ### Enter application name
 
+<center>
+  <img src={createApp} alt="Create Application modal" width="700" />
+</center>
+
 Enter the application name, e.g., "Bookstore," and click "Create Application."
 
 🎉 Ta-da! You just created your first application in Logto. You'll see a congrats page which includes a detailed integration guide. Follow the guide to see what the experience will be in your application.

tutorial/build-with-logto/generate.js

@@ -21,23 +21,65 @@ const fs = require('fs/promises');
 
 /**
  * SDKs to read. You should keep the name in original cases such as "React" to provide a better reading experience.
- * 
+ *
  * @type Array<{ name: string; language: string; officialLink: string; appType: string; }>
  */
 const sdks = [
-  { name: 'React', language: 'js', officialLink: 'https://reactjs.org/', appType: 'Single Page App' },
-  { name: 'Vanilla JS', language: 'js', officialLink: 'https://en.wikipedia.org/wiki/ECMAScript', appType: 'Single Page App' },
-  { name: 'iOS Swift', language: 'swift', officialLink: 'https://developer.apple.com/ios/ ', appType: 'Native App' },
+  {
+    name: 'React',
+    language: 'js',
+    officialLink: 'https://reactjs.org/',
+    appType: 'Single Page App',
+    framework: 'React',
+  },
+  {
+    name: 'Vanilla JS',
+    language: 'js',
+    officialLink: 'https://en.wikipedia.org/wiki/ECMAScript',
+    appType: 'Single Page App',
+    framework: 'Vanilla JS',
+  },
+  {
+    name: 'iOS Swift',
+    language: 'swift',
+    officialLink: 'https://developer.apple.com/ios/ ',
+    appType: 'Native App',
+    framework: 'iOS(Swift)',
+  },
   { name: 'Go', language: 'go', officialLink: 'https://go.dev/', appType: 'Traditional Web' },
-  { name: 'Android', language: 'kotlin/java', officialLink: 'https://developer.android.com/', appType: 'Native App' },
-  { name: 'Flutter', language: 'dart', officialLink: 'https://flutter.dev/', appType: 'Native App' },
-  { name: 'Next', language: 'js', officialLink: 'https://nextjs.org/', appType: 'Traditional Web' },
-  { name: 'Express', language: 'js', officialLink: 'https://expressjs.com/', appType: 'Traditional Web' },
+  {
+    name: 'Android',
+    language: 'kotlin/java',
+    officialLink: 'https://developer.android.com/',
+    appType: 'Native App',
+    framework: 'Android(kotlin) or Android(Java)',
+  },
+  {
+    name: 'Flutter',
+    language: 'dart',
+    officialLink: 'https://flutter.dev/',
+    appType: 'Native App',
+    framework: 'Flutter',
+  },
+  {
+    name: 'Next',
+    language: 'js',
+    officialLink: 'https://nextjs.org/',
+    appType: 'Traditional Web',
+    framework: 'Next.js',
+  },
+  {
+    name: 'Express',
+    language: 'js',
+    officialLink: 'https://expressjs.com/',
+    appType: 'Traditional Web',
+    framework: 'Express',
+  },
 ];
 
 /**
  * Connector names to read. You should keep the name in original cases such as "GitHub" to provide a better reading experience.
- * 
+ *
  * * @type Array<{ name: string; configName: string; }>
  */
 const socialConnectors = [
@@ -59,33 +101,39 @@ const emailConnectors = [
   { name: 'SendGrid', configName: 'SendGrid email connector' },
 ];
 
-const smsConnectors = [
-  { name: 'Twilio', configName: 'Twilio SMS connector' },
-];
+const smsConnectors = [{ name: 'Twilio', configName: 'Twilio SMS connector' }];
 
 const generator = async (sdks, connectors, template, type) => {
-  await Promise.all(sdks.flatMap((sdk) => connectors.map(async (connector) => {
-    const connectorPath = connector.name.replaceAll(' ', '-').toLowerCase();
-    const sdkPath = sdk.name.replaceAll(' ', '-').toLowerCase();
-
-    const post = template
-      .replaceAll('${connector}', connector.name)
-      .replaceAll('${connectorPath}', connectorPath)
-      .replaceAll('${connectorConfigName}', connector.configName)
-      .replaceAll('${connectorType}', type)
-      .replaceAll('${passwordlessSignUpIdentifier}', type === 'Email' ? 'Email address' : 'Phone number')
-      .replaceAll('${sdk}', sdk.name)
-      .replaceAll('${sdkPath}', sdkPath)
-      .replaceAll('${sdkOfficialLink}', sdk.officialLink)
-      .replaceAll('${language}', sdk.language)
-      .replaceAll('${appType}', sdk.appType);
-
-    const filename = `generated-${sdkPath}-${connectorPath}.mdx`;
-
-    await fs.writeFile(filename, post, 'utf8');
-
-    console.log('Generated', filename);
-  })));
+  await Promise.all(
+    sdks.flatMap((sdk) =>
+      connectors.map(async (connector) => {
+        const connectorPath = connector.name.replaceAll(' ', '-').toLowerCase();
+        const sdkPath = sdk.name.replaceAll(' ', '-').toLowerCase();
+
+        const post = template
+          .replaceAll('${connector}', connector.name)
+          .replaceAll('${connectorPath}', connectorPath)
+          .replaceAll('${connectorConfigName}', connector.configName)
+          .replaceAll('${connectorType}', type)
+          .replaceAll(
+            '${passwordlessSignUpIdentifier}',
+            type === 'Email' ? 'Email address' : 'Phone number'
+          )
+          .replaceAll('${sdk}', sdk.name)
+          .replaceAll('${sdkPath}', sdkPath)
+          .replaceAll('${sdkOfficialLink}', sdk.officialLink)
+          .replaceAll('${language}', sdk.language)
+          .replaceAll('${appType}', sdk.appType)
+          .replaceAll('${framework}', sdk.framework);
+
+        const filename = `generated-${sdkPath}-${connectorPath}.mdx`;
+
+        await fs.writeFile(filename, post, 'utf8');
+
+        console.log('Generated', filename);
+      })
+    )
+  );
 };
 
 const run = async () => {