Show release notes

css/specifics.css

@@ -157,7 +157,7 @@ section, .into-text {
     animation-duration: 0.5s;
     transform: scale(1.5) translate(-2px, 7px) rotate(0.25turn);
 }
-.downloads-platform p {
+.downloads-platform p, #downloads-release-notes {
     font-size: 90%;
     padding: 5px !important;
     border-radius: 5px;
@@ -168,8 +168,13 @@ section, .into-text {
     color: #555;
     font-style: italic;
 }
+#downloads-release-notes span:first-child {
+    font-size: 80%;
+    line-height: 220%;
+    font-variant-caps: small-caps;
+}
 
 /* elements of the documentation section */
 #doc-section p {
     line-height: 140%;
-}
+}

index.html

@@ -84,6 +84,9 @@ <h2>Downloads</h2>
         Checkout the <a href="https://github.com/Martchus/syncthingtray/releases" target="blank">releases section
         on GitHub</a> for older releases.
       </p>
+      <p id="downloads-release-notes" style="display: none">
+        <span>Release notes<br /></span>
+      </p>
       <p>
         This page is supposed to provide an overview. Checkout the <a href="https://github.com/Martchus/syncthingtray/blob/master/README.md#download" target="blank">"Downloads"-section</a>
         of the README for all options and further details.

js/main.js

@@ -172,6 +172,7 @@ function renderRelease(releaseInfo, otherReleases)
 {
     const releaseName = releaseInfo.name ?? "unknown";
     const releaseDate = releaseInfo.published_at ?? "unknown";
+    const releaseNotes = releaseInfo.body ?? '';
     document.getElementById("downloads-latest-release").innerText = `${releaseName} from ${releaseDate}`;
 
     const assets = Array.isArray(releaseInfo.assets) ? releaseInfo.assets : [];
@@ -208,6 +209,16 @@ function renderRelease(releaseInfo, otherReleases)
 
     document.getElementById('downloads-loading').style.display = 'none';
     document.getElementById('downloads-release-info').style.display = 'block';
+
+    if (releaseNotes.length > 10) {
+        const releaseNotesElement = document.getElementById("downloads-release-notes");
+        let formatted = releaseNotes;
+        formatted = formatted.replaceAll(/\*\*([^\*]*)\*\*/gi, '<strong>$1</strong>');
+        formatted = formatted.replaceAll(/\*([^\*]*)\*/gi, '<em>$1</em>');
+        formatted = formatted.replaceAll(/\~\~([^\~]*)\~\~/gi, '<del>$1</del>');
+        releaseNotesElement.insertAdjacentHTML("beforeend", formatted);
+        releaseNotesElement.style.display = 'block';
+    }
 }
 
 main();