docs updates

README.md

@@ -19,8 +19,8 @@
 - [🎉 Features](#-features)
   - [🎆 EXIF extraction](#-exif-extraction)
   - [💰 Cryptocurrency donation via Web3/MetaMask](#-cryptocurrency-donation-via-web3metamask)
-  - [🕸 Related Posts](#-related-posts)
   - [🔍 Search](#-search)
+  - [🕸 Related Posts](#-related-posts)
   - [🐝 Coinhive](#-coinhive)
   - [🏆 SEO component](#-seo-component)
   - [📈 Matomo (formerly Piwik) analytics tracking](#-matomo-formerly-piwik-analytics-tracking)
@@ -62,7 +62,7 @@ Lets visitors say thanks with Bitcoin or Ether. Uses [web3.js](https://github.co
 
 As a fallback, QR codes are generated with [react-qr-svg](https://github.com/no23reason/react-qr-svg) from the addresses defined in [`config.js`](config.js).
 
-<img width="1082" alt="screen shot 2018-10-14 at 22 03 57" src="https://user-images.githubusercontent.com/90316/46921544-1a512080-cffd-11e8-919f-d3e86dbd5cc5.png" />
+<img width="700" alt="screen shot 2018-10-14 at 22 03 57" src="https://user-images.githubusercontent.com/90316/46921544-1a512080-cffd-11e8-919f-d3e86dbd5cc5.png" />
 
 If you want to know how this works, have a look at the respective components under
 
@@ -74,20 +74,28 @@ If you want to know how this works, have a look at the respective components und
 - [`src/components/Web3Donation/utils.jsx`](src/components/Web3Donation/utils.jsx)
 - [`src/components/atoms/Qr.jsx`](src/components/atoms/Qr.jsx)
 
+### 🔍 Search
+
+A global search is provided with [gatsby-plugin-lunr](https://github.com/humanseelabs/gatsby-plugin-lunr). That plugin creates a [Lunr](https://lunrjs.com) search index file of all posts on build time which is then queried against when the search field is used.
+
+<img width="700" alt="screen shot 2018-11-18 at 19 44 30" src="https://user-images.githubusercontent.com/90316/48676679-634f4400-eb6a-11e8-936d-293505d5c5d9.png">
+
+If you want to know how this works, have a look at the respective components under
+
+- [`src/components/Search/Search.jsx`](src/components/Search/Search.jsx)
+- [`src/components/Search/SearchResults.jsx`](src/components/Search/SearchResults.jsx)
+- more in [`src/components/Search/`](src/components/Search/)
+
 ### 🕸 Related Posts
 
 Under each post a list of related posts is displayed which are based on the tags of the currently viewed post. Also allows loading more related posts in place.
 
-<img width="691" alt="screen shot 2018-10-11 at 21 03 03" src="https://user-images.githubusercontent.com/90316/46827531-14f39c00-cd99-11e8-84aa-0e851c32c89c.png" />
+<img width="700" alt="screen shot 2018-10-11 at 21 03 03" src="https://user-images.githubusercontent.com/90316/46827531-14f39c00-cd99-11e8-84aa-0e851c32c89c.png" />
 
 If you want to know how this works, have a look at the respective component under
 
 - [`src/components/molecules/RelatedPosts.jsx`](src/components/molecules/RelatedPosts.jsx)
 
-### 🔍 Search
-
-[gatsby-plugin-lunr](https://github.com/humanseelabs/gatsby-plugin-lunr)
-
 ### 🐝 Coinhive
 
 Includes a component for mining Monero with JavaScript via [Coinhive](https://coinhive.com).

src/components/Search/SearchResults.jsx

@@ -4,27 +4,9 @@ import PropTypes from 'prop-types'
 import { graphql, StaticQuery } from 'gatsby'
 import Container from '../atoms/Container'
 import PostTeaser from '../Post/PostTeaser'
+import SearchResultsEmpty from './SearchResultsEmpty'
 import styles from './SearchResults.module.scss'
 
-const SearchEmpty = ({ searchQuery, results }) => (
-  <div className={styles.empty}>
-    <header className={styles.emptyMessage}>
-      <p className={styles.emptyMessageText}>
-        {searchQuery.length > 1 && results.length === 0
-          ? 'No results found'
-          : searchQuery.length === 1
-          ? 'Just one more character'
-          : 'Awaiting your input'}
-      </p>
-    </header>
-  </div>
-)
-
-SearchEmpty.propTypes = {
-  results: PropTypes.array.isRequired,
-  searchQuery: PropTypes.string.isRequired
-}
-
 const query = graphql`
   query {
     allMarkdownRemark {
@@ -84,7 +66,10 @@ export default class SearchResults extends PureComponent {
                     )}
                   </ul>
                 ) : (
-                  <SearchEmpty searchQuery={searchQuery} results={results} />
+                  <SearchResultsEmpty
+                    searchQuery={searchQuery}
+                    results={results}
+                  />
                 )}
               </Container>
             </div>,

src/components/Search/SearchResults.module.scss

@@ -24,6 +24,11 @@
         flex-wrap: wrap;
         justify-content: space-between;
 
+        @media (min-width: $screen-md) {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
         li {
             display: block;
             flex: 0 0 48%;
@@ -59,33 +64,6 @@
     }
 }
 
-.empty {
-    padding-top: 15vh;
-    display: flex;
-    justify-content: center;
-}
-
-.emptyMessage {
-    color: $brand-grey-light;
-}
-
-.emptyMessageText {
-    margin-bottom: 0;
-    position: relative;
-
-    &::after {
-        overflow: hidden;
-        display: inline-block;
-        vertical-align: bottom;
-        animation: ellipsis steps(4, end) 1s infinite;
-        content: '\2026'; // ascii code for the ellipsis character
-        width: 0;
-        position: absolute;
-        left: 101%;
-        bottom: 0;
-    }
-}
-
 @keyframes fadein {
     0% {
         opacity: 0;
@@ -95,9 +73,3 @@
         opacity: 1;
     }
 }
-
-@keyframes ellipsis {
-    to {
-        width: 1rem;
-    }
-}

src/components/Search/SearchResultsEmpty.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './SearchResultsEmpty.module.scss'
+
+const SearchResultsEmpty = ({ searchQuery, results }) => (
+  <div className={styles.empty}>
+    <header className={styles.emptyMessage}>
+      <p className={styles.emptyMessageText}>
+        {searchQuery.length > 1 && results.length === 0
+          ? 'No results found'
+          : searchQuery.length === 1
+          ? 'Just one more character'
+          : 'Awaiting your input'}
+      </p>
+    </header>
+  </div>
+)
+
+SearchResultsEmpty.propTypes = {
+  results: PropTypes.array.isRequired,
+  searchQuery: PropTypes.string.isRequired
+}
+
+export default SearchResultsEmpty

src/components/Search/SearchResultsEmpty.module.scss

@@ -0,0 +1,34 @@
+@import 'variables';
+
+.empty {
+    padding-top: 15vh;
+    display: flex;
+    justify-content: center;
+}
+
+.emptyMessage {
+    color: $brand-grey-light;
+}
+
+.emptyMessageText {
+    margin-bottom: 0;
+    position: relative;
+
+    &::after {
+        overflow: hidden;
+        display: inline-block;
+        vertical-align: bottom;
+        animation: ellipsis steps(4, end) 1s infinite;
+        content: '\2026'; // ascii code for the ellipsis character
+        width: 0;
+        position: absolute;
+        left: 101%;
+        bottom: 0;
+    }
+}
+
+@keyframes ellipsis {
+    to {
+        width: 1rem;
+    }
+}