[pull] main from liveblocks:main

docs/pages/get-started/javascript.mdx

@@ -19,7 +19,7 @@ collaboration to your JavaScript application using the APIs from the
 
       Every package should use the same version.
 
-      ```bash
+      ```bash trackEvent="install_liveblocks"
       npm install @liveblocks/client
       ```
 

docs/pages/get-started/nextjs-ai-copilots.mdx → docs/pages/get-started/nextjs-ai-chat.mdx

@@ -1,9 +1,9 @@
 ---
 meta:
-  title: "Get started with AI Copilots using Liveblocks and Next.js"
+  title: "Get started with an AI chat using Liveblocks and Next.js"
   parentTitle: "Quickstart"
   description:
-    "Learn how to get started with AI Copilots using Liveblocks and Next.js"
+    "Learn how to get started with an AI chat using Liveblocks and Next.js"
 ---
 
 Liveblocks is a realtime collaboration infrastructure for building performant
@@ -22,7 +22,7 @@ components from
 
       Every package should use the same version.
 
-      ```bash
+      ```bash trackEvent="install_liveblocks"
       npm install @liveblocks/client @liveblocks/react @liveblocks/react-ui @liveblocks/node
       ```
 

docs/pages/get-started/nextjs-blocknote.mdx

@@ -1,9 +1,10 @@
 ---
 meta:
-  title: "Get started with Liveblocks, BlockNote, and Next.js"
+  title: "Get started with a BlockNote text editor using Liveblocks and Next.js"
   parentTitle: "Quickstart"
   description:
-    "Learn how to get started with Liveblocks, BlockNote, and Next.js."
+    "Learn how to get started with a BlockNote text editor using Liveblocks and
+    Next.js."
 ---
 
 Liveblocks is a realtime collaboration infrastructure for building performant
@@ -21,7 +22,7 @@ package.
 
       Every Liveblocks package should use the same version.
 
-      ```bash
+      ```bash trackEvent="install_liveblocks"
       npm install @liveblocks/client @liveblocks/react @liveblocks/react-ui @liveblocks/react-blocknote @blocknote/core @blocknote/react @blocknote/mantine
       ```
 

docs/pages/get-started/nextjs-comments.mdx

@@ -1,9 +1,9 @@
 ---
 meta:
-  title: "Get started with Comments using Liveblocks and Next.js"
+  title: "Get started with commenting using Liveblocks and Next.js"
   parentTitle: "Quickstart"
   description:
-    "Learn how to get started with Comments using Liveblocks and Next.js"
+    "Learn how to get started with commenting using Liveblocks and Next.js"
 ---
 
 Liveblocks is a realtime collaboration infrastructure for building performant
@@ -22,7 +22,7 @@ components from
 
       Every package should use the same version.
 
-      ```bash
+      ```bash trackEvent="install_liveblocks"
       npm install @liveblocks/client @liveblocks/react @liveblocks/react-ui
       ```
 

docs/pages/get-started/nextjs-lexical.mdx

@@ -1,8 +1,10 @@
 ---
 meta:
-  title: "Get started with Liveblocks, Lexical, and Next.js"
+  title: "Get started with a Lexical text editor using Liveblocks and Next.js"
   parentTitle: "Quickstart"
-  description: "Learn how to get started with Liveblocks, Lexical, and Next.js"
+  description:
+    "Learn how to get started with a Lexical text editor using Liveblocks and
+    Next.js"
 ---
 
 Liveblocks is a realtime collaboration infrastructure for building performant
@@ -20,7 +22,7 @@ package.
 
       Every Liveblocks package should use the same version.
 
