station 0.0.0 → 0.0.100

data/lib/nexmo_developer/app/views/tutorial/index.html.erb

@@ -0,0 +1,81 @@
+<div class="Vlt-grid">
+  <div class="Vlt-col Vlt-col--3of4">
+    <div class="Vlt-card">
+      <div class="Ndx-task-step__code-language Vlt-right">
+        <div><%= render 'code_languages/icon', code_language: @tutorial.code_language, dark: true %></div>
+      </div>
+    <%= @content.html_safe %>
+
+    <br />
+    <div class="Vlt-grid">
+      <div class="Vlt-col">
+        <% if @tutorial.previous_step %>
+          <a
+            class="Vlt-btn Vlt-btn--secondary"
+            href="<%= url_for(product: @tutorial.current_product, tutorial_name: @tutorial.name, tutorial_step: @tutorial.previous_step.name, code_language: @tutorial.code_language, only_path: true, controller: :tutorial, action: :index) %>"
+          >
+            &laquo; Previous
+          </a>
+        <% end %>
+      </div>
+      <div class="Vlt-col Vlt-right">
+        <% if @tutorial.next_step %>
+          <a
+            class="Vlt-btn Vlt-btn--secondary"
+            href="<%= url_for(product: @tutorial.current_product, tutorial_name: @tutorial.name, tutorial_step: @tutorial.next_step.name, code_language: @tutorial.code_language, only_path: true, controller: :tutorial, action: :index) %>"
+          >
+            Next &raquo;
+          </a>
+        <% end %>
+      </div>
+     </div>
+    </div>
+  </div>
+  <div class="Vlt-col Vlt-col--1of4 Nxd-task-step-list">
+      <div class="Vlt-card">
+        <div class="Vlt-card__image Vlt-gradient--purple-to-peach"></div>
+        <div class="Vlt-card__content">
+          <h4><%= @tutorial.title %></h4>
+          <small><%= @tutorial.description %></small>
+          <br /><br />
+          <div>
+            <% if @tutorial.available_code_languages.reject { |l| l == @tutorial.code_language }.any? %>
+              <span style="font-weight: bold;">Also available on:</span>
+              <ul class="Ndx-task__code-language-list">
+                <% @tutorial.available_code_languages.reject { |l| l == @tutorial.code_language }.each do |language| %>
+                  <li class="Ndx-task-step__code-language">
+                    <a
+                      title="<%= language %>"
+                      href="<%= url_for(controller: :tutorial, action: :index, product: @tutorial.current_product, tutorial_name: @tutorial.name, tutorial_step: @tutorial.first_step, code_language: language) %>"
+                      >
+                      <div><%= render 'code_languages/icon', code_language: language, dark: true %></div>
+                    </a>
+                  </li>
+                <% end %>
+              </ul>
+            <% end %>
+          </div>
+          <br /><br />
+          <span style="font-weight: bold;">Steps</span>
+          <br />
+          <br />
+            <% @tutorial.subtasks.each_with_index do |t, i| %>
+            <div class="Vlt-grid">
+              <div class="Vlt-col Vlt-col--1of4">
+                <span class="Nxd-step-number Vlt-number <%= t.active? ? 'Vlt-bg-black': 'Vlt-bg-grey' %>" style="margin:0"><%= i+1 %></span>
+              </div>
+              <div class="Vlt-col Vlt-col--3of4 Nxd-step">
+                <a
+                  title="<%= t.title %>"
+                  href="<%= url_for(controller: :tutorial, action: :index, product: @tutorial.current_product, tutorial_name: @tutorial.name, tutorial_step: t.name, code_language: @tutorial.code_language) %>"
+                >
+                  <%= t.title %>
+                </a>
+              </div>
+            </div>
+            <% end %>
+        </div>
+      </div>
+
+  </div>
+</div>

data/lib/nexmo_developer/app/views/tutorial/list.html.erb

