Merge pull request #1 from IMBurbank/glitch

🌈💂 Updated with Glitch - v1.0.0

.config/configstore/update-notifier-npm.json

@@ -1,4 +1,4 @@
 {
 	"optOut": false,
-	"lastUpdateCheck": 1501191448412
+	"lastUpdateCheck": 1501952465958
 }

.glitch-assets

@@ -1,3 +1,9 @@
 {"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"}
 {"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"}
 {"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"}
+{"name":"favicon.ico","date":"2017-08-05T19:31:39.799Z","url":"https://cdn.glitch.com/5c795a21-9bc7-4a14-9c9d-409f90b57ca0%2Ffavicon.ico","type":"image/x-icon","size":32038,"imageWidth":64,"imageHeight":64,"thumbnail":"https://cdn.glitch.com/5c795a21-9bc7-4a14-9c9d-409f90b57ca0%2Ffavicon.ico","thumbnailWidth":64,"thumbnailHeight":64,"dominantColor":null,"uuid":"31cUfarDYCUSu1bV"}
+{"uuid":"adSBq97hhhpFNUna","deleted":true}
+{"uuid":"adSBq97hhhpFNUnb","deleted":true}
+{"uuid":"adSBq97hhhpFNUnc","deleted":true}
+{"uuid":"31cUfarDYCUSu1bV","deleted":true}
+{"name":"favicon.ico","date":"2017-08-05T19:44:40.101Z","url":"https://cdn.glitch.com/5c795a21-9bc7-4a14-9c9d-409f90b57ca0%2Ffavicon.ico","type":"image/x-icon","size":32038,"imageWidth":64,"imageHeight":64,"thumbnail":"https://cdn.glitch.com/5c795a21-9bc7-4a14-9c9d-409f90b57ca0%2Ffavicon.ico","thumbnailWidth":64,"thumbnailHeight":64,"dominantColor":null,"uuid":"y0sCEOhStQooC8kt"}

README.md

@@ -1,27 +1,61 @@
-Welcome to the Glitch BETA
+img-find
 =========================
 
-Click `Show` in the header to see your app live. Updates to your code will instantly deploy and update live.
+------------------------------
 
-**Glitch** is the friendly commmunity where you'll build the app of your dreams. Glitch lets you instantly create, remix, edit, and host an app, bot or site, and you can invite collaborators or helpers to simultaneously edit code with you.
+### An Image Search Abstraction Layer
 
