ably-ui 8.7.0.dev.9af734b → 8.7.0.dev.9b0589d

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1a93ccf254ecf2521f3a9df650c630905d243f516c34f4a4aab4c0cfcd3f806c
4
- data.tar.gz: 5f9183fffadab57799db332ec42eef24addd29fe8fdf164377a61352cb8540fe
3
+ metadata.gz: bc1a570102098c6a9edaa28a78188923e524a9d68e8b433d253c23e15ea0002c
4
+ data.tar.gz: 58d5deb75e84daf67bf313ed45b04d2026c00a016ced2638193d5949227f913d
5
5
  SHA512:
6
- metadata.gz: 225d5b2eabf0381f558d7acf01c1e5b1456ebff90a09c11ded9233a58f50b95e78fb756b91164a69a675f184c9943fdf3a531a777284feaef31a5dd9a5e3ef2f
7
- data.tar.gz: e68f66bd92540d060203ad34ea7f96e16908553d7c04dac21ac8a346198681f85186cdfa2d81e09f77ff9c445d8731b31f8b43c7863d517842fba12794d1133e
6
+ metadata.gz: 25d11fd44d0effe5eb542c64a9cce7ae57420a97814a598c7b632918111591b8bd8798662f157af60ff55da4e2bd34f75c4f9426e914634496a2475e2f02fa8b
7
+ data.tar.gz: a4af0d6c232dcef4bd27d05eaff56e89326e3fa4476b028ed18b30bb8d3b4201023c059e6f3600341f8a1472dbee484435b736dd7be21c26bceaa4a8af9df4d6
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- ably-ui (8.7.0.dev.3fee7c0)
4
+ ably-ui (8.7.0.dev.9659fc3)
5
5
  view_component (>= 2.33, < 2.50)
6
6
 
7
7
  GEM
data/README.md CHANGED
@@ -239,14 +239,7 @@ yarn link @ably/ui
239
239
 
240
240
  For `ruby`:
241
241
 
242
- In `preview/Gemfile` replace the Ably UI gem version number with `path: '../'` like this:
243
-
244
- ```bash
245
- # in preview
246
- gem 'ably-ui', path: '../', require: 'ably_ui'
247
- ```
248
-
249
- and run:
242
+ In `preview/Gemfile` replace `source: "https://rubygems.pkg.github.com/ably"` with `path: '../'` and run:
250
243
 
251
244
  ```bash
252
245
  # in preview
@@ -294,14 +287,10 @@ To deploy a review app with your in-progress code, you can use the `pre-release`
294
287
  scripts/pre-release.sh
295
288
  ```
296
289
 
297
- This script is a combination of two scripts:
298
-
299
- 1. Pre-Release:
300
-
301
- - update your local dependencies for ably-ui and run a production build
302
- - release a gem and a NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
290
+ This will do a couple of things:
303
291
 
304
- 2. Update Pre-Release Version:
292
+ update your local dependencies for ably-ui and run a production build
293
+ — release a gem and a NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
305
294
 
306
295
  - update the preview app
307
296
  - commit all the above and push to origin
@@ -30,10 +30,6 @@ module AblyUi
30
30
  end
31
31
 
32
32
  module SharedAssets
33
- def ably_logo
34
- asset_path 'ably_ui/core/images/ably-logo.png'
35
- end
36
-
37
33
  def ably_stack_path
38
34
  asset_path 'ably_ui/core/images/ably-stack.svg'
39
35
  end
@@ -42,16 +38,12 @@ module AblyUi
42
38
  asset_path 'ably_ui/core/images/icon-tech-aws.svg'
43
39
  end
44
40
 
45
- def highest_performer
46
- asset_path 'ably_ui/core/images/high-performer-2022.png'
47
- end
48
-
49
- def highest_user_adoption
50
- asset_path 'ably_ui/core/images/highest-user-adoption-2022.png'
41
+ def rocket_list
42
+ asset_path 'ably_ui/core/images/rocket-list-2021.png'
51
43
  end
