generating trending page and basic layout

package.json

@@ -1,36 +1,44 @@
 {
-    "name": "giphy",
-    "displayName": "giphy",
-    "description": "Easily grab a gif from within VS Code to add your to docs, presentations, etc.",
-    "version": "0.0.1",
-    "publisher": "jstewart",
-    "engines": {
-        "vscode": "^1.11.0"
-    },
-    "categories": [
-        "Other"
-    ],
-    "activationEvents": [
-        "onCommand:extension.sayHello"
-    ],
-    "main": "./out/src/extension",
-    "contributes": {
-        "commands": [{
-            "command": "extension.sayHello",
-            "title": "Hello World"
-        }]
-    },
-    "scripts": {
-        "vscode:prepublish": "tsc -p ./",
-        "compile": "tsc -watch -p ./",
-        "postinstall": "node ./node_modules/vscode/bin/install",
-        "test": "node ./node_modules/vscode/bin/test"
-    },
-    "devDependencies": {
-        "typescript": "^2.0.3",
-        "vscode": "^1.0.0",
-        "mocha": "^2.3.3",
-        "@types/node": "^6.0.40",
-        "@types/mocha": "^2.2.32"
-    }
-}
+  "name": "giphy",
+  "displayName": "giphy",
+  "description": "Easily grab a gif from within VS Code to add your to docs, presentations, etc.",
+  "version": "0.0.1",
+  "publisher": "jstewart",
+  "engines": {
+    "vscode": "^1.11.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [
+    "onCommand:giphy.trending"
+  ],
+  "main": "./out/src/main",
+  "contributes": {
+    "commands": [
+      {
+        "command": "giphy.trending",
+        "title": "GIPHY Trending"
+      }
+    ]
+  },
+  "scripts": {
+    "vscode:prepublish": "tsc -p ./",
+    "compile": "tsc -watch -p ./",
+    "postinstall": "node ./node_modules/vscode/bin/install",
+    "test": "node ./node_modules/vscode/bin/test"
+  },
+  "devDependencies": {
+    "typescript": "^2.0.3",
+    "vscode": "^1.0.0",
+    "mocha": "^2.3.3",
+    "@types/node": "^6.0.40",
+    "@types/mocha": "^2.2.32"
+  },
+  "dependencies": {
+    "handlebars": "^4.0.6",
+    "request": "^2.81.0",
+    "request-promise": "^4.2.0",
+    "uuid": "^3.0.1"
+  }
+}

src/giphy.ts

@@ -0,0 +1,81 @@
+const request = require('request');
+const Handlebars = require('handlebars');
+const fs = require('fs');
+const uuidV4 = require('uuid/v4');
+
+class Giphy {
+    private _url: object;
+    private _type: string;
+
+    constructor(type = 'trending') {
+        this._type = type;
+        this._url = {
+            trending: 'http://api.giphy.com/v1/gifs/trending?api_key=dc6zaTOxFJmzC'
+        };
+    }
+
+    getGifs(): Promise<object> {
+        return new Promise((resolve, reject) => {
+            request(this._url[this._type], (error, response, body) => {
+                if (error) {
+                    reject(error);
+                }
+                resolve(JSON.parse(body));
+            });
+        });
+    }
+
+    getTemplate(): string {
+        return [
+            '<style>',
+            'h1 { margin: 20px 10px; }',
+            '.small { font-size: 16px }',
+            '.giphy-container { display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: stretch; align-items: flex-start;flex-wrap: wrap; }',
+            '.giphy-item { display: block; width: auto; height: 250px; margin: 0 10px; }',
+            '.giphy-item__img-container { display: block; width: 100%; height: auto; }',
+            '.giphy-item__img-container img { display: block; max-width: 100%; height: auto; }',
+            '.giphy-item__url-container { display: flex; align-items: center; height: 30px; }',
+            '.giphy-item__url-container input { display: block; width: 100%; border: 1px solid #DDD; height: 30px; padding: 0 10px;}',
+            '</style>',
+            '<h1><span class="small">powered by</span> GIPHY</h1>',
+            '<main class="giphy-container">',
+                '{{#each giphyResults}}',
+                    '<div class="giphy-item" style="width: {{this.images.fixed_height.width}}px;">',
+                        '<div class="giphy-item__img-container">',
+                            '<img src="{{this.images.fixed_height.url}}"/>',
+                        '</div>',
+                        '<div class="giphy-item__url-container">',
+                            '<input type="text" value="https://media.giphy.com/media/{{this.id}}/giphy.gif" />',
+                        '</div>',
+                    '</div>',
+                '{{/each}}',
+            '</main>'
+        ].join('');
+    }
+
+    getId(): string {
+        return uuidV4().split('-')[0];
+    }
+
+    writePage(template): Promise<string> {
+        return new Promise((resolve, reject) => {
+            const filePath = `${__dirname}/${this.getId()}-giphy-preview-${this._type}.html`;
+            fs.writeFile(filePath, template, (error) => {
+                if (error) {
+                    reject(error);
+                }
+                resolve(filePath);
+            });
+        });
+    }
+
+    async generatePage(): Promise<string> {
+        const giphyResults = await this.getGifs();
+        const giphyPreviewTemplate = this.getTemplate();
+        const compiledGiphyTemplate = Handlebars.compile(giphyPreviewTemplate);
+        const dataTemplate = compiledGiphyTemplate({ giphyResults: giphyResults['data'] });
+        return this.writePage(dataTemplate);
+    }
+}
+
+export default Giphy;

src/main.ts

@@ -0,0 +1,33 @@
+'use strict';
+
+import * as vscode from 'vscode';
+import Giphy from './giphy';
+const giphy = new Giphy();
+
+export function activate(context: vscode.ExtensionContext) {
+
+    let giphyTrendingDisposable = vscode.commands.registerCommand('giphy.trending', () => {
+        previewGiphy();
+    });
+
+    context.subscriptions.push(giphyTrendingDisposable);
+}
+
+// this method is called when your extension is deactivated
+export function deactivate() {
+    console.log('I HAVE BEEN DEACTIVATED!! CLEAN UP');
+}
+
+function previewGiphy() {
+    giphy.generatePage()
+        .then((pagePath) => {
+            const pageUri = vscode.Uri.parse(`file://${pagePath}`);
+            return vscode.commands.executeCommand('vscode.previewHtml', pageUri);
+        })
+        .then((success) => {
+            console.log(success);
+        })
+        .catch((error) => {
+            console.log(error);
+        });
+}

test/extension.test.ts

@@ -9,7 +9,7 @@ import * as assert from 'assert';
 // You can import and use all API from the 'vscode' module
 // as well as import your extension to test it
 import * as vscode from 'vscode';
-import * as myExtension from '../src/extension';
+// import * as myExtension from '../src/extension';
 
 // Defines a Mocha test suite to group tests of similar kind together
 suite("Extension Tests", () => {