Merge pull request #1452 from Nexmo/APIDOC-166_blog_search

APIDOC-166: Algolia BLOG search

lib/nexmo_developer/app/views/search/_result.html.erb

@@ -12,6 +12,26 @@
     </a>
   <% end %>
 
+  <% if index_name == 'prod_blogposts' %>
+    <a href="/<%= hit.link %>">
+      <div>
+        <span class="Vlt-badge Nxd-search__badge" style="background:<%= hit.category.color %>;"><%= hit.category.name %></span>
+        <span class="meta"><%= hit.tags.map(&:upcase).join(' | ') %></span>
+        <h3><%= hit.title %></h3>
+
+        <p class="search-highlighted">
+          <%= sanitize(hit.description, tags: ['em']) %>
+        </p>
+        <span class="meta">
+          <svg class="Vlt-icon Vlt-icon--smaller Vlt-aqua-dark">
+            <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-pentool" />
+          </svg>
+          <%= hit.author.name %>
+        </span>
+      </div>
+    </a>
+  <% end %>
+
 
   <% if index_name.include? 'nexmo_developer' %>
     <a href="<%= hit.path %>">

lib/nexmo_developer/app/views/search/results.html.erb

@@ -6,9 +6,11 @@
       <div class="Vlt-col">
         <div class="Vlt-card">
         <% if index.index.include? 'nexmo_developer' %>
-          <h2>Nexmo Developer</h2>
+          <h2>Vonage Developer</h2>
         <% elsif index.index == 'zendesk_nexmo_articles' %>
           <h2>Knowlegebase</h2>
+        <% elsif index.index == 'prod_blogposts' %>
+          <h2>Blog</h2>
         <% end %>
 
         <hr>

lib/nexmo_developer/app/views/static/404.html.erb

@@ -12,6 +12,8 @@
             <h2>Nexmo Developer</h2>
           <% elsif index.index == 'zendesk_nexmo_articles' %>
             <h2>Knowlegebase</h2>
+          <% elsif index.index == 'prod_blogposts' %>
+            <h2>Blog</h2>
           <% end %>
 
         <hr>

lib/nexmo_developer/app/webpacker/javascript/components/search/Blog.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class='Nxd-search__result'>
+    <a class='Nxd-search__result__link' v-bind:href='url' target='_blank'>
+      <div>
+        <h6 class='Vlt-blue-dark'>{{ title }}</h6>
+        <p class='Nxd-search__result__highlight' v-html='snippet'></p>
+        <span class='Vlt-badge Vlt-badge--grey Nxd-search__badge' :style="colorBadge">{{ badge }}</span>
+      </div>
+    </a>
+  </div>
+</template>
+<script>
+export default {
+  props: ['hit'],
+  computed: {
+    badge: function() {
+      return this.hit.category.name;
+    },
+    colorBadge: function() {
+      return this.hit.category.color ? { background: this.hit.category.color } : { background: '#757575'}
+    },
+    snippet: function() {
+      return `...${this.hit._highlightResult.description.value}...`;
+    },
+    title: function() {
+      return this.hit.title;
+    },
+    url: function() {
+      return `https://developer.vonage.com/${this.hit.link}`;
+    },
+  }
+}
+</script>

lib/nexmo_developer/app/webpacker/javascript/components/search/Search.vue

@@ -47,6 +47,9 @@
               <div v-else-if="isNDPArticle(result)">
                 <NDPArticle v-for="hit in result.hits" v-bind:hit="hit" v-bind:key="hitKey(result, hit)"/>
               </div>
+              <div v-else-if="isBlog(result)">
+                <Blog v-for="hit in result.hits" v-bind:hit="hit" v-bind:key="hitKey(result, hit)"/>
+              </div>
             </div>
             <div v-else>
               <p class="Nxd-search--no-results"><i>No results</i></p>
@@ -62,6 +65,7 @@ import algoliasearch from 'algoliasearch'
 import debounce from 'lodash/debounce'
 import NDPArticle from './NDPArticle.vue';
 import ZendeskArticle from './ZendeskArticle.vue';