52
44
 
53
- def users_love_us
54
- asset_path 'ably_ui/core/images/users-love-us-2022.png'
45
+ def flexible_companies
46
+ asset_path 'ably_ui/core/images/flexible-companies.png'
55
47
  end
56
48
  end
57
49
 
@@ -46,7 +46,7 @@
46
46
  </ul>
47
47
  </span>
48
48
  <span class="flex-0">
49
- <%= link_to 'Start building', abs_url("/sign-up"), class: "ui-btn-secondary self-start mt-24" %>
49
+ <%= link_to 'Start with a free account', abs_url("/sign-up"), class: "ui-btn-secondary self-start mt-24" %>
50
50
  </span>
51
51
  </div>
52
52
  </div>
@@ -8,27 +8,7 @@
8
8
  }
9
9
 
10
10
  .ui-footer-link {
11
- @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
12
- }
13
-
14
- .ui-footer-compliance-text {
15
- font-size: 12px;
16
- }
17
-
18
- .ui-footer-tick-icon {
19
- min-width: 1.5rem;
20
- }
21
-
22
- @media (max-width: 1040px) {
23
- .ui-footer-bottom-links {
24
- @apply pb-40;
25
- }
26
- }
27
-
28
- @media screen {
29
- .ui-footer-glassdoor {
30
- display: none;
31
- }
11
+ @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
32
12
  }
33
13
  }
34
14
 
@@ -1,16 +1,18 @@
1
1
  <footer class="bg-light-grey font-sans antialiased" data-id="footer">
2
- <div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
2
+ <div class="max-w-screen-xl mx-auto py-32 sm:py-40 lg:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
3
3
  <div class="col-span-full md:col-span-2">
4
4
  <div class="flex flex-row p-menu-row-snug">
5
5
  <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
6
6
  <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
7
7
  </div>
8
- <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
9
- <p class="text-p3 py-16 font-medium p-menu-row-snug">
8
+
9
+ <div class="grid grid-cols-4">
10
+ <p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
10
11
  Easily power any realtime experience in your application via a simple API that handles everything realtime.
11
12
  </p>
12
13
  </div>
13
- <ul class="grid grid-cols-1">
14
+
15
+ <ul class="grid gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32 sm:grid-cols-2 md:grid-cols-1">
14
16
  <li class="p-menu-row-snug">
15
17
  <%= link_to 'Pub/sub messaging', abs_url("/pub-sub-messaging"), class: "ui-footer-menu-row-link" %>
16
18
  </li>
@@ -28,7 +30,8 @@
28
30
  </li>
29
31
  </ul>
30
32
  </div>
31
- <div class="col-span-full xs:col-span-3 md:col-span-1">
33
+
34
+ <div class="col-span-full sm:col-span-3 md:col-span-1">
32
35
  <h2 class="ui-footer-col-title">Ably is for</h2>
33
36
  <ul>
34
37
  <li class="p-menu-row-snug">
@@ -66,7 +69,8 @@
66
69
  </li>
67
70
  </ul>
68
71
  </div>
69
- <div class="col-span-full xs:col-span-3 md:col-span-1">
72
+
73
+ <div class="col-span-full sm:col-span-3 md:col-span-1">
70
74
  <h2 class="ui-footer-col-title">Developers</h2>
71
75
  <ul>
72
76
  <li class="p-menu-row-snug">
@@ -87,13 +91,14 @@
87
91
  <li class="p-menu-row-snug">
88
92
  <%= link_to 'SDKs', abs_url("/download"), class: "ui-footer-menu-row-link" %>
89
93
  </li>
90
- <li class="p-menu-row-snug flex items-center -mt-4">
94
+ <li class="p-menu-row-snug flex items-center">
91
95
  <a class="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">System status</a>
92
- <iframe class="w-20 h-20 mb-2" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
96
+ <iframe class="w-24 h-24 mt-4" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
93
97
  </li>
94
98
  </ul>
95
99
  </div>