@@ -0,0 +1,63 @@
+<h1>Tutorials</h1>
+
+<p>Get started with tutorials that will walk you through building a variety of practical applications</p>
+
+<div class="Nxd-use-cases--filters">
+  <%= render partial: 'layouts/partials/programming_languages_dropdown', controller_name: :tutorial, action_name: :list %>
+  <%= render partial: 'layouts/partials/product_dropdown', locals: { controller_name: :tutorial, action_name: :list, product_scope: TutorialList.all } %>
+</div>
+
+<br /><br />
+
+<% unless @tutorials.count.positive? %>
+  <div class="Vlt-callout Vlt-callout--warning">
+    <i></i>
+    <div class="Vlt-callout__content">
+      No tutorials available
+    </div>
+  </div>
+<% else %>
+  <div class="Vlt-grid Nxd-use-cases">
+    <% @tutorials.in_groups(3) do |tutorials| %>
+      <div class="Vlt-col">
+        <% tutorials.compact.each do |tutorial| %>
+          <div class="Vlt-card Vlt-card--border Vlt-card--lesspadding">
+            <div class="Vlt-card__header">
+              <a
+                href="<%= tutorial.product_url %>"
+                class="Vlt-badge Vlt-badge--small Vlt-badge--transparent Vlt-margin--A-bottom2 Vlt-badge--<%= Card::COLOUR.fetch(tutorial.subtitle, 'blue') %>"
+                >
+                <%= tutorial.subtitle %>
+              </a>
+            </div>
+
+            <div class="Vlt-card__content">
+              <a href="<%= tutorial.url %>/<%= params[:code_language] %>">
+                <p class="p-large"><b><%= tutorial.title %></b></p>
+              </a>
+
+              <p><%= tutorial.description %></p>
+
+              <a href="<%= tutorial.url %>/<%= params[:code_language] %>" class="Vlt-<%= Card::COLOUR.fetch(tutorial.subtitle, 'blue') %>-dark Nxd-card__cta">
+                <%= t('read_more') %>
+                <svg class="Vlt-icon Vlt-icon--smaller">
+                  <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-arrow-thin-right" />
+                </svg>
+              </a>
+
+              <% if tutorial.available_languages.count > 0 %>
+                <hr class="hr--short"></hr>
+
+                <% tutorial.available_languages.each do |language| %>
+                  <a href="<%= url_for(controller: :tutorial, action: :list, product: @product, code_language: language.label.downcase, only_path: true) %>">
+                    <small class="Vlt-grey-darker Nxd-tutorials__language Nxd-tutorials__language--<%= language.language %>"><span>●</span> <%= language.label %></small>
+                  </a>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/lib/nexmo_developer/app/views/tutorial/single.html.erb

@@ -0,0 +1 @@
+<%= @content.html_safe %>

data/lib/nexmo_developer/app/views/use_case/_index.html.erb

@@ -0,0 +1,53 @@
+<% unless @use_cases.count.positive? %>
+  <div class="Vlt-callout Vlt-callout--warning">
+    <i></i>
+    <div class="Vlt-callout__content">
+      No use cases available in this language
+    </div>
+  </div>
+<% else %>
+  <div class="Vlt-grid Nxd-use-cases">
+    <% @use_cases.in_groups(3) do |use_cases| %>
+      <div class="Vlt-col">
+        <% use_cases.compact.each do |use_case| %>
+          <div class="Vlt-card Vlt-card--border Vlt-card--lesspadding">
+            <div class="Vlt-card__header">
+              <a
+                href="<%= url_for(controller: 'use_case', action: :index, product: use_case.products.join(''), code_language: @language, only_path: true) %>"
+                class="Vlt-badge Vlt-badge--small Vlt-badge--transparent Vlt-margin--A-bottom2 Vlt-badge--<%= Card::COLOUR.fetch(use_case.subtitle, 'blue') %>"
+                >
+                <%= use_case.subtitle %>
+              </a>
+            </div>
+
+            <div class="Vlt-card__content">
+              <a href="<%= url_for(controller: 'use_case', action: :show, document: use_case.relative_path, only_path: true) %>">
+                <p class="p-large"><b><%= use_case.title %></b></p>
+              </a>
+
+              <p><%= use_case.description %></p>
+
+              <a href="<%= url_for(controller: 'use_case', action: :show, document: use_case.relative_path, only_path: true) %>" class="Vlt-<%= Card::COLOUR.fetch(use_case.subtitle, 'blue') %>-dark">
+                <%= t('read_more') %>
+                <svg class="Vlt-icon Vlt-icon--smaller">
+                  <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-arrow-thin-right" />
+                </svg>
+              </a>
+
+              <% if use_case.languages.count > 0 %>
+                <hr class="hr--short"></hr>
+                <% use_case.languages.each do |language| %>
+                  <a
+                    href="<%= url_for(controller: 'use_case', action: :index, product: @product, code_language: language.downcase, only_path: true) %>"
+                    >
+                    <small class="Vlt-grey-darker Nxd-tutorials__language Nxd-tutorials__language--<%= language %>"><span>●</span> <%= language == "Objective_C" ? "Objective-C" : language %></small>
+                  </a>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/lib/nexmo_developer/app/views/use_case/index.html.erb

