feat: add sdk and connector selection dropdowns in tutorial title

i18n/de/code.json

@@ -481,5 +481,29 @@
   },
   "Privacy": {
     "message": "Datenschutz"
+  },
+  "theme.common.sdk.placeholder": {
+    "message": "Ihr SDK"
+  },
+  "theme.common.connector.placeholder": {
+    "message": "Ihr Anbieter"
+  },
+  "theme.common.sdk.native": {
+    "message": "Nativ"
+  },
+  "theme.common.sdk.spa": {
+    "message": "Single Page"
+  },
+  "theme.common.sdk.traditional": {
+    "message": "Traditionelles Web"
+  },
+  "theme.common.connector.social": {
+    "message": "Soziale Anbieter"
+  },
+  "theme.common.connector.email": {
+    "message": "E-Mail-Anbieter"
+  },
+  "theme.common.connector.sms": {
+    "message": "SMS-Anbieter"
   }
 }

i18n/es/code.json

@@ -481,5 +481,29 @@
   },
   "Privacy": {
     "message": "Privacidad"
+  },
+  "theme.common.sdk.placeholder": {
+    "message": "Tu SDK"
+  },
+  "theme.common.connector.placeholder": {
+    "message": "Tu proveedor"
+  },
+  "theme.common.sdk.native": {
+    "message": "Nativo"
+  },
+  "theme.common.sdk.spa": {
+    "message": "Página única"
+  },
+  "theme.common.sdk.traditional": {
+    "message": "Web tradicional"
+  },
+  "theme.common.connector.social": {
+    "message": "Proveedores sociales"
+  },
+  "theme.common.connector.email": {
+    "message": "Proveedores de correo electrónico"
+  },
+  "theme.common.connector.sms": {
+    "message": "Proveedores de SMS"
   }
 }

i18n/fr/code.json

@@ -481,5 +481,29 @@
   },
   "Privacy": {
     "message": "Confidentialité"
+  },
+  "theme.common.sdk.placeholder": {
+    "message": "Votre SDK"
+  },
+  "theme.common.connector.placeholder": {
+    "message": "Votre fournisseur"
+  },
+  "theme.common.sdk.native": {
+    "message": "Natif"
+  },
+  "theme.common.sdk.spa": {
+    "message": "Page unique"
+  },
+  "theme.common.sdk.traditional": {
+    "message": "Web traditionnel"
+  },
+  "theme.common.connector.social": {
+    "message": "Fournisseurs sociaux"
+  },
+  "theme.common.connector.email": {
+    "message": "Fournisseurs d'e-mail"
+  },
+  "theme.common.connector.sms": {
+    "message": "Fournisseurs de SMS"
   }
 }

i18n/ja/code.json