96
- <div class="col-span-full xs:col-span-3 md:col-span-1">
100
+
101
+ <div class="col-span-full sm:col-span-3 md:col-span-1">
97
102
  <h2 class="ui-footer-col-title">WHY ABLY</h2>
98
103
  <ul>
99
104
  <li class="p-menu-row-snug">
@@ -116,7 +121,8 @@
116
121
  </li>
117
122
  </ul>
118
123
  </div>
119
- <div class="col-span-full xs:col-span-3 md:col-span-1">
124
+
125
+ <div class="col-span-full sm:col-span-3 md:col-span-1">
120
126
  <h2 class="ui-footer-col-title">ABOUT</h2>
121
127
  <ul>
122
128
  <li class="p-menu-row-snug">
@@ -135,7 +141,7 @@
135
141
  <%= link_to 'Open protocol policy', abs_url("/open-policy"), class: "ui-footer-menu-row-link" %>
136
142
  </li>
137
143
  <li class="p-menu-row-snug">
138
- <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
144
+ <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
139
145
  </li>
140
146
  <li class="p-menu-row-snug">
141
147
  <%= link_to 'Contact us', abs_url("/contact"), class: "ui-footer-menu-row-link" %>
@@ -143,119 +149,51 @@
143
149
  </ul>
144
150
  </div>
145
151
  </div>
152
+
146
153
  <div class="max-w-screen-xl ui-grid-px mx-auto">
147
- <hr class="border-t border-mid-grey my-0"/>
154
+ <hr class="border-t border-mid-grey" />
148
155
  </div>
149
- <%# Twitter + Glassdoor SM * above + Glassdoor XS + Badges %>
150
- <div class="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
151
- <div class="md:flex md:items-center">
152
- <div class="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
153
- <div class="">
154
- <div class="flex pb-24">
155
- <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
156
- <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
157
- </a>
158
- <a
159
- class="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
160
- href="https://www.linkedin.com/company/ably-realtime"
161
- title="Ably on LinkedIn"
162
- >
163
- <%= render(AblyUi::Core::Icon.new(name: "linkedin", size: "1.5rem")) %>
164
- </a>
165
- <a class="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/" title="Ably on Github">
166
- <%= render(AblyUi::Core::Icon.new(name: "github", size: "1.5rem")) %>
167
- </a>
168
- <a class="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5" title="Ably on Discord">
169
- <%= render(AblyUi::Core::Icon.new(name: "discord", size: "1.5rem")) %>
170
- </a>
171
- </div>
172
- </div>
173
- <%# GLASSDOOR on SM and Above %>
174
- <div class="xs:hidden sm:block ui-footer-glassdoor">
175
- <div class="flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24">
176
- <a
177
- href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
178
- class="h-24 text-cool-black hover:text-icon-glassdoor"
179
- title="Ably reviews on glassdoor"
180
- >
181
- <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
182
- </a>
183
- <div class="pl-16 text-menu3 font-light">
184
- <strong class="block font-medium">We&apos;re hiring!</strong>
185
- <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
186
- Learn more at Glassdoor
187
- </a>
188
- </div>
189
- </div>
190
- </div>
191
- </div>
192
- <%# GlassDoor on XS ONLY %>
193
- <div class="xs:block sm:hidden">
194
- <div class="border-t border-mid-grey w-full"></div>
195
- <div class="flex py-24">
196
- <a
197
- class="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
198
- href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
199
- title="Ably reviews on glassdoor"
200
- >
201
- <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
202
- </a>
203
- <div class="text-menu3 font-light">
204
- <strong class="block font-medium">We&apos;re hiring!</strong>
205
- <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
206
- Learn more at Glassdoor
207
- </a>
208
- </div>
209
- </div>
210
- </div>
211
- </div>
212
- <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
213
- <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "mr-24 h-80") %>
214
- <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 h-80") %>
215
- <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 h-80") %>
216
- </div>
217
- </div>
218
- <div class="max-w-screen-xl ui-grid-px mx-auto">
219
- <hr class="border-t border-mid-grey my-0"/>
220
- </div>
221
- <div class="max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px">
222
- <div class="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
223
- <div class="flex">
224
- <%= link_to 'Cookies', abs_url("/privacy"), class: "pr-24 ui-footer-link" %>
225
- <%= link_to 'Legals', abs_url("/legals"), class: "pr-24 ui-footer-link" %>
226
- <%= link_to 'Data Protection', abs_url("/data-protection"), class: "pr-24 ui-footer-link" %>
156
+
157
+ <div class="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px grid-cols-2">
158
+ <div class="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
159
+ <div class="inline-flex">
160
+ <%= link_to 'Cookies', abs_url("/privacy"), class: "ui-footer-link pr-24" %>
161
+ <%= link_to 'Legals', abs_url("/legals"), class: "ui-footer-link pr-24" %>
162
+ <%= link_to 'Data Protection', abs_url("/data-protection"), class: "ui-footer-link pr-24" %>
227
163
  <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
