station 0.0.115 → 0.0.122

data/lib/nexmo_developer/app/assets/stylesheets/application.css

@@ -1 +1,8 @@
-//= require stylesheets/nexmo-oas-renderer
+//= require stylesheets/nexmo-oas-renderer
+
+.Adp-use-cases__background {
+  filter: blur(100px);
+}
+.Adp-platform__background {
+  filter: blur(100px);
+}

data/lib/nexmo_developer/app/controllers/static_controller.rb

@@ -67,6 +67,7 @@ class StaticController < ApplicationController
   end
 
   def landing
+    @homepage = true
     render layout: 'landing'
   end
 

data/lib/nexmo_developer/app/models/tutorial/file_loader.rb

@@ -9,13 +9,7 @@ class Tutorial::FileLoader
   end
 
   def path
-    @path ||= Nexmo::Markdown::DocFinder.find(
-      root: root,
-      document: doc_name,
-      language: ::I18n.locale,
-      code_language: code_language,
-      format: format
-    ).path
+    @path ||= doc.path
   end
 
   def content
@@ -25,4 +19,14 @@ class Tutorial::FileLoader
   def yaml
     @yaml ||= YAML.safe_load(content)
   end
+
+  def doc
+    @doc ||= Nexmo::Markdown::DocFinder.find(
+      root: root,
+      document: doc_name,
+      language: ::I18n.locale,
+      code_language: code_language,
+      format: format
+    )
+  end
 end

data/lib/nexmo_developer/app/models/tutorial/task.rb

@@ -1,5 +1,7 @@
 class Tutorial::Task
-  attr_reader :name, :code_language, :current_step
+  extend ActiveModel::Naming
+
+  attr_reader :name, :code_language, :current_step, :errors
 
   delegate :yaml, :path, to: :@file_loader
 
@@ -10,6 +12,8 @@ class Tutorial::Task
     @code_language = code_language
     @current_step = current_step
     @file_loader = load_file!
+
+    @errors = ActiveModel::Errors.new(self)
   end
 
   def load_file!
@@ -21,6 +25,14 @@ class Tutorial::Task
     )
   end
 
+  def validate!
+    unless ['introduction', 'conclusion', 'prerequisites'].include? name
+      path.present?
+    end
+  rescue ::Nexmo::Markdown::DocFinder::MissingDoc => _e
+    @errors.add(:name, message: "could not find the file: #{name}")
+  end
+
   def active?
     @name == @current_step
   end
@@ -55,4 +67,18 @@ class Tutorial::Task
   def description
     @description || yaml['description']
   end
+
+  # The following methods are needed for validation
+
+  def read_attribute_for_validation(attr)
+    send(attr)
+  end
+
+  def self.human_attribute_name(attr, _options = {})
+    attr
+  end
+
+  def self.lookup_ancestors
+    [self]
+  end
 end

data/lib/nexmo_developer/app/presenters/code_snippets_home_presenter.rb

@@ -0,0 +1,26 @@
+class CodeSnippetsHomePresenter
+  def code_snippets
+    @code_snippets ||= config['code_snippets'].map do |snippet|
+      OpenStruct.new(
+        html: Nexmo::Markdown::Renderer.new.call(
+          <<-STRING
+          ```code_snippets
+          source: '#{snippet['source']}'
+          ```
+          STRING
+        ),
+        title: snippet['title']
+      )
+    end
+  end
+
+  def cache_key
+    @cache_key ||= config['code_snippets'].join('-')
+  end
+
+  def config
+    @config ||= YAML.safe_load(
+      File.open("#{Rails.configuration.docs_base_path}/config/business_info.yml")
+    )
+  end
+end

data/lib/nexmo_developer/app/presenters/footer.rb

