@ably/ui 8.1.2 → 8.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/core/Meganav.jsx +27 -20
  2. package/core/MeganavContentPlatform.jsx +27 -20
  3. package/package.json +1 -1
  4. package/src/core/MeganavContentPlatform/component.html.erb +24 -18
  5. package/src/core/MeganavContentPlatform/component.jsx +25 -20
package/core/Meganav.jsx CHANGED
@@ -4119,47 +4119,54 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
4119
4119
  url: absUrl("/platform")
4120
4120
  }, "Explore how it works")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
4121
4121
  className: "ui-meganav-overline",
4122
- id: "meganav-platform-panel-list-our-features"
4123
- }, "Our features"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
4124
- "aria-labelledby": "meganav-platform-panel-list-our-features"
4122
+ id: "meganav-platform-panel-list-examples"
4123
+ }, "Examples"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
4124
+ "aria-labelledby": "meganav-platform-panel-list-examples"
4125
4125
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
4126
- href: absUrl("/pub-sub-messaging"),
4126
+ href: absUrl("/examples/avatar-stack"),
4127
4127
  className: "group ui-meganav-media"
4128
4128
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4129
4129
  className: "ui-meganav-media-heading"
4130
- }, "Publish/subscribe messaging"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4130
+ }, "Avatar Stack"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4131
4131
  className: "ui-meganav-media-copy"
4132
- }, "Feature-rich pub/sub messaging to power any realtime requirement."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
4133
- href: absUrl("/push-notifications"),
4132
+ }, "See who is connected in a digital space."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
4133
+ href: absUrl("/examples/emoji-reactions"),
4134
4134
  className: "ui-meganav-media group"
4135
4135
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4136
4136
  className: "ui-meganav-media-heading"
4137
- }, "Push notifications"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4137
+ }, "Emoji Reactions"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4138
4138
  className: "ui-meganav-media-copy"
4139
- }, "Deliver native notifications at scale with our unified API."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
4140
- href: absUrl("/integrations"),
4139
+ }, "React with an emoji to a message."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
4140
+ href: absUrl("/examples/activity-feed"),
4141
4141
  className: "ui-meganav-media group"
4142
4142
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4143
4143
  className: "ui-meganav-media-heading"
4144
- }, "Third-party integrations"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4144
+ }, "Activity Feed"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4145
4145
  className: "ui-meganav-media-copy"
4146
- }, "Integrate and extend Ably with cloud services like AWS Kinesis."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
4147
- href: absUrl("/protocols"),
4146
+ }, "Display a list of user actions in realtime."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
4147
+ href: absUrl("/examples/live-charts"),
4148
4148
  className: "ui-meganav-media group"
4149
4149
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4150
4150
  className: "ui-meganav-media-heading"
4151
- }, "Multi-protocol messaging"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4151
+ }, "Live Charts"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4152
4152
  className: "ui-meganav-media-copy"
4153
- }, "We support pub/sub over WebSockets, MQTT, SSE, and more."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
4154
- href: absUrl("/hub"),
4153
+ }, "Visualise live metrics and data in a chart."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
4154
+ href: absUrl("/examples/live-cursors"),
4155
4155
  className: "ui-meganav-media group"
4156
4156
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4157
4157
  className: "ui-meganav-media-heading"
4158
- }, "Streaming data sources"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4158
+ }, "Live Cursors"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4159
4159
  className: "ui-meganav-media-copy"
4160
- }, "Augment your apps with realtime updates like weather or transit.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
4161
- url: absUrl("/platform")
4162
- }, "Explore all platform features")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
4160
+ }, "Track all cursors in realtime."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
4161
+ href: absUrl("/examples/typing-indicator"),
4162
+ className: "ui-meganav-media group"
4163
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4164
+ className: "ui-meganav-media-heading"
4165
+ }, "Typing Indicator"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4166
+ className: "ui-meganav-media-copy"
4167
+ }, "See when a user is typing a message.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
4168
+ url: absUrl("/examples")
4169
+ }, "Explore all live examples")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
4163
4170
  className: "ui-meganav-overline",
4164
4171
  id: "meganav-platform-panel-list-our-technology"
4165
4172
  }, "Our technology"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
package/core/MeganavContentPlatform.jsx CHANGED
@@ -338,47 +338,54 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
338
338
  url: absUrl("/platform")
339
339
  }, "Explore how it works")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
340
340
  className: "ui-meganav-overline",
341
- id: "meganav-platform-panel-list-our-features"
342
- }, "Our features"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
343
- "aria-labelledby": "meganav-platform-panel-list-our-features"
341
+ id: "meganav-platform-panel-list-examples"
342
+ }, "Examples"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
343
+ "aria-labelledby": "meganav-platform-panel-list-examples"
344
344
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
345
- href: absUrl("/pub-sub-messaging"),
345
+ href: absUrl("/examples/avatar-stack"),
346
346
  className: "group ui-meganav-media"
347
347
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
348
348
  className: "ui-meganav-media-heading"