228
164
  </div>
229
- </div>
230
- <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
231
- <div class="flex mr-24">
232
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
233
- <div>
234
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
235
- <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
236
- </div>
237
- </div>
238
- <div class="flex mr-24 md:col-start-2">
239
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
240
- <div>
241
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
242
- <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
243
- </div>
244
- </div>
245
- <div class="flex mr-24 md:col-start-3">
246
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
247
- <div>
248
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
249
- <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
250
- </div>
251
- </div>
252
- <div class="flex mr-24 md:col-start-4">
253
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
254
- <div>
255
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
256
- <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
165
+
166
+ <div class="pt-32 flex items-center">
167
+ <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime">
168
+ <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
169
+ </a>
170
+ <a class="h-24 pr-24 text-cool-black hover:text-icon-linkedin" href="https://www.linkedin.com/company/ably-realtime">
171
+ <%= render(AblyUi::Core::Icon.new(name: "linkedin", size: "1.5rem")) %>
172
+ </a>
173
+ <a class="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/">
174
+ <%= render(AblyUi::Core::Icon.new(name: "github", size: "1.5rem")) %>
175
+ </a>
176
+ <a class="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5">
177
+ <%= render(AblyUi::Core::Icon.new(name: "discord", size: "1.5rem")) %>
178
+ </a>
179
+ <div class="border-l border-mid-grey h-40"></div>
180
+ <a
181
+ class="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"
182
+ href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
183
+ >
184
+ <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
185
+ </a>
186
+ <div class="pl-16 text-menu3 font-light">
187
+ <strong class="block font-medium">We&apos;re hiring!</strong>
188
+ <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">Learn more</a>
189
+ at Glassdoor
257
190
  </div>
258
191
  </div>
259
192
  </div>
193
+
194
+ <div class="md:text-right col-span-full md:col-span-1 ml-8 inline-flex md:ml-auto">
195
+ <%= image_tag(rocket_list, alt: "Rocket List 2021", class: "mr-24 w-96 h-96") %>
196
+ <%= image_tag(flexible_companies, alt: "Flexible Companies 2021", class: "w-96 h-96") %>
197
+ </div>
260
198
  </div>
261
199
  </footer>
