From 40218db447134f5a9cabaaf245e67eec90e974b9 Mon Sep 17 00:00:00 2001
From: maksii <1761348+maksii@users.noreply.github.com>
Date: Sat, 15 Jun 2024 22:52:14 +0300
Subject: [PATCH] marked lib to render github release and images. css for toast

---
 app/static/css/styles.css |  5 +++
 app/static/js/titles.js   | 79 ++++++++++++++++++++++-----------------
 app/templates/index.html  |  4 ++
 3 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/app/static/css/styles.css b/app/static/css/styles.css
index 58e974c..9a7b9bb 100644
--- a/app/static/css/styles.css
+++ b/app/static/css/styles.css
@@ -100,4 +100,9 @@ main > .container-fluid {
 
 .card-body {
   min-height: 190px;
+}
+
+.toast-body {
+  max-height: 300px; 
+  overflow-y: auto; 
 }
\ No newline at end of file
diff --git a/app/static/js/titles.js b/app/static/js/titles.js
index e267bf3..cdf8e2b 100644
--- a/app/static/js/titles.js
+++ b/app/static/js/titles.js
@@ -289,42 +289,53 @@ $(document).ready(function() {
 
     const repo = 'maksii/Toloka2Web'; // Change this to your repository
 
-        function checkReleaseStatus() {
-            const lastCheckedRelease = localStorage.getItem('lastCheckedRelease');
-            fetch(`https://api.github.com/repos/${repo}/releases/latest`)
-                .then(response => response.json())
-                .then(data => {
-                    const latestRelease = data.tag_name;
-                    if (lastCheckedRelease !== latestRelease) {
-                        showReleaseToast(data.name, data.body, latestRelease);
-                    }
-                })
-                .catch(error => console.error('Error fetching release data:', error));
-        }
-
-        function showReleaseToast(title, content, latestRelease) {
-            const toastContainer = document.querySelector('.toast-container');
-            const toastHTML = `
-                <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
-                    <div class="toast-header">
-                        <strong class="me-auto">New Release: ${title}</strong>
-                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-                    </div>
-                    <div class="toast-body">
-                        ${content}
-                    </div>
+    function checkReleaseStatus() {
+        const lastCheckedRelease = localStorage.getItem('lastCheckedRelease');
+        fetch(`https://api.github.com/repos/${repo}/releases/latest`)
+            .then(response => response.json())
+            .then(data => {
+                const latestRelease = data.tag_name;
+                if (lastCheckedRelease !== latestRelease) {
+                    const formattedContent = formatContent(data.body);
+                    showReleaseToast(data.name, formattedContent, latestRelease);
+                }
+            })
+            .catch(error => console.error('Error fetching release data:', error));
+    }
+    
+    function showReleaseToast(title, content, latestRelease) {
+        const toastContainer = document.querySelector('.toast-container');
+        const toastHTML = `
+            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
+                <div class="toast-header">
+                    <strong class="me-auto">New Release: ${title}</strong>
+                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                 </div>
-            `;
-            toastContainer.insertAdjacentHTML('beforeend', toastHTML);
-            const toastElement = new bootstrap.Toast(toastContainer.lastElementChild);
-            toastElement.show();
-
-            // Add event listener for when the toast is hidden
-            toastContainer.lastElementChild.addEventListener('hidden.bs.toast', function () {
-                localStorage.setItem('lastCheckedRelease', latestRelease);
-            });
-        }
+                <div class="toast-body">
+                    ${content}
+                </div>
+            </div>
+        `;
+        toastContainer.insertAdjacentHTML('beforeend', toastHTML);
+        const toastElement = new bootstrap.Toast(toastContainer.lastElementChild);
+        toastElement.show();
     
+        // Add event listener for when the toast is hidden
+        toastContainer.lastElementChild.addEventListener('hidden.bs.toast', function () {
+            localStorage.setItem('lastCheckedRelease', latestRelease);
+        });
+    }
+    
+    function formatContent(markdown) {
+        // Convert markdown to HTML
+        let html = marked.parse(markdown);
+    
+        // Modify image sizes
+        html = html.replace(/<img /g, '<img style="max-width:100%;height:auto;" ');
+    
+        // Sanitize HTML
+        return DOMPurify.sanitize(html);
+    }
     checkReleaseStatus();
     
 });
diff --git a/app/templates/index.html b/app/templates/index.html
index db2e468..562b46b 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,8 +1,12 @@
 {% extends 'base.html' %}
 
 {% block additional_head %}
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+
 <script src="{{ url_for('static', filename='/js/titles.js') }}"></script>
 <script src="{{ url_for('static', filename='/js/toloka.js') }}"></script>
+
 {% endblock %}
 
 {% block content %}