feat: customize sidebar & toc

docs/.prettierignore

@@ -1,3 +1,6 @@
 # Ignore artifacts:
 build
-coverage
+package.json
+yarn.lock
+*.md
+.docusaurus

docs/.prettierrc

@@ -8,7 +8,7 @@
   "jsxSingleQuote": false,
   "trailingComma": "es5",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
+  "bracketSameLine": false,
   "arrowParens": "always",
   "endOfLine": "lf"
 }

docs/docs/notification-center/getting-started.md

@@ -1,7 +1,6 @@
 ---
 position: 1
 ---
-
 # Getting Started
 
 Novu provides you a set of API's and components to create rich customized notification center experiences. You can either choose to work headless with our notification feed API. And create your own custom notification center user-interface, or user our ready-to-use UI and customize partially.
@@ -19,11 +18,7 @@ npm install @novu/notification-center
 And in the appropriate place withing your app add the `PopoverNotificationCenter` component with the `NovuProvider`
 
 ```tsx
-import {
-  NovuProvider,
-  PopoverNotificationCenter,
-  NotificationBell,
-} from '@novu/notification-center';
+import { NovuProvider, PopoverNotificationCenter, NotificationBell } from '@novu/notification-center';
 
 function Header() {
   return (
@@ -38,4 +33,5 @@ function Header() {
 
 That's it! Now you're ready to send your first notifications using Novu.
 
+
 Not using React? Checkout the [iFrame Embed docs](/docs/notification-center/iframe-embed)

docs/docs/notification-center/iframe-embed.md

@@ -5,48 +5,33 @@ You can find the embed code in the `Settings` page within the Admin Panel. It wi
 
 ```html
 <script>