@@ -11,9 +11,6 @@ class Footer
     config = YAML.safe_load(open_config(config))
     {
       name: config['name'],
-      subtitle: config['subtitle'],
-      logo_path: config['assets']['footer_logo']['path'],
-      logo_alt: config['assets']['footer_logo']['alt'],
       status: config['footer']['links']['status'],
       social_links: config['footer']['links']['social'],
       navigation_links: config['footer']['links']['navigation'],
@@ -45,6 +42,8 @@ class Footer
           word.upcase
         elsif word == 'apis'
           'APIs'
+        elsif word == 'sdk'
+          'SDK'
         else
           word.titleize
         end

data/lib/nexmo_developer/app/presenters/header.rb

@@ -3,31 +3,6 @@ class Header
     after_initialize!
   end
 
-  def logo_path
-    @logo_path ||= config['assets']['header_logo']['path']
-  end
-
-  def small_logo_path
-    @small_logo_path ||= config['assets']['header_logo']['small_path'] ||
-                         config['assets']['header_logo']['path']
-  end
-
-  def logo_alt
-    @logo_alt ||= config['assets']['header_logo']['alt']
-  end
-
-  def name
-    @name ||= config['name']
-  end
-
-  def subtitle
-    @subtitle ||= config['subtitle']
-  end
-
-  def hiring_link?
-    hiring_display
-  end
-
   def sign_up_path
     @sign_up_path ||= config['header']['links']['sign-up']['path']
   end
@@ -47,10 +22,4 @@ class Header
       File.open("#{Rails.configuration.docs_base_path}/config/business_info.yml")
     )
   end
-
-  def hiring_display
-    raise 'You must provide a true or false value for the hiring display parameter inside the header section of the config/business_info.yml file' unless config['header']['hiring'].try(:has_key?, 'display')
-
-    config['header']['hiring']['display']
-  end
 end

data/lib/nexmo_developer/app/views/contribute/code-snippets/how-to-update-code-snippets.md

@@ -7,7 +7,7 @@ description: This topic describes a method for updating code snippets in GitHub
 
 ## Introduction
 
-Updating code snippets and testing thoroughly can catch people out. You might end up with errors while trying to build NDP, or while running it locally. Here’s the procedure the tech writing team uses, which is not the only one, but it provides a good starting point for developing your own methods.
+Thorough testing is essential when updating code snippets as some unintended consequences can occur if you're not careful. You might end up with errors while trying to build NDP, or while running it locally. Here’s the procedure the tech writing team uses, which is not the only one, but it provides a good starting point for developing your own methods.
 
 > Remember: code snippet repos are in submodules as far as NDP is concerned. If you are not familiar with submodules it’s probably worth doing a little background reading on them first.
 

data/lib/nexmo_developer/app/views/contribute/code-snippets/sample-code-snippet.md

@@ -1,5 +1,5 @@
 ---
-title: Quick howto on a simple thing
+title: Quick how to on a simple thing
 navigation_weight: 5
 ---
 

data/lib/nexmo_developer/app/views/contribute/guides/markdown-guide.md

@@ -102,7 +102,7 @@ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia od
 
 **Inline styles**
 
-Text can be **bold**, _italic_ or **_bold and italic_**. You could use ~~strikethrough~~ but please don't.
+Text can be **bold**, *italic* or ***bold and italic***. You could use ~~strikethrough~~ but please don't.
 
 You can define inline `code block` with backticks.
 
@@ -122,7 +122,7 @@ They auto-magically color when you use verbs like [POST] or [DELETE]
 |
 | Here is some hidden content.
 |
-| Markdown _still_ works `here`!
+| Markdown *still* works `here`!
 |
 | Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
 
@@ -131,7 +131,7 @@ They auto-magically color when you use verbs like [POST] or [DELETE]
 |
 | Here is some hidden content.
 |
-| Markdown _still_ works `here`!
+| Markdown *still* works `here`!
 |
 | Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
 ````

data/lib/nexmo_developer/app/views/layouts/application.html.erb

@@ -10,6 +10,5 @@
         <%= yield %>
       </main>
     </div>
-    <%= render partial: 'layouts/partials/footer' %>
   </body>
 </html>

data/lib/nexmo_developer/app/views/layouts/documentation-index.html.erb

