Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Update dependencies and remove jQuery
  • Loading branch information
marcomontalbano committed Apr 10, 2019
1 parent 0ec354f commit 0b3703f
Show file tree
Hide file tree
Showing 7 changed files with 1,206 additions and 966 deletions.
1,924 changes: 1,069 additions & 855 deletions package-lock.json

Large diffs are not rendered by default.

32 changes: 16 additions & 16 deletions package.json
@@ -1,6 +1,6 @@
{
"name": "video-to-markdown",
"version": "1.2.1",
"version": "1.3.0",
"private": true,
"description": "How to embed a video in markdown? Here the answer. Add videos to your markdown files easier.",
"homepage": "https://video-to-markdown.netlify.com/",
Expand All @@ -22,7 +22,8 @@
"facebook",
"vimeo",
"dailymotion",
"asciinema"
"asciinema",
"netlify"
],
"engines": {
"node": ">= 8.x"
Expand All @@ -38,31 +39,30 @@
]
},
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"babel-jest": "^24.3.1",
"dotenv": "^6.2.0",
"file-loader": "^2.0.0",
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"babel-jest": "^24.7.1",
"dotenv": "^7.0.0",
"file-loader": "^3.0.1",
"https-proxy-agent": "^2.2.1",
"jest": "^24.3.1",
"netlify-lambda": "^1.4.2",
"jest": "^24.7.1",
"netlify-lambda": "^1.4.3",
"node-fetch": "^2.3.0",
"node-sass": "^4.11.0",
"npm-run-all": "^4.1.5",
"parcel": "^1.10.3",
"parcel": "^1.12.3",
"posthtml-include": "^1.2.0",
"super-gigi": "^1.17.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"clipboard": "^2.0.4",
"file-type": "^10.6.0",
"hint.css": "~2.5.1",
"jquery": "^3.3.1",
"file-type": "^10.10.0",
"hint.css": "^2.5.1",
"nprogress": "^0.2.0",
"prismjs": "^1.15.0"
"prismjs": "^1.16.0"
},
"scripts": {
"test": "jest",
Expand Down
41 changes: 0 additions & 41 deletions src/images/favicon/manifest.json

This file was deleted.

4 changes: 2 additions & 2 deletions src/index.html
Expand Up @@ -21,7 +21,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./images/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
<link rel="manifest" href="./images/favicon/manifest.json">
<link rel="manifest" href="./manifest.webmanifest">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./images/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
Expand Down Expand Up @@ -96,7 +96,7 @@ <h2>Features</h2>
</div>
</section>

<section class="donations" style="display: none;">
<section class="donations hidden">
<h2>Donations</h2>
<p>If you like this project and its useful to you, support it!</p>
<section class="invocations">
Expand Down
101 changes: 51 additions & 50 deletions src/index.js
@@ -1,4 +1,3 @@
import $ from 'jquery';
import Prism from 'prismjs';
import NProgress from 'nprogress';
import ClipboardJS from 'clipboard';
Expand All @@ -24,14 +23,16 @@ NProgress.configure({
new ClipboardJS('.markdown');

const loadImage = (src, success = () => { }, error = () => { }) => {
$('<img>')
.on('load', () => {
success.apply(this, arguments);
})
.on('error', () => {
error.apply(this, arguments);
})
.attr('src', src);
const img = document.createElement('img');
img.addEventListener('load', () => {
success.apply(this, arguments);
});

img.addEventListener('error', () => {
error.apply(this, arguments);
});

img.src = src;
};

const updateMarkdown = (title, imageUrl, videoUrl) => {
Expand All @@ -40,8 +41,11 @@ const updateMarkdown = (title, imageUrl, videoUrl) => {
`<span class="token punctuation">[![<span class="token attr-value">${title}</span>](<span class="token attr-value">${imageUrl}</span>)](<span class="token attr-value">${videoUrl}</span> "<span class="token attr-value">${title}</span>")</span>`
;

$('.markdown').toggleClass('hint--top', title !== undefined);
$('.markdown').attr('data-clipboard-text', $('.markdown code').html(markdown).text());
const markdownElement = document.querySelector('.markdown');
const markdownCodeElement = markdownElement.querySelector('code');
markdownCodeElement.innerHTML = markdown;
markdownElement.classList.toggle('hint--top', title !== undefined);
markdownElement.setAttribute('data-clipboard-text', markdownCodeElement.textContent);
};

loadImage(imageLoading);
Expand All @@ -62,31 +66,29 @@ function updateQuota(data, functionType) {
unit = 'hours';
}


$(`.donations .${functionType} .progress > div`).attr('style', `--percentage: ${percentage};`);
$(`.donations .${functionType} small`).text(`${used} / ${included} ${unit}`);
document.querySelector(`.donations .${functionType} .progress > div`).style.setProperty('--percentage', percentage);
document.querySelector(`.donations .${functionType} small`).textContent = `${used} / ${included} ${unit}`;
}

$.getJSON({
url: `${lambdaUrl}/netlify`
})
.done((data) => {
if (data.error !== true) {
updateQuota(data, 'invocations');
updateQuota(data, 'runtime');
$('.donations').show();
}
});
fetch(`${lambdaUrl}/netlify`)
.then(response => response.json())
.then(data => {
if (data.error !== true) {
updateQuota(data, 'invocations');
updateQuota(data, 'runtime');
document.querySelector('.donations').classList.remove('hidden');
}
});

$('form').on('submit', function(e) {
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault();

NProgress.start();

const $form = $(this);
const formElement = e.currentTarget;

const title = $form.find('[name="title"]').val();
const videoUrl = $form.find('[name="url"]').val();
const title = formElement.querySelector('[name="title"]').value;
const videoUrl = formElement.querySelector('[name="url"]').value;
const jsonUrl = `${lambdaUrl}/image-json?url=${encodeURIComponent(videoUrl)}`;
const imageUrl = `${lambdaUrl}/image?url=${encodeURIComponent(videoUrl)}`;

Expand All @@ -98,28 +100,27 @@ $('form').on('submit', function(e) {

videoUrl_memo = videoUrl;

$form.find('[name="url"] ~ img').attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
$('.preview img').attr('src', imageLoading);
formElement.querySelector('[name="url"] ~ img').setAttribute('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
document.querySelector('.preview img').setAttribute('src', imageLoading);
updateMarkdown();

$.getJSON({
url: jsonUrl
})
.done((data) => {
loadImage(data.base64, () => {
NProgress.done();
$form.find('[name="url"] ~ img').attr('src', videoIcons[data.provider]);
$('.preview img').attr('src', data.base64);
updateMarkdown(title, imageUrl, videoUrl);
});
})
.fail(() => {
loadImage(imageNotFound, () => {
NProgress.done();
videoUrl_memo = imageNotFound;
$form.find('[name="url"] ~ img').attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
$('.preview img').attr('src', imageNotFound);
updateMarkdown();
});
});
fetch(jsonUrl).then(r => r.json())
.then(data => {
loadImage(data.base64, () => {
NProgress.done();
formElement.querySelector('[name="url"] ~ img').setAttribute('src', videoIcons[data.provider]);
document.querySelector('.preview img').setAttribute('src', data.base64);
updateMarkdown(title, imageUrl, videoUrl);
});
})
.catch(() => {
loadImage(imageNotFound, () => {
NProgress.done();
videoUrl_memo = imageNotFound;
formElement.querySelector('[name="url"] ~ img').setAttribute('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
document.querySelector('.preview img').setAttribute('src', imageNotFound);
updateMarkdown();
});
})
;
});
56 changes: 56 additions & 0 deletions src/manifest.webmanifest
@@ -0,0 +1,56 @@
{
"name": "Video to Markdown",
"short_name": "Video to Markdown",
"description": "How to embed a video in markdown? Here the answer. Add videos to your markdown files easier.",
"display": "standalone",
"start_url": ".",
"background_color": "#42474b",
"theme_color": "#ffffff",
"icons": [
{
"src": ".\/images\/favicon\/apple-icon-57x57.png",
"sizes": "57x57",
"type": "image\/png"
},
{
"src": ".\/images\/favicon\/apple-icon-60x60.png",
"sizes": "60x60",
"type": "image\/png"
},
{
"src": ".\/images\/favicon\/apple-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png"
},
{
"src": ".\/images\/favicon\/apple-icon-76x76.png",
"sizes": "76x76",
"type": "image\/png"
},
{
"src": ".\/images\/favicon\/apple-icon-114x114.png",
"sizes": "114x114",
"type": "image\/png"
},
{
"src": ".\/images\/favicon\/apple-icon-120x120.png",
"sizes": "120x120",
"type": "image\/png"
},
{
"src": ".\/images\/favicon\/apple-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png"
},
{
"src": ".\/images\/favicon\/apple-icon-152x152.png",
"sizes": "152x152",
"type": "image\/png"
},
{
"src": ".\/images\/favicon\/apple-icon-180x180.png",
"sizes": "180x180",
"type": "image\/png"
}
]
}
14 changes: 12 additions & 2 deletions src/styles/_homepage.scss
Expand Up @@ -126,9 +126,13 @@ form {

.details {
> section {
padding-bottom: 3em;
padding-top: 2em;
padding: {
top: 2em;
bottom: 3em;
}
border-top: 1px solid #dcdcdc;
opacity: 1;
transition: opacity .5s;
&:first-child {
border-top: none;
}
Expand All @@ -140,5 +144,11 @@ form {
border-bottom: 2px solid #ededed;
}
}

&.hidden {
opacity: 0;
max-height: 0;
padding: 0;
}
}
}

0 comments on commit 0b3703f

Please sign in to comment.