Skip to content

Commit

Permalink
Partially added 'image.json' API
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcomontalbano
marcomontalbano committed Sep 15, 2018
1 parent 3f7173b commit dacd064
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 90 deletions.
211 changes: 122 additions & 89 deletions src/index.html
View file
@@ -1,112 +1,145 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Video to markdown!</title>
<meta name="description" content="Add videos to your markdown files easier." />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="./styles/index.scss">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./images/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./images/favicon/android-icon-192x192.png">
<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">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./images/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>

<div class="dark-bg">

<div class="container">

<header>
<h1 class="title"><a href="/">Video to <strong>markdown</strong>!</a></h1>
</header>

<div class="row site-app">
<section class="site-app--input">
<form>
<label>Video Url *<input class="width-100 input" type="url" name="url" placeholder="https://youtu.be/aqz-KE-bpKQ" required="required" /></label>
<label>Title<input class="width-100 input" type="text" name="title" /></label>
<div class="buttons">
<button class="button">convert to markdown</button>
</div>
</form>
</section>
<section class="site-app--output">
<div class="output-frame">
<div class="preview">
<img 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>
</div>
</div>
</section>
</div>


<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Video to markdown!</title>
<meta name="description" content="Add videos to your markdown files easier." />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="./styles/index.scss">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./images/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./images/favicon/android-icon-192x192.png">
<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">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./images/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>

<body>

<div class="dark-bg">

<div class="container">

<header>
<h1 class="title"><a href="/">Video to <strong>markdown</strong>!</a></h1>
</header>

<div class="row site-app">
<section class="site-app--input">
<form>
<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=" />
</label>
<label>Title<input class="width-100 input" type="text" name="title" /></label>
<div class="buttons">
<button class="button">convert to markdown</button>
</div>
</form>
</section>
<section class="site-app--output">
<div class="output-frame">
<div class="preview">
<img 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>
</div>
</div>
</section>
</div> </div>


</div> </div>


<div class="container details"> </div>

<div class="container details">

<section>
<h2>Why?</h2>
<p>
How often did you find yourself googling <img alt="How to embed a video in markdown?" style="width: 335px; max-width:75%; vertical-align: middle;"
src="./images/google.png" />
</p>
<p>
While its not possible to embed a video in markdown, the best and easiest way is to extract a frame
from the video, add a layer with a play icon and link the video url on the image.<br />
Speaking HTMLese, this is what you would do:
<pre class="language-html"><code>&lt;a href="{video-url}" title="Link Title"&gt;&lt;img src="{image-url}" alt="Alternate Text" /&gt;&lt;/a&gt;</code></pre>
that translates into markdown as:
<pre class="language"><code class="language"><span class="token punctuation">[![<span class="token attr-value">Alternate Text</span>](<span class="token attr-value">{image-url}</span>)](<span class="token attr-value">{video-url}</span> "<span class="token attr-value">Link Title</span>")</span></code></pre>
To speed up the process I developped this tool that will do it for you.<br />
You just need to paste the video url in the field above and you will get the markdown you need.
</p>
</section>

<section>
<h2>Features</h2>
<p>List of supported video providers:</p>
<div class="providers">
<div class="provider"><i class="fas fa-check"></i><span>Youtube</span></div>
<div class="provider"><i class="fas fa-check"></i><span>Facebook (low-quality)</span></div>
<div class="provider"><i class="fas fa-check"></i><span>Dailymotion</span></div>
<div class="provider"><i class="fas fa-check"></i><span>Vimeo</span></div>
</div>
</section>

<section>
<h2>API</h2>