+import Blog from './Blog.vue';
 
 export default {
   data: function() {
@@ -107,7 +111,9 @@ export default {
       if (name == 'zendesk_nexmo_articles') {
         return 'Knowledgebase';
       } else if (name.includes('nexmo_developer')) {
-        return 'Nexmo Developer';
+        return 'Vonage Developer';
+      } else if (name == 'prod_blogposts') {
+        return 'Blog';
       }
     },
     isZendeskArticle: function(result) {
@@ -116,6 +122,9 @@ export default {
     isNDPArticle: function(result) {
       return result.index.includes('nexmo_developer');
     },
+    isBlog: function(result) {
+      return result.index == 'prod_blogposts';
+    },
     hitKey: function(result, hit) {
       return result.index + hit.objectID;
     },
@@ -204,7 +213,7 @@ export default {
     }
   },
   components: {
-    ZendeskArticle, NDPArticle
+    ZendeskArticle, NDPArticle, Blog
   }
 }
 </script>

lib/nexmo_developer/app/webpacker/stylesheets/layout/_search.scss

@@ -25,10 +25,11 @@ $quick-search-width: 800px;
   padding-left: $spacing;
 }
 
-.Nxd-search__wrapper { 
+.Nxd-search__wrapper {
   display: flex;
   flex-wrap: wrap;
   margin-right: -1px;
+  min-width: 65vw;
 }
 
 .Nxd-search__result {

lib/nexmo_developer/config/initializers/algolia.rb

@@ -21,7 +21,7 @@
 
   algolia_search_parameters = {
     filters: filters.compact.join(' AND NOT ').prepend('NOT '),
-    attributesToSnippet: ['body', 'body_safe'],
+    attributesToSnippet: ['body', 'body_safe', 'description', 'title'],
   }
 
   ALGOLIA_SECURED_SEARCH_KEY = Algolia.generate_secured_api_key(ENV['ALGOLIA_SEARCH_KEY'], algolia_search_parameters)

lib/nexmo_developer/spec/javascript/components/search/Blog.test.js

@@ -0,0 +1,28 @@
+import { shallowMount } from '@vue/test-utils';
+import Blog from 'components/search/Blog.vue';
+
+describe('Blog', function() {
+  const blog = {
+    "title": "Vonage APIs rock!",
+    "_snippetResult": { "description": { "value": "highlighted snippet" } },
+    "_highlightResult": { "description": { "value": "highlighted snippet" } },
+    "category": { "name": "Category name" },
+    "link": "1/2/3/latest_blog"
+  };
+
+  it('renders the blog', function() {
+    const wrapper = shallowMount(Blog, { propsData: { "hit": blog } });
+
+    expect(wrapper.find('.Nxd-search__result__link').attributes().href).toEqual(
+      'https://developer.vonage.com/1/2/3/latest_blog'
+    );
+
+    expect(wrapper.find('h6.Vlt-blue-dark').text()).toEqual('Vonage APIs rock!');
+
+    expect(wrapper.find('.Nxd-search__result__highlight').text()).toEqual(
+      '...highlighted snippet...'
+    );
+
+    expect(wrapper.find('.Nxd-search__badge').text()).toEqual('Category name');
+  });
+});

lib/nexmo_developer/spec/javascript/components/search/Search.test.js

@@ -9,6 +9,7 @@ import emptySearchFixture from 'javascript/fixtures/emptySearch';
 import Search from 'components/search/Search.vue';
 import NDPArticle from 'components/search/NDPArticle.vue';
 import ZendeskArticle from 'components/search/ZendeskArticle.vue';
+import Blog from 'components/search/Blog.vue';
 
 jest.mock('algoliasearch');
 jest.mock('lodash/debounce', () => jest.fn(fn => fn));
@@ -48,6 +49,7 @@ describe('Search', function() {
 
       expect(wrapper.findComponent(ZendeskArticle).exists()).toBeTruthy();
       expect(wrapper.findComponent(NDPArticle).exists()).toBeTruthy();
+      expect(wrapper.findComponent(Blog).exists()).toBeTruthy();
     });
   });
 
@@ -69,7 +71,7 @@ describe('Search', function() {
 
       await flushPromises();
 
-      expect(wrapper.text()).toContain('Nexmo Developer');
+      expect(wrapper.text()).toContain('Vonage Developer');
       expect(wrapper.text()).toContain('Knowledgebase');
       expect(wrapper.text()).toContain('No results');
     });

lib/nexmo_developer/spec/javascript/fixtures/emptySearch.js

@@ -23,6 +23,18 @@ const emptySearchFixture = {
       "query": "empty",
       "params": "query=empty",
       "index": "zendesk_nexmo_articles"
+    },
+    {
+      "hits": [],
+      "nbHits": 0,
+      "page": 0,
+      "nbPages": 0,
+      "hitsPerPage": 1,
+      "processingTimeMS": 1,
+      "exhaustiveNbHits": true,
+      "query": "empty",
+      "params": "query=empty",
+      "index": "prod_blogposts"
     }
   ]
 };

