Merge branch 'master' into language-query-fix

data/locale.yml

@@ -10,6 +10,7 @@ nav:
   contact: Contact
   languages: Languages
   code_of_conduct: Code of Conduct
+  search: Search
 
 docs:
   title: Electron Documentation
@@ -197,4 +198,9 @@ _404:
   please_file_an_issue: please file an issue.
 
 search:
-  description: Search within Electron documentations and community.
+  description:
+    start: Find Electron resources from
+    docs: <a href="/search/docs">documentation</a>
+    npm: <a href="/search/npmPackages">npm packages</a>
+    and: and
+    repos: <a href="/search/repos">GitHub repos</a>

package.json

@@ -35,8 +35,8 @@
     "description": "0.0.4",
     "dotenv": "^4.0.0",
     "electron-api-historian": "1.1.0",
-    "electron-apps": "1.2179.0",
-    "electron-i18n": "0.55.0",
+    "electron-apps": "1.2227.0",
+    "electron-i18n": "0.61.0",
     "electron-npm-packages": "3.0.0",
     "electron-releases": "2.2.0",
     "electron-userland-reports": "1.6.0",

routes/search/index.js

@@ -5,7 +5,10 @@ const operations = require('./operations')
 
 module.exports = (req, res) => {
   if (!req.query.q) {
-    return res.render('search', Object.assign({}, req.context, { query: null }))
+    return res.render('search', Object.assign({}, req.context, {
+      searchIn: req.params.searchIn,
+      query: null
+    }))
   }
 
   let searchOps = []

routes/search/operations.js

@@ -1,7 +1,8 @@
 module.exports = [
   {
     name: 'docs',
-    displayName: 'Documentation',
+    displayName: 'Docs',
+    octicon: 'file-text',
     query: `query FilterDocs($filter: String) {
       docs(filter: $filter){
         title
@@ -17,6 +18,7 @@ module.exports = [
   }, {
     name: 'npmPackages',
     displayName: 'npm Packages',
+    octicon: 'package',
     query: `query FilterNpmPackages($filter: String) {
       npmPackages(filter: $filter){
         name
@@ -28,6 +30,7 @@ module.exports = [
   }, {
     name: 'repos',
     displayName: 'Github Repos',
+    octicon: 'mark-github',
     query: `query FilterRepos($filter: String) {
       repos(filter: $filter){
         fullName

server.js

@@ -1,3 +1,5 @@
+require('make-promises-safe')
+
 const argv = require('minimist')(process.argv.slice(2))
 const path = require('path')
 const i18n = require('./lib/i18n')

styles/_search.scss

@@ -1,11 +1,18 @@
 ul.search-results {
-  list-style: none
+  list-style: none;
+
+  li {
+    border-top: 1px solid $border-color;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1;
+  }
 }
 
-p.description {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+span.description {
+  opacity: 0.7;
 }
 
 span.label {
@@ -14,6 +21,16 @@ span.label {
   color: $main-color-subtle;
   border: 1px solid $main-border-color;
   border-radius: 3px;
+  line-height: 1.8;
+  vertical-align: inherit;
+}
+
+.faint {
+  opacity: 0.6;
+}
+
+h2 .faint {
+  opacity: 0.4;
 }
 
 .search-form {

test/index.js

@@ -1,4 +1,5 @@
 require('make-promises-safe')
+
 const { describe, it, beforeEach, afterEach } = require('mocha')
 const test = it
 const supertest = require('supertest')

views/home.html

@@ -26,7 +26,7 @@ <h1 class="text-center-sm">{{{localized.electron_is_easy.title}}}</h1>
     <p class="text-center-sm mt-4">
       <a class="btn btn-lg btn-outline-themed" href="https://youtu.be/8YP_nOCO-4Q">
         <span class="octicon octicon-eye mr-1"></span>
-        <span class="label">{{{localized.electron_is_easy.video_link}}}</span>
+        <span>{{{localized.electron_is_easy.video_link}}}</span>
       </a>
     </p>
 
@@ -112,7 +112,7 @@ <h3 class="mt-1 mb-3">{{{localized.explore.title}}}</h3>
         <p>
           <a id="download-latest-release" class="btn btn-lg btn-outline-themed" href="https://github.com/electron/electron-api-demos/releases">
             <span class="octicon octicon-desktop-download mr-1"></span>
-            <span class="label">{{{localized.download_from_github}}}</span>
+            <span>{{{localized.download_from_github}}}</span>
           </a>
         </p>
         <p id="download-alternatives" class="text-sm" style="display:none;">

views/partials/header.html

@@ -17,6 +17,7 @@
     </a>
 
     <nav class="site-header-nav">
+      <a class="site-header-nav-item" href="/search">{{localized.nav.search}}</a>
       <a class="site-header-nav-item" href="/apps">{{localized.nav.apps}}</a>
       <a class="site-header-nav-item" href="/docs">{{localized.nav.docs}}</a>
       <a class="site-header-nav-item" href="/blog">{{localized.nav.blog}}</a>

views/partials/search/docs.html

@@ -1,14 +1,14 @@
 <ul class="search-results mx-0">
   {{#each results}}
-    <li class="my-3">
+    <li class="py-3">
       <a class="text-bold" href="{{this.href}}">{{this.title}}</a>
       <span class="label px-2 mx-2">
         {{#if isApiDoc}}API{{/if}}
         {{#if isApiStructureDoc}}API{{/if}}
         {{#if isDevTutorial}}Development{{/if}}
         {{#if isTutorial}}Tutorial{{/if}}
       </span>
-      <p class="description">{{description}}</p>
+      <span class="description">{{description}}</span>
     </li>
   {{/each}}
 </ul>

views/partials/search/npm-packages.html

@@ -1,8 +1,8 @@
 <ul class="search-results mx-0">
   {{#each results}}
-    <li class="my-3">
-      <a class="text-bold" href="https://www.npmjs.com/package/{{this.name}}" target="_blank">{{this.name}}</a>
-      <p class="description">{{this.description}}</p>
+    <li class="py-3">
+      <a class="text-bold" href="https://www.npmjs.com/package/{{this.name}}">{{this.name}}</a>
+      <span class="description">{{this.description}}</span>
     </li>
   {{/each}}
 </ul>

views/partials/search/repos.html

@@ -1,8 +1,8 @@
 <ul class="search-results mx-0">
   {{#each results}}
-  <li class="my-3">
-    <a class="text-bold" href="https://www.github.com/{{this.fullName}}" target="_blank">{{this.fullName}}</a>
-    <p class="description">{{this.description}}</p>
+  <li class="py-3">
+    <a class="text-bold" href="https://www.github.com/{{this.fullName}}">{{this.fullName}}</a>
+    <span class="description">{{this.description}}</span>
   </li>
   {{/each}}
 </ul>

views/search.html

@@ -1,12 +1,12 @@
 {{#*inline "searchForm"}}
-<form class="search-form">
+<form action="/search" method="get" class="search-form">
   <input
-    class="col-sm-8 col-xs-12 px-4 py-3 my-2"
+    class="col-sm-8 col-xs-12 px-3 py-3 my-2"
     placeholder="> search_term"
     type="search"
     autofocus="on"
+    autocapitalize="off"
     autocorrect="off"
-    method="get"
     name="q"
     value="{{query.q}}"
   >
@@ -20,26 +20,46 @@
   <section class="page-section">
     <div class="container-narrow search-results">
       {{> searchForm}}
-      <h4 class="mb-4">Search Results for <i>"{{query.q}}"</i></h4>
-      {{#each searchResults}}
-      <div>
-        <h2>{{searchOp.displayName}} ({{resultsNum}})</h2>
+      <h4 class="mb-4">Search Results for <i>&ldquo;{{query.q}}&rdquo;</i></h4>
 
-        {{> (lookup searchOp 'partial')}}
+      {{#each searchResults}}
+        <div class="my-8">
+
+          <h2>
+            <a href="search/{{searchOp.name}}?q={{../query.q}}"><span class="mega-octicon octicon-{{searchOp.octicon}} mr-1"></span></a>
+            <a href="search/{{searchOp.name}}?q={{../query.q}}">{{searchOp.displayName}}</a>
+            <span class="faint">({{resultsNum}})</span>
+          </h2>
+
+          {{> (lookup searchOp 'partial')}}
 
-        {{#unless ../searchIn}}
-          <div class="mt-3"><a href="search/{{searchOp.name}}?q={{../query.q}}">View all results from {{searchOp.displayName}}&nbsp<span class="octicon octicon-arrow-small-right"></span></a></div>
-        {{/unless}}
-      </div>
-      <hr></hr>
+          {{#unless ../searchIn}}
+            <div class="mt-3"><a href="search/{{searchOp.name}}?q={{../query.q}}">View more results &nbsp;<span class="octicon octicon-arrow-small-right"></span></a></div>
+          {{/unless}}
+        </div>
       {{/each}}
     </div>
   </section>
 {{else}}
-
   <section class="page-section">
     <div class="container-narrow">
-      <p class="lead m-3 text-center">{{localized.search.description}}</p>
+      <p class="lead m-4 text-center">
+        {{localized.search.description.start}}
+        {{#if searchIn}}
+          {{#eq searchIn 'docs'}}
+            {{{localized.search.description.docs}}}.
+          {{/eq}}
+          {{#eq searchIn 'npmPackages'}}
+            {{{localized.search.description.npm}}}.
+          {{/eq}}
+          {{#eq searchIn 'repos'}}
+            {{{localized.search.description.repos}}}.
+          {{/eq}}
+        {{else}}
+          {{{localized.search.description.docs}}},
+          {{{localized.search.description.npm}}}, {{localized.search.description.and}} {{{localized.search.description.repos}}}.
+        {{/if}}
+      </p>
       {{> searchForm}}
     </div>
   </section>