<section> <section>
<h2>Why?</h2> <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> <p>
How often did you find yourself googling <img alt="How to embed a video in markdown?" style="width: 335px; max-width:75%; vertical-align: middle;" src="./images/google.png" /> <pre class="language-javascript"><code>{
"provider": "youtube",
"url": "https://youtu.be/aqz-KE-bpKQ",
"mime": "image/jpeg",
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAYEBQYFBA..."
}</code></pre>
</p> </p>
<p> <p>
While its not possible to embed a video in markdown, the best and easiest way is to extract a frame from the video, add a layer with a play icon and link the video url on the image.<br /> The <code>image.json</code> API accept only one <code><b class="param-name">url</b></code>
Speaking HTMLese, this is what you would do: parameter.<br />
<pre class="language-html"><code>&lt;a href="{video-url}" title="Link Title"&gt;&lt;img src="{image-url}" alt="Alternate Text" /&gt;&lt;/a&gt;</code></pre> 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"
that translates into markdown as: rel="nofollow" target="_blank">https://youtu.be/aqz-KE-bpKQ</a>)</small>
<pre class="language"><code class="language"><span class="token punctuation">[![<span class="token attr-value">Alternate Text</span>](<span class="token attr-value">{image-url}</span>)](<span class="token attr-value">{video-url}</span> "<span class="token attr-value">Link Title</span>")</span></code></pre>
To speed up the process I developped this tool that will do it for you.<br />
You just need to paste the video url in the field above and you will get the markdown you need.
</p> </p>
</section> </section>


<section> <section>
<h2>Features</h2> <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>List of supported video providers:</p> <p><code>output</code>:&nbsp;&nbsp;&nbsp;<i class="far fa-image"></i>&nbsp;&nbsp;<small>image</small></p>
<div class="providers">
<div class="provider"><i class="fas fa-check"></i><span>Youtube</span></div>
<div class="provider"><i class="fas fa-check"></i><span>Facebook (low-quality)</span></div>
<div class="provider"><i class="fas fa-check"></i><span>Dailymotion</span></div>
<div class="provider"><i class="fas fa-check"></i><span>Vimeo</span></div>
</div>
</section>

<section>
<h2>API</h2>
<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/image</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> <small>image</small></p>
<p> <p>
The <code>image</code> API accept only one <code><b class="param-name">url</b></code> parameter.<br /> 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 href="https://youtu.be/aqz-KE-bpKQ"
rel="nofollow" target="_blank">https://youtu.be/aqz-KE-bpKQ</a>)</small>
</p> </p>
</section> </section>
</section>


<footer> <footer>
<a href="https://marcomontalbano.com" target="_blank">Marco Montalbano</a> <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 href="https://github.com/marcomontalbano/video-to-markdown" target="_blank"><i class="fab fa-github"></i>
</footer> GitHub</a>
</div> </footer>
</div>

<script type="text/javascript" src="./index.js"></script>
</body>


<script type="text/javascript" src="./index.js"></script>
</body>
</html> </html>
24 changes: 23 additions & 1 deletion src/styles/_homepage.scss
View file
Expand Up @@ -48,6 +48,7 @@ form {
transform: translateY(-50%); transform: translateY(-50%);


label { label {
position: relative;
color: $color-white; color: $color-white;
font-weight: bold; font-weight: bold;
display: block; display: block;
Expand All @@ -59,6 +60,21 @@ form {
color: initial; color: initial;
width: 100%; width: 100%;
margin: 0 0 15px; margin: 0 0 15px;
height: 40px;

&[name="url"] {
padding-right: 40px;

~ img {
position: absolute;
bottom: 15px;
right: 0px;
width: 40px;
height: 40px;
padding: 9px;
border-left: 1px solid $header-background-color;
}
}
} }
} }
} }
Expand Down Expand Up @@ -87,12 +103,18 @@ form {
} }


.details { .details {
section { > section {
padding-bottom: 3em; padding-bottom: 3em;
padding-top: 2em; padding-top: 2em;
border-top: 1px solid #dcdcdc; border-top: 1px solid #dcdcdc;
&:first-child { &:first-child {
border-top: none; border-top: none;
} }

> section {
border-bottom: 2px solid #ededed;
margin-top: 2em;
padding: 0 .5em;
}
} }
} }

0 comments on commit dacd064

Please sign in to comment.