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

docs/content/tutorial/2-adding-custom-functionality.md

@@ -19,11 +19,11 @@ The custom functionality will do a number of things:
 We will begin our custom implementation by adding a custom service. In you project create a new file at `/src/services/welcome.js`. Open the newly created file and add a class:
 
 ```javascript
-import { BaseService } from "medusa-interfaces";
+import { BaseService } from "medusa-interfaces"
 
 class WelcomeService extends BaseService {
   constructor({}) {
-    super();
+    super()
   }
 
   async registerOptin(cartId, optin) {}
@@ -31,7 +31,7 @@ class WelcomeService extends BaseService {
   async sendWelcome(orderId) {}
 }
 
-export default WelcomeService;
+export default WelcomeService
 ```
 
 We will be filling out each of the methods in turn, but before we get to that it should be noted that placing files in `/src/services` has a special meaning in Medusa projects. When Medusa starts up it will look for files in this folder and register exports from these files to the global container. The global container holds all services and repositories in your Medusa project allowing for dependency injection. Dependency injection is a software development technique in which objects only receive other objects that it depends upon.
@@ -126,18 +126,18 @@ Similarly to the `/src/services` directory, the `/src/api` directory has a speci
 Create a new file at `/src/api/index.js` and add the following controller:
 
 ```javascript
-import { Router } from "express";
-import bodyParser from "body-parser";
+import { Router } from "express"
+import bodyParser from "body-parser"
 
 export default () => {
-  const app = Router();
+  const app = Router()
 
   app.post("/welcome/:cart_id", bodyParser.json(), async (req, res) => {
     // TODO
-  });
+  })
 
-  return app;
-};
+  return app
+}
 ```
 
 ### Controller implementation
@@ -146,33 +146,33 @@ Our endpoint controller's implementation will be very simple. It will extract th
 
 ```javascript
 app.post("/welcome/:cart_id", bodyParser.json(), async (req, res) => {
-  const { cart_id } = req.params;
-  const { optin } = req.body;
+  const { cart_id } = req.params
+  const { optin } = req.body
 
   // Validate that the optin value was provided.
   // If not respond with a Bad Request status
   if (typeof optin !== "boolean") {
     res.status(400).json({
       message: "You must provide an boolean optin value in the request body",
-    });
-    return;
+    })
+    return
   }
 
-  const welcomeService = req.scope.resolve("welcomeService");
+  const welcomeService = req.scope.resolve("welcomeService")
 
   try {
-    await welcomeService.registerOptin(cart_id, optin);
+    await welcomeService.registerOptin(cart_id, optin)
 
     res.status(200).json({
       success: true,
-    });
+    })
   } catch (err) {
     // This is not supposed to happen.
     res.status(500).json({
       message: "Something unexpected happened.",
-    });
+    })
   }
-});
+})
 ```
 
 In the implementation above we are first validating that the request body is structured correctly so that we can proceed with our opt-in registration. If the validation fails we respond with 400 Bad Request which is an HTTP code that indicates that the client that sent the request has not provided the correct values.
@@ -223,17 +223,17 @@ The final thing that we will add in this part of the tutorial is the subscriber
 ```javascript
 class WelcomeSubscriber {
   constructor({ welcomeService, eventBusService }) {
-    this.welcomeService_ = welcomeService;
+    this.welcomeService_ = welcomeService
 
-    eventBusService.subscribe("order.placed", this.handleWelcome);
+    eventBusService.subscribe("order.placed", this.handleWelcome)
   }
 
   handleWelcome = async (data) => {
-    return await this.welcomeService_.sendWelcome(data.id);
-  };
+    return await this.welcomeService_.sendWelcome(data.id)
+  }
 }
 
-export default WelcomeSubscriber;
+export default WelcomeSubscriber
 ```
 
 The implementation above is all that is needed to automate the `sendWelcome` function to be called every time a new order is created. The subscriber class here delegates all of the business logic to the `sendWelcome` function, where we are checking for opt-in and first time buyers.