@@ -0,0 +1,12 @@
+<h1>Use Cases</h1>
+
+<p>Get started with tutorials that will walk you through building a variety of practical applications</p>
+
+<div class="Nxd-use-cases--filters">
+  <%= render partial: 'layouts/partials/programming_languages_dropdown', controller_name: :use_case, action_name: :index %>
+  <%= render partial: 'layouts/partials/product_dropdown', locals: { controller_name: :use_case, action_name: :index, product_scope: Nexmo::Markdown::UseCase.all } %>
+</div>
+
+<br><br>
+
+<%= render 'index' %>

data/lib/nexmo_developer/app/views/use_case/list/plain.html.erb

@@ -0,0 +1,5 @@
+<ul class="Vlt-list Vlt-list--simple">
+  <% @use_cases.each do |use_case| %>
+    <li><a href="<%= url_for(controller: 'use_case', action: :show, document: use_case.relative_path, only_path: true) %>"><%= use_case.title %></a></li>
+  <% end %>
+</ul>

data/lib/nexmo_developer/app/views/use_case/show.html.erb

@@ -0,0 +1,8 @@
+<div class="Vlt-grid ">
+  <div class="Vlt-col Vlt-col--3of4 Nxd-tutorial">
+    <%= @content.html_safe %>
+  </div>
+  <div class="Vlt-col Vlt-col--1of4 Vlt-sidenav Nxd-tutorial-sidenav">
+    <%= navigation_from_content(content: @content) %>
+  </div>
+</div>

data/lib/nexmo_developer/app/webpacker/javascript/api_status/index.js

@@ -0,0 +1,20 @@
+import 'whatwg-fetch'
+
+export default () => {
+  fetch('https://xb8glk41jfrv.statuspage.io/api/v2/status.json')
+  .then((response) => response.json())
+  .then((payload) => {
+  	var color;
+  	switch (payload.status.indicator) {
+  		case 'major':
+  			color = 'red';
+  		case 'critical':
+  			color = 'red';
+  		case 'minor':
+  			color = 'yellow';
+  		default:
+  			color = 'green';
+  	}
+    $('.Nxd-api-status').text(payload.status.description).addClass(`Vlt-badge--` + color)
+  })
+}

data/lib/nexmo_developer/app/webpacker/javascript/careers/index.js

@@ -0,0 +1,134 @@
+export default class Careers {
+
+  constructor() {
+    this.departments = [];
+    this.locations = [];
+    this.setupListeners();
+  }
+
+  showCareer(career) {
+    const department = career.getElementsByClassName('department')[0].dataset.department;
+    const location = career.getElementsByClassName('location')[0].dataset.location;
+
+    return (this.departments.includes(department) || this.departments.length === 0)
+      && (this.locations.some(l => location.includes(l) || l.includes(location)) || this.locations.length === 0);
+  }
+
+  toggleCareers() {
+    Array.from(document.getElementsByClassName('Nxd-career')).forEach(function(career) {
+      career.classList.toggle('hide', !this.showCareer(career));
+    }, this);
+
+    document.getElementById('no-results').classList.toggle(
+      'hide',
+      document.querySelectorAll('.Nxd-career:not(.hide)').length !== 0
+    );
+
+    document.querySelectorAll('.Nxd-career:not(.hide)').forEach(function(career, index) {
+      career.classList.toggle('striped', index % 2 == 0);
+    });
+  }
+
+  updateURL() {
+    let currentUrl = new URL(window.location.href);
+    let query = {};
+    if (this.departments.length > 0) {
+      Object.assign(query, { departments: this.departments });
+    }
+    if (this.locations.length > 0) {
+      Object.assign(query, { locations: this.locations.map((l) => l.split(',')[0]) });
+    }
+
+    let params = new URLSearchParams(query);
+
+    currentUrl.search = params
+    window.history.pushState({}, 'Careers', currentUrl);
+  }
+
+  dropdownValue(length, item) {
+    let value;
+    switch(length) {
+      case 0:
+        value = `${item}s`;
+        break;
+      case 1:
+        value = `1 ${item} selected`;
+        break;
+      default:
+        value = `${length} ${item}s selected`;
+    }
+    return value;
+  }
+
+  updateDepartmentsDropdown() {
+    let value = this.dropdownValue(this.departments.length, 'Department');
+    document.querySelector('#department-filter button').innerText = value;
+  }
+
+  updateLocationsDropdown() {
+    let value = this.dropdownValue(this.locations.length, 'Location');
+    document.querySelector('#location-filter button').innerText = value;
+  }
+
+  departmentChangeHandler(event) {
+    if (event.target.checked) {
+      this.departments.push(event.target.value);
+    } else {
+      this.departments.splice(this.departments.indexOf(event.target.value), 1);
+    }
+    this.updateURL();
+    this.updateDepartmentsDropdown();
+    this.toggleCareers();
+  }
+
+  locationChangeHandler(event) {
+    if (event.target.checked) {
+      this.locations.push(event.target.value);
+    } else {
+      this.locations.splice(this.locations.indexOf(event.target.value), 1);
+    }
+    this.updateURL();
+    this.updateLocationsDropdown();
+    this.toggleCareers();
+  }
+
+  setFiltersFromURL() {
+    let params = new URLSearchParams(window.location.search);
+    this.departments = [];
+    this.locations = [];
+
+    params.get('departments') && params.get('departments').split(',').forEach(function(department) {
+      this.departments.push(department);
+      document.getElementById(department).checked = true;
+    }, this);
+
+    params.get('locations') && params.get('locations').split(',').forEach(function(location) {
+      let checkbox = document.querySelector(`[id^='${location}']`);
+      if (checkbox) {
+        this.locations.push(location);
+        checkbox.checked = true;
+      }
+    }, this);
+
+    this.updateDepartmentsDropdown();
+    this.updateLocationsDropdown();
+    this.toggleCareers();
+  }
+
+  setupListeners() {
+    const self = this;
+    window.addEventListener('load', function() {
+      if (!document.getElementById('careers')) { return; }
+
+      self.toggleCareers();
+      document.getElementById('department-filter').addEventListener('change', self.departmentChangeHandler.bind(self));
+      document.getElementById('location-filter').addEventListener('change', self.locationChangeHandler.bind(self));
+      self.setFiltersFromURL();
+    });
+
+    window.addEventListener('popstate', function(event) {
+      if (!document.getElementById('careers')) { return; }
+      self.setFiltersFromURL();
+    });
+  }
+}

