added live demo page in nav bar

Author: Bivas-Biswas

docs/LiveDemo/_category_.json

@@ -79,6 +79,15 @@ const versions = require('./versions.json');
         sidebarPath: require.resolve('./sidebarsCommunity.js'),
       },
     ],
+    [
+      '@docusaurus/plugin-content-docs',
+      {
+        id: 'livedemo',
+        path: 'livedemo',
+        routeBasePath: 'livedemo',
+        sidebarPath: require.resolve('./sidebarsLivedemo.js'),
+      },
+    ],
     function tailwindcss() {
       return {
         name: 'docusaurus-tailwindcss',
@@ -135,6 +144,14 @@ const versions = require('./versions.json');
               }))
             ]
           },
+          {
+            type: 'doc',
+            position: 'right',
+            label: 'Live Demo',
+            to: 'livedemo',
+            docsPluginId: 'livedemo',
+            docId: 'WeeklyBugRetro',
+          },
           {
             type: 'doc',
             docId: 'index',
@@ -210,11 +227,7 @@ const versions = require('./versions.json');
               {
                 label: 'Engineering Metrics',
                 to: 'docs/Metrics',
-              },
-              {
-                label: 'Dashboards (Live Demo)',
-                to: 'docs/LiveDemo',
-              },
+              }
             ],
           },
           {

docs/UserManuals/ConfigUI/GitHub.md

@@ -0,0 +1,29 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  livedemoSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['hello'],
+    },
+  ],
+   */
+};
+
+module.exports = sidebars;

docusaurus.config.js

@@ -50,7 +50,7 @@ export function UserFlow() {
           icon={<UF3 width={40} height={40} />}
           text="View Dashboards"
         >
-          <InlineLink link="https://devlake.apache.org/docs/LiveDemo">View pre-built dashboards</InlineLink> of a variety of use cases and learn engineering insights from the <InlineLink link="https://devlake.apache.org/docs/Metrics">metrics</InlineLink>.
+          <InlineLink link="https://devlake.apache.org/livedemo">View pre-built dashboards</InlineLink> of a variety of use cases and learn engineering insights from the <InlineLink link="https://devlake.apache.org/docs/Metrics">metrics</InlineLink>.
         </Card>
         <Arrow />
         <Card

i18n/zh/docusaurus-plugin-content-blog/2022-05-18-apache-welcomes-devLake/index.md

@@ -83,7 +83,7 @@ export function WhyDevlake() {
           <C.TextDescription>
           From DORA to scrum retros, DevLake implements metrics effortlessly with prebuilt dashboards supporting common frameworks and goals.
             <br />
-            <C.TextLink link="https://devlake.apache.org/docs/LiveDemo">See Live Demo</C.TextLink>
+            <C.TextLink link="https://devlake.apache.org/livedemo">See Live Demo</C.TextLink>
           </C.TextDescription>
         </C.TextSection>
         <C.SectionImg src={WAD2} />