@@ -1,49 +1,52 @@
 {
   "theme.languageSwitchBanner.message": {
-    "message": "A version matching your device language is available. Switch to ",
+    "message": "お使いのデバイスの言語に一致するバージョンが利用可能です。切り替え先 ",
     "description": "The prompt message displayed in the language switch banner"
   },
   "theme.docs.DocCard.categoryDescription.plurals": {
     "message": "{count}項目",
     "description": "The default description for a category card in the generated index about how many items this category includes"
   },
   "theme.common.doYouFindThisPageHelpful": {
-    "message": "Do you find this page helpful?",
+    "message": "このページは役に立ちましたか？",
     "description": "The label for the docs helpfulness question"
   },
   "theme.common.yes": {
-    "message": "Yes"
+    "message": "はい",
+    "description": "The label for the docs helpful button"
   },
   "theme.common.no": {
-    "message": "No"
+    "message": "いいえ",
+    "description": "The label for the docs not helpful button"
   },
   "theme.common.thanksForTheFeedback": {
-    "message": "Thank you for helping improve Logto Docs! 💜 ",
+    "message": "Logtoドキュメントの改善にご協力いただきありがとうございます！💜",
     "description": "The success message after submitting feedback"
   },
   "theme.common.feedbackPlaceholder": {
-    "message": "We'd love to hear your feedback!",
+    "message": "フィードバックをお聞かせください！",
     "description": "The placeholder of the feedback textarea"
   },
   "theme.common.submit": {
-    "message": "Submit",
+    "message": "送信",
     "description": "The label of the submit button"
   },
   "theme.common.helpUsImproveTheDocs": {
-    "message": "Help us improve the docs!"
+    "message": "ドキュメントの改善にご協力ください！",
+    "description": "The label for the edit this page button"
   },
   "theme.common.editThisPage": {
     "message": "このページを編集",
     "description": "The link label to edit the current page"
   },
   "Hosted in 🇪🇺🇺🇸🇦🇺": {
-    "message": "Hosted in 🇪🇺🇺🇸🇦🇺"
+    "message": "🇪🇺🇺🇸🇦🇺 でホストされています"
   },
   "Terms": {
-    "message": "Terms"
+    "message": "利用規約"
   },
   "Privacy": {
-    "message": "Privacy"
+    "message": "プライバシー"
   },
   "theme.DocSidebarItem.expandCategoryAriaLabel": {
     "message": "'{label}'の目次を開く",
@@ -478,5 +481,29 @@
   "theme.tags.tagsPageTitle": {
     "message": "タグ",
     "description": "The title of the tag list page"
+  },
+  "theme.common.sdk.placeholder": {
+    "message": "SDKを選択"
+  },
+  "theme.common.connector.placeholder": {
+    "message": "プロバイダーを選択"
+  },
+  "theme.common.sdk.native": {
+    "message": "ネイティブ"
+  },
+  "theme.common.sdk.spa": {
+    "message": "シングルページ"
+  },
+  "theme.common.sdk.traditional": {
+    "message": "従来のウェブアプリ"
+  },
+  "theme.common.connector.social": {
+    "message": "ソーシャルプロバイダー"
+  },
+  "theme.common.connector.email": {
+    "message": "メールプロバイダー"
+  },
+  "theme.common.connector.sms": {
+    "message": "SMSプロバイダー"
   }
 }

i18n/pt-BR/code.json

@@ -481,5 +481,29 @@
   },
   "Privacy": {
     "message": "Privacidade"
+  },
+  "theme.common.sdk.placeholder": {
+    "message": "Seu SDK"
+  },
+  "theme.common.connector.placeholder": {
+    "message": "Seu provedor"
+  },
+  "theme.common.sdk.native": {
+    "message": "Nativo"
+  },
+  "theme.common.sdk.spa": {
+    "message": "Página única"
+  },
+  "theme.common.sdk.traditional": {
+    "message": "Web tradicional"
+  },
+  "theme.common.connector.social": {
+    "message": "Provedores sociais"
+  },
+  "theme.common.connector.email": {
+    "message": "Provedores de e-mail"
+  },
+  "theme.common.connector.sms": {
+    "message": "Provedores de SMS"
   }
 }

i18n/zh-CN/code.json

@@ -481,5 +481,29 @@
   },
   "Privacy": {
     "message": "隐私"
+  },
+  "theme.common.sdk.placeholder": {
+    "message": "选择 SDK"
+  },
+  "theme.common.connector.placeholder": {
+    "message": "选择提供商"
+  },
+  "theme.common.sdk.native": {
+    "message": "原生"
+  },
+  "theme.common.sdk.spa": {
+    "message": "单页应用"
+  },
+  "theme.common.sdk.traditional": {
+    "message": "传统网页"
+  },
+  "theme.common.connector.social": {
+    "message": "社交提供商"
+  },
+  "theme.common.connector.email": {
+    "message": "邮件提供商"
+  },
+  "theme.common.connector.sms": {
+    "message": "短信提供商"
   }
 }

plugins/tutorial-generator/index.ts

@@ -7,6 +7,8 @@ import type { DocMetadata, LoadedContent } from '@docusaurus/plugin-content-docs
 import { type PluginConfig } from '@docusaurus/types';
 import { type Optional } from '@silverhand/essentials';
 