-      ```bash
+      ```bash trackEvent="install_liveblocks"
       npm install @liveblocks/client @liveblocks/react @liveblocks/react-ui @liveblocks/react-lexical lexical @lexical/react
       ```
 

docs/pages/get-started/nextjs-notifications-custom-email.mdx

@@ -0,0 +1,139 @@
+---
+meta:
+  title:
+    "Get started with emailing custom notifications using Liveblocks and Next.js"
+  parentTitle: "Quickstart"
+  description:
+    "Learn how to email custom notifications using using Liveblocks Liveblocks
+    and Next.js"
+---
+
+Liveblocks is a realtime collaboration infrastructure for building performant
+collaborative experiences. Follow this guide to send
+[custom notifications](/docs/ready-made-features/notifications/concepts#Custom-notifications)
+to email using methods from
+[`@liveblocks/node`](/docs/api-reference/liveblocks-node).
+
+## Quickstart
+
+<Steps>
+  <Step>
+    <StepTitle>Install Liveblocks Node</StepTitle>
+    <StepContent>
+
+      Every Liveblocks package should use the same version.
+
+      ```bash trackEvent="install_liveblocks"
+      npm install @liveblocks/node
+      ```
+
+    </StepContent>
+
+  </Step>
+
+   <Step>
+    <StepTitle>Trigger a custom notification</StepTitle>
+    <StepContent>
+
+      Trigger a custom notification using
+      [`triggerInboxNotification`](/docs/api-reference/liveblocks-node#post-inbox-notifications-trigger)
+      from a server action or route handler. In this example, a custom `$fileUploaded` notification is sent.
+
+      ```ts
+      "use server";
+
+      import { Liveblocks } from "@liveblocks/node";
+
+      const liveblocks = new Liveblocks({
+        secret: "{{SECRET_KEY}}",
+      });
+
+      // Call this in your app to create a custom notification
+      export async function triggerCustomNotification() {
+        // +++
+        await liveblocks.triggerInboxNotification({
+          // The user that will receive the notification
+          userId: "steven@example.com",
+          kind: "$fileUploaded",
+          subjectId: "my-file",
+
+          // Custom data for this notification
+          activityData: {
+            file: "https://example.com/my-file.zip",
+            status: "pending",
+          },
+        });
+        // +++
+      }
+      ```
+    </StepContent>
+
+  </Step>
+
+  <Step lastStep>
+    <StepTitle>Follow our guide</StepTitle>
+    <StepContent>
+
+      Follow our step-by-step guide to learn set up email notifications.
+
+      <Button asChild className="not-markdown">
+        <a href="/docs/guides/how-to-notify-users-about-unread-custom-notifications-outside-of-your-app">
+          How to notify users with email
+        </a>
+      </Button>
+
+    </StepContent>
+
+  </Step>
+</Steps>
+
+## What to read next
+
+Congratulations! You've set up Email notifications in your Next.js application.
+
+- [Webhooks API reference](/docs/platform/webhooks)
+- [Node.js API reference](/docs/api-reference/liveblocks-node)
+- [How to test webhooks on localhost](/docs/guides/how-to-test-webhooks-on-localhost)
+
+---
+
+## Examples using Notifications
+
+<ListGrid columns={2}>
+  <ExampleCard
+    example={{
+      title: "Custom notifications",
+      slug: "notifications-custom/nextjs-notifications-custom",
+      image: "/images/examples/thumbnails/custom-notifications.png",
+    }}
+    technologies={["nextjs", "react"]}
+    openInNewWindow
+  />
+  <ExampleCard
+    example={{
+      title: "Notification settings",
+      slug: "notification-settings/nextjs-notification-settings",
+      image: "/images/examples/thumbnails/notification-settings.png",
+    }}
+    technologies={["nextjs", "react"]}
+    openInNewWindow
+  />
+  <ExampleCard
+    example={{
+      title: "Notion-like AI Editor",
+      slug: "notion-like-ai-editor/nextjs-notion-like-ai-editor",
+      image: "/images/examples/thumbnails/notion-like-ai-editor.png",
+    }}
+    technologies={["nextjs", "react"]}
+    openInNewWindow
+  />
+  <ExampleCard
+    example={{
+      title: "Comments notifications",
+      slug: "https://liveblocks.io/examples/comments-emails",
+      image: "/images/examples/thumbnails/comments-notifications.png",
+    }}
+    technologies={["nextjs", "react"]}
+    openInNewWindow
+  />
+</ListGrid>