@@ -10,7 +10,6 @@
     <main class="Vlt-main Vlt-main--light Nxd-main" tabindex="2">
       <%= render partial: 'layouts/partials/notices' %>
       <%= yield %>
-      <%= render partial: 'layouts/partials/footer' %>
     </main>
   </body>
 </html>

data/lib/nexmo_developer/app/views/layouts/documentation.html.erb

@@ -5,6 +5,12 @@
   <body class="Nxd-template" data-push-state-root="<%= canonical_path %>">
     <%= render partial: 'layouts/partials/header' %>
     <div id="Vlt-sidenav" class="Vlt-sidenav Nxd-sidenav Vlt-sidenav--animate Vlt-sidenav--rounded">
+      <div class="Vlt-sidenav__block Vlt-sidenav__block--logo">
+        <div id="Vlt-sidenav-collapse-trigger" class="Vlt-sidenav__collapse">
+          <svg class="Vlt-sidenav__collapse__close"><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-chevron-left"></use></svg>
+          <svg class="Vlt-sidenav__collapse__open"><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-menu"></use></svg>
+        </div>
+      </div>
       <div class="Vlt-sidenav__scroll">
         <nav class="sidenav" id="sidenav" data-active="<%= active_sidenav_item %>" aria-label="Documentation">
           <% cache_unless params[:namespace].present?, ['sidenav', I18n.locale] do %>

data/lib/nexmo_developer/app/views/layouts/landing.html.erb

@@ -2,7 +2,7 @@
 <html lang="en">
   <%= render partial: 'layouts/partials/head' %>
 
-  <body class="<%= theme %>" data-push-state-root="<%= canonical_path %>">
+  <body class="<%= theme %> Adp-landing <%= @homepage && 'Adp-homepage' %>" data-push-state-root="<%= canonical_path %>">
     <%= render partial: 'layouts/partials/header' %>
     <div class="wrapper wrapper--tint">
       <%= render partial: 'layouts/partials/notices' %>
@@ -12,6 +12,8 @@
       </div>
       <%= yield %>
     </div>
-    <%= render partial: 'layouts/partials/footer' %>
+    <% if @homepage %>
+      <%= render partial: 'layouts/partials/footer' %>
+    <% end %>
   </body>
 </html>

data/lib/nexmo_developer/app/views/layouts/page.html.erb

@@ -10,6 +10,5 @@
         <%= yield %>
       </main>
     </div>
-    <%= render partial: 'layouts/partials/footer' %>
   </body>
 </html>

data/lib/nexmo_developer/app/views/layouts/partials/_code_snippets_home.html.erb

@@ -0,0 +1,38 @@
+<% presenter = CodeSnippetsHomePresenter.new %>
+
+<div class="Adp-code-snippets-listing glide">
+
+  <div class="glide__arrows" data-glide-el="controls">
+    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
+      <svg class="Vlt-icon Vlt-white">
+        <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-left" />
+      </svg>
+    </button>
+    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
+      <svg class="Vlt-icon Vlt-white">
+        <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-right" />
+      </svg>
+    </button>
+  </div>
+  <div class="glide__bullets" data-glide-el="controls[nav]">
+    <button class="glide__bullet" data-glide-dir="=0"></button>
+    <button class="glide__bullet" data-glide-dir="=1"></button>
+    <button class="glide__bullet" data-glide-dir="=2"></button>
+  </div>
+
+  <div class="glide__track" data-glide-el="track">
+    <% cache presenter.cache_key do %>
+      <div class="glide__slides">
+        <% presenter.code_snippets.each do |snippet| %>
+          <div class="glide__slide" data-glide-autoplay="4000">
+            <p class="Adp-code-snippet__title"><b><%= snippet.title %></b></p>
+            <div class="Adp-code-snippet">
+              <%= snippet.html.html_safe %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+
+</div>

data/lib/nexmo_developer/app/views/layouts/partials/_footer.html.erb

@@ -2,49 +2,50 @@
   <% info = Footer.new.items %>
 
   <div class="container">
