Merge pull request #1417 from Nexmo/APIDOC-195_new_documentation_page

API-195: New layout/design for landing page in /documentation + bump …
Nexmo · May 31, 2022 · f1d8771 · f1d8771
2 parents 5e157d4 + f791bb1
commit f1d8771
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 4 deletions.
diff --git a/lib/nexmo_developer/app/assets/stylesheets/application.scss b/lib/nexmo_developer/app/assets/stylesheets/application.scss
@@ -1,6 +1,7 @@
 //= require stylesheets/nexmo-oas-renderer
 
 @import "blog/*";
+@import "landing_page_documentation/*";
 
 .Adp-use-cases__background {
   filter: blur(100px);

diff --git a/lib/nexmo_developer/app/assets/stylesheets/blog/blog.scss b/lib/nexmo_developer/app/assets/stylesheets/blog/blog.scss
@@ -10,6 +10,9 @@
 .flex-between { display:flex;justify-content: space-between; }
 
 
+.h-100 { height: 100%; }
+
+
 // Author info column
 #author-column {
   width: 25%;
@@ -278,6 +281,40 @@
   }
 }
 
+.my-4col-grid {
+  min-width: 300px;
+
+  display: grid !important;
+  grid-template-columns: repeat(4, 1fr) !important;
+  grid-auto-rows: 1fr !important;
+  grid-column-gap: 10px !important;
+  grid-row-gap: 10px !important;
+
+  .Vlt-card:hover {
+    -webkit-transform: none;
+    transform: none;
+    -webkit-box-shadow: 0 10px 30px rgba(19, 20, 21, .1);
+    box-shadow: 0 10px 30px rgba(19, 20, 21, .1);
+    transform: none;
+  }
+
+  .Vlt-card {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    border: 1px solid #e6e6e6;
+    -webkit-transition: -webkit-box-shadow ease-in 0.25s;
+    transition: -webkit-box-shadow ease-in 0.25s;
+    transition: box-shadow ease-in 0.25s;
+    transition: box-shadow ease-in 0.25s, -webkit-box-shadow ease-in 0.25s;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .my-4col-grid {
+    grid-template-columns: repeat(1, 1fr) !important;
+  }
+}
+
 
 // Media query for MAIN MOBILE LAYOUT
 @media screen and (max-width: 480) {

diff --git a/...veloper/app/assets/stylesheets/landing_page_documentation/landing_page_documentation.scss b/...veloper/app/assets/stylesheets/landing_page_documentation/landing_page_documentation.scss
@@ -0,0 +1,7 @@
+.pb-20 { padding-bottom: 20px; }
+
+.landing_page_documentation .container {
+  max-width: 1300px;
+  padding: 24px 20px 0;
+  margin: 50px auto;
+}
diff --git a/lib/nexmo_developer/app/controllers/static_controller.rb b/lib/nexmo_developer/app/controllers/static_controller.rb
@@ -1,5 +1,5 @@
 class StaticController < ApplicationController
-  before_action :canonical_redirect, only: :documentation
+  before_action :canonical_redirect, only: %i[documentation landing_page_documentation]
 
   def default_landing
     yaml_name = request[:landing_page]
@@ -99,6 +99,13 @@ def documentation
     render layout: 'documentation'
   end
 
+  def landing_page_documentation
+    @homepage = true
+    @landing_info ||= LoadConfig.load_file('config/documentation_page/en/doc_landing.yml')
+
+    render layout: 'landing_page_documentation'
+  end
+
   def community
     @navigation = :community
     @document_title = 'Community'

diff --git a/lib/nexmo_developer/app/views/layouts/landing_page_documentation.html.erb b/lib/nexmo_developer/app/views/layouts/landing_page_documentation.html.erb
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <%= render partial: 'layouts/partials/head' %>
+
+  <body class="Nxd-template landing_page_documentation" data-push-state-root="<%= canonical_path %>">
+    <%= render partial: 'layouts/partials/header' %>
+
+    <main class="wrapper wrapper--tint" tabindex="2">
+      <%= render partial: 'layouts/partials/notices' %>
+      <div class="container">
+        <%= yield %>
+      </div>
+      <%= render partial: 'layouts/partials/improve_this_page' %>
+    </main>
+
+    <% if @homepage %>
+      <%= render partial: 'layouts/partials/footer' %>
+    <% end %>
+  </body>
+</html>
diff --git a/lib/nexmo_developer/app/views/static/landing_page_documentation.html.erb b/lib/nexmo_developer/app/views/static/landing_page_documentation.html.erb
@@ -0,0 +1,37 @@
+<div class="wrapper wrapper--tint">
+  <div class="center spacious content-block">
+    <h1><%= @landing_info['title'].html_safe %></h1>
+    <p><%= raw @landing_info['subtitle'].html_safe %></p>
+  </div>
+
+  <div>
+
+<!-- TOP section -->
+    <% @landing_info['top-section'].each do |product| %>
+      <hr class="hr--tall Vlt-gradient--blue-to-pink"></hr>
+      <h2><%= product.keys.first %></h2>
+      <br>
+
+      <div class="my-4col-grid">
+        <% product[product.keys.first].each do |card| %>
+          <%= render partial: 'static/landing_page_documentation/partials/small_product_card', locals: { product: card } %>
+        <% end %>
+      </div>
+    <% end %>
+
+<!-- BOTTOM section -->
+    <% @landing_info['bottom-section'].each do |product| %>
+      <hr class="hr--tall Vlt-gradient--blue-to-pink"></hr>
+      <h2><%= product.keys.first %></h2>
+      <br>
+
+      <div class="my-2col-grid">
+        <% product[product.keys.first].each do |cards| %>
+          <%= render partial: 'static/landing_page_documentation/partials/big_product_card', locals: { products: cards } %>
+        <% end %>
+      </div>
+    <% end %>
+
+  </div>
+
+</div>
diff --git a/...developer/app/views/static/landing_page_documentation/partials/_big_product_card.html.erb b/...developer/app/views/static/landing_page_documentation/partials/_big_product_card.html.erb
@@ -0,0 +1,23 @@
+<div class="Vlt-card" style="padding: 35px;">
+  <div class="d-flex-column h-100">
+
+    <div>
+      <svg class="Vlt-icon Vlt-icon--larger Vlt-purple"><use xlink:href="/symbol/volta-icons.svg#<%= products['icon'] %>" /></svg>
+    </div>
+
+    <h3 class="Vlt-purple pb-20">
+      <%= products.keys.first %>
+    </h3>
+
+    <div class="my-2col-grid">
+      <% products[products.keys.first].each do |item| %>
+        <div>
+          <p><a href=<%= item['product_name_link'] %>><%= item['product_name'] %></a></p>
+
+          <p><%= item['product_description'] %></p>
+        </div>
+      <% end %>
+    </div>
+
+  </div>
+</div>
diff --git a/...veloper/app/views/static/landing_page_documentation/partials/_small_product_card.html.erb b/...veloper/app/views/static/landing_page_documentation/partials/_small_product_card.html.erb
@@ -0,0 +1,27 @@
+<div class="Vlt-card" style="padding: 35px;">
+  <div class="d-flex-column h-100">
+
+    <div>
+      <svg class="Vlt-icon Vlt-icon--larger Vlt-purple"><use xlink:href="/symbol/volta-icons.svg#<%= product['icon'] %>" /></svg>
+    </div>
+
+    <h3 class="Vlt-purple">
+      <a href=<%= product['product_name_link'] %>><%= product['product_name'] %></a>
+    </h3>
+
+    <div style="flex-grow: 1; padding: 25px 0;">
+      <p><%= raw product['product_description'].html_safe %></p>
+    </div>
+
+    <div class="Vlt-card__footer flex-between">
+      <% if product['getting_started_link'].present? %>
+        <a href=<%= product['getting_started_link'] %> class="Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small">Getting Started</a>
+      <% end %>
+
+      <% if product['api_reference_link'].present? %>
+        <a href=<%= product['api_reference_link'] %> class="Vlt-btn Vlt-btn--white Vlt-btn--app Vlt-btn--small" style="border: 1px solid;">API Reference ></a>
+      <% end %>
+    </div>
+
+  </div>
+</div>
diff --git a/lib/nexmo_developer/config/routes.rb b/lib/nexmo_developer/config/routes.rb
@@ -55,7 +55,7 @@
     products.include?(request['product']) && includes_language
   }
 
-  get '(/:locale)/documentation', to: 'static#documentation', constraints: LocaleConstraint.new, as: :documentation
+  get '(/:locale)/documentation', to: 'static#landing_page_documentation', constraints: LocaleConstraint.new, as: :documentation
 
   get '/community/slack', to: 'slack#join'
   post '/community/slack', to: 'slack#invite'

diff --git a/lib/nexmo_developer/spec/controllers/static_controller_spec.rb b/lib/nexmo_developer/spec/controllers/static_controller_spec.rb
@@ -22,7 +22,7 @@
   describe 'GET default_landing' do
     before do
       Rails.application.routes.draw do
-        get '(/:locale)/documentation', to: 'static#documentation', as: :documentation
+        get '(/:locale)/documentation', to: 'static#landing_page_documentation', as: :documentation
         get '/use-cases', to: 'use_case#index', as: :use_cases
         get '/careers', to: 'careers#index', as: :careers
         get '(/:locale)/api', to: 'api#index', as: :api

diff --git a/lib/nexmo_developer/version.rb b/lib/nexmo_developer/version.rb
@@ -1,3 +1,3 @@
 module NexmoDeveloper
-  VERSION = '0.2.6'.freeze
+  VERSION = '0.3.0'.freeze
 end