@@ -1,3 +1,28 @@
1
- <%= link_to logo_href, class: 'block', style: "height: 2.125rem", data: { id: data_id }, **additional_link_attrs do %>
2
- <%= tag.img src: logo_url, width: "108px", alt: "Ably logo", **additional_img_attrs %>
1
+ <%= link_to logo_href, class: 'h-32' do %>
2
+ <%= tag.svg class: ["transition-colors", "text-cool-black"], data: { id: data_id }, width: "108", height: "32", viewBox: "0 0 108 32", xmlns: "http://www.w3.org/2000/svg" do %>
3
+ <path
4
+ d="M62.922 24.9786V4.08813H66.6933V11.6512C67.9709 10.435 69.6164 9.76044 71.3538 9.76044C75.4318 9.76044 79.0498 12.8674 79.0498 17.5484C79.0498 22.2293 75.4318 25.3465 71.3538 25.3465C69.5244 25.3465 67.7971 24.6209 66.5094 23.3024V24.9786H62.922ZM75.2785 17.5484C75.2785 14.932 73.4183 13.1025 70.9859 13.1025C68.6148 13.1025 66.7853 14.84 66.6933 17.3644V17.5484C66.6933 20.1648 68.5534 21.9942 70.9859 21.9942C73.4183 21.9942 75.2785 20.1648 75.2785 17.5484ZM80.7975 24.9786V4.08813H84.5688V24.9786H80.7975ZM89.8425 30.3954L92.0399 25.1523L86.0712 10.1284H90.1491L93.9511 20.6247L97.8144 10.1284H101.954L93.8591 30.4056H89.8425V30.3954ZM56.9329 10.1284V12.0191C55.6247 10.5883 53.7952 9.77066 51.9147 9.77066C47.8367 9.77066 44.2187 12.8777 44.2187 17.5586C44.2187 22.2497 47.8367 25.3465 51.9147 25.3465C53.8668 25.3465 55.7166 24.4982 57.0555 22.9754V24.9888H60.3465V10.1284H56.9329ZM56.5649 17.5484C56.5649 20.1341 54.7048 21.9942 52.2724 21.9942C49.8399 21.9942 47.9798 20.1341 47.9798 17.5484C47.9798 14.9626 49.8399 13.1025 52.2724 13.1025C54.6435 13.1025 56.473 14.8706 56.5649 17.3644V17.5484Z"
5
+ fill="currentColor"
6
+ />
7
+ <path d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z" fill="url(#<%= gradient_id_0 %>)" />
8
+ <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill="url(#<%= gradient_id_1 %>)" />
9
+ <defs>
10
+ <linearGradient id="<%= gradient_id_0 %>" x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
11
+ <stop stop-color="#FF5416" />
12
+ <stop offset="0.2535" stop-color="#FF5115" />
13
+ <stop offset="0.461" stop-color="#FF4712" />
14
+ <stop offset="0.6523" stop-color="#FF350E" />
15
+ <stop offset="0.8327" stop-color="#FF1E08" />
16
+ <stop offset="1" stop-color="#FF0000" />
17
+ </linearGradient>
18
+ <linearGradient id="<%= gradient_id_1 %>" x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
19
+ <stop stop-color="#FF5416" />
20
+ <stop offset="0.2535" stop-color="#FF5115" />
21
+ <stop offset="0.461" stop-color="#FF4712" />
22
+ <stop offset="0.6523" stop-color="#FF350E" />
23
+ <stop offset="0.8327" stop-color="#FF1E08" />
24
+ <stop offset="1" stop-color="#FF0000" />
25
+ </linearGradient>
26
+ </defs>
27
+ <% end %>
3
28
  <% end %>
@@ -1,26 +1,17 @@
1
+ require 'securerandom'
2
+
1
3
  module AblyUi
2
4
  module Core
3
5
  class Logo < ViewComponent::Base
4
6
  include AblyUi::Core::MeganavConfig
5
7
 
6
- attr_reader :href,
7
- :logo_url,
8
- :data_id,
9
- :additional_img_attrs,
10
- :additional_link_attrs
8
+ attr_reader :href, :data_id, :gradient_id_0, :gradient_id_1
11
9
 
12
- def initialize(
13
- href:,
14
- logo_url:,
15
- data_id: '',
16
- additional_img_attrs: {},
17
- additional_link_attrs: {}
18
- )
10
+ def initialize(data_id: '', href:)
19
11
  @data_id = data_id
20
12
  @href = href
21
- @logo_url = logo_url
22
- @additional_img_attrs = additional_img_attrs
23
- @additional_link_attrs = additional_link_attrs
13
+ @gradient_id_0 = "paint_linear_#{SecureRandom.uuid}"
14
+ @gradient_id_1 = "paint_linear_#{SecureRandom.uuid}"
24
15
  end
25
16
 
26
17
  def logo_href
@@ -30,7 +30,7 @@
30
30
  },
