refactor: change some details in docs

1. Change the old style of Note/Tip/Caution to the new components
2. Delete some description on the homepage

docs/integrations/email/mailgun/README.mdx

@@ -48,8 +48,9 @@ The following usage types are supported:
 - `ForgotPassword`: The email to be sent when a user is resetting their password.
 - `Generic`: The email to be sent when a user is performing a generic action, for example, testing the email connector.
 
-> **Note**
-> If the usage type is not specified in the deliveries config, the generic email will be sent. If the generic email is not specified, the connector will return an error.
+:::note
+If the usage type is not specified in the deliveries config, the generic email will be sent. If the generic email is not specified, the connector will return an error.
+:::
 
 ### Content config
 

docs/integrations/email/smtp/README.mdx

@@ -52,11 +52,11 @@ You can go to [SMTP service address page](https://www.alibabacloud.com/help/en/d
 
 To check "Sender Addresses", you can find the entrance on the left-side navigation pane on [DirectMail console](https://dm.console.aliyun.com/). You should see `Sender address` and `SMTP Password` here.
 
-> ℹ️ **Note**
->
-> Only one sample template is provided in the previous cases to keep things simple. You should add more templates for other use cases.
-> You should change values wrapped with "\<" and ">" according to your Gmail, SendGrid or Aliyun account settings and choose to keep other fields w/o "\<" and ">".
-> Add `{{code}}` as a placeholder in templates' content to show random verification code in sending emails.
+:::note
+Only one sample template is provided in the previous cases to keep things simple. You should add more templates for other use cases.
+You should change values wrapped with "\<" and ">" according to your Gmail, SendGrid or Aliyun account settings and choose to keep other fields w/o "\<" and ">".
+Add `{{code}}` as a placeholder in templates' content to show random verification code in sending emails.
+:::
 
 ### Test SMTP connector
 

docs/integrations/sms/aliyun-sms/README.mdx

@@ -71,4 +71,4 @@ That's it. Don't forget to [Enable connector in sign-in experience](/connectors/
 
 ## References
 
-- [Aliyun SMS - Quick Start](https://dysms.console.aliyun.com/quickstart)
+<Url href="https://dysms.console.aliyun.com/quickstart">Aliyun SMS - Quick Start</Url>

docs/integrations/sms/tencent-sms/README.mdx

@@ -84,4 +84,6 @@ That's it. Don't forget to [Enable connector in sign-in experience](/connectors/
 
 ## References
 
-- [How to implement SMS verification code function?](https://cloud.tencent.com/document/product/382/43070)
+<Url href="https://cloud.tencent.com/document/product/382/43070">
+  How to implement SMS verification code function?
+</Url>

docs/integrations/sms/twilio-sms/README.mdx

@@ -28,18 +28,18 @@ Go to the [Twilio console page](https://console.twilio.com/) and sign in with yo
 
 Purchase a phone number under "Phone Numbers" -> "Manage" -> "Buy a number".
 
-> ℹ️ **Tip**
->
-> Sometimes you may encounter the situation that SMS service is not supported in specific countries or areas. Pick a number from other regions to bypass.
+:::tip
+Sometimes you may encounter the situation that SMS service is not supported in specific countries or areas. Pick a number from other regions to bypass.
+:::
 
 Once we have a valid number claimed, nav to the "Messaging" -> "Services". Create a new Message Service by clicking on the button.
 
 Give a friendly service name and choose _Notify my users_ as our service purpose.
 Following the next step, choose `Phone Number` as _Sender Type_, and add the phone number we just claimed to this service as a sender.
 
-> ℹ️ **Note**
->
-> Each phone number can only be linked with one messaging service.
+:::note
+Each phone number can only be linked with one messaging service.
+:::
 
 ## Get account credentials
 
@@ -80,4 +80,4 @@ That's it. Don't forget to [Enable connector in sign-in experience](/connectors/
 
 ## Reference
 
-- [Twilio - Error and Warning Dictionary](https://www.twilio.com/docs/api/errors)
+<Url href="https://www.twilio.com/docs/api/errors">Twilio - Error and Warning Dictionary</Url>

docs/integrations/social/alipay-native/README.mdx

@@ -35,16 +35,17 @@ Alipay Native connector works closely with Logto SDK on mobile platforms. It tak
 9. Set up "Authorization Redirect URI" (授权回调地址) by clicking "set up" (设置) button on the bottom of the Alipay console page. `${your_logto_origin}/callback/${connector_id}` is the default redirect URI used in Logto core. The `connector_id` can be found on the top bar of the Logto Admin Console connector details page.
 10. After finishing all these steps, go back to the top right corner of Alipay console page, and click "Submit for review" (提交审核). Once the review is approved, you are good to go with a smooth Alipay sign-in flow.
 
-> ℹ️ **Note**
->
-> You can use _openssl_ to generate key pairs on your local machine by executing following code snippet in terminal.
->
-> ```bash
-> openssl genrsa -out private.pem 2048
-> openssl rsa -in private.pem -outform PEM -pubout -out public.pem
-> ```
->
-> When filling in the public key on the Alipay app setup website, you need to remove the header and footer of `public.pem`, delete all newline characters, and paste the rest of the contents into the text input box for "public key".
+:::note
+
+You can use _openssl_ to generate key pairs on your local machine by executing following code snippet in terminal.
+
+```bash
+openssl genrsa -out private.pem 2048
+openssl rsa -in private.pem -outform PEM -pubout -out public.pem
+```
+
+When filling in the public key on the Alipay app setup website, you need to remove the header and footer of `public.pem`, delete all newline characters, and paste the rest of the contents into the text input box for "public key".
+:::
 
 ## Set up the Logto Alipay Native connector settings
 
@@ -75,9 +76,11 @@ Add the framework:
 
 ![Add framework](./assets/add-framework.png)
 
-> ℹ️ **Note**
->
-> The plugin includes Alipay "minimalist SDK" (极简版 SDK). You can directly use `import AFServiceSDK` once imported the plugin.
+:::note
+
+The plugin includes Alipay "minimalist SDK" (极简版 SDK). You can directly use `import AFServiceSDK` once imported the plugin.
+
+:::
 
 **2. Add the plugin to your `LogtoClient` init options**
 
@@ -129,5 +132,10 @@ Once Alipay native connector is enabled, you can build and run your app to see i
 
 ## References
 
-- [Alipay Docs - Access Preparation - How to create an app](https://opendocs.alipay.com/support/01rau6)
-- [Alipay Docs - Web & Mobile Apps - Create an app](https://opendocs.alipay.com/open/200/105310)
+<Url href="https://opendocs.alipay.com/support/01rau6">
+  Alipay Docs - Access Preparation - How to create an app
+</Url>
+
+<Url href="https://opendocs.alipay.com/open/200/105310">
+  Alipay Docs - Web & Mobile Apps - Create an app
+</Url>

docs/integrations/social/alipay-web/README.mdx

@@ -35,16 +35,17 @@ Alipay Web connector is designed for desktop Web applications. It takes advantag
 9. Set up "Authorization Redirect URI" (授权回调地址) by clicking "set up" (设置) button on the bottom of the Alipay console page. `${your_logto_origin}/callback/${connector_id}` is the default redirect URI used in Logto core. The `connector_id` can be found on the top bar of the Logto Admin Console connector details page.
 10. After finishing all these steps, go back to the top right corner of Alipay console page, and click "Submit for review" (提交审核). Once the review is approved, you are good to go with a smooth Alipay sign-in flow.
 
-> ℹ️ **Note**
->
-> You can use _openssl_ to generate key pairs on your local machine by executing following code snippet in terminal.
->
-> ```bash
-> openssl genrsa -out private.pem 2048
-> openssl rsa -in private.pem -outform PEM -pubout -out public.pem
-> ```
->
-> When filling in the public key on the Alipay app setup website, you need to remove the header and footer of `public.pem`, delete all newline characters, and paste the rest of the contents into the text input box for "public key".
+:::note
+You can use _openssl_ to generate key pairs on your local machine by executing following code snippet in terminal.
+
+```bash
+openssl genrsa -out private.pem 2048
+openssl rsa -in private.pem -outform PEM -pubout -out public.pem
+```
+
+When filling in the public key on the Alipay app setup website, you need to remove the header and footer of `public.pem`, delete all newline characters, and paste the rest of the contents into the text input box for "public key".
+
+:::
 
 ## Set up the Logto Alipay Web connector settings
 
@@ -75,5 +76,10 @@ Once Alipay web connector is enabled, you can build and run your web app to see
 
 ## References
 
-- [Alipay Docs - Access Preparation - How to create an app](https://opendocs.alipay.com/support/01rau6)
-- [Alipay Docs - Web & Mobile Apps - Create an app](https://opendocs.alipay.com/open/200/105310)
+<Url href="https://opendocs.alipay.com/support/01rau6">
+  Alipay Docs - Access Preparation - How to create an app
+</Url>
+
+<Url href="https://opendocs.alipay.com/open/200/105310">
+  Alipay Docs - Web & Mobile Apps - Create an app
+</Url>

docs/integrations/social/apple/README.mdx

@@ -18,18 +18,22 @@ The official Logto connector for Apple social sign-in.
 
 If you don't know the concept of the connector or don't know how to add this connector to your Sign-in experience, please see [Logto tutorial](/connectors/social-connectors).
 
-> ℹ️ **Note**
->
-> Apple sign-in is required for AppStore if you have other social sign-in methods in your app.
-> Having Apple sign-in on Android devices is great if you also provide an Android app.
+:::note
+
+Apple sign-in is required for AppStore if you have other social sign-in methods in your app.
+Having Apple sign-in on Android devices is great if you also provide an Android app.
+
+:::
 
 You need to enroll [Apple Developer Program](https://developer.apple.com/programs/) before continuing.
 
 ### Enable Sign in with Apple for your app
 
-> ⚠️ **Caution**
->
-> Even if you want to implement Sign in with Apple on a web app only, you still need to have an existing app that embraces the AppStore ecosystem (i.e., have a valid App ID).
+:::caution
+
+Even if you want to implement Sign in with Apple on a web app only, you still need to have an existing app that embraces the AppStore ecosystem (i.e., have a valid App ID).
+
+:::
 
 You can do it via Xcode -> Project settings -> Signing & Capabilities, or visit [Certificates, Identifiers & Profiles](https://developer.apple.com/account/resources/identifiers/list/bundleId).
 
@@ -58,19 +62,23 @@ Enter the domain of your Logto instance without protocol and port, e.g., `your.l
 
 Click "Next" then "Done" to close the modal. Click "Continue" on the top-right corner, then click "Save" to save your configuration.
 
-> ⚠️ **Caution**
->
-> Apple does NOT allow Return URLs with HTTP protocol and `localhost` domain.
->
-> If you want to test locally, you need to edit `/etc/hosts` file to map localhost to a custom domain and set up a local HTTPS environment. [mkcert](https://github.com/FiloSottile/mkcert) can help you for setting up local HTTPS.
+:::caution
+
+Apple does NOT allow Return URLs with HTTP protocol and `localhost` domain.
+
+If you want to test locally, you need to edit `/etc/hosts` file to map localhost to a custom domain and set up a local HTTPS environment. [mkcert](https://github.com/FiloSottile/mkcert) can help you for setting up local HTTPS.
+
+:::
 
 ## Configure scope
 
 To get user's email from Apple, you need to configure the scope to include `email`. For both email and name, you can use `name email` as the scope. See [Apple official docs](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js/incorporating_sign_in_with_apple_into_other_platforms#3332113) for more info.
 
-> ℹ️ **Note**
->
-> The user may choose to hide their email address from your app. In this case, you will not be able to retrieve the real email address. An email address like `[email protected]` will be returned instead.
+:::note
+
+The user may choose to hide their email address from your app. In this case, you will not be able to retrieve the real email address. An email address like `[email protected]` will be returned instead.
+
+:::
 
 ### Pitfalls of configuring scope
 

docs/integrations/social/azuread/README.mdx

@@ -17,8 +17,7 @@ The Microsoft Azure AD connector provides a succinct way for your application to
 
 - Visit the [Azure Portal](https://portal.azure.com/#home) and sign in with your Azure account. You need to have an active subscription to access Microsoft Azure AD.
 - Click the **Azure Active Directory** from the services they offer, and click the **App Registrations** from the left menu.
-- Click **New Registration** at the top, enter a description, select your **access type** and add your **Redirect URI**, which will redirect the user to the application after logging in. In our case, this will be `${your_logto_endpoint}/callback/${connector_id}`. e.g. `https://foo.logto.app/callback/${connector_id}`. (The `connector_id` can be also found on the top bar of the Logto Admin Console connector details page)
-  > You can copy the `Callback URI` in the configuration section.
+- Click **New Registration** at the top, enter a description, select your **access type** and add your **Redirect URI**, which will redirect the user to the application after logging in. In our case, this will be `${your_logto_endpoint}/callback/${connector_id}`. e.g. `https://foo.logto.app/callback/${connector_id}`. The `connector_id` can be also found on the top bar of the Logto Admin Console connector details page. You can copy the `Callback URI` in the configuration section.
 - Select Web as Platform.
 
 ## Fill in the configuration in Logto
@@ -55,4 +54,6 @@ Logto will use this field to construct the authorization endpoints. This value i
 
 ## References
 
-- [Web app that signs in users](https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-web-app-sign-user-overview)
+<Url href="https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-web-app-sign-user-overview">
+  Web app that signs in users
+</Url>

docs/integrations/social/github/README.mdx

@@ -29,7 +29,11 @@ Follow the [creating an OAuth App](https://docs.github.com/en/developers/apps/bu
 Name your new OAuth application in **Application name** and fill up **Homepage URL** of the app.
 You can leave **Application description** field blank and customize **Authorization callback URL** as `${your_logto_origin}/callback/${connector_id}`. The `connector_id` can be found on the top bar of the Logto Admin Console connector details page.
 
-> Note: If you encounter the error message "The redirect_uri MUST match the registered callback URL for this application." when logging in, try aligning the Authorization Callback URL of your GitHub OAuth App and your Logto App's redirect URL (of course, including the protocol) to resolve the issue.
+:::note
+
+If you encounter the error message "The redirect_uri MUST match the registered callback URL for this application." when logging in, try aligning the Authorization Callback URL of your GitHub OAuth App and your Logto App's redirect URL (of course, including the protocol) to resolve the issue.
+
+:::
 
 We suggest not to check the box before **Enable Device Flow**, or users who sign in with GitHub on mobile devices must confirm the initial sign-in action in the GitHub app. Many GitHub users do not install the GitHub mobile app on their phones, which could block the sign-in flow. Please ignore our suggestion if you are expecting end-users to confirm their sign-in flow. See details of [device flow](https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps#device-flow).
 
@@ -58,5 +62,10 @@ That's it. The GitHub connector should be available now. Don't forget to [Enable
 
 ## Reference
 
-- [GitHub - Developers - Apps](https://docs.github.com/en/developers/apps/getting-started-with-apps/about-apps)
-- [GitHub - Developers - Apps - Creating an OAuth App](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app)
+<Url href="https://docs.github.com/en/developers/apps/getting-started-with-apps/about-apps">
+  GitHub - Developers - Apps
+</Url>
+
+<Url href="https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app">
+  GitHub - Developers - Apps - Creating an OAuth App
+</Url>

docs/integrations/social/google/README.mdx

@@ -99,4 +99,6 @@ To enable Google One Tap in your website (beyond the Logto sign-in experience),
 
 ## References
 
-- [Google Identity: Setting up OAuth 2.0](https://developers.google.com/identity/protocols/oauth2/openid-connect#appsetup)
+<Url href="https://developers.google.com/identity/protocols/oauth2/openid-connect#appsetup">
+  Google Identity: Setting up OAuth 2.0
+</Url>

docs/integrations/social/huggingface/README.mdx

@@ -58,4 +58,6 @@ That's it. The Hugging Face connector should be available now. Don't forget to [
 
 ## Reference
 
-- [Hugging Face - Sign in with Hugging Face](https://huggingface.co/docs/hub/en/oauth#sign-in-with-hugging-face)
+<Url href="https://huggingface.co/docs/hub/en/oauth#sign-in-with-hugging-face">
+  Hugging Face - Sign in with Hugging Face
+</Url>

docs/integrations/social/naver/README.mdx

@@ -54,9 +54,11 @@ Currently `Naver Developers` site only supports Korean. Please consider use a tr
 - For `서비스 URL(Service URL)`, type `http(s)://YOUR_URL` (ex. https://logto.io)
 - For `네이버 로그인(Naver Login) Callback URL`, type `http(s)://YOUR_URL/callback/${connector_id}` (e.g. https://logto.io/callback/${connector_id})
 
-> ⚠️ **Caution**
->
-> The `connector_id` can be found on the top bar of the Logto Admin Console connector details page.
+:::caution
+
+The `connector_id` can be found on the top bar of the Logto Admin Console connector details page.
+
+:::
 
 ## Configure Logto
 

docs/integrations/social/oauth2/README.mdx

@@ -18,9 +18,11 @@ The official Logto connector for OAuth 2.0 protocol.
 
 The OAuth connector enables Logto's connection to an arbitrary social identity provider that supports OAuth 2.0 protocol.
 
-> ℹ️ **Note**
->
-> OAuth connector is a special kind of connector in Logto, you can add a few OAuth-protocol-based connectors.
+:::note
+
+OAuth connector is a special kind of connector in Logto, you can add a few OAuth-protocol-based connectors.
+
+:::
 
 ## Create your OAuth app
 
@@ -63,10 +65,12 @@ For example, you can find [Google user profile response](https://developers.goog
 }
 ```
 
-> ℹ️ **Note**
->
-> We provided an OPTIONAL `customConfig` key to put your customize parameters.
-> Each social identity provider could have their own variant on OAuth standard protocol. If your desired social identity provider strictly stick to OAuth standard protocol, the you do not need to care about `customConfig`.
+:::note
+
+We provided an OPTIONAL `customConfig` key to put your customize parameters.
+Each social identity provider could have their own variant on OAuth standard protocol. If your desired social identity provider strictly stick to OAuth standard protocol, the you do not need to care about `customConfig`.
+
+:::
 
 ## Config types
 
@@ -94,4 +98,4 @@ For example, you can find [Google user profile response](https://developers.goog
 
 ## Reference
 
-- [The OAuth 2.0 Authorization Framework](https://www.rfc-editor.org/rfc/rfc6749)
+<Url href="https://www.rfc-editor.org/rfc/rfc6749">The OAuth 2.0 Authorization Framework</Url>