ably-ui 8.7.0.dev.8be09a5 → 8.7.0.dev.9f7172d
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/README.md +8 -1
- data/lib/ably_ui/core/core.rb +12 -4
- data/lib/ably_ui/core/footer/component.css +20 -0
- data/lib/ably_ui/core/footer/footer.html.erb +116 -54
- data/lib/ably_ui/core/images/ably-logo.png +0 -0
- 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
- data/lib/ably_ui/core/logo/logo.html.erb +2 -27
- data/lib/ably_ui/core/logo/logo.rb +15 -6
- data/lib/ably_ui/core/meganav/component.json +1 -1
- data/lib/ably_ui/core/meganav/meganav.html.erb +1 -1
- data/lib/ably_ui/core/meganav/meganav.rb +3 -2
- data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +12 -12
- data/lib/ably_ui/core/notice/component.js +1 -1
- data/lib/ably_ui/core/sprites.svg +23 -3
- data/lib/ably_ui/core/styles.css +1 -1
- data/lib/ably_ui/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c6bd603dd950d25092acb03c7208ce5d089029e0b459162ac6e0054f78397d2b
|
|
4
|
+
data.tar.gz: 2e22b8d41be87cc1070ba29258d3e7b6db203c61f4631a9cc8024ef645287e7a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 63bb0901e58e4edf048efdca194081f5e7c1d0907d7ca8f2253c9bac019e806076e825caaa2fc50425029c2260978b762404884dee176c2e7c04a2fbb2000c37
|
|
7
|
+
data.tar.gz: d372ea8b62064a7664665336eb57bc9a96802528fc24db0c539b7399544b3539082bad6b3e82965e8717125381a543fc51e0f76e3a6540cb6603d0b8990e2288
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
|
@@ -239,7 +239,14 @@ yarn link @ably/ui
|
|
|
239
239
|
|
|
240
240
|
For `ruby`:
|
|
241
241
|
|
|
242
|
-
In `preview/Gemfile` replace
|
|
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:
|
|
243
250
|
|
|
244
251
|
```bash
|
|
245
252
|
# in preview
|
data/lib/ably_ui/core/core.rb
CHANGED
|
@@ -30,6 +30,10 @@ 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
|
+
|
|
33
37
|
def ably_stack_path
|
|
34
38
|
asset_path 'ably_ui/core/images/ably-stack.svg'
|
|
35
39
|
end
|
|
@@ -38,12 +42,16 @@ module AblyUi
|
|
|
38
42
|
asset_path 'ably_ui/core/images/icon-tech-aws.svg'
|
|
39
43
|
end
|
|
40
44
|
|
|
41
|
-
def
|
|
42
|
-
asset_path 'ably_ui/core/images/
|
|
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'
|
|
43
51
|
end
|
|
44
52
|
|
|
45
|
-
def
|
|
46
|
-
asset_path 'ably_ui/core/images/
|
|
53
|
+
def users_love_us
|
|
54
|
+
asset_path 'ably_ui/core/images/users-love-us-2022.png'
|
|
47
55
|
end
|
|
48
56
|
end
|
|
49
57
|
|
|
@@ -10,5 +10,25 @@
|
|
|
10
10
|
.ui-footer-link {
|
|
11
11
|
@apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
|
|
12
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
|
+
}
|
|
32
|
+
}
|
|
13
33
|
}
|
|
14
34
|
|
|
@@ -1,18 +1,16 @@
|
|
|
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 md: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
|
-
|
|
10
|
-
<p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
|
|
8
|
+
<div class="grid grid-cols-4 md:col-span-2">
|
|
9
|
+
<p class="text-p3 py-16 font-medium p-menu-row-snug col-span-2 md:col-span-3">
|
|
11
10
|
Easily power any realtime experience in your application via a simple API that handles everything realtime.
|
|
12
11
|
</p>
|
|
13
12
|
</div>
|
|
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">
|
|
13
|
+
<ul class="grid xs:grid-cols-2 gap-x-8 sm:gap-x-24 xl:gap-x-32 md:grid-cols-1">
|
|
16
14
|
<li class="p-menu-row-snug">
|
|
17
15
|
<%= link_to 'Pub/sub messaging', abs_url("/pub-sub-messaging"), class: "ui-footer-menu-row-link" %>
|
|
18
16
|
</li>
|
|
@@ -30,8 +28,7 @@
|
|
|
30
28
|
</li>
|
|
31
29
|
</ul>
|
|
32
30
|
</div>
|
|
33
|
-
|
|
34
|
-
<div class="col-span-full sm:col-span-3 md:col-span-1">
|
|
31
|
+
<div class="col-span-full xs:col-span-3 md:col-span-1">
|
|
35
32
|
<h2 class="ui-footer-col-title">Ably is for</h2>
|
|
36
33
|
<ul>
|
|
37
34
|
<li class="p-menu-row-snug">
|
|
@@ -69,8 +66,7 @@
|
|
|
69
66
|
</li>
|
|
70
67
|
</ul>
|
|
71
68
|
</div>
|
|
72
|
-
|
|
73
|
-
<div class="col-span-full sm:col-span-3 md:col-span-1">
|
|
69
|
+
<div class="col-span-full xs:col-span-3 md:col-span-1">
|
|
74
70
|
<h2 class="ui-footer-col-title">Developers</h2>
|
|
75
71
|
<ul>
|
|
76
72
|
<li class="p-menu-row-snug">
|
|
@@ -97,8 +93,7 @@
|
|
|
97
93
|
</li>
|
|
98
94
|
</ul>
|
|
99
95
|
</div>
|
|
100
|
-
|
|
101
|
-
<div class="col-span-full sm:col-span-3 md:col-span-1">
|
|
96
|
+
<div class="col-span-full xs:col-span-3 md:col-span-1">
|
|
102
97
|
<h2 class="ui-footer-col-title">WHY ABLY</h2>
|
|
103
98
|
<ul>
|
|
104
99
|
<li class="p-menu-row-snug">
|
|
@@ -121,8 +116,7 @@
|
|
|
121
116
|
</li>
|
|
122
117
|
</ul>
|
|
123
118
|
</div>
|
|
124
|
-
|
|
125
|
-
<div class="col-span-full sm:col-span-3 md:col-span-1">
|
|
119
|
+
<div class="col-span-full xs:col-span-3 md:col-span-1">
|
|
126
120
|
<h2 class="ui-footer-col-title">ABOUT</h2>
|
|
127
121
|
<ul>
|
|
128
122
|
<li class="p-menu-row-snug">
|
|
@@ -141,7 +135,7 @@
|
|
|
141
135
|
<%= link_to 'Open protocol policy', abs_url("/open-policy"), class: "ui-footer-menu-row-link" %>
|
|
142
136
|
</li>
|
|
143
137
|
<li class="p-menu-row-snug">
|
|
144
|
-
|
|
138
|
+
<%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
|
|
145
139
|
</li>
|
|
146
140
|
<li class="p-menu-row-snug">
|
|
147
141
|
<%= link_to 'Contact us', abs_url("/contact"), class: "ui-footer-menu-row-link" %>
|
|
@@ -149,51 +143,119 @@
|
|
|
149
143
|
</ul>
|
|
150
144
|
</div>
|
|
151
145
|
</div>
|
|
152
|
-
|
|
153
146
|
<div class="max-w-screen-xl ui-grid-px mx-auto">
|
|
154
|
-
<hr class="border-t border-mid-grey"
|
|
147
|
+
<hr class="border-t border-mid-grey my-0"/>
|
|
155
148
|
</div>
|
|
156
|
-
|
|
157
|
-
<div class="max-w-screen-xl mx-auto py-
|
|
158
|
-
<div class="flex
|
|
159
|
-
<div class="
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
149
|
+
<%# Twitter + Glassdoor SM * above + Glassdoor XS + Badges %>
|
|
150
|
+
<div class="max-w-screen-xl mx-auto py-32 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'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>
|
|
164
191
|
</div>
|
|
165
|
-
|
|
166
|
-
<div class="
|
|
167
|
-
<
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
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
|
|
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-24 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>
|
|
190
209
|
</div>
|
|
191
210
|
</div>
|
|
192
211
|
</div>
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
<%= image_tag(
|
|
196
|
-
<%= image_tag(
|
|
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 w-96 h-96") %>
|
|
214
|
+
<%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 w-96 h-96") %>
|
|
215
|
+
<%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 w-96 h-96") %>
|
|
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" %>
|
|
227
|
+
<%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
<div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-0 ">
|
|
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")) %>
|
|
240
|
+
<div>
|
|
241
|
+
<p class="ui-footer-compliance-text font-medium">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")) %>
|
|
247
|
+
<div>
|
|
248
|
+
<p class="ui-footer-compliance-text font-medium">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")) %>
|
|
254
|
+
<div>
|
|
255
|
+
<p class="ui-footer-compliance-text font-medium">256-bit AES</p>
|
|
256
|
+
<p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
197
259
|
</div>
|
|
198
260
|
</div>
|
|
199
261
|
</footer>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,28 +1,3 @@
|
|
|
1
|
-
<%= link_to logo_href, class: '
|
|
2
|
-
<%= tag.
|
|
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 %>
|
|
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 %>
|
|
28
3
|
<% end %>
|
|
@@ -1,17 +1,26 @@
|
|
|
1
|
-
require 'securerandom'
|
|
2
|
-
|
|
3
1
|
module AblyUi
|
|
4
2
|
module Core
|
|
5
3
|
class Logo < ViewComponent::Base
|
|
6
4
|
include AblyUi::Core::MeganavConfig
|
|
7
5
|
|
|
8
|
-
attr_reader :href,
|
|
6
|
+
attr_reader :href,
|
|
7
|
+
:logo_url,
|
|
8
|
+
:data_id,
|
|
9
|
+
:additional_img_attrs,
|
|
10
|
+
:additional_link_attrs
|
|
9
11
|
|
|
10
|
-
def initialize(
|
|
12
|
+
def initialize(
|
|
13
|
+
href:,
|
|
14
|
+
logo_url:,
|
|
15
|
+
data_id: '',
|
|
16
|
+
additional_img_attrs: {},
|
|
17
|
+
additional_link_attrs: {}
|
|
18
|
+
)
|
|
11
19
|
@data_id = data_id
|
|
12
20
|
@href = href
|
|
13
|
-
@
|
|
14
|
-
@
|
|
21
|
+
@logo_url = logo_url
|
|
22
|
+
@additional_img_attrs = additional_img_attrs
|
|
23
|
+
@additional_link_attrs = additional_link_attrs
|
|
15
24
|
end
|
|
16
25
|
|
|
17
26
|
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": "
|
|
33
|
+
{ "label": "Solutions", "shortLabel": "Solutions", "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)) %>
|
|
6
|
+
<%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link, logo_url: ably_logo)) %>
|
|
7
7
|
</div>
|
|
8
8
|
<%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %>
|
|
9
9
|
|
|
@@ -6,6 +6,7 @@ module AblyUi
|
|
|
6
6
|
class Meganav < ViewComponent::Base
|
|
7
7
|
include MeganavConfig
|
|
8
8
|
include Util
|
|
9
|
+
include SharedAssets
|
|
9
10
|
attr_reader :options, :login_link, :logo_link, :url_base
|
|
10
11
|
|
|
11
12
|
renders_one :notice, AblyUi::Core::Notice
|
|
@@ -35,8 +36,8 @@ module AblyUi
|
|
|
35
36
|
class: 'AblyUi::Core::MeganavContentPlatform'
|
|
36
37
|
},
|
|
37
38
|
{
|
|
38
|
-
label: '
|
|
39
|
-
short_label: '
|
|
39
|
+
label: 'Solutions',
|
|
40
|
+
short_label: 'Solutions',
|
|
40
41
|
id: 'use-cases-panel',
|
|
41
42
|
class: 'AblyUi::Core::MeganavContentUseCases'
|
|
42
43
|
},
|
|
@@ -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/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")) %>
|
|
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">Quickstart guides</p>
|
|
23
|
+
<p class="ui-meganav-media-copy">Documentation to help you get started quickly.</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("/integrations"), class: "ui-meganav-media-with-image group" do %>
|
|
29
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-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">Integrations</p>
|
|
32
|
+
<p class="ui-meganav-media-copy">Find out more about Ably integrations. </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("/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")) %>
|
|
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">Chat apps reference guide</p>
|
|
64
|
+
<p class="ui-meganav-media-copy">Learn how to build chat apps with Ably.</p>
|
|
65
65
|
</div>
|
|
66
66
|
<% end %>
|
|
67
67
|
</li>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):"function"==typeof define&&define.amd?define([,,,,,],t):"object"==typeof exports?exports.AblyUi=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Notice=t(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(this,(function(e,t,r,n,o,i){return(()=>{"use strict";var c={6357:t=>{t.exports=e},9349:e=>{e.exports=t},2040:e=>{e.exports=r},3474:e=>{e.exports=n},9281:e=>{e.exports=o},5044:e=>{e.exports=i}},a={};function u(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return c[e](r,r.exports,u),r.exports}u.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return u.d(t,{a:t}),t},u.d=(e,t)=>{for(var r in t)u.o(t,r)&&!u.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},u.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var l={};return(()=>{u.d(l,{default:()=>
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):"function"==typeof define&&define.amd?define([,,,,,],t):"object"==typeof exports?exports.AblyUi=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Notice=t(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(this,(function(e,t,r,n,o,i){return(()=>{"use strict";var c={6357:t=>{t.exports=e},9349:e=>{e.exports=t},2040:e=>{e.exports=r},3474:e=>{e.exports=n},9281:e=>{e.exports=o},5044:e=>{e.exports=i}},a={};function u(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return c[e](r,r.exports,u),r.exports}u.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return u.d(t,{a:t}),t},u.d=(e,t)=>{for(var r in t)u.o(t,r)&&!u.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},u.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var l={};return(()=>{u.d(l,{default:()=>M});var e=u(9349),t=u.n(e),r=u(2040),n=u.n(r),o=u(9281),i=u.n(o),c=u(6357),a=u.n(c),s=u(3474),f=u.n(s);let p=(e=21)=>{let t="",r=e;for(;r--;)t+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[64*Math.random()|0];return t};u(5044);var d=["name","size","color","additionalCSS"];function y(){return y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},y.apply(this,arguments)}var m=function(e){var t=e.name,r=e.size,n=void 0===r?"0.75rem":r,o=e.color,c=void 0===o?"":o,a=e.additionalCSS,u=void 0===a?"":a,l=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(e,d);return i().createElement("svg",y({className:"".concat(c," ").concat(u),style:{width:n,height:n}},l),i().createElement("use",{xlinkHref:"#sprite-".concat(t)}))};m.propTypes={name:f().string.isRequired,size:f().string,color:f().string,additionalCSS:f().string};const b=m;function v(){return v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},v.apply(this,arguments)}function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function O(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null!=r){var n,o,i=[],c=!0,a=!1;try{for(r=r.call(e);!(c=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{c||null==r.return||r.return()}finally{if(a)throw o}}return i}}(e,t)||x(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){return function(e){if(Array.isArray(e))return S(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||x(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(e,t){if(e){if("string"==typeof e)return S(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?S(e,t):void 0}}function S(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var E="ui-flashes",P={items:[]},A=(w({},"flashes",(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:P,t=arguments.length>1?arguments[1]:void 0;if("flash/push"===t.type){var r=Array.isArray(t.payload)?t.payload:[t.payload];return{items:[].concat(j(e.items),j(r))}}return e})),{type:f().oneOf(["error","success","notice","info","alert"]),content:f().string}),k={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"},q={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"},T=["success","info","notice"],C=function(e){var t=e.id,r=e.type,n=e.content,c=e.removeFlash,u=(0,o.useRef)(null),l=O((0,o.useState)(!1),2),s=l[0],f=l[1],p=O((0,o.useState)(0),2),d=p[0],y=p[1],m=O((0,o.useState)(!1),2),v=m[0],h=m[1],g=function(){u.current&&y(u.current.getBoundingClientRect().height),f(!0),setTimeout((function(){c(t)}),100)};(0,o.useEffect)((function(){return h(!0)}),[]),function(e,t){var r=(0,o.useRef)(null);(0,o.useEffect)((function(){return T.includes(e)&&(r.current=setTimeout((function(){t()}),8e3)),function(){r.current&&clearTimeout(r.current)}}),[])}(r,g);var w,j=v&&!s;w=d&&!s?{height:"".concat(d,"px")}:s?{height:0,marginTop:0,zIndex:-1}:{};var x=a().sanitize(n,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]}),S={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"},E={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return i().createElement("div",{className:"ui-flash-message ui-grid-px ".concat(j?"ui-flash-message-enter":""),style:w,ref:u,"data-id":"ui-flash"},i().createElement("div",{className:"".concat(k[r]," p-32 flex align-center rounded shadow-container-subtle")},S[r]&&i().createElement(b,{name:S[r],color:E[r],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),i().createElement("p",{className:"ui-flash-text ".concat(q[r]),dangerouslySetInnerHTML:{__html:x}}),i().createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:g},i().createElement(b,{name:"icon-gui-close",color:E[r],size:"1.5rem",additionalCSS:"transition-colors"}))))};C.propTypes=g({},A);var L=function(e){var t=e.flashes,r=O((0,o.useState)([]),2),n=r[0],c=r[1],a=function(e){return c((function(t){return t.filter((function(t){return t.id!==e}))}))};return(0,o.useEffect)((function(){c((function(e){return[].concat(j(e),j(((null==t?void 0:t.items)||[]).map((function(e){return g(g({},e),{},{id:p(),removed:!1})}))))}))}),[t]),i().createElement("div",{className:"ui-flash","data-id":E},n.filter((function(e){return!e.removed})).map((function(e){return i().createElement(C,v({removeFlash:a,key:e.id},e))})))};L.propTypes={flashes:f().shape({items:f().arrayOf(f().shape(A))})};function z(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function D(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}f().arrayOf(f().arrayOf(f().string));var I=function(e){var t=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))}(E);t&&(t.style.marginTop=e?"4rem":null)},N=function(e){window.matchMedia("(min-width: 65rem)").matches?e.style.display=null:e.style.display="none"},U=function(e){e.style.maxHeight=0,e.style.overflow="hidden",I(!1)},_=function(e){e.style.maxHeight=null,e.style.overflow=null,I(!0)};const M=function(e){var r=e.bannerContainer,o=e.cookieId,i=e.noticeId,c=e.options;if("undefined"==typeof window)return function(){};if(!r)return console.warn("A Notice component was initited but no notice container was found."),function(){};if(function(e,r){return(t().get(e)||"").includes(r)}(o,i))return function(){};N(r),_(r);var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?z(Object(r),!0).forEach((function(t){D(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):z(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({collapse:!0},c),u=a.collapse?function(e){window.scrollY>5&&U(e);var t=n()((function(){window.scrollY>5?U(e):e.style.overflow&&_(e)}),100);return document.addEventListener("scroll",t),function(){return document.removeEventListener("scroll",t)}}(r):function(){},l=function(e,r,n,o){var i=e.querySelector("button");if(!i)return function(){};var c=function(){r&&n&&function(e,r){var n=t().get(e)||"";t().set(e,"".concat(n.replace("".concat(r,","),"")+r,","),{expires:90})}(r,n),U(e),o()};return i.addEventListener("click",c),function(){return document.removeEventListener("click",c)}}(r,o,i,u),s=function(e){var t=n()((function(){N(e)}),100);return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}(r);return function(){[l,u,s].forEach((function(e){return e()}))}}})(),l.default})()}));
|