31
31
  "panels": [
32
32
  { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
33
- { "label": "Solutions", "shortLabel": "Solutions", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
33
+ { "label": "Use Cases & Solutions", "shortLabel": "Use Cases", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
34
34
  { "label": "Company", "shortLabel": "Company", "id": "company-panel", "component": "MeganavContentCompany" },
35
35
  { "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }
36
36
  ]
@@ -3,7 +3,7 @@
3
3
 
4
4
  <div class="ui-meganav ui-grid-px">
5
5
  <div className="mr-24">
6
- <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link, logo_url: ably_logo)) %>
6
+ <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link)) %>
7
7
  </div>
8
8
  <%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %>
9
9
 
@@ -6,7 +6,6 @@ module AblyUi
6
6
  class Meganav < ViewComponent::Base
7
7
  include MeganavConfig
8
8
  include Util
9
- include SharedAssets
10
9
  attr_reader :options, :login_link, :logo_link, :url_base
11
10
 
12
11
  renders_one :notice, AblyUi::Core::Notice
@@ -36,8 +35,8 @@ module AblyUi
36
35
  class: 'AblyUi::Core::MeganavContentPlatform'
37
36
  },
38
37
  {
39
- label: 'Solutions',
40
- short_label: 'Solutions',
38
+ label: 'Use Cases & Solutions',
39
+ short_label: 'Use Cases',
41
40
  id: 'use-cases-panel',
42
41
  class: 'AblyUi::Core::MeganavContentUseCases'
43
42
  },
@@ -72,15 +72,6 @@
72
72
  </div>
73
73
  <% end %>
74
74
  </li>
75
- <li>
76
- <%= link_to abs_url("/events"), class: "ui-meganav-media-with-image group" do %>
77
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-events-col", size: "2.5rem")) %>
78
- <div class="flex flex-col justify-center">
79
- <p class="ui-meganav-media-heading">Events</p>
80
- <p class="ui-meganav-media-copy">Join Ably at upcoming events.</p>
81
- </div>
82
- <% end %>
83
- </li>
84
75
  </ul>
85
76
  </div>
86
77
 
@@ -16,20 +16,20 @@
16
16
  <% end %>
17
17
  </li>
18
18
  <li>
19
- <%= link_to abs_url("/docs/quick-start-guide"), class: "ui-meganav-media-with-image group" do %>
20
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
19
+ <%= link_to abs_url("/docs/key-concepts"), class: "ui-meganav-media-with-image group" do %>
20
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-lightbulb-col", size: "2.5rem")) %>
21
21
  <div class="flex flex-col justify-center">
22
- <p class="ui-meganav-media-heading">Quickstart guides</p>
23
- <p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
22
+ <p class="ui-meganav-media-heading">Concepts</p>
23
+ <p class="ui-meganav-media-copy">Read about core Ably platform concepts.</p>
24
24
  </div>
25
25
  <% end %>
26
26
  </li>
27
27
  <li>
28
- <%= link_to abs_url("/integrations"), class: "ui-meganav-media-with-image group" do %>
29
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-col", size: "2.5rem")) %>
28
+ <%= link_to abs_url("/docs/quick-start-guide"), class: "ui-meganav-media-with-image group" do %>
29
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
30
30
  <div class="flex flex-col justify-center">
31
- <p class="ui-meganav-media-heading">Integrations</p>
32
- <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
31
+ <p class="ui-meganav-media-heading">Quickstart guides</p>
32
+ <p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
33
33
  </div>
34
34
  <% end %>
35
35
  </li>
@@ -57,11 +57,11 @@
57
57
  <% end %>
58
58
  </li>
59
59
  <li>
60
- <%= link_to abs_url("/reference-guide-chat"), class: "ui-meganav-media-with-image group" do %>
61
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-col", size: "2.5rem")) %>
60
+ <%= link_to abs_url("/integrations"), class: "ui-meganav-media-with-image group" do %>
61
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-col", size: "2.5rem")) %>
62
62
  <div class="flex flex-col justify-center">