349
- }, "Publish/subscribe messaging"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
349
+ }, "Avatar Stack"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
350
350
  className: "ui-meganav-media-copy"
351
- }, "Feature-rich pub/sub messaging to power any realtime requirement."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
352
- href: absUrl("/push-notifications"),
351
+ }, "See who is connected in a digital space."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
352
+ href: absUrl("/examples/emoji-reactions"),
353
353
  className: "ui-meganav-media group"
354
354
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
355
355
  className: "ui-meganav-media-heading"
356
- }, "Push notifications"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
356
+ }, "Emoji Reactions"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
357
357
  className: "ui-meganav-media-copy"
358
- }, "Deliver native notifications at scale with our unified API."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
359
- href: absUrl("/integrations"),
358
+ }, "React with an emoji to a message."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
359
+ href: absUrl("/examples/activity-feed"),
360
360
  className: "ui-meganav-media group"
361
361
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
362
362
  className: "ui-meganav-media-heading"
363
- }, "Third-party integrations"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
363
+ }, "Activity Feed"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
364
364
  className: "ui-meganav-media-copy"
365
- }, "Integrate and extend Ably with cloud services like AWS Kinesis."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
366
- href: absUrl("/protocols"),
365
+ }, "Display a list of user actions in realtime."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
366
+ href: absUrl("/examples/live-charts"),
367
367
  className: "ui-meganav-media group"
368
368
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
369
369
  className: "ui-meganav-media-heading"
370
- }, "Multi-protocol messaging"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
370
+ }, "Live Charts"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
371
371
  className: "ui-meganav-media-copy"
372
- }, "We support pub/sub over WebSockets, MQTT, SSE, and more."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
373
- href: absUrl("/hub"),
372
+ }, "Visualise live metrics and data in a chart."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
373
+ href: absUrl("/examples/live-cursors"),
374
374
  className: "ui-meganav-media group"
375
375
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
376
376
  className: "ui-meganav-media-heading"
377
- }, "Streaming data sources"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
377
+ }, "Live Cursors"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
378
378
  className: "ui-meganav-media-copy"
379
- }, "Augment your apps with realtime updates like weather or transit.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
380
- url: absUrl("/platform")
381
- }, "Explore all platform features")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
379
+ }, "Track all cursors in realtime."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
380
+ href: absUrl("/examples/typing-indicator"),
381
+ className: "ui-meganav-media group"
382
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
383
+ className: "ui-meganav-media-heading"
384
+ }, "Typing Indicator"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
385
+ className: "ui-meganav-media-copy"
386
+ }, "See when a user is typing a message.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
387
+ url: absUrl("/examples")
388
+ }, "Explore all live examples")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
382
389
  className: "ui-meganav-overline",
383
390
  id: "meganav-platform-panel-list-our-technology"
384
391
  }, "Our technology"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "8.1.2",
3
+ "version": "8.2.0",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",
package/src/core/MeganavContentPlatform/component.html.erb CHANGED
@@ -14,41 +14,47 @@
14
14
  </div>
15
15
 
16
16
  <div>
17
- <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-our-features">Our features</h3>
18
- <ul aria-labelledby="meganav-platform-panel-list-our-features">
17
+ <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-examples">Examples</h3>
18
+ <ul aria-labelledby="meganav-platform-panel-list-examples">
19
19
  <li>
20
- <%= link_to abs_url("/pub-sub-messaging"), class: "ui-meganav-media group" do %>
21
- <p class="ui-meganav-media-heading">Publish/subscribe messaging</p>
22
- <p class="ui-meganav-media-copy">Feature-rich pub/sub messaging to power any realtime requirement.</p>
20
+ <%= link_to abs_url("/examples/avatar-stack"), class: "ui-meganav-media group" do %>
21
+ <p class="ui-meganav-media-heading">Avatar Stack</p>
22
+ <p class="ui-meganav-media-copy">See who is connected in a digital space.</p>
23
23
  <% end %>
24
24
  </li>
25
25
  <li>
26
- <%= link_to abs_url("/push-notifications"), class: "ui-meganav-media group" do %>
27
- <p class="ui-meganav-media-heading">Push notifications</p>
28
- <p class="ui-meganav-media-copy">Deliver native notifications at scale with our unified API.</p>
26
+ <%= link_to abs_url("/examples/emoji-reactions"), class: "ui-meganav-media group" do %>
27
+ <p class="ui-meganav-media-heading">Emoji Reactions</p>
28
+ <p class="ui-meganav-media-copy">React with an emoji to a message.</p>
29
29
  <% end %>
30
30
  </li>
31
31
  <li>
32
- <%= link_to abs_url("/integrations"), class: "ui-meganav-media group" do %>
33
- <p class="ui-meganav-media-heading">Third-party integrations</p>
34
- <p class="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
32
+ <%= link_to abs_url("/examples/activity-feed"), class: "ui-meganav-media group" do %>
33
+ <p class="ui-meganav-media-heading">Activity Feed</p>
34
+ <p class="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
35
35
  <% end %>
36
36
  </li>
37
37
  <li>