-Find out more [about Glitch](https://glitch.com/about).
+* [https://img-find.glitch.me/](https://img-find.glitch.me/)
 
+Use this microservice to retrieve image search results in json. The six available parameters for this API are described below.
 
-Your Project
-------------
+### How To Use
 
-On the front-end,
-- edit `public/client.js`, `public/style.css` and `views/index.html`
-- drag in `assets`, like images or music, to add them to your project
+Append your search query parameters to the end of the API search endpoint `https://img-find.glitch.me/search?`  with all parameters separated by the symbol `&`.
 
-On the back-end,
-- your app starts at `server.js`
-- add frameworks and packages in `package.json`
-- safely store app secrets in `.env` (nobody can see this but you and people you invite)
+**Example Query**
 
+`https://img-find.glitch.me/search?offset=2&q=fancy penguins&size=large`
 
-Made by [Fog Creek](https://fogcreek.com/)
--------------------
+**Example Output**
+
+```
+  [
+    {
+      "snippet": "Penguin cartoon – penguins at a fancy dress ...",
+      "url": "http://www.chrismadden.co.uk/images/cartoons ...",
+      "thumbnail": "https://encrypted-tbn0.gstatic.com/ ...",
+      "context": "http://www.chrismadden.co.uk/cartoon ..."
+    },
+    {
+      "snippet": "Kracker's Art Suite",
+      "url": "http://thestuffinthemargin.files.wordpress ...",
+      "thumbnail": "https://encrypted-tbn0.gstatic.com/ ...",
+      "context": "http://krackerartsuite.blogspot.com/"
+    }
+  ]
+```
+
+### Parameters
+
+|Parameter    |Description             |
+|-------------|------------------------|
+|q            |Query (string)         |
+|num |Number of search results to return per page. Default: 10 Max: 10 (integer)|
+|offset       |Page of search results to return. Default: 1 Max: 90 (integer)|
+|size|Img size: icon, small, medium, large, xlarge, xxlarge, or huge. (string)|
+|type|Img type. Including: bmp, gif, png, jpg, svg, pdf, ... (string)|
+|rights|Licensing values include: cc_publicdomain, cc_attribute, cc_sharealike, cc_noncommercial, cc_nonderived & combinations of these. (string)|
+
+### API Explorer Form
 
-\ ゜o゜)ノ
+You can use the form on the [API landing page](https://img-find.glitch.me/) to explore the API. Searches will return the query url and example output printed in formatted json.
+
+**Project Landing Page**
+
+* [https://img-find.glitch.me/](https://img-find.glitch.me/)
+
+-------------------------
+
+Made by [IMBurbank](https://fogcreek.com/)
+-------------------

package.json

@@ -1,28 +1,31 @@
 {
-  "//1": "describes your app and its dependencies",
-  "//2": "https://docs.npmjs.com/files/package.json",
-  "//3": "updating this file will download and update your packages",
-
-  "name": "my-glitch-app",
-  "version": "0.0.1",
-  "description": "What am I about?",
+  "name": "img-find",
+  "version": "1.0.0",
+  "description": "An Image Search Abstraction Layer",
   "main": "server.js",
   "scripts": {
     "start": "node server.js"
   },
   "dependencies": {
-    "express": "^4.15.3"
+    "express": "^4.15.3",
+    "axios": "^0.16.2",
+    "mongodb": "^2.2.30"
   },
   "engines": {
-    "node": "8.x"
+    "node": "8.1.x"
   },
   "repository": {
-    "url": "https://glitch.com/edit/#!/welcome-project"
+    "url": "https://github.com/IMBurbank/img-find"
   },
   "license": "MIT",
   "keywords": [
     "node",
     "glitch",
-    "express"
+    "express",
+    "mongodb",
+    "es8",
+    "image-search-abstraction",
+    "glitch",
+    "freecodecamp"
   ]
-}
+}

public/client.js

@@ -1,26 +1,38 @@
 // client-side js
-// run by the browser each time your view template is loaded
+// run by the browser each time view template is loaded
 
-// by default, you've got jQuery,
-// add other scripts at the bottom of index.html
 
-$(function() {
-  console.log('hello world :o');
+(function() {
+  var baseUrl = 'https://img-find.glitch.me/search?',
+      output = document.getElementById('output'),
+      request = document.getElementById('request'),
+      topInput = document.getElementById('input-q'),
+      queryKeyMap;
 
-  $.get('/dreams', function(dreams) {
-    dreams.forEach(function(dream) {
-      $('<li></li>').text(dream).appendTo('ul#dreams');
-    });
+  fetch('/queryKeyMap').then( function(response) {
+    return response.json();
+  }).then( function(json) {
+    queryKeyMap = json;
   });
-
-  $('form').submit(function(event) {
+
+  topInput.focus();
+
+  document.getElementById('search-form').onsubmit = function(event) {
     event.preventDefault();
-    var dream = $('input').val();
-    $.post('/dreams?' + $.param({dream: dream}), function() {
-      $('<li></li>').text(dream).appendTo('ul#dreams');
-      $('input').val('');
-      $('input').focus();
+
+    var query = Object.keys(queryKeyMap).reduce( function(queryStr, key) {
+      return event.target['input-' + key].value ? 
+        queryStr + key + '=' + event.target['input-' + key].value + '&' : 
+        queryStr;
+    }, '');
+
+    fetch('/search?' + query).then( function(response) {
+      return response.json();
+    }).then( function(json) {
+      request.innerText = baseUrl + query;
+      output.innerHTML = '<pre>' + JSON.stringify(json, null, '  ') + '</pre>';
+      topInput.value = '';
+      topInput.focus();
     });
-  });
-
-});
+  }
+}());

public/style.css

@@ -1,8 +1,5 @@
 /* styles */
-/* called by your view template */
 
-/* You might want to try something fancier: */
-/* less: http://lesscss.org/ */
 
 * {
   box-sizing: border-box;
@@ -15,58 +12,69 @@ body {
 
 h1 {
   font-weight: bold;
-  color: pink;
+  text-decoration: underline;
 }
 
-.bold {
+h3 {
   font-weight: bold;
+  margin: 1.25em 0 .5em 0;
+}
+
+h1, h3, .bold {
+  color: #068799;
 }
 
 p {
   max-width: 600px;
+  margin: 0 0 .25em 1em;
+  font-size: .9rem;
+}
+
+pre {
+  max-width: 600px;
+  min-width: 500px;
 }
 
 form {
   margin-bottom: 25px;
   padding: 15px;
-  background-color: cyan;
+  background-color: #fffdea;
   display: inline-block;
   width: 100%;
-  max-width: 340px;
+  max-width: 600px;
+  min-width: 500px;
   border-radius: 3px;
 }
 
 input {
-  display: block;
-  margin-bottom: 10px;
+  display: inline-block;
+  margin: 5px 10px;
   padding: 5px;
-  width: 100%;
   border: 1px solid lightgrey;
   border-radius: 3px;
-  font-size: 16px;
+  font-size: .9rem;
 }
 
 button {
+  margin: 5px 2px 2px 0;
   font-size: 16px;
   border-radius: 3px;
-  background-color: lightgrey;
+  background-color: #0970b5;
   border: 1px solid grey;
-  box-shadow: 2px 2px teal;
+  box-shadow: 2px 2px #02406d;
+  color: white;
   cursor: pointer;
 }
 
 button:hover {
-  background-color: yellow;
+  background-color: #1e8cdb;
 }
 
 button:active {
+  margin: 7px 0 0 2px;
   box-shadow: none;
 }
 
-li {
-  margin-bottom: 5px;
-}
-
 footer {
   margin-top: 50px;
   padding-top: 25px;
@@ -77,6 +85,33 @@ footer > a {
   color: #BBBBBB;
 }
 
-.nicejob {
-  text-decoration: line-through;
+.sub-section {
+  margin-left: .5rem;
 }
+
+.row {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  font-size: .8rem;
+}
+
+.row-label {
+  width: 3.5em;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.row-description {
+  flex-grow: 1;
+}
+
+.bold {
+  margin: .5em 0;
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+.short-code, .output-container, pre {
+  background: #eff7f9;
+}