make dist script

.editorconfig

@@ -0,0 +1,24 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[{*.html,*.css}]
+indent_style = space
+indent_size = 2
+
+[humans.txt]
+indent_style = tab
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.js]
+indent_style = space
+indent_size = 2

.gitignore

@@ -1 +1,2 @@
-y.js
+dist/
+ytcg-*.tar.xz

docs/ytcg.js

@@ -1,13 +0,0 @@
-function getCover()
-{
-  var videoUrl = document.getElementById('videoUrl').value;
-  var videoCover = new Image();
-  
-  videoCover.onload = function()
-  {
-    document.getElementById('ytImage').innerHTML =
-    '<a title="' + videoCover.width + 'x' + videoCover.height + '" href="' + videoCover.src + '" download="cover"><img src="'+ videoCover.src +'"></a>';
-  }
-
-  videoCover.src = 'https://img.youtube.com/vi/' + YouTubeGetID(videoUrl) + '/maxresdefault.jpg';
-}

make_dist.sh

@@ -0,0 +1,34 @@
+#!/bin/sh
+
+echo -e "Making \033[0;31mYTCget\033[0m dist..."
+
+if [ -d "./dist" ]; then
+    echo -en "Cleaning \033[0;31m./dist/\033[0m directory..."
+    rm -rf "./dist/*"
+    echo " Complete!"
+
+    echo -n "Copying static files..."
+    cp ./src/youtubeID.js ./dist/youtubeID.js
+    cp ./src/ytcg.js ./dist/ytcg.js
+    echo " Complete!"
+
+    echo -n "Minifying files..."
+    minify-html ./src/styles.css -o ./dist/styles.css
+    minify-html \
+        --do-not-minify-doctype \
+        --keep-closing-tags \
+        --keep-spaces-between-attributes \
+        --keep-html-and-head-opening-tags \
+        ./src/index.html -o ./dist/index.html
+
+    GIT_COMMIT_HASH=$(git rev-parse --short HEAD)
+    sed -i -- "s/{GIT_COMMIT_HASH}/$GIT_COMMIT_HASH/g" ./dist/index.html
+    echo " Complete!"
+
+    echo -en "Making \033[0;31mytcg-$GIT_COMMIT_HASH.tar.xz\033[0m file..."
+    tar -cJf "ytcg-$GIT_COMMIT_HASH.tar.xz" ./dist/*
+    echo " Complete!"
+else
+    echo -e "Make \033[0;31m./dist/\033[0m directory."
+    mkdir "./dist/"
+fi

src/index.html

@@ -21,16 +21,27 @@
   <div class="header">
     <div class="wrap">
       <form action="JavaScript:getCover()">
-        <input type="text" id="videoUrl" placeholder="YouTube video url" onchange="getCover()"><!--
-     --><button type="submit">Search</button>
+        <input type="text" id="videoUrl" placeholder="YouTube video URL" onchange="getCover()"><!--
+      --><button type="submit">Search</button>
       </form>
     </div>
   </div>
+
   <div class="content">
-    <div class="wrap" id="ytImage">
+    <div class="wrap">
+      <div class="cover" id="ytImage"></div>
     </div>
-    <p>Thanks: <a href="https://github.com/takien">@takien</a> for youtubeID.js script.<br>
-      <a href="https://github.com/iiiypuk/YTCget">View on GitHub</a></p>
   </div>
+
+  <footer>
+    <p>
+      Thanks: <a target="_blank" href="https://github.com/takien">@takien</a>
+      for youtubeID.js script.<br>
+      <a target="_blank" href="https://git.a2s.su/iiiypuk/YTCget">Source code</a>
+    </p>
+    <p class="git-commit">
+      {GIT_COMMIT_HASH}
+    </p>
+  </footer>
 </body>
 </html>

src/styles.css

@@ -28,15 +28,32 @@ div.content img {
   max-width: 100%;
   border-radius: 8px;
 }
-div.content p {
+
+div.cover {
+  text-align: center;
+}
+
+footer {
   color: #808080;
   text-align: center;
 }
-div.content a {
+footer a {
   color: #ffffff;
   text-decoration: none;
 }
 
+.git-commit {
+  font-size: .8em;
+  color: #ffffff;
+  background-color: #232323;
+  display: inline-block;
+  border: 1px solid #808080;
+  border-radius: 8px;
+  padding: 4px 8px;
+  margin-top: 8px;
+}
+
+
 input, button {
   box-sizing: border-box;
   border: 1px solid #121212;
@@ -51,7 +68,6 @@ input {
   color: #808080;
   border-radius: 8px 0 0 8px;
 }
-
 input::placeholder {
   color: #818181;
   transition: 250ms all;

src/ytcg.js

@@ -0,0 +1,21 @@
+function getCover()
+{
+  'use strict';
+
+  let videoUrl = document.getElementById('videoUrl').value;
+  let imageDiv = document.getElementById('ytImage');
+  imageDiv.innerHTML = '';
+
+  let videoCover = document.createElement('img');
+  let imageLink = document.createElement('a');
+
+  videoCover.src = 'https://img.youtube.com/vi/' + YouTubeGetID(videoUrl) + '/maxresdefault.jpg';
+  imageLink.href = videoCover.src;
+  imageLink.download = 'cover';
+  videoCover.onload = function() {
+    imageLink.title = videoCover.width + 'x' + videoCover.height;
+  }
+
+  imageLink.appendChild(videoCover);
+  imageDiv.appendChild(imageLink);
+}