38
- <%= link_to abs_url("/protocols"), class: "ui-meganav-media group" do %>
39
- <p class="ui-meganav-media-heading">Multi-protocol messaging</p>
40
- <p class="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
38
+ <%= link_to abs_url("/examples/live-charts"), class: "ui-meganav-media group" do %>
39
+ <p class="ui-meganav-media-heading">Live Charts</p>
40
+ <p class="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
41
41
  <% end %>
42
42
  </li>
43
43
  <li>
44
- <%= link_to abs_url("/hub"), class: "ui-meganav-media group" do %>
45
- <p class="ui-meganav-media-heading">Streaming data sources</p>
46
- <p class="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
44
+ <%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %>
45
+ <p class="ui-meganav-media-heading">Live Cursors</p>
46
+ <p class="ui-meganav-media-copy">Track all cursors in realtime.</p>
47
+ <% end %>
48
+ </li>
49
+ <li>
50
+ <%= link_to abs_url("/examples/typing-indicator"), class: "ui-meganav-media group" do %>
51
+ <p class="ui-meganav-media-heading">Typing Indicator</p>
52
+ <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
47
53
  <% end %>
48
54
  </li>
49
55
  </ul>
50
56
 
51
- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"))) do %>Explore all platform features<% end %>
57
+ <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"))) do %>Explore all live examples<% end %>
52
58
  </div>
53
59
 
54
60
  <div>
package/src/core/MeganavContentPlatform/component.jsx CHANGED
@@ -19,43 +19,48 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
19
19
  </div>
20
20
 
21
21
  <div>
22
- <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-our-features">
23
- Our features
22
+ <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-examples">
23
+ Examples
24
24
  </h3>
25
- <ul aria-labelledby="meganav-platform-panel-list-our-features">
25
+ <ul aria-labelledby="meganav-platform-panel-list-examples">
26
26
  <li>
27
- <a href={absUrl("/pub-sub-messaging")} className="group ui-meganav-media">
28
- <p className="ui-meganav-media-heading">Publish/subscribe messaging</p>
29
- <p className="ui-meganav-media-copy">Feature-rich pub/sub messaging to power any realtime requirement.</p>
27
+ <a href={absUrl("/examples/avatar-stack")} className="group ui-meganav-media">
28
+ <p className="ui-meganav-media-heading">Avatar Stack</p>
29
+ <p className="ui-meganav-media-copy">See who is connected in a digital space.</p>
30
30
  </a>
31
31
  </li>
32
32
  <li>
33
- <a href={absUrl("/push-notifications")} className="ui-meganav-media group">
34
- <p className="ui-meganav-media-heading">Push notifications</p>
35
- <p className="ui-meganav-media-copy">Deliver native notifications at scale with our unified API.</p>
33
+ <a href={absUrl("/examples/emoji-reactions")} className="ui-meganav-media group">
34
+ <p className="ui-meganav-media-heading">Emoji Reactions</p>
35
+ <p className="ui-meganav-media-copy">React with an emoji to a message.</p>
36
36
  </a>
37
37
  </li>
38
38
  <li>
39
- <a href={absUrl("/integrations")} className="ui-meganav-media group">
40
- <p className="ui-meganav-media-heading">Third-party integrations</p>
41
- <p className="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
39
+ <a href={absUrl("/examples/activity-feed")} className="ui-meganav-media group">
40
+ <p className="ui-meganav-media-heading">Activity Feed</p>
41
+ <p className="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
42
42
  </a>
43
43
  </li>
44
44
  <li>
45
- <a href={absUrl("/protocols")} className="ui-meganav-media group">
46
- <p className="ui-meganav-media-heading">Multi-protocol messaging</p>
47
- <p className="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
45
+ <a href={absUrl("/examples/live-charts")} className="ui-meganav-media group">
46
+ <p className="ui-meganav-media-heading">Live Charts</p>
47
+ <p className="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
48
48
  </a>
49
49
  </li>
50
50
  <li>
51
- <a href={absUrl("/hub")} className="ui-meganav-media group">
52
- <p className="ui-meganav-media-heading">Streaming data sources</p>
53
- <p className="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
51
+ <a href={absUrl("/examples/live-cursors")} className="ui-meganav-media group">
52
+ <p className="ui-meganav-media-heading">Live Cursors</p>
53
+ <p className="ui-meganav-media-copy">Track all cursors in realtime.</p>
54
+ </a>
55
+ </li>
56
+ <li>
57
+ <a href={absUrl("/examples/typing-indicator")} className="ui-meganav-media group">
58
+ <p className="ui-meganav-media-heading">Typing Indicator</p>
59
+ <p className="ui-meganav-media-copy">See when a user is typing a message.</p>
54
60
  </a>
55
61
  </li>
56
62
  </ul>
57
-
58
- <FeaturedLink url={absUrl("/platform")}>Explore all platform features</FeaturedLink>
63
+ <FeaturedLink url={absUrl("/examples")}>Explore all live examples</FeaturedLink>
59
64
  </div>
60
65
 
61
66
  <div>