-    <div id="footer-outbound-links">
+    <div class="Vlt-grid">
+      <div id="footer-outbound-links" class="Vlt-col">
+        <div class="Nxd-logo Vlt-white" id="footer-logo">
+          <a href="/" class="Nxd-logo__image">
+            <%= image_tag '/vonage_developer_logo.svg', alt: 'Vonage Developer Logo' %>
+          </a>
+        </div>
 
+        <% if info[:status] %>
+          <a href=<%= info[:status]['path'] %> target="_blank" class="Vlt-badge-combined" rel="noopener">
+            <span class="Vlt-badge Vlt-white Nxd-api-badge"><%= info[:status]['text'] %></span><span class="Vlt-badge Vlt-badge--purple Nxd-api-status">Loading</span>
+          </a>
+        <% end %>
 
-    <div class="Nxd-logo Vlt-white" id="footer-logo">
-      <a href="/" class="Nxd-logo__image">
-        <%= image_tag info[:logo_path], alt: info[:logo_alt] %>
-      </a>
-      <hr class="Nxd-product__separator">
-      <div class="Nxd-product__title">
-        <h5 class="Vlt-white"><%= info[:name] %></h5>
-        <small><%= info[:subtitle] %></small>
+        <% if info[:social_links] %>
+          <div id="footer-social-links">
+            <% info[:social_links].each do |target, url| %>
+              <a href=<%= url %> class="footer-link" target="_blank" rel="noopener" title="<%= target %>">
+                <svg class="Vlt-icon Vlt-grey">
+                  <use xlink:href="/symbol/volta-brand-icons.svg#Brand-icon-<%= target %>" />
+                </svg>
+              </a>
+            <% end %>
+          </div>
+        <% end %>
       </div>
-    </div>
 
-      <% if info[:status] %>
-        <a href=<%= info[:status]['path'] %> target="_blank" class="Vlt-badge-combined" rel="noopener">
-          <span class="Vlt-badge Vlt-white Nxd-api-badge"><%= info[:status]['text'] %></span><span class="Vlt-badge Vlt-badge--purple Nxd-api-status">Loading</span>
-        </a>
-      <% end %>
+      <div class="Vlt-col"></div>
 
-      <% if info[:social_links] %>
-        <div id="footer-social-links">
-          <% info[:social_links].each do |target, url| %>
-            <a href=<%= url %> class="footer-link" target="_blank" rel="noopener" title="<%= target %>"><i class="icon icon-<%= target %>"></i></a>
+      <% info[:navigation_links].each do |topic_arr| %>
+        <div class="Vlt-col">
+          <h5><p><b><%= Footer.navigation_category_titleize(topic_arr[0]) %></b></p></h5>
+          <% topic_arr[1].each do |link| %>
+            <a href="<%= Footer.navigation_link(link) %>" class="Vlt-grey"><p><%= Footer.navigation_link_text(link) %></p></a>
           <% end %>
         </div>
       <% end %>
-      </div>
 
-    <% info[:navigation_links].each do |topic_arr| %>
-      <div>
-        <h5><%= Footer.navigation_category_titleize(topic_arr[0]) %></h5>
-        <% topic_arr[1].each do |link| %>
-          <a href="<%= Footer.navigation_link(link) %>"><%= Footer.navigation_link_text(link) %></a>
+      <div id="footer-support" class="Vlt-col">
+        <h5><p><b>Support</b></p></h5>
+        <% info[:support_links].each do |name, url| %>
+          <a href=<%= Footer.support_link(url) %> target="_blank" rel="noopener" class="Vlt-grey"><p><%= Footer.support_link_text(name) %></p></a>
         <% end %>
       </div>
-    <% end %>
-
-    <div id="footer-support">
-      <h5>Support</h5>
-      <% info[:support_links].each do |name, url| %>
-        <a href=<%= Footer.support_link(url) %> target="_blank" rel="noopener"><%= Footer.support_link_text(name) %></a>
-      <% end %>
     </div>
   </div>
 </footer>

