Merge pull request #1114 from logto-io/gao-reorg-docs

refactor(docs): reorg files

.vscode/settings.json

@@ -26,6 +26,7 @@
     "codecov",
     "Logto",
     "oidc",
+    "passcode",
     "Passwordless",
     "pnpm",
     "silverhand",

packages/docs/docs/docs/README.md

@@ -3,7 +3,7 @@ sidebar_position: 1
 slug: /
 ---
 
-# Introduction
+# 💁 Introduction
 
 🤘 Logto helps you quickly focus on everything after signing in.
 
@@ -41,7 +41,7 @@ In your terminal:
 node -e "$(printf "%s" "$(curl -fsSL https://raw.githubusercontent.com/logto-io/logto/master/install.js)")"
 ```
 
-The script will download Logto and create a directory `logto` in the location you ran it. After answering [several simple questions](./tutorial/configuration#questions), you will see the message like:
+The script will download Logto and create a directory `logto` in the location you ran it. After answering [several simple questions](./docs/references/core/configuration#questions), you will see the message like:
 
 ```bash
 App is running at http://localhost:3001
@@ -55,4 +55,4 @@ TBD
 
 ## Configuration
 
-Logto uses environment variables for configuration, along with `.env` file support. See [Configuration](./tutorial/configuration) for detailed usage and full variable list.
+Logto uses environment variables for configuration, along with `.env` file support. See [Configuration](./docs/references/core/configuration) for detailed usage and full variable list.

packages/docs/docs/docs/recipes/integrate-logto/README.md

@@ -1,4 +1,4 @@
-# Integrate Logto
+# 🔗 Integrate Logto in your application
 
 We provide a bunch of SDKs to let you integrate Logto with frontend clients with ease. If you are using traditional web technology (i.e., server directly renders frontend), please check out our integration guide.
 

packages/docs/docs/docs/recipes/integrate-logto/android.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_label: Android
+sidebar_label: Android (Kotlin)
 ---
 
 import Tabs from '@theme/Tabs';

packages/docs/docs/docs/recipes/integrate-logto/ios.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_label: iOS
+sidebar_label: iOS (Swift)
 ---
 
 import Tabs from '@theme/Tabs';

packages/docs/docs/docs/references/core/README.md

@@ -0,0 +1 @@
+# 🧱 Core

packages/docs/docs/docs/tutorials/get-started/README.md

@@ -1,8 +1,4 @@
----
-sidebar_position: 2
----
-
-# Get Started
+# 🌟 Get Started
 
 Before we start, it'll be good to know how Logto works. To simplify, we divide Logto into four parts: Admin Console, Sign-in Experience, Core Service, and SDKs.
 

packages/docs/docs/docs/tutorials/get-started/_category_.json

@@ -0,0 +1,4 @@
+{
+  "collapsible": false,
+  "collapsed": false
+}

packages/docs/docs/docs/tutorials/get-started/add-a-social-connector.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 5
+---
+
+# Add a social connector

packages/docs/docs/docs/tutorials/get-started/customize-sign-in-experience.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 3
+---
+
+# Customize sign-in experience

packages/docs/docs/docs/tutorials/get-started/enable-passcode-sign-in.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 4
+---
+
+# Enable SMS or email passcode sign-in

packages/docs/docs/docs/tutorials/get-started/further-readings.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 6
+---
+
+# Further readings

packages/docs/docusaurus.config.js

@@ -46,7 +46,7 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       navbar: {
-        title: 'Logto Docs',
+        title: 'Logto',
         logo: {
           alt: 'Logto Logo',
           src: 'img/logo.svg',
@@ -54,9 +54,9 @@ const config = {
         items: [
           {
             type: 'doc',
-            docId: 'tutorial/README',
+            docId: 'docs/README',
             position: 'left',
-            label: 'Tutorial',
+            label: 'Docs',
           },
           {
             type: 'doc',
@@ -88,7 +88,7 @@ const config = {
             title: 'Docs',
             items: [
               {
-                label: 'Tutorial',
+                label: 'Docs',
                 to: '/',
               },
             ],

packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current.json

@@ -2,25 +2,25 @@
   "version.label": {
     "message": "下一个"
   },
-  "sidebar.tutorialSidebar.category.Integrate SDK": {
+  "sidebar.docsSidebar.category.Integrate SDK": {
     "message": "集成 SDK"
   },
-  "sidebar.sdkSidebar.category.Classes": {
+  "sidebar.docsSidebar.category.Classes": {
     "message": "类（Classes）"
   },
-  "sidebar.sdkSidebar.category.Enums": {
+  "sidebar.docsSidebar.category.Enums": {
     "message": "枚举（Enums）"
   },
-  "sidebar.sdkSidebar.category.Protocols": {
+  "sidebar.docsSidebar.category.Protocols": {
     "message": "接口（Protocols）"
   },
-  "sidebar.sdkSidebar.category.Typealiases": {
+  "sidebar.docsSidebar.category.Typealiases": {
     "message": "类型别名（Typealiases）"
   },
-  "sidebar.sdkSidebar.category.Extensions": {
+  "sidebar.docsSidebar.category.Extensions": {
     "message": "扩展（Extensions）"
   },
-  "sidebar.sdkSidebar.category.Structs": {
+  "sidebar.docsSidebar.category.Structs": {
     "message": "结构体（Structs）"
   }
 }

packages/docs/sidebars.js

@@ -14,8 +14,28 @@
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: 'tutorial'}],
-  sdkSidebar: [{type: 'autogenerated', dirName: 'sdk'}],
+  docsSidebar: [
+    {
+      type: 'html',
+      value: 'Tutorials',
+      className: 'sidebar-section',
+    },
+    'docs/README',
+    { type: 'autogenerated', dirName: 'docs/tutorials' },
+    {
+      type: 'html',
+      value: 'Recipes',
+      className: 'sidebar-section',
+    },
+    { type: 'autogenerated', dirName: 'docs/recipes' },
+    {
+      type: 'html',
+      value: 'References',
+      className: 'sidebar-section',
+    },
+    { type: 'autogenerated', dirName: 'docs/references' },
+  ],
+  sdkSidebar: [{ type: 'autogenerated', dirName: 'sdk' }],
 
   // But you can create a sidebar manually
   /*

packages/docs/src/css/custom.css

@@ -14,7 +14,8 @@
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
-  --doc-sidebar-width: 450px !important;
+  --doc-sidebar-width: 400px !important;
+  --doc-sidebar-section-title: #eee;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -26,6 +27,7 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
+  --doc-sidebar-section-title: #777;
 }
 
 .docusaurus-highlight-code-line {
@@ -38,3 +40,15 @@
 [data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+.sidebar-section {
+  color: var(--doc-sidebar-section-title);
+  padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.sidebar-section:not(:first-child) {
+  margin-top: calc(var(--ifm-menu-link-padding-vertical) * 2);
+}