lib/nexmo_developer/spec/javascript/fixtures/search.js

@@ -154,6 +154,100 @@ const searchFixture = {
       "query": "test",
       "params": "query=test",
       "index": "zendesk_nexmo_articles"
+    },
+    {
+      "hits": [
+        {
+          "locale": {
+            "locale": "en-us",
+            "name": "English",
+            "rtl": false
+          },
+          "id": "212554438",
+          "updated_at": 17662,
+          "position": 0,
+          "title": "What are the limitations of the test period?",
+          "body_safe": "   \n   Question   \n \n Will I always have to enter all my destination numbers when using Nexmo? \n I saw the test message has '[FREE SMS DEMO, TEST MESSAGE]', will these words be removed after I buy credit? \n I saw the test message has '[Nexmo DEMO]', will these words be removed after I buy credit? \n What will no longer be restricted when I am not in testing mode? \n \n   Answer   \n When initially subscribing to Nexmo €2 free test credit is granted. At this stage, the following restrictions are in place: \n \n  your destination numbers need to be whitelisted in advance of you sending SMS, voice calls, or verify to them unless it's to the handset the account was registered with  \n the text [FREE SMS DEMO, TEST MESSAGE] will be included in your SMS  (older accounts will have different wording of [Nexmo DEMO] included instead). \n \n \n Once you move out of the Demo mode you no longer need to whitelist your numbers - you can send to any numbers you want within the local market regulations (see  here  for the local market regulations and restrictions that apply to your destination numbers) and the text [FREE SMS DEMO, TEST MESSAGE] will no longer be appended to the SMS you send. ",
+          "outdated": false,
+          "promoted": false,
+          "vote_sum": 3,
+          "comments_disabled": false,
+          "category": {
+            "id": "200201483",
+            "title": "SMS"
+          },
+          "section": {
+            "id": "200621123",
+            "title": "Outbound SMS",
+            "full_path": "SMS > Outbound SMS",
+            "user_segment": "everybody"
+          },
+          "user_segment": "everybody",
+          "label_names": [
+            "sms",
+            "test"
+          ],
+          "created_at_iso": "2015-10-28T10:16:37Z",
+          "updated_at_iso": "2018-10-29T18:33:59Z",
+          "edited_at": 17662,
+          "edited_at_iso": "2018-05-11T17:07:56Z",
+          "objectID": "218389108",
+          "_snippetResult": {
+            "body_safe": {
+              "value": "using Nexmo? \n I saw the <em>test</em> message has '[FREE SMS",
+                "matchLevel": "full"
+            }
+          },
+          "_highlightResult": {
+            "title": {
+              "value": "What are the limitations of the <em>test</em> period?",
+              "matchLevel": "full",
+              "fullyHighlighted": false,
+              "matchedWords": [
+                "test"
+              ]
+            },
+            "category": {
+              "title": {
+                "value": "SMS",
+                "matchLevel": "none",
+                "matchedWords": []
+              }
+            },
+            "section": {
+              "title": {
+                "value": "Outbound SMS",
+                "matchLevel": "none",
+                "matchedWords": []
+              }
+            },
+            "label_names": [
+              {
+                "value": "sms",
+                "matchLevel": "none",
+                "matchedWords": []
+              },
+              {
+                "value": "<em>test</em>",
+                "matchLevel": "full",
+                "fullyHighlighted": true,
+                "matchedWords": [
+                  "test"
+                ]
+              }
+            ]
+          }
+        }
+      ],
+      "nbHits": 270,
+      "page": 0,
+      "nbPages": 68,
+      "hitsPerPage": 4,
+      "processingTimeMS": 6,
+      "exhaustiveNbHits": true,
+      "query": "test",
+      "params": "query=test",
+      "index": "prod_blogposts"
     }
   ]
 }