data/lib/nexmo_developer/app/views/layouts/partials/_header.html.erb

@@ -1,34 +1,34 @@
 <% header = Header.new %>
 <%= render partial: 'layouts/partials/post-body-tags' %>
 
-<div class="Nxd-header">
-  <header id="header" class="Nxd-header__main">
+<div class="Adp-header">
+  <header id="header" class="Adp-header__main Vlt-M-plus">
     <a tabindex="0" id="skip-to-navigation" href="#sidenav-first" class="Vlt-btn Vlt-btn--outline Vlt-btn--primary Vlt-btn--app">Skip to navigation</a>
     <a tabindex="0" id="skip-to-content" href="#primary-content" class="Vlt-btn Vlt-btn--outline Vlt-btn--primary Vlt-btn--app">Skip to content</a>
-    <div class="Nxd-logo">
-      <a href="/" id="logo" class="Nxd-logo__image Vlt-M-plus">
-        <%= image_tag header.logo_path, alt: header.logo_alt %>
-
-        <hr class="Nxd-product__separator">
-        <div class="Nxd-product__title Vlt-black">
-          <h4><%= header.name %></h4>
-          <small><%= header.subtitle %></small>
-        </div>
+
+    <nav class="Adp-header__nav">
+      <a href="https://vonage.com" title="Vonage.com" target="_blank" rel="noopener noreferrer" class="Vlt-grey">
+        Vonage.com
+        <svg class="Vlt-icon Vlt-icon--large Vlt-grey">
+          <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-arrow-outbound" />
+        </svg>
       </a>
-      <a href="/" id="logo-small" class="Nxd-logo__image Vlt-S-only">
-        <%= image_tag header.small_logo_path, alt: header.logo_alt %>
+      <a href="https://www.vonage.co.uk/communications-apis/pricing/?icmp=l3nav_pricing_novalue" title="Pricing" target="_blank" rel="noopener noreferrer" class="Vlt-grey">
+        Pricing
+        <svg class="Vlt-icon Vlt-icon--large Vlt-grey">
+          <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-arrow-outbound" />
+        </svg>
+      </a>
+      <a href="https://help.nexmo.com/hc/en-us" title="Support" target="_blank" rel="noopener noreferrer" class="Vlt-grey">
+        Support
+        <svg class="Vlt-icon Vlt-icon--large Vlt-grey">
+          <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-arrow-outbound" />
+        </svg>
       </a>
-      <% if header.hiring_link? %>
-        <a href=<%= careers_path %> class="Vlt-M-plus Vlt-badge Vlt-badge--purple Vlt-badge--transparent Vlt-badge--small Nxd-product__hiring">
-          <span id="header-hiring"><%= t('.hiring') %></span>
-        </a>
-      <% end %>
-    </div>
 
-    <nav class="Nxd-header__nav">
-      <a class="Nxd-main-header__link Vlt-M-plus Vlt-black" href="https://vonage.com/communications-apis">Vonage.com</a>
       <%= render partial: 'layouts/partials/locale_switcher' %>
