@ably/ui 8.7.0-dev.cbc127e → 8.7.0-dev.cf2bf50

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 (46) hide show
  1. package/core/.DS_Store +0 -0
  2. package/core/Footer.jsx +14 -19
  3. package/core/Meganav/component.css +41 -17
  4. package/core/Meganav/component.json +1 -1
  5. package/core/Meganav.jsx +395 -137
  6. package/core/MeganavContentDevelopers.jsx +366 -83
  7. package/core/MeganavContentPlatform.jsx +12 -36
  8. package/core/MeganavContentProducts/component.js +1 -0
  9. package/core/MeganavContentProducts.jsx +333 -0
  10. package/core/MeganavContentUseCases.jsx +4 -4
  11. package/core/MeganavItemsDesktop.jsx +2 -2
  12. package/core/MeganavItemsMobile.jsx +1 -1
  13. package/core/images/best-support-2023.svg +1 -0
  14. package/core/images/fastest-implementation-2023.svg +1 -0
  15. package/core/images/high-performer-2023.svg +1 -0
  16. package/core/images/highest-user-adoption-2023.svg +1 -0
  17. package/core/sprites.svg +29 -0
  18. package/package.json +3 -3
  19. package/src/.DS_Store +0 -0
  20. package/src/core/.DS_Store +0 -0
  21. package/src/core/Footer/component.html.erb +7 -12
  22. package/src/core/Footer/component.jsx +9 -17
  23. package/src/core/HeadwayWidget/HeadwayWidget.jsx +234 -0
  24. package/src/core/HeadwayWidget/index.js +5 -0
  25. package/src/core/Meganav/component.css +41 -17
  26. package/src/core/Meganav/component.json +1 -1
  27. package/src/core/Meganav/component.jsx +2 -2
  28. package/src/core/Meganav/component.rb +4 -4
  29. package/src/core/MeganavContentDevelopers/component.html.erb +9 -0
  30. package/src/core/MeganavContentDevelopers/component.jsx +139 -125
  31. package/src/core/{MeganavContentPlatform → MeganavContentProducts}/component.html.erb +15 -33
  32. package/src/core/{MeganavContentPlatform → MeganavContentProducts}/component.jsx +18 -39
  33. package/src/core/{MeganavContentPlatform → MeganavContentProducts}/component.rb +1 -1
  34. package/src/core/MeganavContentUseCases/component.html.erb +4 -4
  35. package/src/core/MeganavContentUseCases/component.jsx +4 -4
  36. package/src/core/MeganavItemsDesktop/component.jsx +1 -1
  37. package/src/core/MeganavItemsDesktop/component.rb +1 -1
  38. package/src/core/core.rb +8 -4
  39. package/src/core/icons/icon-display-asset-tracking-col.svg +18 -0
  40. package/src/core/icons/icon-display-examples-col.svg +11 -0
  41. package/src/core/icons/icon-social-x.svg +3 -0
  42. package/src/core/images/best-support-2023.svg +1 -0
  43. package/src/core/images/fastest-implementation-2023.svg +1 -0
  44. package/src/core/images/high-performer-2023.svg +1 -0
  45. package/src/core/images/highest-user-adoption-2023.svg +1 -0
  46. /package/src/core/{MeganavContentPlatform → MeganavContentProducts}/component.js +0 -0
package/src/core/MeganavContentDevelopers/component.html.erb CHANGED
@@ -33,6 +33,15 @@
33
33
  </div>
34
34
  <% end %>
35
35
  </li>
36
+ <li>
37
+ <%= link_to abs_url("/examples"), class: "ui-meganav-media-with-image group" do %>
38
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-examples-col", size: "2.5rem")) %>
39
+ <div class="flex flex-col justify-center">
40
+ <p class="ui-meganav-media-heading">Live examples</p>
41
+ <p class="ui-meganav-media-copy">Discover our features and their use cases.</p>
42
+ </div>
43
+ <% end %>
44
+ </li>
36
45
  </ul>
37
46
  </div>
38
47
  <div class="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
package/src/core/MeganavContentDevelopers/component.jsx CHANGED
@@ -1,134 +1,148 @@
1
- import React from "react";
2
1
  import T from "prop-types";
2
+ import React from "react";
3
3
 
4
+ import HeadwayWidget from "../HeadwayWidget/HeadwayWidget.jsx";
4
5
  import Icon from "../Icon/component.jsx";
5
6
 
