Merge pull request #685 from novuhq/v2-headless-docs

[WIP] feat: add v2 headless doc
novuhq · Sep 11, 2024 · 3e0a5c0 · 3e0a5c0
2 parents f8ce579 + c37ffc2
commit 3e0a5c0
Show file tree

Hide file tree

Showing 10 changed files with 811 additions and 103 deletions.
diff --git a/inbox/headless/api-reference.mdx b/inbox/headless/api-reference.mdx
diff --git a/inbox/headless/get-started.mdx b/inbox/headless/get-started.mdx
@@ -0,0 +1,84 @@
+---
+title: 'Headless Inbox'
+sidebarTitle: 'Get Started'
+description: 'A lightweight, standalone package for building custom in-app notification interfaces with Novu, providing essential functionalities and flexibility.'
+---
+
+The headless version of Novu’s notification library package provides users with a lightweight solution for integrating notification functionality into their web applications. With just the essential API methods, users can easily incorporate our notification system into any framework or vanilla JavaScript project, without being constrained by our default UI or dependencies. The SDK includes real-time notifications through a WebSocket connection and can be safely used across web browsers.
+
+## Get Started
+
+<Steps>
+<Step title="Installation">
+```bash
+npm install @novu/js
+```
+</Step>
+<Step title="Import Package">
+```typescript
+import { Novu } from "@novu/js";
+```
+</Step>
+<Step title="Initialize Session">
+<Tabs>
+<Tab title="US" >
+```typescript
+import { Novu } from "@novu/js";
+
+const novu = new Novu({
+  subscriberId: "SUBSCRIBER_ID",
+  applicationIdentifier: "APPLICATION_IDENTIFIER",
+});
+```
+</Tab>
+<Tab title="EU">
+```typescript
+import { Novu } from "@novu/js";
+
+const novu = new Novu({
+  subscriberId: "SUBSCRIBER_ID",
+  applicationIdentifier: "APPLICATION_IDENTIFIER",
+  backendUrl: "https://eu.api.novu.co",
+  socketUrl: "https://eu.ws.novu.co",
+});
+```
+</Tab>
+<Tab title="HMAC Encryption">
+Read more about [HMAC Encryption](/react/advanced-configuration#hmac-encryption).
+```typescript
+import { Novu } from "@novu/js";
+
+const novu = new Novu({
+  subscriberId: "SUBSCRIBER_ID",
+  applicationIdentifier: "APPLICATION_IDENTIFIER",
+  subscriberHash: "SUBSCRIBER_HASH_HMAC_SUBSCRIBER_HASH_HMAC_ENCRYPTION",
+});
+```
+</Tab>
+</Tabs>
+</Step>
+<Step title="Fetch Notifications">
+```typescript
+const response = await novu.notifications.list({
+  limit: 30,
+});
+
+const notifications = response.data.notifications
+```
+</Step>
+<Step>
+Display `notifications` in your UI.
+</Step>
+</Steps>
+
+## Realtime Notifications
+Events are emitted when notifications are received, and when the unread notificatons count changes. `novu.on()` is used to listen to these events.
+```typescript
+novu.on("notifications.notification_received", (data) => {
+  console.log("new notification =>", data);
+});
+
+novu.on("notifications.unread_count_changed", (data) => {
+  console.log("new unread notifications count =>", data);
+});
+```
diff --git a/inbox/introduction.mdx b/inbox/introduction.mdx
@@ -32,7 +32,9 @@ Novu provides a pre-built, ready-to-use, and customizable Inbox UI component. It
 
 ## Getting started
 
-[React docs](/inbox/react/get-started)
+- Pre built UI component in [React](/inbox/react/get-started).
+
+- Learn how to use [headless library](/inbox/headless/get-started) to build custom UI for other frameworks like Vue, Angular etc.
 
 ## Design files
 

diff --git a/inbox/react/get-started.mdx b/inbox/react/get-started.mdx
@@ -8,94 +8,90 @@ Novu provides the `@novu/react` package that helps to add a fully functioning In
 
 <Steps>
   <Step title="Install the Inbox package">
-    ```bash
-    npm install @novu/react
-    ```
+```bash
+npm install @novu/react
+```
   </Step>
   <Step title="Add the inbox code to your react file">
     <CodeGroup>
-      ```tsx Next.js
-      import { Inbox } from '@novu/react';
-      import { useRouter } from 'next/navigation'
-
-      function Novu() {
-        const router = useRouter();
-
-        return (
-          <Inbox
-            applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
-            subscriberId="YOUR_SUBSCRIBER_ID"
-            routerPush={(path: string) =>  router.push(path)}
-          />
-        );
-      }
-      ```
-
-      ```tsx Remix
-      import { Inbox } from '@novu/react';
-      import { useNavigate } from '@remix-run/react';
-
-      function Novu() {
-        const navigate = useNavigate();
-
-        return (
-          <Inbox
-            applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
-            subscriberId="YOUR_SUBSCRIBER_ID"
-            routerPush={(path: string) => navigate(path)}
-          />
-        );
-      }
-      ```
-
-      ```tsx React Router
-      import { Inbox } from '@novu/react';
-      import { useNavigate } from 'react-router-dom';
-
-      function Novu() {
-        const navigate = useNavigate();
-
-        return (
-          <Inbox
-            applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
-            subscriberId="YOUR_SUBSCRIBER_ID"
-            routerPush={(path: string) => navigate(path)}
-          />
-        );
-      }
-      ```
-
-      ```tsx Gatsby
-      import { Inbox } from '@novu/react';
-      import { navigate } from 'gatsby';
-
-      function Novu() {
-        return (
-          <Inbox
-            applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
-            subscriberId="YOUR_SUBSCRIBER_ID"
-            routerPush={(path: string) => navigate(path)}
-          />
-        );
-      }
-      ```
-
-      ```tsx Create React App
-      import { Inbox } from '@novu/react';
-      import { useNavigate } from 'react-router-dom';
-
-      function Novu() {
-        const navigate = useNavigate();
-
-        return (
-          <Inbox
-            applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
-            subscriberId="YOUR_SUBSCRIBER_ID"
-            routerPush={(path: string) => navigate(path)}
-          />
-        );
-      }
-      ```
+```tsx Next.js
+import { Inbox } from '@novu/react';
+import { useRouter } from 'next/navigation';
+
+function Novu() {
+  const router = useRouter();
+
+  return (
+    <Inbox
+      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
+      subscriberId="YOUR_SUBSCRIBER_ID"
+      routerPush={(path: string) =>  router.push(path)}
+    />
+  );
+}
+```
+```tsx Remix
+import { Inbox } from '@novu/react';
+import { useNavigate } from '@remix-run/react';
+
+function Novu() {
+  const navigate = useNavigate();
+
+  return (
+    <Inbox
+      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
+      subscriberId="YOUR_SUBSCRIBER_ID"
+      routerPush={(path: string) => navigate(path)}
+    />
+  );
+}
+```
+```tsx React Router
+import { Inbox } from '@novu/react';
+import { useNavigate } from 'react-router-dom';
+
+function Novu() {
+  const navigate = useNavigate();
+
+  return (
+    <Inbox
+      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
+      subscriberId="YOUR_SUBSCRIBER_ID"
+      routerPush={(path: string) => navigate(path)}
+    />
+  );
+}
+```
+```tsx Gatsby
+import { Inbox } from '@novu/react';
+import { navigate } from 'gatsby';
+
+function Novu() {
+  return (
+    <Inbox
+      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
+      subscriberId="YOUR_SUBSCRIBER_ID"
+      routerPush={(path: string) => navigate(path)}
+    />
+  );
+}
+```
+```tsx Create React App
+import { Inbox } from '@novu/react';
+import { useNavigate } from 'react-router-dom';
+
+function Novu() {
+  const navigate = useNavigate();
+
+  return (
+    <Inbox
+      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
+      subscriberId="YOUR_SUBSCRIBER_ID"
+      routerPush={(path: string) => navigate(path)}
+    />
+  );
+}
+```
     </CodeGroup>
 
     <Tip>
@@ -118,12 +114,12 @@ Novu provides the `@novu/react` package that helps to add a fully functioning In
 ## Next Steps
 
 <CardGroup cols={2}>
-  <Card title="Customize the inbox" href={"/inbox/react/customization"}>
+  <Card title="Customize the inbox" href="/inbox/react/styling">
     Learn how to customize the inbox with your own branding and design.
   </Card>
   <Card
     title="Learn the components"
-    href={"/inbox/react/components"}
+    href="/inbox/react/components/overview"
   >
     Learn more about the composable components of the inbox.
   </Card>

diff --git a/inbox/react/migration-guide.mdx b/inbox/react/migration-guide.mdx
@@ -125,7 +125,7 @@ function Novu() {
 export default Novu;
 ```
 
-- New Implementation with @novu/react
+- New Implementation with `@novu/react`
 
 ```tsx
 import { Inbox } from "@novu/react";
@@ -165,7 +165,7 @@ function Novu() {
 export default Novu;
 ```
 
-- New Implementation with @novu/react
+- New Implementation with `@novu/react`
 
 ```tsx
 import { Inbox, Notifications } from "@novu/react";
@@ -220,7 +220,7 @@ function Novu() {
 export default Novu;
 ```
 
-- New Implementation with @novu/react
+- New Implementation with `@novu/react`
 
 ```tsx
 import { Inbox } from "@novu/react";
@@ -283,7 +283,7 @@ function Novu() {
 export default Novu;
 ```
 
-- New Implementation with @novu/react
+- New Implementation with `@novu/react`
 
 ```tsx
 import { Inbox } from "@novu/react";
@@ -369,7 +369,7 @@ function Novu() {
 export default Novu;
 ```
 
-- New Implementation with @novu/react
+- New Implementation with `@novu/react`
 
 ```tsx
 import { Inbox } from "@novu/react";
@@ -443,7 +443,7 @@ function Novu() {
 export default Novu;
 ```
 
-- New Implementation with @novu/react and Radix UI as an example
+- New Implementation with `@novu/react` and Radix UI as an example
 
 ```tsx
 import React from "react";
@@ -526,7 +526,7 @@ function Novu() {
 export default Novu;
 ```
 
-- New Implementation with @novu/react
+- New Implementation with `@novu/react`
 
 ```tsx
 import { Inbox } from "@novu/react";
@@ -591,7 +591,7 @@ function Novu() {
 export default Novu;
 ```
 
-- New Implementation with @novu/react
+- New Implementation with `@novu/react`
 
 ```tsx
 import { Inbox } from "@novu/react";
@@ -643,7 +643,7 @@ Organize notifications into different categories using tabs by leveraging the ta
 
 - Old Implementation
 
-- After defining the feeds on the Workflow UI, you were able to filter notifications based on the feedIdentifier.
+After defining the feeds on the Workflow UI, you were able to filter notifications based on the feedIdentifier.
 
 ```tsx
 import {
@@ -694,7 +694,7 @@ function Novu() {
 export default Novu;
 ```
 
-- New Implementation with @novu/react
+- New Implementation with `@novu/react`
 
 1. Define multiple workflows with relevant tags.
 

diff --git a/inbox/react/multiple-tabs.mdx b/inbox/react/multiple-tabs.mdx
@@ -33,7 +33,7 @@ const tabs = [
   },
 ];
 
-function Novu() {
+function InboxNovu() {
   return (
     <Inbox
       applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"