docs: Adds new index page and design tweaks (#833)

www/docs/docusaurus.config.js

@@ -1,6 +1,3 @@
-const lightCodeTheme = require("prism-react-renderer/themes/github")
-const darkCodeTheme = require("prism-react-renderer/themes/dracula")
-
 const path = require("path")
 const docsPath = path.join(__dirname, "../../docs/content")
 
@@ -35,6 +32,12 @@ module.exports = {
       placeholder: "Search docs...",
       appId: algoliaAppId,
     },
+    prism: {
+      defaultLanguage: "js",
+      plugins: ["line-numbers", "show-language"],
+      theme: require("@kiwicopple/prism-react-renderer/themes/vsDark"),
+      darkTheme: require("@kiwicopple/prism-react-renderer/themes/vsDark"),
+    },
     navbar: {
       hideOnScroll: true,
       logo: {
@@ -44,30 +47,31 @@ module.exports = {
       },
       items: [
         {
-          type: "search",
-          position: "left",
+          href: "https://docs.medusa-commerce.com",
+          label: "Overview",
         },
         {
           type: "doc",
           docId: "tutorial/set-up-your-development-environment",
-          position: "right",
           label: "Tutorial",
         },
         {
           href: `https://docs.medusa-commerce.com/api/store`,
           target: "_self",
-          position: "right",
-          label: "API Reference",
+          label: "Reference",
         },
         {
+          href: "https://github.com/medusajs/medusa",
           className: "navbar-github-link",
-          href: "https://github.com/medusajs/medusa/",
+          position: "right",
+        },
+        {
+          type: "search",
           position: "right",
         },
       ],
     },
     footer: {
-      style: "dark",
       links: [
         {
           title: "Docs",
@@ -115,9 +119,6 @@ module.exports = {
       ],
       copyright: `© ${new Date().getFullYear()} Medusa Commerce`,
     },
-    prism: {
-      theme: darkCodeTheme,
-    },
   },
   presets: [
     [