Merge pull request #2897 from ably/hot-fix/example-explains-types

Add details of annotations types to example documentation

Author: m-hulbert

examples/pub-sub-message-annotations/javascript/README.md

@@ -18,11 +18,17 @@ Use the following methods to work with message annotations in a pub/sub applicat
 
 Find out more about [annotations](/docs/messages/annotations).
 
-## Annotation Types
+## Annotation types
 
-This example demonstrates five common annotation types, each suited to different use cases:
+This example demonstrates five common [annotation types](/docs/messages/annotations#annotation-types), each suited to different use cases:
 
-<!-- TODO -->
+| Type	| Description	| Use cases |
+| ----- | ----------- | --------- |
+| Total | Tracks the cumulative count of annotations, regardless of value or user. | Use for aggregate counts, such as a simple “like” or “upvote” counter. |
+| Distinct | Allows multiple annotation values per user, but only one instance of each value. Multiple users can share the same value. | Works similar to Slack reactions - a user can add both 👍 and ❤️ to a message, but only once per reaction type. |
+| Unique | Restricts each user to one annotation value per message. | Works like WhatsApp reactions - a user can react with 👍 or ❤️, but not both. |
+| Multiple | Allows users to send the same annotation multiple times per value. | Ideal for repeated actions, like goal celebrations where users can send 🎉 multiple times. |
+| Flag | Represents a binary user state - flagged or unflagged. Each user can flag a message once, and multiple users can flag the same message. |Use for moderation workflows, e.g. flagging a message for review or follow-up. |
 
 ## Features
 

src/templates/examples.tsx

@@ -51,6 +51,34 @@ const MarkdownOverrides = {
       </a>
     ),
   },
+  table: {
+    component: ({ children }: PropsWithChildren) => (
+      <div className="overflow-x-auto mb-2">
+        <table className="border-0 border-collapse mb-1 border-spacing-0 ui-text-p2 text-left">{children}</table>
+      </div>
+    ),
+  },
+  thead: {
+    component: ({ children }: PropsWithChildren) => <thead className="bg-gray-50 border-b">{children}</thead>,
+  },
+  tbody: {
+    component: ({ children }: PropsWithChildren) => <tbody className="border-b divide-neutral-300">{children}</tbody>,
+  },
+  tr: {
+    component: ({ children }: PropsWithChildren) => (
+      <tr className="hover:bg-gray-50 border-b divide-neutral-300">{children}</tr>
+    ),
+  },
+  th: {
+    component: ({ children }: PropsWithChildren) => (
+      <th className="px-3 py-2 text-left ui-text-p1 font-bold text-neutral-1100 tracking-wider whitespace-nowrap">
+        {children}
+      </th>
+    ),
+  },
+  td: {
+    component: ({ children }: PropsWithChildren) => <td className="px-3 py-4 align-text-top text-sm">{children}</td>,
+  },
 };
 
 const Examples = ({ pageContext }: { pageContext: { example: ExampleWithContent } }) => {