+import { getConnectorDisplayName, getConnectorPath, getSdkDisplayName, getSdkPath } from './utils';
+
 type DocGroups = {
   sdks: DocMetadata[];
   socialConnectors: DocMetadata[];
@@ -16,6 +18,9 @@ type DocGroups = {
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+const getCurrentLocale = ({ permalink, slug }: DocMetadata) =>
+  permalink === slug ? undefined : permalink.split('/')[1];
+
 /**
  * A helper function to get the absolute path of a doc.
  *
@@ -30,8 +35,7 @@ const getAbsoluteDocDir = (doc: DocMetadata) => {
 };
 
 const getAbsoluteOutputDir = (doc: DocMetadata) => {
-  const { permalink, slug } = doc;
-  const locale = permalink === slug ? undefined : permalink.split('/')[1];
+  const locale = getCurrentLocale(doc);
   const relativeOutputPath = locale
     ? `i18n/${locale}/docusaurus-plugin-content-blog-tutorial/build-with-logto`
     : 'tutorial/build-with-logto';
@@ -55,6 +59,7 @@ const tutorialGenerator: PluginConfig = () => {
       }
 
       const outputDir = getAbsoluteOutputDir(docs[0]);
+      const locale = getCurrentLocale(docs[0]);
 
       const socialTemplatePath = path.join(outputDir, '_template-social.mdx');
       const passwordlessTemplatePath = path.join(outputDir, '_template-passwordless.mdx');
@@ -69,7 +74,7 @@ const tutorialGenerator: PluginConfig = () => {
         fs.readFile(passwordlessTemplatePath, 'utf8'),
       ]);
 
-      const { sdks, socialConnectors, emailConnectors, smsConnectors } = docs.reduce<DocGroups>(
+      const tutorialMetadata = docs.reduce<DocGroups>(
         (acc, doc) => {
           const { sourceDirName } = doc;
           const absoluteDocDir = getAbsoluteDocDir(doc);
@@ -108,6 +113,16 @@ const tutorialGenerator: PluginConfig = () => {
         }
       );
 
+      if (!locale) {
+        // Write tutorial metadata of default locale to output folder as json
+        await fs.writeFile(
+          path.join(outputDir, 'metadata.json'),
+          JSON.stringify(tutorialMetadata, null, 2)
+        );
+      }
+
+      const { sdks, socialConnectors, emailConnectors, smsConnectors } = tutorialMetadata;
+
       // Copy assets folders to output directory
       const assetsDir = path.join(__dirname, './assets');
       const targetAssetsDir = path.join(outputDir, 'assets');
@@ -133,20 +148,12 @@ const tutorialGenerator: PluginConfig = () => {
         await Promise.all(
           sdks.map((sdk) =>
             connectors.map(async (connector) => {
-              const connectorName = String(
-                connector.frontMatter.tutorial_name ?? connector.frontMatter.sidebar_label ?? ''
-              );
-              const connectorPath = connectorName.replaceAll(' ', '-').toLowerCase();
-              const sdkPath =
-                String(sdk.frontMatter.tutorial_name ?? '')
-                  .replaceAll(' ', '-')
-                  .replaceAll(/[()]/g, '')
-                  .replaceAll('.', 'dot')
-                  .toLowerCase() || sdk.slug.split('/').slice(2).join('-');
+              const connectorPath = getConnectorPath(connector);
+              const sdkPath = getSdkPath(sdk);
 
               /* eslint-disable no-template-curly-in-string */
               const post = template
-                .replaceAll('${connector}', connectorName)
+                .replaceAll('${connector}', getConnectorDisplayName(connector))
                 .replaceAll('${connectorPath}', connectorPath)
                 .replaceAll(
                   '${connectorConfigName}',
@@ -160,10 +167,7 @@ const tutorialGenerator: PluginConfig = () => {
                 )
                 .replaceAll('${connectorDocDir}', getRelativeDocSourcePath(connector))
                 .replaceAll('${sdkDocDir}', getRelativeDocSourcePath(sdk))
-                .replaceAll(
-                  '${sdk}',
-                  String(sdk.frontMatter.tutorial_name ?? sdk.frontMatter.sidebar_label)
-                )
+                .replaceAll('${sdk}', getSdkDisplayName(sdk))
                 .replaceAll('${sdkPath}', sdkPath)
                 .replaceAll('${sdkOfficialLink}', String(sdk.frontMatter.official_link))
                 .replaceAll('${language}', String(sdk.frontMatter.language))

plugins/tutorial-generator/utils.ts

@@ -0,0 +1,23 @@
+import { type DocMetadata } from '@docusaurus/plugin-content-docs';
+
+export const getSdkDisplayName = (sdk: DocMetadata) =>
+  String(sdk.frontMatter.tutorial_name ?? sdk.frontMatter.sidebar_label ?? '');
+
+export const getConnectorDisplayName = (connector: DocMetadata) =>
+  String(connector.frontMatter.tutorial_name ?? connector.frontMatter.sidebar_label ?? '');
+
+export const getSdkPath = (metadata: DocMetadata) => {
+  const sdkName = String(metadata.frontMatter.tutorial_name ?? '');
+
+  return sdkName
+    ? sdkName.replaceAll(' ', '-').replaceAll(/[()]/g, '').replaceAll('.', 'dot').toLowerCase()
+    : metadata.slug.split('/').slice(2).join('-');
+};
+
+export const getConnectorPath = (metadata: DocMetadata) => {
+  const connectorName = String(
+    metadata.frontMatter.tutorial_name ?? metadata.frontMatter.sidebar_label ?? ''
+  );
+
+  return connectorName.replaceAll(' ', '-').toLowerCase();
+};

src/components/Dropdown/index.tsx

@@ -12,6 +12,8 @@ import styles from './index.module.scss';
 
 export { default as DropdownItem } from './DropdownItem';
 
+ReactModal.setAppElement('#__docusaurus');
+
 type Props = {
   readonly children: ReactNode;
   readonly isOpen: boolean;