-      <a href=<%= header.sign_up_path %> class="Vlt-btn Vlt-btn--secondary Vlt-btn--app" data-ab="try_button_v2"><b>
+
+      <a href=<%= header.sign_up_path %> class="Vlt-btn--white Vlt-btn--app Vlt-btn--outline Vlt-btn--small" id="signup" data-ab="try_button_v2"><b>
           <% ab_test(:try_button_v2, header.sign_up_text.map { |s| ["{ #{t(".#{s}")} }", "< #{t(".#{s}")} />"] }.flatten) do |s| %>
             <%= s %>
           <% end %>
@@ -37,21 +37,80 @@
     </nav>
   </header>
 
-  <nav id="subnav" class="Nxd-header__sub">
-    <button id="Vlt-sidenav-mobile-trigger" class="Vlt-btn Vlt-btn--link"><svg><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-menu"></use></svg></button>
+  <section id="subnav" class="Adp-header__sub">
+    <div class="Vlt-header__backdrop"></div>
+    <nav>
+      <a href="/" class="subnav-logo">
+        <%= image_tag '/vonage_developer_logo.svg', alt: 'Vonage Developer Logo', class: 'logo' %>
+      </a>
 
-    <div class="Nxd-header__sub__menu">
-      <% Topnav.new(@navigation).items.each do |item| %>
-        <a href=<%= item.url %> class="<%= item.css_classes %>"><%= item.title %></a>
-      <% end %>
-    </div>
+      <ul class="Adp-header__sub__menu Vlt-M-plus">
+        <li class="Vlt-tabs__link">
+          <a href="<%= use_cases_path %>"><p><b class="Vlt-white"><%= I18n.t('layouts.partials.header.use-cases') %></b></p></a>
+        </li>
+        <li class="Vlt-tabs__link">
+          <a href="<%= documentation_path %>"><p><b class="Vlt-white"><%= I18n.t('layouts.partials.header.documentation') %></b></p></a>
+        </li>
+        <li class="Vlt-tabs__link Vlt-tabs__link-menu">
+          <button class="Vlt-btn Vlt-btn--link">
+            <p><b class="Vlt-white"><%= I18n.t('layouts.partials.header.tools') %></b></p>
+            <svg class="Vlt-icon Vlt-icon--smaller Vlt-grey">
+              <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-down" />
+            </svg>
+          </button>
+          <div class="Vlt-topmenu">
+            <div class="Vlt-topmenu__items">
+              <div class="Vlt-topmenu__item">
+                <a href="<%= static_path('tools') %>"><p><b class="Vlt-white"><%= I18n.t('layouts.partials.header.tools') %></b></p></a>
+              </div>
+              <div class="Vlt-topmenu__item">
+                <a href="<%= extend_path %>"><p><b class="Vlt-white">Integrations</b></p></a>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li class="Vlt-tabs__link Vlt-tabs__link-menu">
+          <button class="Vlt-btn Vlt-btn--link">
+            <p><b class="Vlt-white"><%= I18n.t('layouts.partials.header.community') %></b></p>
+            <svg class="Vlt-icon Vlt-icon--smaller Vlt-grey">
+              <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-down" />
+            </svg>
+          </button>
+
+
+          <div class="Vlt-topmenu">
+            <div class="Vlt-topmenu__items">
+              <div class="Vlt-topmenu__item">
+                <a href="<%= static_path('community') %>"><p><b class="Vlt-white">Community hub</b></p></a>
+              </div>
+              <div class="Vlt-topmenu__item">
+                <a href="<%= static_path('startups') %>"><p><b class="Vlt-white">Startup program</b></p></a>
+              </div>
+              <div class="Vlt-topmenu__item">
+                <a href="<%= static_path('voyagers') %>"><p><b class="Vlt-white">Voyagers program</b></p></a>
+              </div>
+              <div class="Vlt-topmenu__item">
+                <a href="https://stackoverflow.com/questions/tagged/nexmo" target='_blank' rel='noopener noreferrer'><p><b class="Vlt-white">Stackoverflow</b></p></a>
+              </div>
+              <div class="Vlt-topmenu__item">
+                <a href="https://github.com/vonage" target='_blank' rel='noopener noreferrer'><p><b class="Vlt-white">Github</b></p></a>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+
+      <svg class="Vlt-icon Vlt-icon--large Vlt-grey Vlt-S-only Adp-header__hamburger">
+        <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-menu" />
+      </svg>
+    </nav>
 
     <% if search_enabled? %>
-      <%= form_tag '/search', method: :get do %>
+      <%= form_tag '/search', method: :get, class: 'Vlt-M-plus' do %>
         <div id="search-app">
           <input type="text" id="searchbox" name="query" placeholder="Search" name="query" autocomplete="off" value="<%= @search_term || '' %>">
         </div>
       <% end %>
     <% end %>
-  </nav>
+  </section>
 </div>