Skip to content

Commit cb8c137

Browse files
foxtedfoxted
committedJun 6, 2016
Initial commit
0 parents  commit cb8c137

10 files changed

+194
-0
lines changed
 

‎.babelrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["es2015", "stage-2"],
3+
"plugins": ["transform-runtime"]
4+
}

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DS_Store
2+
node_modules/
3+
dist/build.js
4+
npm-debug.log

‎README.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Snikpik Demo Project
2+
3+
> Snikpik.io demo project
4+
5+
## Build Setup
6+
7+
### install dependencies
8+
```bash
9+
npm install
10+
```
11+
12+
## Serve with hot reload at localhost:8080
13+
```bash
14+
npm run dev
15+
```
16+
17+
# build for production with minification
18+
```bash
19+
npm run build
20+
```
21+
22+
## Setup the API token
23+
24+
- Register on [Snikpik.io](https://snikpik.io)
25+
- Create an API token
26+
- Paste the API token into `src/env.js`
27+
28+
```bash
29+
// Enter your API token here
30+
const API_TOKEN = '<YOUR_API_TOKEN_HERE>';
31+
```
32+

‎dist/.gitkeep

Whitespace-only changes.

‎index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Snikpik Example</title>
6+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
7+
</head>
8+
<body>
9+
<app></app>
10+
<script src="dist/build.js"></script>
11+
</body>
12+
</html>

‎package.json

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "Snikpik Demo Project",
3+
"description": "Snikpik.io demo project",
4+
"author": "Valentin Prugnaud <valentin@whatdafox.com>",
5+
"private": true,
6+
"scripts": {
7+
"watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
8+
"serve": "http-server -c 1 -a localhost",
9+
"dev": "npm-run-all --parallel watchify serve",
10+
"build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
11+
},
12+
"dependencies": {
13+
"vue": "^1.0.0",
14+
"vue-resource": "^0.7.2"
15+
},
16+
"devDependencies": {
17+
"babel-core": "^6.0.0",
18+
"babel-plugin-transform-runtime": "^6.0.0",
19+
"babel-preset-es2015": "^6.0.0",
20+
"babel-preset-stage-2": "^6.0.0",
21+
"babel-runtime": "^6.0.0",
22+
"cross-env": "^1.0.6",
23+
"babelify": "^7.2.0",
24+
"browserify": "^12.0.1",
25+
"browserify-hmr": "^0.3.1",
26+
"http-server": "^0.9.0",
27+
"npm-run-all": "^1.6.0",
28+
"uglify-js": "^2.5.0",
29+
"vueify": "^8.5.2",
30+
"watchify": "^3.4.0"
31+
},
32+
"browserify": {
33+
"transform": [
34+
"vueify",
35+
"babelify"
36+
]
37+
}
38+
}

‎src/App.vue

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div id="app">
3+
<div class="jumbotron">
4+
<div class="container">
5+
<h1>Snikpik Example</h1>
6+
<p class="lead">An example for using Snikpik.io API to get website preview.</p>
7+
</div>
8+
</div>
9+
<div class="container">
10+
<preview></preview>
11+
</div>
12+
</div>
13+
</template>
14+
15+
<script type="text/ecmascript-6">
16+
17+
import Preview from './Preview.vue';
18+
19+
export default {
20+
components: {
21+
Preview
22+
}
23+
}
24+
25+
</script>

‎src/Preview.vue

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<div class="row">
3+
<form action="#" method="POST" class="col-md-6" @submit.prevent="submit">
4+
<h2>1. Enter a URL:</h2>
5+
<div class="form-group">
6+
<textarea name="url" id="url" rows="3"
7+
class="form-control"
8+
v-model="url"
9+
placeholder="http://www.example.com/preview"
10+
11+
>https://liftmap.com</textarea>
12+
</div>
13+
<div class="form-group">
14+
<button type="submit" class="btn btn-primary btn-lg" :disabled="!validateUrl() ? true : false">Preview</button>
15+
</div>
16+
</form>
17+
<div class="col-md-6">
18+
<h2>Display the preview:</h2>
19+
<pre>{{ response | json }}</pre>
20+
</div>
21+
</div>
22+
</template>
23+
24+
<script type="text/ecmascript-6">
25+
26+
import {API_TOKEN} from './env';
27+
28+
export default {
29+
data() {
30+
return {
31+
url: '',
32+
response: '{}'
33+
};
34+
},
35+
36+
methods: {
37+
submit() {
38+
let url = encodeURIComponent(this.url);
39+
40+
this.$http.get(`http://api.snikpik.dev/v1/preview?url=${url}`).then((response) => {
41+
this.response = response.data;
42+
});
43+
},
44+
45+
/**
46+
* Validate the url format to add http if needed
47+
*/
48+
validateUrl() {
49+
let regex = /^(http|https)/;
50+
51+
return this.url.length > 3 && this.url.match(regex);
52+
}
53+
}
54+
}
55+
56+
</script>
57+
58+
<style>
59+
h2 {
60+
margin-bottom: 1em;
61+
}
62+
</style>

‎src/env.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// Enter your API token here
2+
const API_TOKEN = '';
3+
4+
export {API_TOKEN};

‎src/main.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Vue from "vue";
2+
import App from "./App.vue";
3+
import {API_TOKEN} from './env';
4+
5+
Vue.use(require('vue-resource'));
6+
7+
Vue.http.headers.common['Accept'] = 'application/json';
8+
Vue.http.headers.common['Authorization'] = `Bearer ${API_TOKEN}`;
9+
10+
new Vue({
11+
el: 'body',
12+
components: {App}
13+
})

0 commit comments

Comments
 (0)
Please sign in to comment.