-  (function (n, o, t, i, f) {
-    (n[i] = {}), (m = ['init']);
-    n[i]._c = [];
-    m.forEach(
-      (me) =>
-        (n[i][me] = function () {
-          n[i]._c.push([me, arguments]);
-        })
-    );
-    var elt = o.createElement(f);
-    elt.type = 'text/javascript';
-    elt.async = true;
-    elt.src = t;
-    var before = o.getElementsByTagName(f)[0];
-    before.parentNode.insertBefore(elt, before);
+  (function(n,o,t,i,f) {
+    n[i] = {}, m = ['init']; n[i]._c = [];m.forEach(me => n[i][me] = function() {n[i]._c.push([me, arguments])});
+    var elt = o.createElement(f); elt.type = "text/javascript"; elt.async = true; elt.src = t;
+    var before = o.getElementsByTagName(f)[0]; before.parentNode.insertBefore(elt, before);
   })(window, document, 'https://embed.novu.co/embed.umd.min.js', 'novu', 'script');
 
-  novu.init(
-    '<REPLACE_APPLICATION_ID>',
-    {
-      unseenBadgeSelector: '#unseen-badge',
-      bellSelector: '#notification-bell',
-    },
-    {
-      subscriberId: '<REPLACE_WITH_USER_UNIQUE_IDENTIFIER>',
-      email: '<REPLACE_WITH_USER_EMAIL>',
-      first_name: '<REPLACE_WITH_USER_NAME>',
-      last_name: '<REPLACE_WITH_USER_LAST_NAME>',
-    }
-  );
+  novu.init('<REPLACE_APPLICATION_ID>', { 
+    unseenBadgeSelector: '#unseen-badge', 
+    bellSelector: '#notification-bell' 
+  }, {
+    subscriberId: "<REPLACE_WITH_USER_UNIQUE_IDENTIFIER>",
+    email: "<REPLACE_WITH_USER_EMAIL>",
+    first_name: "<REPLACE_WITH_USER_NAME>",
+    last_name: "<REPLACE_WITH_USER_LAST_NAME>",
+  });
 </script>
 ```
 
 Replace the selectors for the bell icon and the unseen badge withing your code. Let's take a look at this example code:
 
 ```html
-<nav>
-  <div id="notification-bell">
-    <i class="fa fa-bell"></i>
-    <span id="unseen-badge"></span>
-  </div>
-</nav>
+  <nav>
+    <div id="notification-bell">
+      <i class="fa fa-bell"></i>
+      <span id="unseen-badge"></span>
+    </div>
+  </nav>
 ```
 
 ## Customizing the dropdown position
@@ -55,19 +40,15 @@ Optionally the embed init script receives a position object, you can use it to s
 
 ```html
 <script>
-  novu.init(
-    '<REPLACE_APPLICATION_ID>',
-    {
-      unseenBadgeSelector: '#unseen-badge',
-      bellSelector: '#notification-bell',
-      position: {
-        top: '50px',
-        left: '100px',
-      },
-    },
-    {
-      ...subscriberProps,
+  novu.init('<REPLACE_APPLICATION_ID>', {
+    unseenBadgeSelector: '#unseen-badge',
+    bellSelector: '#notification-bell',
+    position: {
+      top: '50px',
+      left: '100px'
     }
-  );
+  }, {
+    ...subscriberProps
+  });
 </script>
 ```

docs/docs/notification-center/react-components.md

@@ -1,17 +1,13 @@
 # React Component
 
-Novu provides the `@novu/notification-center` a react library that helps to add a fully functioning notification center to your web application in minutes. Let's do a quick recap on how we can easily use it in your application:
+Novu provides the `@novu/notification-center` a react library that helps to add a fully functioning notification center  to your web application in minutes. Let's do a quick recap on how we can easily use it in your application:
 
 ```
 npm install @novu/notification-center
 ```
 
 ```tsx
-import {
-  NovuProvider,
-  PopoverNotificationCenter,
-  NotificationBell,
-} from '@novu/notification-center';
+import { NovuProvider, PopoverNotificationCenter, NotificationBell } from '@novu/notification-center';
 
 function Header() {
   return (
@@ -25,21 +21,19 @@ function Header() {
 ```
 
 ## Implementing custom bell icon
-
-It is common that you might have a special set of icons you use within your application and you will want to replace the default: `NotificationBell` coming from our library.
+It is common that you might have a special set of icons you use within your application and you will want to replace the default: `NotificationBell` coming from our library. 
 
 For this you can easily switch the `NotificationBell` with your own bell. Just make sure you pass the `unseenCount` param inside and use it accordingly.
 
 ```tsx
-<PopoverNotificationCenter>
-  {({ unseenCount }) => <CustomBell unseenCount={unseenCount} />}
-</PopoverNotificationCenter>
+  <PopoverNotificationCenter>
+    {({ unseenCount }) => <CustomBell unseenCount={unseenCount} />}
+  </PopoverNotificationCenter>
 ```
 
 ## Dark mode support
 
 To support dark mode in your application the notification center component can receive a `colorScheme` prop that can receive either `dark` or `light` mode.
-
 ```tsx
 <NovuProvider subscriberId={'USER_ID'} colorScheme={'dark' || 'light'}>
   <PopoverNotificationCenter>
@@ -65,13 +59,23 @@ function App() {
 }
 
 function CustomNotificationCenter() {
-  const { notifications, fetchNextPage, hasNextPage, fetching, markAsSeen, refetch } =
-    useNotifications();
-
+  const { 
+    notifications,
+    fetchNextPage,
+    hasNextPage,
+    fetching,
+    markAsSeen,
+    refetch
+  } = useNotifications();
+
   return (
     <ul>
       {notifications.map((notification) => {
-        return <li>{notification.content}</li>;
+        return (
+          <li>
+            {notification.content}
+          </li>
+        )
       })}
     </ul>
   );
@@ -95,7 +99,7 @@ function App() {
 
 function CustomNotificationCenter() {
   const { socket } = useSocket();
-
+  
   useEffect(() => {
     if (socket) {
       socket.on('unseen_count_changed', (data) => {
@@ -109,7 +113,7 @@ function CustomNotificationCenter() {
       }
     };
   }, [socket]);
-
+  
   return <></>;
 }
 ```

docs/docs/overview/quick-start.md

@@ -1,11 +1,9 @@
 ---
 sidebar_position: 2
 ---
-
 # Quick Start
 
 To create your free managed or docker based Novu environment use our CLI tool:
-
 ```shell
 npx novu init
 ```
@@ -15,7 +13,7 @@ After creating your cloud or self-hosted account the next steps to sending your
 - Connect your providers
 - Create a notification template
 - Send a trigger
-- Integrate the Notification Center within your app _(optional)_
+- Integrate the Notification Center within your app *(optional)*
 
 ## Connect providers
 
@@ -43,6 +41,7 @@ You can specify the content for email in two ways:
 
 **Visual template builder** - For simple usecases you can use our visual template editor with limited control over design but easier to get-started.
 
+
 **Custom Code** - You can use the custom code section to specify custom html that will be used for the email.
 
 You can specify custom variables using the [{{handlebars}}](https://handlebarsjs.com/guide/) syntax.
@@ -60,41 +59,42 @@ In the notification center preview you can type the content, you can select cont
 After creating the template trigger will be generated, use the server SDK in your application in the appropriate place for the specific trigger.
 
 ```typescript
-await novu.trigger('<REPLACE_WITH_EVENT_NAME_FROM_ADMIN_PANEL>', {
-  to: {
-    subscriberId: '<USER_IDENTIFIER>',
-    email: '[email protected]',
-    firstName: 'John',
-    lastName: 'Doe',
-  },
-  payload: {
-    customVariables: 'Hello',
-  },
-});
+await novu.trigger('<REPLACE_WITH_EVENT_NAME_FROM_ADMIN_PANEL>',
+  {
+    to: {
+      subscriberId: '<USER_IDENTIFIER>',
+      email: '[email protected]',
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+    payload: {
+      customVariables: 'Hello'
+    },
+  }
+);
 ```
-
 The trigger function contains a parameters object as the second parameter. Let's explore it's different options:
 
 ### `to` key
-
 The `to` parameter contains the information about the subscriber of the notification, you can work with Novu in 2 modes:
 
 #### Pass the subscriber information in trigger (Quickest)
-
 You can pass the subscriber object containing the following keys as this paramter:
-
 ```typescript
-await novu.trigger('<REPLACE_WITH_EVENT_NAME_FROM_ADMIN_PANEL>', {
-  to: {
-    subscriberId: 'Unique Subscriber Identifier',
-    firstName,
-    lastName,
-    email,
-    phone,
-    avatar,
-  },
-  payload: {},
-});
+await novu.trigger('<REPLACE_WITH_EVENT_NAME_FROM_ADMIN_PANEL>',
+  {
+    to: {
+      subscriberId: 'Unique Subscriber Identifier',
+      firstName,
+      lastName,
+      email,
+      phone,
+      avatar
+    },
+    payload: {}
+  }
+);
+
 ```
 
 The `subscriberId` is a custom identifier used when identifying your users within the Novu platform. We suggest using your internal DB identifier for this field.
@@ -103,17 +103,15 @@ Novu will create an upsert command and either create a subscriber with specified
 
 **Note:** The api will perform a PATCH command, updating only the fields passed to it. So in order to reset a specific field you must explicitly pass `null` as the fields param.
 
-#### Pass only the subscriberId (Recommended)
 
+#### Pass only the subscriberId (Recommended)
 ```typescript
 {
   to: 'SUBSCRIBER_ID',
   payload: {}
 }
 ```
-
 In this approach, you will only pass the subscriberId as part of the trigger, however it will require you to identify the subscriber using the `identify` method from the `@novu/node` library.
 
 ### `payload` object
-
-Can pass any serializible JSON object to be used in the notification templates.
+Can pass any serializible JSON object to be used in the notification templates.