ably-ui 8.7.0.dev.79f6c9f → 8.7.0.dev.80c4fae
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.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/README.md +4 -15
- data/lib/ably_ui/core/core.rb +4 -8
- data/lib/ably_ui/core/footer/component.css +1 -21
- data/lib/ably_ui/core/footer/footer.html.erb +56 -118
- data/lib/ably_ui/core/logo/logo.rb +4 -12
- data/lib/ably_ui/core/meganav/component.json +1 -1
- data/lib/ably_ui/core/meganav/meganav.rb +2 -2
- data/lib/ably_ui/core/meganav_content_company/meganav_content_company.html.erb +0 -9
- data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +12 -12
- data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +6 -6
- data/lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb +38 -42
- data/lib/ably_ui/core/notice/component.js +1 -1
- data/lib/ably_ui/core/sprites.svg +0 -84
- data/lib/ably_ui/react/connect_state_wrapper/component.js +1 -0
- data/lib/ably_ui/react/scripts.js +1 -0
- data/lib/ably_ui/version.rb +1 -1
- metadata +4 -5
- data/lib/ably_ui/core/images/high-performer-2022.png +0 -0
- data/lib/ably_ui/core/images/highest-user-adoption-2022.png +0 -0
- data/lib/ably_ui/core/images/users-love-us-2022.png +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9a583427f76c3206b1687e366f629893d59546a43d6d9a6f8635dede9b95a6e0
|
|
4
|
+
data.tar.gz: f43b9148733533077d763727c29b68dd761d411801cde269baf1235b8fa1fd15
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: bc4a081348a5c7c7e1f0c91a65e3d33bfa7921f72e243e3340eba719a9f43cd7010338c7041455b72b712cd6f6db55bc70824759742c8d9e6e6f213feeec210d
|
|
7
|
+
data.tar.gz: 6e05ab8a248d3c9ef45cd1e38c5b92012e42fd5b556ef077cf5beca2b91f1004c0f5ed09b8aa1b9f5d8ed695c41cce2ca76c4af494b0ff860f9a403d4a331d40
|
data/Gemfile.lock
CHANGED
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
|
|
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
|
|
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
|
-
|
|
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
|
data/lib/ably_ui/core/core.rb
CHANGED
|
@@ -42,16 +42,12 @@ module AblyUi
|
|
|
42
42
|
asset_path 'ably_ui/core/images/icon-tech-aws.svg'
|
|
43
43
|
end
|
|
44
44
|
|
|
45
|
-
def
|
|
46
|
-
asset_path 'ably_ui/core/images/
|
|
45
|
+
def rocket_list
|
|
46
|
+
asset_path 'ably_ui/core/images/rocket-list-2021.png'
|
|
47
47
|
end
|
|
48
48
|
|
|
49
|
-
def
|
|
50
|
-
asset_path 'ably_ui/core/images/
|
|
51
|
-
end
|
|
52
|
-
|
|
53
|
-
def users_love_us
|
|
54
|
-
asset_path 'ably_ui/core/images/users-love-us-2022.png'
|
|
49
|
+
def flexible_companies
|
|
50
|
+
asset_path 'ably_ui/core/images/flexible-companies.png'
|
|
55
51
|
end
|
|
56
52
|
end
|
|
57
53
|
|
|
@@ -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
|
|
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
|
-
|
|
9
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
154
|
+
<hr class="border-t border-mid-grey" />
|
|
148
155
|
</div>
|
|
149
|
-
|
|
150
|
-
<div class="max-w-screen-xl mx-auto py-
|
|
151
|
-
<div class="
|
|
152
|
-
<div class="
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
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'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'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
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
</
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
<
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
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'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,21 +1,13 @@
|
|
|
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, :logo_url, :data_id, :additional_img_attrs, :additional_link_attrs
|
|
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(href:, logo_url:, data_id: '', additional_img_attrs: {}, additional_link_attrs: {})
|
|
19
11
|
@data_id = data_id
|
|
20
12
|
@href = href
|
|
21
13
|
@logo_url = logo_url
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
},
|
|
31
31
|
"panels": [
|
|
32
32
|
{ "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
|
|
33
|
-
{ "label": "Solutions", "shortLabel": "
|
|
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
|
]
|
|
@@ -36,8 +36,8 @@ module AblyUi
|
|
|
36
36
|
class: 'AblyUi::Core::MeganavContentPlatform'
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
|
-
label: 'Solutions',
|
|
40
|
-
short_label: '
|
|
39
|
+
label: 'Use Cases & Solutions',
|
|
40
|
+
short_label: 'Use Cases',
|
|
41
41
|
id: 'use-cases-panel',
|
|
42
42
|
class: 'AblyUi::Core::MeganavContentUseCases'
|
|
43
43
|
},
|
|
@@ -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/
|
|
20
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-
|
|
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">
|
|
23
|
-
<p class="ui-meganav-media-copy">
|
|
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("/
|
|
29
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-
|
|
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">
|
|
32
|
-
<p class="ui-meganav-media-copy">
|
|
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("/
|
|
61
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-
|
|
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">
|
|
64
|
-
<p class="ui-meganav-media-copy">
|
|
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 %>
|
|
@@ -3,68 +3,49 @@
|
|
|
3
3
|
<section class="grid grid-cols-12 ui-grid-gap-x w-full">
|
|
4
4
|
<div class="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
|
|
5
5
|
<h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
|
|
6
|
-
|
|
6
|
+
Use cases
|
|
7
7
|
</h3>
|
|
8
8
|
<ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
|
|
9
|
-
|
|
10
9
|
<li>
|
|
11
|
-
<%= link_to abs_url("/solutions/
|
|
12
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-
|
|
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")) %>
|
|
13
12
|
<div class="flex flex-col justify-center">
|
|
14
|
-
<p class="ui-meganav-media-heading">
|
|
15
|
-
<p class="ui-meganav-media-copy">Deliver
|
|
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>
|
|
16
15
|
</div>
|
|
17
16
|
<% end %>
|
|
18
17
|
</li>
|
|
19
18
|
<li>
|
|
20
|
-
<%= link_to abs_url("/solutions/
|
|
21
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-
|
|
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")) %>
|
|
22
21
|
<div class="flex flex-col justify-center">
|
|
23
|
-
<p class="ui-meganav-media-heading">
|
|
24
|
-
<p class="ui-meganav-media-copy">
|
|
22
|
+
<p class="ui-meganav-media-heading">Chat</p>
|
|
23
|
+
<p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
|
|
25
24
|
</div>
|
|
26
25
|
<% end %>
|
|
27
26
|
</li>
|
|
28
27
|
<li>
|
|
29
|
-
<%= link_to abs_url("/solutions/
|
|
30
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-
|
|
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")) %>
|
|
31
30
|
<div class="flex flex-col justify-center">
|
|
32
|
-
<p class="ui-meganav-media-heading">
|
|
33
|
-
<p class="ui-meganav-media-copy">
|
|
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>
|
|
34
33
|
</div>
|
|
35
34
|
<% end %>
|
|
36
35
|
</li>
|
|
37
36
|
<li>
|
|
38
|
-
<%= link_to abs_url("/solutions/
|
|
39
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-
|
|
40
|
-
<div class="flex flex-col justify-center">
|
|
41
|
-
<p class="ui-meganav-media-heading">Data Synchronization</p>
|
|
42
|
-
<p class="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
|
|
43
|
-
</div>
|
|
44
|
-
<% end %>
|
|
45
|
-
</li>
|
|
46
|
-
<li>
|
|
47
|
-
<%= link_to abs_url("/push-notifications"), class: "ui-meganav-media-with-image group" do %>
|
|
48
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-push-notifications-col", size: "2.5rem")) %>
|
|
49
|
-
<div class="flex flex-col justify-center">
|
|
50
|
-
<p class="ui-meganav-media-heading">Notifications</p>
|
|
51
|
-
<p class="ui-meganav-media-copy">Deliver cross-platform push notifications with a simple unified API.</p>
|
|
52
|
-
</div>
|
|
53
|
-
<% end %>
|
|
54
|
-
</li>
|
|
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")) %>
|
|
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")) %>
|
|
58
39
|
<div class="flex flex-col justify-center">
|
|
59
|
-
<p class="ui-meganav-media-heading">
|
|
60
|
-
<p class="ui-meganav-media-copy">
|
|
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>
|
|
61
42
|
</div>
|
|
62
43
|
<% end %>
|
|
63
44
|
</li>
|
|
64
45
|
</ul>
|
|
65
46
|
</div>
|
|
66
47
|
|
|
67
|
-
<div class="col-span-full md:col-span-4 pt-24 pb-
|
|
48
|
+
<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">
|
|
68
49
|
<h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
|
|
69
50
|
Industry
|
|
70
51
|
</h3>
|
|
@@ -99,11 +80,6 @@
|
|
|
99
80
|
<p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
|
|
100
81
|
<% end %>
|
|
101
82
|
</li>
|
|
102
|
-
</ul>
|
|
103
|
-
</div>
|
|
104
|
-
|
|
105
|
-
<div class="col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
|
|
106
|
-
<ul aria-labelledby="meganav-use-cases-panel-solutions" class="mt-0 md:mt-40">
|
|
107
83
|
<li>
|
|
108
84
|
<%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
|
|
109
85
|
<p class="ui-meganav-media-heading">eCommerce & Retail</p>
|
|
@@ -130,6 +106,26 @@
|
|
|
130
106
|
</li>
|
|
131
107
|
</ul>
|
|
132
108
|
</div>
|
|
109
|
+
|
|
110
|
+
<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">
|
|
111
|
+
<h3 class="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
|
|
112
|
+
Solutions
|
|
113
|
+
</h3>
|
|
114
|
+
<ul aria-labelledby="meganav-use-cases-panel-solutions">
|
|
115
|
+
<li>
|
|
116
|
+
<%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
|
|
117
|
+
<p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
|
|
118
|
+
<p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
|
|
119
|
+
<% end %>
|
|
120
|
+
</li>
|
|
121
|
+
<li>
|
|
122
|
+
<%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
|
|
123
|
+
<p class="ui-meganav-media-heading">Asset Tracking</p>
|
|
124
|
+
<p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
|
|
125
|
+
<% end %>
|
|
126
|
+
</li>
|
|
127
|
+
</ul>
|
|
128
|
+
</div>
|
|
133
129
|
</section>
|
|
134
130
|
<div class="ui-meganav-content-spacer"></div>
|
|
135
131
|
</div>
|