data/lib/nexmo_developer/app/webpacker/javascript/code_snippet_events/index.js

@@ -0,0 +1,89 @@
+export default () => {
+    let hasTriggeredCopyStat = {};
+    let hasTriggeredLinkStat = {};
+
+    // Track copy to clipboard usage
+    var clipboard = new Clipboard('.copy-button',{
+        text: function(trigger) {
+            return $(trigger).next().find('.main-code').text();
+        }
+    });
+
+    clipboard.on('success', function(e) {
+        let trigger = $(e.trigger);
+
+        let params = {
+            "language": trigger.attr("data-lang"),
+            "snippet": trigger.attr("data-block"),
+            "section": trigger.attr("data-section"),
+            "event": "copy"
+        };
+
+        let key = params['language'] + params['section'] + params['snippet'];
+
+        // We only want to track each copy once per page load
+        if (hasTriggeredCopyStat[key]) { return true; }
+
+        trigger.find('span').text('Copied');
+
+        fetch(createRequest(params))
+            .then((response) => {
+                if (response.ok) { return response.json() }
+                return Promise.reject({ message: 'Bad response from server', response })
+            })
+            .then((payload) => {
+                hasTriggeredCopyStat[key] = true;
+            })
+
+        // Can we point them to the dependencies too?
+        if (trigger.parent().hasClass("main-code")) {
+            trigger.parent().parent().find(".configure-dependencies").prepend("<span class='label label--small'>Don't forget me!</span>");
+        }
+
+    });
+
+
+    clipboard.on('error', function(e) {
+        console.error('Action:', e.action);
+        console.error('Trigger:', e.trigger);
+    });
+
+    // Track source link usage
+    $(document).on('mousedown', '.source-link', function(e){
+        if (e.which === 3) { return; }
+        let trigger = $(this);
+
+        let section = trigger.attr("data-section");
+
+        let params = {
+            "language": trigger.attr("data-lang"),
+            "snippet": trigger.attr("data-block"),
+            "section": section,
+            "event": "source"
+        };
+
+        let key = params['language'] + params['section'];
+
+        if (hasTriggeredLinkStat[key]) { return true; }
+
+        fetch(createRequest(params))
+            .then((response) => {
+                if (response.ok) { return response.json() }
+                return Promise.reject({ message: 'Bad response from server', response })
+            })
+            .then((payload) => {
+                hasTriggeredLinkStat[key] = true;
+            })
+    });
+};
+
+function createRequest(params) {
+    return new Request('/usage/code_snippet', {
+        method: 'POST',
+        credentials: 'same-origin',
+        body: JSON.stringify(params),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+}