6
- const MeganavContentDevelopers = ({ absUrl }) => (
7
- <div className="flex max-w-screen-xl mx-auto">
8
- <div className="ui-meganav-content-spacer"></div>
9
- <section className="grid grid-cols-12 ui-grid-gap-x w-full">
10
- <div className="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
11
- <h3 className="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">
12
- Explore
13
- </h3>
14
- <ul aria-labelledby="meganav-developers-panel-explore">
15
- <li>
16
- <a href={absUrl("/docs")} className="ui-meganav-media-with-image group">
17
- <Icon name="icon-display-docs-col" size="2.5rem" />
18
- <div className="flex flex-col justify-center">
19
- <p className="ui-meganav-media-heading">Documentation</p>
20
- <p className="ui-meganav-media-copy">Technical guides to help you build with Ably.</p>
21
- </div>
22
- </a>
23
- </li>
24
- <li>
25
- <a href={absUrl("/docs/quick-start-guide")} className="ui-meganav-media-with-image group">
26
- <Icon name="icon-display-quickstart-guides-col" size="2.5rem" />
27
- <div className="flex flex-col justify-center">
28
- <p className="ui-meganav-media-heading">Quickstart guides</p>
29
- <p className="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
30
- </div>
31
- </a>
32
- </li>
33
- <li>
34
- <a href={absUrl("/integrations")} className="ui-meganav-media-with-image group">
35
- <Icon name="icon-display-integrations-col" size="2.5rem" />
36
- <div className="flex flex-col justify-center">
37
- <p className="ui-meganav-media-heading">Integrations</p>
38
- <p className="ui-meganav-media-copy">Find out more about Ably integrations. </p>
39
- </div>
40
- </a>
41
- </li>
42
- </ul>
43
- </div>
7
+ const MeganavContentDevelopers = ({ absUrl }) => {
8
+ console.log("render MeganavContentDevelopers");
9
+ return (
10
+ <div className="flex max-w-screen-xl mx-auto">
11
+ <div className="ui-meganav-content-spacer"></div>
12
+ <section className="grid w-full grid-cols-12 ui-grid-gap-x">
13
+ <div className="px-24 pt-24 col-span-full md:col-span-4 md:py-24 lg:py-32 sm:px-32 md:pl-0 md:pr-24">
14
+ <h3 className="uppercase ui-meganav-overline" id="meganav-developers-panel-explore">
15
+ Explore
16
+ </h3>
17
+ <ul aria-labelledby="meganav-developers-panel-explore">
18
+ <li>
19
+ <a href={absUrl("/docs")} className="ui-meganav-media-with-image group">
20
+ <Icon name="icon-display-docs-col" size="2.5rem" />
21
+ <div className="flex flex-col justify-center">
22
+ <p className="ui-meganav-media-heading">Documentation</p>
23
+ <p className="ui-meganav-media-copy">Technical guides to help you build with Ably.</p>
24
+ </div>
25
+ </a>
26
+ </li>
27
+ <li>
28
+ <a href={absUrl("/docs/quick-start-guide")} className="ui-meganav-media-with-image group">
29
+ <Icon name="icon-display-quickstart-guides-col" size="2.5rem" />
30
+ <div className="flex flex-col justify-center">
31
+ <p className="ui-meganav-media-heading">Quickstart guides</p>
32
+ <p className="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
33
+ </div>
34
+ </a>
35
+ </li>
36
+ <li>
37
+ <a href={absUrl("/integrations")} className="ui-meganav-media-with-image group">
38
+ <Icon name="icon-display-integrations-col" size="2.5rem" />
39
+ <div className="flex flex-col justify-center">
40
+ <p className="ui-meganav-media-heading">Integrations</p>
41
+ <p className="ui-meganav-media-copy">Find out more about Ably integrations. </p>
42
+ </div>
43
+ </a>
44
+ </li>
45
+ <li>
46
+ <a href={absUrl("/examples")} className="ui-meganav-media-with-image group">
47
+ <Icon name="icon-display-examples-col" size="2.5rem" />
48
+ <div className="flex flex-col justify-center">
49
+ <p className="ui-meganav-media-heading">Live examples</p>
50
+ <p className="ui-meganav-media-copy">Discover our features and their use cases.</p>
51
+ </div>
52
+ </a>
53
+ </li>
54
+ </ul>
55
+ </div>
44
56
 
45
- <div className="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
46
- <ul className="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
47
- <li>
48
- <a href={absUrl("/download")} className="ui-meganav-media-with-image group">
49
- <Icon name="icon-display-sdks-col" size="2.5rem" />
50
- <div className="flex flex-col justify-center">
51
- <p className="ui-meganav-media-heading">SDKs</p>
52
- <p className="ui-meganav-media-copy">Download an SDK to help you build realtime apps faster.</p>
53
- </div>
54
- </a>
55
- </li>
56
- <li>
57
- <a href={absUrl("/tutorials")} className="ui-meganav-media-with-image group">
58
- <Icon name="icon-display-tutorials-demos-col" size="2.5rem" />
59
- <div className="flex flex-col justify-center">
60
- <p className="ui-meganav-media-heading">Tutorials & Demos</p>
61
- <p className="ui-meganav-media-copy">Get stuck in with our hands-on resources.</p>
62
- </div>
63
- </a>
64
- </li>
65
- <li>
66
- <a href={absUrl("/reference-guide-chat")} className="ui-meganav-media-with-image group">
67
- <Icon name="icon-display-chat-col" size="2.5rem" />
68
- <div className="flex flex-col justify-center">
69
- <p className="ui-meganav-media-heading">Chat apps reference guide</p>
70
- <p className="ui-meganav-media-copy">Learn how to build chat apps with Ably.</p>
71
- </div>
72
- </a>
73
- </li>
74
- <li>
75
- <a href={absUrl("/reference-guide-multiplayer")} className="ui-meganav-media-with-image group">
76
- <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
77
- <div className="flex flex-col justify-center">
78
- <p className="ui-meganav-media-heading">Multiplayer reference guide</p>
79
- <p className="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
80
- </div>
81
- </a>
82
- </li>
83
- </ul>
84
- </div>
57
+ <div className="px-24 pb-8 col-span-full md:col-span-4 md:py-24 lg:py-32 sm:px-32 md:px-0">
58
+ <ul className="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
59
+ <li>
60
+ <a href={absUrl("/download")} className="ui-meganav-media-with-image group">
61
+ <Icon name="icon-display-sdks-col" size="2.5rem" />
62
+ <div className="flex flex-col justify-center">
63
+ <p className="ui-meganav-media-heading">SDKs</p>
64
+ <p className="ui-meganav-media-copy">Download an SDK to help you build realtime apps faster.</p>
65
+ </div>
66
+ </a>
67
+ </li>
68
+ <li>
69
+ <a href={absUrl("/tutorials")} className="ui-meganav-media-with-image group">
70
+ <Icon name="icon-display-tutorials-demos-col" size="2.5rem" />
71
+ <div className="flex flex-col justify-center">
72
+ <p className="ui-meganav-media-heading">Tutorials & Demos</p>
73
+ <p className="ui-meganav-media-copy">Get stuck in with our hands-on resources.</p>
74
+ </div>
75
+ </a>
76
+ </li>
77
+ <li>
78
+ <a href={absUrl("/reference-guide-chat")} className="ui-meganav-media-with-image group">
79
+ <Icon name="icon-display-chat-col" size="2.5rem" />
80
+ <div className="flex flex-col justify-center">
81
+ <p className="ui-meganav-media-heading">Chat apps reference guide</p>
82
+ <p className="ui-meganav-media-copy">Learn how to build chat apps with Ably.</p>
83
+ </div>
84
+ </a>
85
+ </li>
86
+ <li>
87
+ <a href={absUrl("/reference-guide-multiplayer")} className="ui-meganav-media-with-image group">
88
+ <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
89
+ <div className="flex flex-col justify-center">
90
+ <p className="ui-meganav-media-heading">Multiplayer reference guide</p>
91
+ <p className="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
92
+ </div>
93
+ </a>
94
+ </li>
95
+ </ul>
96
+ </div>
85
97
 
86
- <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
87
- <h3 className="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
88
- Quick links
89
- </h3>
90
- <ul aria-labelledby="meganav-developers-panel-quick-links">
91
- <li>
92
- <a href="https://discord.gg/jwBPhEZ9g5" className="group ui-meganav-media py-12">
93
- <p className="ui-meganav-media-heading">Discord</p>
94
- </a>
95
- </li>
96
- <li>
97
- <a href="https://github.com/ably" className="group ui-meganav-media py-12">
98
- <p className="ui-meganav-media-heading">GitHub</p>
99
- </a>
100
- </li>
101
- <li>
102
- <a href="https://changelog.ably.com/" className="group ui-meganav-media py-12">
103
- <p className="ui-meganav-media-heading">Changelog</p>
104
- </a>
105
- </li>
106
- <li>
107
- <a href="https://status.ably.com/" className="group ui-meganav-media py-12">
108
- <p className="ui-meganav-media-heading">
109
- Status
110
- <iframe
111
- title="Ably status"
112
- src="https://status.ably.com/embed/icon"
113
- allowtransparency="true"
114
- frameBorder="0"
115
- scrolling="no"
116
- className="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
117
- ></iframe>
118
- </p>
119
- </a>
120
- </li>
121
- <li>
122
- <a href={absUrl("/support")} className="group ui-meganav-media py-12">
123
- <p className="ui-meganav-media-heading">Support & FAQs</p>
124
- </a>
125
- </li>
126
- </ul>
127
- </div>
128
- </section>
129
- <div className="ui-meganav-content-spacer"></div>
130
- </div>
131
- );
98
+ <div className="px-24 pt-8 pb-24 col-span-full md:col-span-4 md:py-24 lg:py-32 sm:px-32 md:px-0">
99
+ <h3 className="uppercase ui-meganav-overline" id="meganav-developers-panel-quick-links">
100
+ Quick links
101
+ </h3>
102
+ <ul aria-labelledby="meganav-developers-panel-quick-links">
103
+ <li>
104
+ <a href="https://discord.gg/jwBPhEZ9g5" className="py-12 group ui-meganav-media">
105
+ <p className="ui-meganav-media-heading">Discord</p>
106
+ </a>
107
+ </li>
108
+ <li>
109
+ <a href="https://github.com/ably" className="py-12 group ui-meganav-media">
110
+ <p className="ui-meganav-media-heading">GitHub</p>
111
+ </a>
112
+ </li>
113
+ <li>
114
+ <a href="https://changelog.ably.com/" className="py-12 group ui-meganav-media">
115
+ <span className="ui-meganav-media-heading">Changelog</span>
116
+ <HeadwayWidget account={"yZ1rmJ"} badgePosition={"center-right"} />
117
+ </a>
118
+ </li>
119
+ <li>
120
+ <a href="https://status.ably.com/" className="py-12 group ui-meganav-media">
121
+ <p className="ui-meganav-media-heading">
122
+ Status
123
+ <iframe
124
+ title="Ably status"
125
+ src="https://status.ably.com/embed/icon"
126
+ allowtransparency="true"
127
+ frameBorder="0"
128
+ scrolling="no"
129
+ className="w-24 h-24 ml-4 align-middle border-none pointer-events-none"
130
+ ></iframe>
131
+ </p>
132
+ </a>
133
+ </li>
134
+ <li>
135
+ <a href={absUrl("/support")} className="py-12 group ui-meganav-media">
136
+ <p className="ui-meganav-media-heading">Support & FAQs</p>
137
+ </a>
138
+ </li>
139
+ </ul>
140
+ </div>
141
+ </section>
142
+ <div className="ui-meganav-content-spacer"></div>
143
+ </div>
144
+ );
145
+ };
132
146
 
