Skip to content

Commit

Permalink
feat: Updates Meganav links for realtime examples
Browse files Browse the repository at this point in the history
  • Loading branch information
Arti Mathanda committed Aug 17, 2022
1 parent 6e99720 commit ab7c585
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 38 deletions.
42 changes: 24 additions & 18 deletions src/core/MeganavContentPlatform/component.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,41 +14,47 @@
</div>

<div>
<h3 class="ui-meganav-overline" id="meganav-platform-panel-list-our-features">Our features</h3>
<ul aria-labelledby="meganav-platform-panel-list-our-features">
<h3 class="ui-meganav-overline" id="meganav-platform-panel-list-examples">Examples</h3>
<ul aria-labelledby="meganav-platform-panel-list-examples">
<li>
<%= link_to abs_url("/pub-sub-messaging"), class: "ui-meganav-media group" do %>
<p class="ui-meganav-media-heading">Publish/subscribe messaging</p>
<p class="ui-meganav-media-copy">Feature-rich pub/sub messaging to power any realtime requirement.</p>
<%= link_to abs_url("/examples/avatar-stack"), class: "ui-meganav-media group" do %>
<p class="ui-meganav-media-heading">Avatar Stack</p>
<p class="ui-meganav-media-copy">See who is connected in a digital space.</p>
<% end %>
</li>
<li>
<%= link_to abs_url("/push-notifications"), class: "ui-meganav-media group" do %>
<p class="ui-meganav-media-heading">Push notifications</p>
<p class="ui-meganav-media-copy">Deliver native notifications at scale with our unified API.</p>
<%= link_to abs_url("/examples/emoji-reactions"), class: "ui-meganav-media group" do %>
<p class="ui-meganav-media-heading">Emoji Reactions</p>
<p class="ui-meganav-media-copy">React with an emoji to a message.</p>
<% end %>
</li>
<li>
<%= link_to abs_url("/integrations"), class: "ui-meganav-media group" do %>
<p class="ui-meganav-media-heading">Third-party integrations</p>
<p class="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
<%= link_to abs_url("/examples/activity-feed"), class: "ui-meganav-media group" do %>
<p class="ui-meganav-media-heading">Activity Feed</p>
<p class="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
<% end %>
</li>
<li>
<%= link_to abs_url("/protocols"), class: "ui-meganav-media group" do %>
<p class="ui-meganav-media-heading">Multi-protocol messaging</p>
<p class="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
<%= link_to abs_url("/examples/live-charts"), class: "ui-meganav-media group" do %>
<p class="ui-meganav-media-heading">Live Charts</p>
<p class="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
<% end %>
</li>
<li>
<%= link_to abs_url("/hub"), class: "ui-meganav-media group" do %>
<p class="ui-meganav-media-heading">Streaming data sources</p>
<p class="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
<%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %>
<p class="ui-meganav-media-heading">Live Cursors</p>
<p class="ui-meganav-media-copy">Track all cursors in realtime.</p>
<% end %>
</li>
<li>
<%= link_to abs_url("/examples/typing-indicator"), class: "ui-meganav-media group" do %>
<p class="ui-meganav-media-heading">Typing Indicator</p>
<p class="ui-meganav-media-copy">See when a user is typing a message.</p>
<% end %>
</li>
</ul>

<%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"))) do %>Explore all platform features<% end %>
<%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"))) do %>Explore all live examples<% end %>
</div>

<div>
Expand Down
45 changes: 25 additions & 20 deletions src/core/MeganavContentPlatform/component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,43 +19,48 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
</div>

<div>
<h3 className="ui-meganav-overline" id="meganav-platform-panel-list-our-features">
Our features
<h3 className="ui-meganav-overline" id="meganav-platform-panel-list-examples">
Examples
</h3>
<ul aria-labelledby="meganav-platform-panel-list-our-features">
<ul aria-labelledby="meganav-platform-panel-list-examples">
<li>
<a href={absUrl("/pub-sub-messaging")} className="group ui-meganav-media">
<p className="ui-meganav-media-heading">Publish/subscribe messaging</p>
<p className="ui-meganav-media-copy">Feature-rich pub/sub messaging to power any realtime requirement.</p>
<a href={absUrl("/examples/avatar-stack")} className="group ui-meganav-media">
<p className="ui-meganav-media-heading">Avatar Stack</p>
<p className="ui-meganav-media-copy">See who is connected in a digital space.</p>
</a>
</li>
<li>
<a href={absUrl("/push-notifications")} className="ui-meganav-media group">
<p className="ui-meganav-media-heading">Push notifications</p>
<p className="ui-meganav-media-copy">Deliver native notifications at scale with our unified API.</p>
<a href={absUrl("/examples/emoji-reactions")} className="ui-meganav-media group">
<p className="ui-meganav-media-heading">Emoji Reactions</p>
<p className="ui-meganav-media-copy">React with an emoji to a message.</p>
</a>
</li>
<li>
<a href={absUrl("/integrations")} className="ui-meganav-media group">
<p className="ui-meganav-media-heading">Third-party integrations</p>
<p className="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
<a href={absUrl("/examples/activity-feed")} className="ui-meganav-media group">
<p className="ui-meganav-media-heading">Activity Feed</p>
<p className="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
</a>
</li>
<li>
<a href={absUrl("/protocols")} className="ui-meganav-media group">
<p className="ui-meganav-media-heading">Multi-protocol messaging</p>
<p className="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
<a href={absUrl("/examples/live-charts")} className="ui-meganav-media group">
<p className="ui-meganav-media-heading">Live Charts</p>
<p className="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
</a>
</li>
<li>
<a href={absUrl("/hub")} className="ui-meganav-media group">
<p className="ui-meganav-media-heading">Streaming data sources</p>
<p className="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
<a href={absUrl("/examples/live-cursors")} className="ui-meganav-media group">
<p className="ui-meganav-media-heading">Live Cursors</p>
<p className="ui-meganav-media-copy">Track all cursors in realtime.</p>
</a>
</li>
<li>
<a href={absUrl("/examples/typing-indicator")} className="ui-meganav-media group">
<p className="ui-meganav-media-heading">Typing Indicator</p>
<p className="ui-meganav-media-copy">See when a user is typing a message.</p>
</a>
</li>
</ul>

<FeaturedLink url={absUrl("/platform")}>Explore all platform features</FeaturedLink>
<FeaturedLink url={absUrl("/examples")}>Explore all live examples</FeaturedLink>
</div>

<div>
Expand Down

0 comments on commit ab7c585

Please sign in to comment.