Added latest release notes blocks

Author: Beelink

css/index.css

@@ -200,6 +200,70 @@ header .links .link:hover {
     text-align: center;
 }
 
+.tile-section .release-btn {
+    background: none;
+    border: none;
+    color: #fff;
+    font: 14px "Open Sans";
+    width: 100%;
+    margin-top: 16px;
+    outline: none;
+    padding: 4px;
+    transition: transform 0.2s;
+    border-radius: 4px;
+}
+
+.tile-section .release-btn:hover {
+    transform: translateY(-4px);
+    opacity: 0.5;
+    cursor: pointer;
+}
+
+.tile-section .release-btn:focus {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
+}
+
+.tile-section .release-btn:after {
+    margin: 0 0 2px 10px;
+    content: "";
+    border: solid #fff;
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 4px;
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transition: transform 0.2s, margin 0.2s;
+}
+
+.tile-section .release-btn.show:after {
+    transform: rotate(225deg);
+    -webkit-transform: rotate(225deg);
+    margin: 0 0 -3px 10px;
+}
+
+@keyframes slide-down {
+    from {
+        transform: translateY(-32px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 100;
+    }
+}
+
+.tile-section .release-info {
+    font-size: 14px;
+    border-top: 1px solid rgba(255, 255, 255, 0.25);
+    margin-top: 24px;
+    display: none;
+    animation: 0.2s slide-down;
+}
+
+.tile-section .release-info.show {
+    display: block;
+}
+
 .tile-section .links, .mfp-title .links {
     float: right;
     margin: 8px 0;

index.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="css/particles.css">
     <script src="js/jquery-3.5.1.min.js"></script>
     <script src="js/jquery.magnific-popup.min.js"></script>
+    <script src="js/showdown.min.js"></script>
     <script src="js/index.js"></script>
     <meta name="theme-color" content="#0d0c0c">
     <link rel="shortcut icon" type="image/png" href="imgs/moduleart256.png">
@@ -91,6 +92,8 @@ <h2>Best apps</h2>
                     </div>
                     <img class="screenshot" src="https://raw.githubusercontent.com/ModuleArt/quick-picture-viewer/master/docs/screenshots/main.png" href="https://raw.githubusercontent.com/ModuleArt/quick-picture-viewer/master/docs/screenshots/main.png"/>
                     <div class="desc"></div>
+                    <button class="release-btn" onclick="toggleReleaseInfo(this)"></button>
+                    <div class="release-info"></div>
                 </div>
                 <div class="tile" id="quick-screen-recorder">
                     <img class="icon" src="https://raw.githubusercontent.com/ModuleArt/quick-screen-recorder/master/quick-screen-recorder/resources/imgs/rec256.png"/>
@@ -113,10 +116,11 @@ <h2>Best apps</h2>
                                 <img src="imgs/icons/trello.png"/>
                             </div>
                         </a>
-                        
                     </div>
                     <img class="screenshot" src="https://github.com/ModuleArt/quick-screen-recorder/raw/master/docs/screenshots/main.png" href="https://github.com/ModuleArt/quick-screen-recorder/raw/master/docs/screenshots/main.png"/>
                     <div class="desc"></div>
+                    <button class="release-btn" onclick="toggleReleaseInfo(this)"></button>
+                    <div class="release-info"></div>
                 </div>
                 <div class="tile" id="quick-color-picker">
                     <img class="icon" src="https://raw.githubusercontent.com/ModuleArt/quick-color-picker/master/quick-color-picker/resources/imgs/picker96.png"/>
@@ -142,6 +146,8 @@ <h2>Best apps</h2>
                     </div>
                     <img class="screenshot" src="https://github.com/ModuleArt/quick-color-picker/raw/master/docs/screenshots/main.png" href="https://github.com/ModuleArt/quick-color-picker/raw/master/docs/screenshots/main.png"/>
                     <div class="desc"></div>
+                    <button class="release-btn" onclick="toggleReleaseInfo(this)"></button>
+                    <div class="release-info"></div>
                 </div>
             </div>
             <h2>Coming soon</h2>

js/index.js

@@ -25,25 +25,37 @@ function GetReposInfo() {
     let repositories = [ "quick-picture-viewer", "quick-screen-recorder", "quick-color-picker" ];
     let filenames = [ "QuickPictureViewer", "QuickScreenRecorder", "QuickColorPicker" ];
 
-    // download link
+    let converter = new showdown.Converter();
+
     $.each(repositories, function(key, value) {
-        $.getJSON("https://api.github.com/repos/ModuleArt/" + value + "/tags").done(function (json) {
+        $.getJSON("https://api.github.com/repos/ModuleArt/" + value + "/releases/latest").done(function (json) {
+            // latest release info
+            let relInfo = document.getElementById(value).getElementsByClassName("release-info")[0];
+            relInfo.innerHTML = converter.makeHtml("#" + json.name + "\n" + json.body);
+            let relBtn = document.getElementById(value).getElementsByClassName("release-btn")[0];
+            relBtn.innerHTML = json.tag_name + " - Release notes";
+
+            // download link
             let link = document.getElementById(value).getElementsByClassName("download-windows")[0];
-            link.href = "https://github.com/ModuleArt/" + value + "/releases/download/" + json[0].name + "/" + filenames[key] + "-Setup";
+            link.href = "https://github.com/ModuleArt/" + value + "/releases/download/" + json.tag_name + "/" + filenames[key] + "-Setup";
             if (key == 0) {
                 link.href += ".exe";
             } else {
                 link.href += ".msi";
             }
-            link.getElementsByClassName("version")[0].innerHTML = json[0].name;
+            link.getElementsByClassName("version")[0].innerHTML = json.tag_name;
         });
-    });
 
-    // repo description
-    $.each(repositories, function(key, value) {
+        // repo description
         $.getJSON("https://api.github.com/repos/ModuleArt/" + value).done(function (json) {
             let desc = document.getElementById(value).getElementsByClassName("desc")[0];
             desc.innerHTML = json.description;
         });
     });
-} 
+} 
+
+function toggleReleaseInfo(btn) {
+    btn.classList.toggle("show");
+    let relInfo = btn.parentNode.getElementsByClassName("release-info")[0];
+    relInfo.classList.toggle("show");
+}