Permalink
Browse files

Added integration with Netlify quota.

  • Loading branch information...
marcomontalbano committed Sep 20, 2018
1 parent 14be74e commit 83f6446ef8d2f0cb827e414674df5d770bb6332d
View
@@ -1,3 +1,5 @@
NODE_ENV=development
CLOUDINARY_CLOUD_NAME=
FACEBOOK_ACCESS_TOKEN=
SITE_ID=
NETLIFY_ACCESS_TOKEN=
View
@@ -42,6 +42,7 @@
"babel-preset-env": "^1.7.0",
"dotenv": "^5.0.1",
"file-loader": "^2.0.0",
"https-proxy-agent": "^2.2.1",
"jest": "^23.5.0",
"netlify-lambda": "^0.4.0",
"node-fetch": "^2.1.2",
@@ -38,4 +38,4 @@
"density": "4.0"
}
]
}
}
View
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -42,7 +42,7 @@ <h1 class="title"><a href="/">Video to <strong>markdown</strong>!</a></h1>
<label>
Video Url *
<input class="width-100 input" type="url" name="url" placeholder="https://youtu.be/aqz-KE-bpKQ" required="required" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
<img alt="1px transparent image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
</label>
<label>Title<input class="width-100 input" type="text" name="title" /></label>
<div class="buttons">
@@ -53,7 +53,7 @@ <h1 class="title"><a href="/">Video to <strong>markdown</strong>!</a></h1>
<section class="site-app--output">
<div class="output-frame">
<div class="preview">
<img src="./images/placeholder.jpg" />
<img alt="sample image" src="./images/placeholder.jpg" />
</div>
<div class="markdown tooltipped-n border p-2 mb-2 mr-2 float-left" aria-label="Click below to copy the markdown to clipboard.">
<pre class="language"><code class="language">&nbsp;</code></pre>
@@ -95,10 +95,28 @@ <h2>Features</h2>
</div>
</section>
<section class="donations" style="display: none;">
<h2>Donations</h2>
<p>If you like this project and its useful to you, support it!</p>
<section class="invocations">
<div class="progress">
<div style="--percentage: 0;"></div>
</div>
<small>&nbsp;</small>
</section>
<section class="runtime">
<div class="progress">
<div style="--percentage: 0;"></div>
</div>
<small>&nbsp;</small>
</section>
</section>
<section>
<h2>API</h2>
<section>
<section class="bordered">
<pre class="language"><code class="language"><span class="token punctuation"><span class="method">[GET]</span> <span class="url">https://video-to-markdown.netlify.com/.netlify/functions/<b>image-json</b></span>?<span class="param-name">url</span>=<span class="param-value">{video-url}</span></span></code></pre>
<p>
<pre class="language-javascript"><code>{
@@ -110,23 +128,23 @@ <h2>API</h2>
</p>
<p>
The <code>image-json</code> API accept only one <code><b class="param-name">url</b></code> parameter.<br />
The value <code><b class="param-value">{video-url}</b></code> is a video url <small>(e.g. <a href="https://youtu.be/aqz-KE-bpKQ" rel="nofollow" target="_blank">https://youtu.be/aqz-KE-bpKQ</a>)</small>
The value <code><b class="param-value">{video-url}</b></code> is a video url <small>(e.g. <a rel="noopener noreferrer" href="https://youtu.be/aqz-KE-bpKQ" rel="nofollow" target="_blank">https://youtu.be/aqz-KE-bpKQ</a>)</small>
</p>
</section>
<section>
<section class="bordered">
<pre class="language"><code class="language"><span class="token punctuation"><span class="method">[GET]</span> <span class="url">https://video-to-markdown.netlify.com/.netlify/functions/<b>image</b></span>?<span class="param-name">url</span>=<span class="param-value">{video-url}</span></span></code></pre>
<p><code>output</code>:&nbsp;&nbsp;&nbsp;<i class="far fa-image"></i>&nbsp;&nbsp;<small>image</small></p>
<p>
The <code>image</code> API accept only one <code><b class="param-name">url</b></code> parameter.<br />
The value <code><b class="param-value">{video-url}</b></code> is a video url <small>(e.g. <a href="https://youtu.be/aqz-KE-bpKQ" rel="nofollow" target="_blank">https://youtu.be/aqz-KE-bpKQ</a>)</small>
The value <code><b class="param-value">{video-url}</b></code> is a video url <small>(e.g. <a rel="noopener noreferrer" href="https://youtu.be/aqz-KE-bpKQ" rel="nofollow" target="_blank">https://youtu.be/aqz-KE-bpKQ</a>)</small>
</p>
</section>
</section>
<footer>
<a href="https://marcomontalbano.com" target="_blank">Marco Montalbano</a>
<a href="https://github.com/marcomontalbano/video-to-markdown" target="_blank"><i class="fab fa-github"></i> GitHub</a>
<a rel="noopener noreferrer" href="https://marcomontalbano.com" target="_blank">Marco Montalbano</a>
<a rel="noopener noreferrer" href="https://github.com/marcomontalbano/video-to-markdown" target="_blank"><i class="fab fa-github"></i> GitHub</a>
</footer>
</div>
View
@@ -6,6 +6,8 @@ import ClipboardJS from 'clipboard';
import imageNotFound from './images/not-found.jpg';
import imageLoading from './images/loading.jpg';
const lambdaUrl = `${location.protocol}//${location.host}/.netlify/functions`;
const videoIcons = {
dailymotion: require('./images/providers/dailymotion.png'),
facebook: require('./images/providers/facebook.png'),
@@ -46,6 +48,35 @@ loadImage(imageNotFound);
let videoUrl_memo;
function updateQuota(data, functionType) {
let used = data.capabilities.functions[functionType].used;
let included = data.capabilities.functions[functionType].included;
let unit = data.capabilities.functions[functionType].unit;
const percentage = (used / included * 100);
if (unit === 'seconds') {
used = `~ ${Math.round(used / 3600)}`;
included /= 3600;
unit = 'hours';
}
$(`.donations .${functionType} .progress > div`).attr('style', `--percentage: ${percentage};`);
$(`.donations .${functionType} small`).text(`${used} / ${included} ${unit}`);
}
$.getJSON({
url: `${lambdaUrl}/netlify`
})
.done((data) => {
if (data.error !== true) {
updateQuota(data, 'invocations');
updateQuota(data, 'runtime');
$('.donations').show();
}
});
$('form').on('submit', function(e) {
e.preventDefault();
@@ -55,7 +86,6 @@ $('form').on('submit', function(e) {
const title = $form.find('[name="title"]').val();
const videoUrl = $form.find('[name="url"]').val();
const lambdaUrl = `${location.protocol}//${location.host}/.netlify/functions`;
const jsonUrl = `${lambdaUrl}/image-json?url=${videoUrl}`;
const imageUrl = `${lambdaUrl}/image?url=${videoUrl}`;
@@ -1,5 +1,5 @@
import VideoProvider from '../VideoProvider';
import fetch from 'node-fetch';
import fetch from '../proxiedFetch';
// https://developer.dailymotion.com/api
@@ -1,5 +1,5 @@
import VideoProvider from '../VideoProvider';
import fetch from 'node-fetch';
import fetch from '../proxiedFetch';
const { FACEBOOK_ACCESS_TOKEN } = process.env;
@@ -1,5 +1,5 @@
import VideoProvider from '../VideoProvider';
import fetch from 'node-fetch';
import fetch from '../proxiedFetch';
// https://vimeo.com/
@@ -1,5 +1,5 @@
import VideoProvider from '../VideoProvider';
import fetch from 'node-fetch';
import fetch from '../proxiedFetch';
// https://www.youtube.com/
@@ -1,4 +1,4 @@
import fetch from 'node-fetch';
import fetch from './proxiedFetch';
const { CLOUDINARY_CLOUD_NAME } = process.env;
@@ -0,0 +1,13 @@
import nodeFetch from 'node-fetch';
import HttpsProxyAgent from 'https-proxy-agent';
const { HTTP_PROXY, HTTPS_PROXY } = process.env;
module.exports = (url, options = {}) => {
if (HTTP_PROXY) {
options.agent = new HttpsProxyAgent(HTTP_PROXY);
}
return nodeFetch(url, options);
}
View
@@ -45,7 +45,7 @@ exports.handler = (event, context, callback) => {
.catch(error => {
callback(null, {
statusCode: 422,
body: JSON.stringify({ error })
body: JSON.stringify({ error: true })
});
});
};
View
@@ -46,7 +46,7 @@ exports.handler = (event, context, callback) => {
.catch(error => {
callback(null, {
statusCode: 422,
body: JSON.stringify({ error })
body: JSON.stringify({ error: true })
});
});
};
View
@@ -0,0 +1,26 @@
import fetch from './classes/proxiedFetch';
const { SITE_ID, NETLIFY_ACCESS_TOKEN } = process.env;
exports.handler = (event, context, callback) => {
fetch(`https://api.netlify.com/api/v1/sites/${SITE_ID}?access_token=${NETLIFY_ACCESS_TOKEN}`)
.then(response => response.json())
.then(json => {
callback(null, {
statusCode: 200,
body: JSON.stringify({
capabilities: {
functions: json.capabilities.functions
}
}),
});
})
.catch((error) => {
callback(null, {
statusCode: 200,
body: JSON.stringify({ error: true })
});
});
;
};
View
@@ -102,6 +102,27 @@ form {
}
}
.progress {
background: #efefef;
height: 12px;
border-radius: 20px;
overflow: hidden;
> div {
--percentage: 0;
width: calc(var(--percentage) * 1%);
height: 100%;
background-color: hsl(calc(120 - var(--percentage) / 100 * 120), 38%, 62%);
border-radius: 4px;
transition: width 1.2s, background-color 1.2s;
}
~ small {
text-align: right;
display: block;;
}
}
.details {
> section {
padding-bottom: 3em;
@@ -112,9 +133,11 @@ form {
}
> section {
border-bottom: 2px solid #ededed;
margin-top: 2em;
padding: 0 .5em;
&.bordered {
border-bottom: 2px solid #ededed;
}
}
}
}
Oops, something went wrong.

0 comments on commit 83f6446

Please sign in to comment.