133
147
  MeganavContentDevelopers.propTypes = {
134
148
  absUrl: T.func,
package/src/core/{MeganavContentPlatform → MeganavContentProducts}/component.html.erb RENAMED
@@ -16,52 +16,34 @@
16
16
  </div>
17
17
 
18
18
  <div class="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
19
- <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-examples">Our Examples</h3>
20
- <ul class="mb-16" aria-labelledby="meganav-platform-panel-list-examples">
19
+ <h3 class="ui-meganav-overline" id="meganav-products-panel-list-examples">
20
+ Products
21
+ </h3>
22
+ <ul class="mb-16" aria-labelledby="meganav-products-panel-list-examples">
21
23
  <li>
22
- <%= link_to abs_url("/examples/avatar-stack"), class: "ui-meganav-media group" do %>
23
- <p class="ui-meganav-media-heading">Avatar Stack</p>
24
- <p class="ui-meganav-media-copy">See who is connected in a digital space.</p>
24
+ <%= link_to abs_url("/solutions/channels"), class: "ui-meganav-media group" do %>
25
+ <p class="ui-meganav-media-heading">Pub/Sub Channels</p>
26
+ <p class="ui-meganav-media-copy">Build infinitely scalable realtime applications.</p>
25
27
  <% end %>
26
28
  </li>
27
29
  <li>
28
- <%= link_to abs_url("/examples/emoji-reactions"), class: "ui-meganav-media group" do %>
29
- <p class="ui-meganav-media-heading">Emoji Reactions</p>
30
- <p class="ui-meganav-media-copy">React with an emoji to a message.</p>
30
+ <%= link_to abs_url("/spaces"), class: "ui-meganav-media group" do %>
31
+ <p class="ui-meganav-media-heading">Spaces (Beta)</p>
32
+ <p class="ui-meganav-media-copy">Create multi-user collaborative environments.</p>
31
33
  <% end %>
32
34
  </li>
33
35
  <li>
34
- <%= link_to abs_url("/examples/activity-feed"), class: "ui-meganav-media group" do %>
35
- <p class="ui-meganav-media-heading">Activity Feed</p>
36
- <p class="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
37
- <% end %>
38
- </li>
39
- <li>
40
- <%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %>
41
- <p class="ui-meganav-media-heading">Live Cursors</p>
42
- <p class="ui-meganav-media-copy">Track all cursors in realtime.</p>
43
- <% end %>
44
- </li>
45
- <li>
46
- <%= link_to abs_url("/examples/typing-indicator"), class: "ui-meganav-media group" do %>
47
- <p class="ui-meganav-media-heading">Typing Indicator</p>
48
- <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
49
- <% end %>
50
- </li>
51
- <li>
52
- <%= link_to abs_url("/examples/chat-admin-privileges"), class: "ui-meganav-media group" do %>
53
- <p class="ui-meganav-media-heading">Chat Admin Privileges</p>
54
- <p class="ui-meganav-media-copy">Control who can take admin actions in a digital space.</p>
36
+ <%= link_to abs_url("/livesync"), class: "ui-meganav-media group" do %>
37
+ <p class="ui-meganav-media-heading">LiveSync (Pre release)</p>
38
+ <p class="ui-meganav-media-copy">Keep clients in sync with any relational database.</p>
55
39
  <% end %>
56
40
  </li>
57
41
  </ul>
58
-
59
- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"), text_size: 'text-p3')) do %>Explore all live examples<% end %>
60
42
  </div>
61
43
 
62
44
  <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
63
- <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-our-technology">Our technology</h3>
64
- <ul class="mb-16" aria-labelledby="meganav-platform-panel-list-our-technology">
45
+ <h3 class="ui-meganav-overline" id="meganav-products-panel-list-our-technology">Technology</h3>
46
+ <ul class="mb-16" aria-labelledby="meganav-products-panel-list-our-technology">
65
47
  <li>
66
48
  <%= link_to abs_url("/four-pillars-of-dependability#performance"), class: "ui-meganav-media group" do %>
67
49
  <p class="ui-meganav-media-heading">Predictable performance</p>
package/src/core/{MeganavContentPlatform → MeganavContentProducts}/component.jsx RENAMED
@@ -3,7 +3,7 @@ import T from "prop-types";
3
3
 
4
4
  import FeaturedLink from "../FeaturedLink/component.jsx";
5
5
 
6
- const MeganavContentPlatform = ({ paths, absUrl }) => (
6
+ const MeganavContentProducts = ({ paths, absUrl }) => (
7
7
  <div className="flex max-w-screen-xl mx-auto">
8
8
  <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
9
9
  <section className="grid grid-cols-12 ui-grid-gap-x w-full">
@@ -23,57 +23,36 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
23
23
  </div>
24
24
 
25
25
  <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
26
- <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-examples">
27
- Our Examples
26
+ <h3 className="ui-meganav-overline" id="meganav-products-panel-list-examples">
27
+ Products
28
28
  </h3>
29
- <ul className="mb-16" aria-labelledby="meganav-platform-panel-list-examples">
29
+ <ul className="mb-16" aria-labelledby="meganav-products-panel-list-examples">
30
30
  <li>
31
- <a href={absUrl("/examples/avatar-stack")} className="group ui-meganav-media">
32
- <p className="ui-meganav-media-heading">Avatar Stack</p>
33
- <p className="ui-meganav-media-copy">See who is connected in a digital space.</p>
31
+ <a href={absUrl("/solutions/channels")} className="group ui-meganav-media">
32
+ <p className="ui-meganav-media-heading">Pub/Sub Channels</p>
33
+ <p className="ui-meganav-media-copy">Build infinitely scalable realtime applications.</p>
34
34
  </a>
35
35
  </li>
36
36
  <li>
37
- <a href={absUrl("/examples/emoji-reactions")} className="ui-meganav-media group">
38
- <p className="ui-meganav-media-heading">Emoji Reactions</p>
39
- <p className="ui-meganav-media-copy">React with an emoji to a message.</p>
37
+ <a href={absUrl("/spaces")} className="group ui-meganav-media">
38
+ <p className="ui-meganav-media-heading">Spaces (Beta)</p>
39
+ <p className="ui-meganav-media-copy">Create multi-user collaborative environments.</p>
40
40
  </a>
41
41
  </li>
42
42
  <li>
43
- <a href={absUrl("/examples/activity-feed")} className="ui-meganav-media group">
44
- <p className="ui-meganav-media-heading">Activity Feed</p>
45
- <p className="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
46
- </a>
47
- </li>
48
- <li>
49
- <a href={absUrl("/examples/live-cursors")} className="ui-meganav-media group">
50
- <p className="ui-meganav-media-heading">Live Cursors</p>
51
- <p className="ui-meganav-media-copy">Track all cursors in realtime.</p>
52
- </a>
53
- </li>
54
- <li>
55
- <a href={absUrl("/examples/typing-indicator")} className="ui-meganav-media group">
56
- <p className="ui-meganav-media-heading">Typing Indicator</p>
57
- <p className="ui-meganav-media-copy">See when a user is typing a message.</p>
58
- </a>
59
- </li>
60
- <li>
61
- <a href={absUrl("/examples/chat-admin-privileges")} className="ui-meganav-media group">
62
- <p className="ui-meganav-media-heading">Chat Admin Privileges</p>
63
- <p className="ui-meganav-media-copy">Control who can take admin actions in a digital space.</p>
43
+ <a href={absUrl("/livesync")} className="group ui-meganav-media">
44
+ <p className="ui-meganav-media-heading">LiveSync (Pre release)</p>
45
+ <p className="ui-meganav-media-copy">Keep clients in sync with any relational database.</p>
64
46
  </a>
65
47
  </li>
66
48
  </ul>
67
- <FeaturedLink url={absUrl("/examples")} textSize="text-p3">
68
- Explore all live examples
69
- </FeaturedLink>
70
49
  </div>
71
50
 
72
51
  <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
73
- <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-our-technology">
74
- Our technology
52
+ <h3 className="ui-meganav-overline" id="meganav-products-panel-list-our-technology">
53
+ Technology
75
54
  </h3>
76
- <ul className="mb-16" aria-labelledby="meganav-platform-panel-list-our-technology">
55
+ <ul className="mb-16" aria-labelledby="meganav-products-panel-list-our-technology">
77
56
  <li>
78
57
  <a href={absUrl("/four-pillars-of-dependability#performance")} className="ui-meganav-media group">
79
58
  <p className="ui-meganav-media-heading">Predictable performance</p>
@@ -115,7 +94,7 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
115
94
  </div>
116
95
  );
117
96
 
118
- MeganavContentPlatform.propTypes = {
97
+ MeganavContentProducts.propTypes = {
119
98
  paths: T.shape({
120
99
  ablyStack: T.string,
121
100
  iconSprites: T.string,
@@ -123,4 +102,4 @@ MeganavContentPlatform.propTypes = {
123
102
  absUrl: T.func,
124
103
  };
125
104
 
126
- export default MeganavContentPlatform;
105
+ export default MeganavContentProducts;
package/src/core/{MeganavContentPlatform → MeganavContentProducts}/component.rb RENAMED
@@ -1,6 +1,6 @@
1
1
  module AblyUi
2
2
  module Core
3
- class MeganavContentPlatform < ViewComponent::Base
3
+ class MeganavContentProducts < ViewComponent::Base
4
4
  include SharedAssets
5
5
  include Util
6
6
 
package/src/core/MeganavContentUseCases/component.html.erb CHANGED
@@ -53,11 +53,11 @@
53
53
  <% end %>
54
54
  </li>
55
55
  <li>
56
- <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media-with-image group" do %>
57
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-kafka-at-the-edge-col", size: "2.5rem")) %>
56
+ <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media-with-image group" do %>
57
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-asset-tracking-col", size: "2.5rem")) %>
58
58
  <div class="flex flex-col justify-center">
59
- <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
60
- <p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
59
+ <p class="ui-meganav-media-heading">Asset Tracking (Beta)</p>
60
+ <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
61
61
  </div>
62
62
  <% end %>
63
63
  </li>
package/src/core/MeganavContentUseCases/component.jsx CHANGED
@@ -58,11 +58,11 @@ const MeganavContentUseCases = ({ absUrl }) => (
58
58
  </a>
59
59
  </li>
60
60
  <li>
61
- <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media-with-image group">
62
- <Icon name="icon-display-kafka-at-the-edge-col" size="2.5rem" />
61
+ <a href={absUrl("/solutions/asset-tracking")} className="ui-meganav-media-with-image group">
62
+ <Icon name="icon-display-asset-tracking-col" size="2.5rem" />
63
63
  <div className="flex flex-col justify-center">
64
- <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
65
- <p className="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
64
+ <p className="ui-meganav-media-heading">Asset Tracking (Beta)</p>
65
+ <p className="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
66
66
  </div>
67
67
  </a>
68
68
  </li>
package/src/core/MeganavItemsDesktop/component.jsx CHANGED
@@ -8,7 +8,7 @@ const MeganavDesktopItems = ({ panels, paths, theme, absUrl }) => (
8
8
  <ul className="hidden md:flex" data-id="meganav-items-desktop">
9
9
  {MeganavData.panels.map((panel) => {
10
10
  const PanelComponent = panels[panel.component];
11
- const bgCSS = ["platform-panel", "use-cases-panel"].includes(panel.id) ? "ui-meganav-panel-split-bg" : "";
11
+ const bgCSS = ["products-panel", "use-cases-panel"].includes(panel.id) ? "ui-meganav-panel-split-bg" : "";
12
12
 
13
13
  return (
14
14
  <li className="ui-meganav-item" key={panel.id}>
package/src/core/MeganavItemsDesktop/component.rb CHANGED
@@ -12,7 +12,7 @@ module AblyUi
12
12
  end
13
13
 
14
14
  def bg_css(panel_id)
15
- if %w[platform-panel use-cases-panel].include?(panel_id)
15
+ if %w[products-panel use-cases-panel].include?(panel_id)
16
16
  'ui-meganav-panel-split-bg'
17
17
  else
18
18
  ''
package/src/core/core.rb CHANGED
@@ -43,15 +43,19 @@ module AblyUi
43
43
  end
44
44
 
45
45
  def highest_performer
46
- asset_path 'ably_ui/core/images/high-performer-2022.png'
46
+ asset_path 'ably_ui/core/images/high-performer-2023.svg'
47
47
  end
48
48
 
49
49
  def highest_user_adoption
50
- asset_path 'ably_ui/core/images/highest-user-adoption-2022.png'
50
+ asset_path 'ably_ui/core/images/highest-user-adoption-2023.svg'
51
51
  end
52
52
 
53
- def users_love_us
54
- asset_path 'ably_ui/core/images/users-love-us-2022.png'
53
+ def best_support
54
+ asset_path 'ably_ui/core/images/best-support-2023.svg'
55
+ end
56
+
57
+ def fastest_implementation
58
+ asset_path 'ably_ui/core/images/fastest-implementation-2023.svg'
55
59
  end
56
60
  end
57
61
 
package/src/core/icons/icon-display-asset-tracking-col.svg ADDED
@@ -0,0 +1,18 @@
1
+ <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M40 35.5C42.2091 35.5 44 33.7091 44 31.5C44 29.2909 42.2091 27.5 40 27.5C37.7909 27.5 36 29.2909 36 31.5C36 33.7091 37.7909 35.5 40 35.5Z" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linejoin="bevel"/>
3
+ <path d="M40.0199 44.5L39.4631 45.0024C39.6054 45.1602 39.808 45.2502 40.0205 45.25C40.233 45.2498 40.4354 45.1595 40.5775 45.0016L40.0199 44.5ZM33.75 31.54C33.75 28.0702 36.5603 25.25 40 25.25V23.75C35.7238 23.75 32.25 27.2498 32.25 31.54H33.75ZM40 25.25C43.4582 25.25 46.25 28.0688 46.25 31.54H47.75C47.75 27.2512 44.2975 23.75 40 23.75V25.25ZM46.25 31.54C46.25 32.6876 45.8604 34.0354 45.2251 35.4518C44.5942 36.858 43.7465 38.2767 42.8879 39.5509C42.0309 40.823 41.1723 41.9375 40.5275 42.7345C40.2054 43.1326 39.9374 43.4504 39.7507 43.6679C39.6574 43.7766 39.5844 43.8602 39.5352 43.9162C39.5106 43.9441 39.4919 43.9652 39.4796 43.979C39.4735 43.9859 39.4689 43.991 39.466 43.9943C39.4646 43.9959 39.4635 43.997 39.4629 43.9977C39.4626 43.9981 39.4624 43.9983 39.4623 43.9984C39.4622 43.9985 39.4622 43.9985 39.4622 43.9985C39.4622 43.9985 39.4623 43.9984 40.0199 44.5C40.5775 45.0016 40.5776 45.0014 40.5777 45.0013C40.5778 45.0012 40.578 45.001 40.5781 45.0009C40.5785 45.0005 40.5789 45 40.5794 44.9994C40.5805 44.9982 40.582 44.9966 40.5839 44.9945C40.5877 44.9902 40.5931 44.9841 40.6002 44.9762C40.6143 44.9603 40.6348 44.9371 40.6614 44.907C40.7144 44.8467 40.7914 44.7585 40.8889 44.6449C41.0839 44.4177 41.3613 44.0887 41.6936 43.678C42.3575 42.8575 43.244 41.707 44.1319 40.3891C45.0184 39.0733 45.9157 37.577 46.5937 36.0657C47.267 34.5646 47.75 32.9924 47.75 31.54H46.25ZM40.0199 44.5C40.5767 43.9976 40.5768 43.9976 40.5768 43.9977C40.5768 43.9976 40.5768 43.9976 40.5767 43.9976C40.5766 43.9975 40.5764 43.9972 40.5761 43.9969C40.5755 43.9962 40.5744 43.995 40.5729 43.9934C40.57 43.9901 40.5654 43.985 40.5592 43.9781C40.5469 43.9642 40.5281 43.9431 40.5033 43.915C40.4538 43.8589 40.3804 43.7751 40.2865 43.6661C40.0987 43.4481 39.8292 43.1295 39.5052 42.7306C38.8566 41.932 37.9931 40.8155 37.131 39.5421C36.2675 38.2665 35.4149 36.8471 34.7804 35.4417C34.1413 34.0259 33.75 32.6814 33.75 31.54H32.25C32.25 32.9886 32.7362 34.5591 33.4133 36.0589C34.0951 37.5692 34.9974 39.066 35.8889 40.3829C36.7818 41.702 37.6732 42.8542 38.3409 43.6763C38.675 44.0877 38.9539 44.4174 39.15 44.6451C39.2481 44.7589 39.3255 44.8473 39.3788 44.9077C39.4054 44.9379 39.4261 44.9611 39.4403 44.977C39.4473 44.9849 39.4528 44.9911 39.4566 44.9953C39.4586 44.9974 39.4601 44.9991 39.4611 45.0003C39.4617 45.0009 39.4621 45.0014 39.4624 45.0017C39.4626 45.0019 39.4627 45.0021 39.4628 45.0022C39.4629 45.0023 39.4631 45.0024 40.0199 44.5Z" fill="#03020D"/>
4
+ <path d="M8 13.5C10.2091 13.5 12 11.7091 12 9.5C12 7.29086 10.2091 5.5 8 5.5C5.79086 5.5 4 7.29086 4 9.5C4 11.7091 5.79086 13.5 8 13.5Z" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linejoin="bevel"/>
5
+ <path d="M8.01989 22.5L7.46305 23.0024C7.6054 23.1602 7.80798 23.2502 8.02047 23.25C8.23295 23.2498 8.43539 23.1595 8.5775 23.0016L8.01989 22.5ZM1.75 9.54C1.75 6.07018 4.56028 3.25 8 3.25V1.75C3.72381 1.75 0.25 5.24982 0.25 9.54H1.75ZM8 3.25C11.4582 3.25 14.25 6.06879 14.25 9.54H15.75C15.75 5.25121 12.2975 1.75 8 1.75V3.25ZM14.25 9.54C14.25 10.6876 13.8604 12.0354 13.2251 13.4518C12.5942 14.858 11.7465 16.2767 10.8879 17.5509C10.0309 18.823 9.17233 19.9375 8.52748 20.7345C8.20539 21.1326 7.93744 21.4504 7.75073 21.6679C7.65739 21.7766 7.58442 21.8602 7.5352 21.9162C7.51059 21.9441 7.49193 21.9652 7.47963 21.979C7.47348 21.9859 7.46893 21.991 7.46602 21.9943C7.46456 21.9959 7.46352 21.997 7.46289 21.9977C7.46258 21.9981 7.46237 21.9983 7.46227 21.9984C7.46222 21.9985 7.46222 21.9985 7.46219 21.9985C7.46222 21.9985 7.46228 21.9984 8.01989 22.5C8.5775 23.0016 8.5776 23.0014 8.57774 23.0013C8.57782 23.0012 8.57798 23.001 8.57814 23.0009C8.57846 23.0005 8.57889 23 8.57942 22.9994C8.58049 22.9982 8.58197 22.9966 8.58387 22.9945C8.58768 22.9902 8.59313 22.9841 8.60019 22.9762C8.61431 22.9603 8.63484 22.9371 8.66135 22.907C8.71438 22.8467 8.79137 22.7585 8.8889 22.6449C9.08391 22.4177 9.36128 22.0887 9.69357 21.678C10.3575 20.8575 11.244 19.707 12.1319 18.3891C13.0184 17.0733 13.9157 15.577 14.5937 14.0657C15.267 12.5646 15.75 10.9924 15.75 9.54H14.25ZM8.01989 22.5C8.57672 21.9976 8.57677 21.9976 8.5768 21.9977C8.57678 21.9976 8.57678 21.9976 8.57672 21.9976C8.57662 21.9975 8.57641 21.9972 8.57609 21.9969C8.57546 21.9962 8.57441 21.995 8.57295 21.9934C8.57002 21.9901 8.56543 21.985 8.55924 21.9781C8.54687 21.9642 8.52809 21.9431 8.50333 21.915C8.45381 21.8589 8.3804 21.7751 8.28651 21.6661C8.0987 21.4481 7.82918 21.1295 7.50521 20.7306C6.8566 19.932 5.99306 18.8155 5.13102 17.5421C4.26751 16.2665 3.41486 14.8471 2.78043 13.4417C2.14129 12.0259 1.75 10.6814 1.75 9.54H0.25C0.25 10.9886 0.736196 12.5591 1.41328 14.0589C2.09508 15.5692 2.99741 17.066 3.88887 18.3829C4.7818 19.702 5.67323 20.8542 6.34085 21.6763C6.67499 22.0877 6.9539 22.4174 7.14999 22.6451C7.24805 22.7589 7.32546 22.8473 7.37877 22.9077C7.40543 22.9379 7.42607 22.9611 7.44025 22.977C7.44735 22.9849 7.45283 22.9911 7.45665 22.9953C7.45856 22.9974 7.46005 22.9991 7.46112 23.0003C7.46165 23.0009 7.46208 23.0014 7.46241 23.0017C7.46257 23.0019 7.46273 23.0021 7.46281 23.0022C7.46294 23.0023 7.46305 23.0024 8.01989 22.5Z" fill="#03020D"/>
6
+ <path d="M34 44.5H12C9.79087 44.5 8.00001 42.7091 8.00001 40.5L8 37.5C8 35.2909 9.79086 33.5 12 33.5H13" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
7
+ <circle cx="18" cy="33.5" r="3" fill="#FF5416"/>
8
+ <circle cx="14.25" cy="23.25" r="0.75" fill="#FF5416"/>
9
+ <circle cx="23.25" cy="33.5" r="0.75" fill="#FF5416"/>
10
+ <circle cx="23.25" cy="23.25" r="0.75" fill="#FF5416"/>
11
+ <circle cx="26.25" cy="33.5" r="0.75" fill="#FF5416"/>
12
+ <circle cx="26.25" cy="23.25" r="0.75" fill="#FF5416"/>
13
+ <circle cx="28.25" cy="28.5" r="0.75" fill="#FF5416"/>
14
+ <circle cx="28.25" cy="25.5" r="0.75" fill="#FF5416"/>
15
+ <circle cx="28.25" cy="31.5" r="0.75" fill="#FF5416"/>
16
+ <circle cx="20.25" cy="23.25" r="0.75" fill="#FF5416"/>
17
+ <circle cx="17.25" cy="23.25" r="0.75" fill="#FF5416"/>
18
+ </svg>
package/src/core/icons/icon-display-examples-col.svg ADDED
@@ -0,0 +1,11 @@
1
+ <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="2.75" y="2.75" width="19.5" height="19.5" rx="3.25" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <rect x="25.75" y="2.75" width="19.5" height="19.5" rx="3.25" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M29.9481 7.49224C30.1526 7.26986 30.4707 7.19198 30.7549 7.29466L41.2549 11.0886C41.5421 11.1924 41.7377 11.46 41.7495 11.7651C41.7612 12.0703 41.5867 12.3521 41.3083 12.4777L37.1768 14.3408L35.7938 18.2502C35.6919 18.5381 35.4256 18.7355 35.1205 18.7493C34.8153 18.763 34.5324 18.5903 34.405 18.3127L29.8183 8.31271C29.6923 8.03805 29.7435 7.71462 29.9481 7.49224Z" fill="#FF5416"/>
5
+ <rect x="2.75" y="25.75" width="42.5" height="19.5" rx="3.25" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
6
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M29.25 35.5C29.25 32.6005 31.6005 30.25 34.5 30.25C37.3995 30.25 39.75 32.6005 39.75 35.5C39.75 38.3995 37.3995 40.75 34.5 40.75C31.6005 40.75 29.25 38.3995 29.25 35.5Z" fill="#FF5416"/>
7
+ <path d="M28 31.1115C27.6784 31.0385 27.3437 31 27 31C24.5147 31 22.5 33.0147 22.5 35.5C22.5 37.9853 24.5147 40 27 40C27.3437 40 27.6784 39.9615 28 39.8885" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
8
+ <path d="M22.75 32.3875C21.9309 31.5324 20.7776 31 19.5 31C17.0147 31 15 33.0147 15 35.5C15 37.9853 17.0147 40 19.5 40C20.7776 40 21.9309 39.4676 22.75 38.6125" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
9
+ <path d="M15.75 32.3875C14.9309 31.5324 13.7776 31 12.5 31C10.0147 31 8 33.0147 8 35.5C8 37.9853 10.0147 40 12.5 40C13.7776 40 14.9309 39.4676 15.75 38.6125" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
10
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M5.76866 16.3256C5.764 16.9367 5.75935 17.4785 5.75585 17.8675L5.75004 18.4926C5.74806 18.6928 5.8262 18.8855 5.96706 19.0277C6.10792 19.17 6.30069 19.25 6.50089 19.25H12.5186C16.2385 19.25 19.25 16.2257 19.25 12.5C19.25 8.77428 16.2385 5.75 12.5186 5.75C8.79881 5.75 5.78728 8.77428 5.78728 12.5C5.78728 13.6054 5.77798 15.103 5.76866 16.3256ZM9.25 11.5C9.25 11.0858 9.58579 10.75 10 10.75H15C15.4142 10.75 15.75 11.0858 15.75 11.5C15.75 11.9142 15.4142 12.25 15 12.25H10C9.58579 12.25 9.25 11.9142 9.25 11.5ZM9.25 14C9.25 13.5858 9.58579 13.25 10 13.25H13C13.4142 13.25 13.75 13.5858 13.75 14C13.75 14.4142 13.4142 14.75 13 14.75H10C9.58579 14.75 9.25 14.4142 9.25 14Z" fill="#FF5416"/>
11
+ </svg>
package/src/core/icons/icon-social-x.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M17.7286 2H20.9857L13.8699 10.1329L22.2411 21.2H15.6865L10.5527 14.4879L4.67852 21.2H1.41945L9.03052 12.501L1 2H7.72098L12.3615 8.13514L17.7286 2ZM16.5855 19.2505H18.3903L6.74031 3.84714H4.80357L16.5855 19.2505Z" fill="#03020D"/>
3
+ </svg>