63
- <p class="ui-meganav-media-heading">Chat apps reference guide</p>
64
- <p class="ui-meganav-media-copy">Learn how to build chat apps with Ably.</p>
63
+ <p class="ui-meganav-media-heading">Integrations</p>
64
+ <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
65
65
  </div>
66
66
  <% end %>
67
67
  </li>
@@ -36,6 +36,12 @@
36
36
  <p class="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
37
37
  <% end %>
38
38
  </li>
39
+ <li>
40
+ <%= link_to abs_url("/examples/live-charts"), class: "ui-meganav-media group" do %>
41
+ <p class="ui-meganav-media-heading">Live Charts</p>
42
+ <p class="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
43
+ <% end %>
44
+ </li>
39
45
  <li>
40
46
  <%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %>
41
47
  <p class="ui-meganav-media-heading">Live Cursors</p>
@@ -48,12 +54,6 @@
48
54
  <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
49
55
  <% end %>
50
56
  </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>
55
- <% end %>
56
- </li>
57
57
  </ul>
58
58
 
59
59
  <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"), text_size: 'text-p3')) do %>Explore all live examples<% end %>
@@ -7,38 +7,38 @@
7
7
  </h3>
8
8
  <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
9
9
  <li>
10
- <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
11
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
10
+ <%= link_to abs_url("/solutions/live-updates-results-metrics"), class: "ui-meganav-media-with-image group" do %>
11
+ <%= render(AblyUi::Core::Icon.new(name: "icon-live-updates-results-metrics-col", size: "2.5rem")) %>
12
12
  <div class="flex flex-col justify-center">
13
- <p class="ui-meganav-media-heading">Chat</p>
14
- <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
13
+ <p class="ui-meganav-media-heading">Live updates, results & metrics</p>
14
+ <p class="ui-meganav-media-copy">Deliver live updates to keep users informed.</p>
15
15
  </div>
16
16
  <% end %>
17
17
  </li>
18
18
  <li>
19
- <%= link_to abs_url("/solutions/multiplayer-collaboration"), class: "ui-meganav-media-with-image group" do %>
20
- <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
19
+ <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
20
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
21
21
  <div class="flex flex-col justify-center">
22
- <p class="ui-meganav-media-heading">Multiplayer Collaboration</p>
23
- <p class="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
22
+ <p class="ui-meganav-media-heading">Chat</p>
23
+ <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
24
24
  </div>
25
25
  <% end %>
26
26
  </li>
27
27
  <li>
28
- <%= link_to abs_url("/solutions/data-broadcast"), class: "ui-meganav-media-with-image group" do %>
29
- <%= render(AblyUi::Core::Icon.new(name: "icon-live-updates-results-metrics-col", size: "2.5rem")) %>
28
+ <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media-with-image group" do %>
29
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events-col", size: "2.5rem")) %>
30
30
  <div class="flex flex-col justify-center">
31
- <p class="ui-meganav-media-heading">Data Broadcast</p>
32
- <p class="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
31
+ <p class="ui-meganav-media-heading">Virtual Events</p>
32
+ <p class="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
33
33
  </div>
34
34
  <% end %>
35
35
  </li>
36
36
  <li>
37
- <%= link_to abs_url("/solutions/data-synchronization"), class: "ui-meganav-media-with-image group" do %>
38
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events", size: "2.5rem")) %>
37
+ <%= link_to abs_url("/solutions/multi-user-virtual-spaces"), class: "ui-meganav-media-with-image group" do %>
38
+ <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
39
39
  <div class="flex flex-col justify-center">
40
- <p class="ui-meganav-media-heading">Data Synchronization</p>
41
- <p class="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
40
+ <p class="ui-meganav-media-heading">Multi-user virtual spaces</p>
41
+ <p class="ui-meganav-media-copy">Build live and interactive multi-user applications.</p>
42
42
  </div>
43
43
  <% end %>
44
44
  </li>