Update

public/assets/css/style.css

@@ -1,6 +1,7 @@
-html, body {
+html,
+body {
     width: 100%;
-    height:100%;
+    height: 100%;
     color: #aaaaaa;
 }
 
@@ -21,13 +22,21 @@ html, body {
 }
 
 @-webkit-keyframes spin {
-    0% { -webkit-transform: rotate(0deg); }
+    0% {
-    100% { -webkit-transform: rotate(360deg); }
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
 }
 
 @keyframes spin {
-    0% { transform: rotate(0deg); }
+    0% {
-    100% { transform: rotate(360deg); }
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 /* Add animation to "page content" */
@@ -36,17 +45,29 @@ html, body {
     -webkit-animation-name: animatebottom;
     -webkit-animation-duration: 1s;
     animation-name: animatebottom;
-    animation-duration: 1s
+    animation-duration: 1s;
 }
 
 @-webkit-keyframes animatebottom {
-    from { bottom:-100px; opacity:0 }
+    from {
-    to { bottom:0px; opacity:1 }
+        bottom: -100px;
+        opacity: 0;
+    }
+    to {
+        bottom: 0px;
+        opacity: 1;
+    }
 }
 
 @keyframes animatebottom {
-    from{ bottom:-100px; opacity:0 }
+    from {
-    to{ bottom:0; opacity:1 }
+        bottom: -100px;
+        opacity: 0;
+    }
+    to {
+        bottom: 0;
+        opacity: 1;
+    }
 }
 
 #main {
@@ -111,10 +132,12 @@ html, body {
 
 .b-example-divider {
     height: 3rem;
-    background-color: rgba(0, 0, 0, .1);
+    background-color: rgba(0, 0, 0, 0.1);
-    border: solid rgba(0, 0, 0, .15);
+    border: solid rgba(0, 0, 0, 0.15);
     border-width: 1px 0;
-    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+    box-shadow:
+        inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
+        inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
 }
 
 .b-example-vr {
@@ -124,7 +147,7 @@ html, body {
 }
 
 .bi {
-    vertical-align: -.125em;
+    vertical-align: -0.125em;
     fill: currentColor;
 }
 
@@ -176,3 +199,21 @@ html, body {
         display: none;
     }
 }
+
+.article-card {
+    text-align: center;
+    /* border: 1px solid #444; */
+    border-radius: 10px;
+/*     background-color: #353535; */
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+}
+
+.shadow-10-10-20-black {
+    box-shadow: 10px 10px 20px black;
+}
+
+
+.shadow-15-15-30-black {
+    box-shadow: 15px 15px 30px black;
+}

public/assets/js/mastodon.js

@@ -1,152 +1,166 @@
 async function fetchData(log, tpl) {
-    var log = document.getElementById('log');
+  var log = document.getElementById("log");
 
-    var server_address = `techhub.social`;
+  var server_address = `techhub.social`;
 
-    // const response = await fetch('json/posts.json');
+  // const response = await fetch('json/posts.json');
 
-    const response = await fetch(`https://${server_address}/api/v1/accounts/111518136987654656/statuses`);
+  const response = await fetch(
+    `https://${server_address}/api/v1/accounts/111518136987654656/statuses`,
+  );
 
-    const data = await response.json();
+  const data = await response.json();
 
-    data.forEach(obj => {
+  data.forEach((obj) => {
-        let post_tpl = tpl;
+    let post_tpl = tpl;
-        var media_link = "";
+    var media_link = "";
-        Object.entries(obj).forEach(([key, value]) => {
+    Object.entries(obj).forEach(([key, value]) => {
-            if(key == "id") {
+      if (key == "id") {
-                post_tpl = post_tpl.replace(/{post_id}/g, `${value}`);
+        post_tpl = post_tpl.replace(/{post_id}/g, `${value}`);
+      }
+
+      if (key == "account") {
+        post_tpl = post_tpl.replace(/{id}/g, `${value.id}`);
+        post_tpl = post_tpl.replace(/{name}/g, `${value.display_name}`);
+        post_tpl = post_tpl.replace(/{server_address}/g, `${server_address}`);
+        post_tpl = post_tpl.replace(
+          /{account_name}/g,
+          `<a href="https://${server_address}/@${value.username}" target="_blank">@${value.username}@${server_address}</a>`,
+        );
+        // post_tpl = post_tpl.replace('{avatar}', `<img src="${value.avatar}" alt="${value.username}'s Avatar" style="width:48px;height:48px;">`);
+        post_tpl = post_tpl.replace(/{avatar}/g, `${value.avatar}`);
+        post_tpl = post_tpl.replace(/{profile_link}/g, `${value.url}`);
+      }
+
+      if (key == "content") {
+        let text = value;
+
+        let youtube_frame_arr = [];
+        let spl_arr = text.split('"');
+        let youtube_links_start = [
+          "https://www.youtube.com/watch?v=",
+          "https://youtube.com/watch?v=",
+          "https://youtube.com/v/",
+          "https://m.youtube.com/watch?v=",
+          "https://m.youtube.com/v/",
+        ];
+
+        for (let i = 0; i < spl_arr.length; i++) {
+          youtube_links_start.forEach((youtube_link_start) => {
+            if (spl_arr[i].indexOf(youtube_link_start) === 0) {
+              let id = spl_arr[i].replace(youtube_link_start, "");
+              let text_frame = `<iframe class="youtube-video" src="https://www.youtube.com/embed/${id}?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;
+              youtube_frame_arr.push(text_frame);
             }
+          });
+        }
 
-            if(key == "account") {
+        youtube_frame_arr.forEach(function (elem) {
-                post_tpl = post_tpl.replace(/{id}/g, `${value.id}`);
+          text += elem;
-                post_tpl = post_tpl.replace(/{name}/g, `${value.display_name}`);
-                post_tpl = post_tpl.replace(/{server_address}/g, `${server_address}`);
-                post_tpl = post_tpl.replace(/{account_name}/g, `<a href="https://${server_address}/@${value.username}" target="_blank">@${value.username}@${server_address}</a>`);
-                // post_tpl = post_tpl.replace('{avatar}', `<img src="${value.avatar}" alt="${value.username}'s Avatar" style="width:48px;height:48px;">`);
-                post_tpl = post_tpl.replace(/{avatar}/g, `${value.avatar}`);
-                post_tpl = post_tpl.replace(/{profile_link}/g, `${value.url}`);
-            }
-
-            if(key == "content") {
-                let text = value;
-
-                let youtube_frame_arr = [];
-                let spl_arr = text.split('"');
-                let youtube_link_start = 'https://www.youtube.com/watch?v=';
-
-                for (let i = 0; i < spl_arr.length; i++) {
-                    if (spl_arr[i].indexOf(youtube_link_start) === 0) {
-                        let id = spl_arr[i].replace(youtube_link_start, '');
-                        let text_frame = `<iframe class="youtube-video" src="https://www.youtube.com/embed/${id}?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;
-                        youtube_frame_arr.push(text_frame);
-                    }
-                }
-
-                youtube_frame_arr.forEach(function(elem) {
-                    text += elem;
-                });
-
-                // let regular = /<a (.*?)https:\/\/www.youtube.com\/watch\?v\=(.*?)>(.*?)<\/a>/g;
-                // text = text.replace(regular, '');
-
-                value = text;
-
-                post_tpl = post_tpl.replace('{content}', `${value}`);
-            }
-
-            if(key == "media_attachments") {
-                value.forEach(obj1 => {
-                    Object.entries(obj1).forEach(([k, v]) => {
-                        if(k == "preview_url") {
-                            media_link += `<img src="${v}" full_src="${obj1.url}" class="fullscreen" onclick="showFullscreenImage(this);">`;
-                        }
-
-                    });
-                });
-
-                post_tpl = post_tpl.replace('{media_attachments}', `${media_link}`);
-            }
-
-            if(key == "created_at") {
-                post_tpl = post_tpl.replace(/{created_at}/g, `${value}`);
-            }
-
-            if(key == "created_at") {
-                var isoDate = `${value}`;
-                var d = new Date(isoDate);
-                var datetime_ =  d.toLocaleString('en-GB', { hour12: false, timeZone: "Asia/Yekaterinburg" });
-                //var datetime_ = d.toLocaleString('ru-RU', { hour12: false, timeZone: "Asia/Yekaterinburg" });
-
-                post_tpl = post_tpl.replace(/{created_at_show}/g, `${datetime_}`);
-            }
-
-            if(key == "edited_at") {
-                post_tpl = post_tpl.replace(/{edited_at}/g, `${value}`);
-            }
-
-            if(key == "favorites_count") {
-                post_tpl = post_tpl.replace(/{favorites_count}/g, `${value}`);
-            }
-
-            if(key == "replies_count") {
-                post_tpl = post_tpl.replace(/{replies_count}/g, `${value}`);
-            }
-
-            if(key == "reblogs_count") {
-                post_tpl = post_tpl.replace(/{reblogs_count}/g, `${value}`);
-            }
-
-            // log.innerHTML  = log.innerHTML + `${key} ${value}` + '<br>';
         });
-        log.innerHTML += `${post_tpl}<br>`;
+
+        // let regular = /<a (.*?)https:\/\/www.youtube.com\/watch\?v\=(.*?)>(.*?)<\/a>/g;
+        // text = text.replace(regular, '');
+
+        value = text;
+
+        post_tpl = post_tpl.replace("{content}", `${value}`);
+      }
+
+      if (key == "media_attachments") {
+        value.forEach((obj1) => {
+          Object.entries(obj1).forEach(([k, v]) => {
+            if (k == "preview_url") {
+              media_link += `<img src="${v}" full_src="${obj1.url}" class="fullscreen" onclick="showFullscreenImage(this);">`;
+            }
+          });
+        });
+
+        post_tpl = post_tpl.replace("{media_attachments}", `${media_link}`);
+      }
+
+      if (key == "created_at") {
+        post_tpl = post_tpl.replace(/{created_at}/g, `${value}`);
+      }
+
+      if (key == "created_at") {
+        var isoDate = `${value}`;
+        var d = new Date(isoDate);
+        //var datetime_ =  d.toLocaleString('en-GB', { hour12: false, timeZone: "Asia/Yekaterinburg" });
+        var datetime_ = d.toLocaleString("ru-RU", {
+          hour12: false,
+          timeZone: "Asia/Yekaterinburg",
+        });
+
+        post_tpl = post_tpl.replace(/{created_at_show}/g, `${datetime_}`);
+      }
+
+      if (key == "edited_at") {
+        post_tpl = post_tpl.replace(/{edited_at}/g, `${value}`);
+      }
+
+      if (key == "favorites_count") {
+        post_tpl = post_tpl.replace(/{favorites_count}/g, `${value}`);
+      }
+
+      if (key == "replies_count") {
+        post_tpl = post_tpl.replace(/{replies_count}/g, `${value}`);
+      }
+
+      if (key == "reblogs_count") {
+        post_tpl = post_tpl.replace(/{reblogs_count}/g, `${value}`);
+      }
+
+      // log.innerHTML  = log.innerHTML + `${key} ${value}` + '<br>';
     });
+    log.innerHTML += `${post_tpl}<br>`;
+  });
 }
 async function openInNewTab(url) {
-    window.open(url, '_blank').focus();
+  window.open(url, "_blank").focus();
 }
 
 async function getLog() {
-    let log = document.getElementById('log');
+  let log = document.getElementById("log");
-    if(log == null) {
+  if (log == null) {
-        setTimeout(getLog, 1000);
+    setTimeout(getLog, 1000);
-    } else {
+  } else {
-        getMastodonPage();
+    getMastodonPage();
-    }
+  }
 }
 async function getMastodonPage() {
-    let log = document.getElementById('log');
+  let log = document.getElementById("log");
 
-    let tplUrl = '/json/mastodon-tpl.html';
+  let tplUrl = "/json/mastodon-tpl.html";
-    let response = await fetch(tplUrl);
+  let response = await fetch(tplUrl);
-    var tpl = "";
+  var tpl = "";
 
-    log.innerHTML = "";
+  log.innerHTML = "";
 
-    const controller = new AbortController();
+  const controller = new AbortController();
-    const signal = controller.signal;
+  const signal = controller.signal;
 
-    // Cancel the fetch request in 500ms
+  // Cancel the fetch request in 500ms
-    setTimeout(() => controller.abort(), 500);
+  setTimeout(() => controller.abort(), 500);
 
-    try {
+  try {
-        const response = await fetch(tplUrl, {signal});
+    const response = await fetch(tplUrl, { signal });
-        tpl = await response.text();
+    tpl = await response.text();
+  } catch (error) {
+    // DOMException: The user aborted a request.
+    console.log("Error: ", error);
+    log.innerHTML = "<p>1) Ой всё сломалось :(</p>";
+  }
 
-    } catch(error) {
+  if (!tpl) {
-        // DOMException: The user aborted a request.
+    log.innerHTML = "<p>2) Ой всё сломалось :(</p>";
-        console.log('Error: ', error);
+  }
-        log.innerHTML = "<p>1) Ой всё сломалось :(</p>";
-    }
 
-    if(!tpl) {
+  fetchData(log, tpl);
-        log.innerHTML = "<p>2) Ой всё сломалось :(</p>";
-    }
-
-    fetchData(log, tpl);
 }
 
 let query = window.location.pathname;
 
 if (query == "/" || query == "/news") {
-    getLog();
+  getLog();
 }

public/assets/js/script.js

@@ -94,6 +94,10 @@ switch (query) {
         bodyFetch(query);
         break;
 
+    case "/reading":
+        bodyFetch(query);
+        break;
+
     default:
         bodyFetch();
 }

public/index.html

@@ -72,16 +72,16 @@
     <!-- /Yandex.Metrika counter -->
   </head>
 
-  <body>
+  <body class="bg-dark">
     <div id="loader"></div>
 
-    <button type="button" class="btn btn-danger btn-floating btn-lg" id="btn-back-to-top">
+    <button type="button" class="btn btn-danger btn-floating btn-lg shadow-10-10-20-black" id="btn-back-to-top">
       <i class="fas fa-arrow-up"></i>
     </button>
 
     <header class="mb-auto">
 
-      <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark border-bottom" aria-label="Main navigation">
+      <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark shadow-15-15-30-black" aria-label="Main navigation">
         <div class="container">
 
           <a class="navbar-brand justify-content-center float-md-start mb-0" href="/">

public/json/mastodon-tpl.html

@@ -1,35 +1,57 @@
-<article class="container" data-id="{post_id}" style="border: 1px solid #444; border-radius: 10px; background-color: #353535; margin-top: 1rem; margin-bottom: 1rem;">
+<article
-  <div data-id="{post_id}">
+    class="container article-card shadow-10-10-20-black bg-dark"
+    data-id="{post_id}"
+>
+    <div data-id="{post_id}">
+        <div class="row" style="padding: 1rem 0; border-bottom: 1px solid #444">
+            <div class="col-md-6">
+                <a
+                    href="https://{server_address}/@{name}"
+                    title="{name}"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <span style="width: 46px; height: 46px"
+                        ><img
+                            src="{avatar}"
+                            alt="{name}"
+                            style="
+                                width: 46px;
+                                height: 46px;
+                                border-radius: 50%;
+                            "
+                    /></span>
+                    <span><span>@{name}</span></span>
+                </a>
+            </div>
 
-    <div class="row" style="padding: 1rem 0; border-bottom: 1px solid #444;">
+            <div class="col-md-6">
-      <div class="col-md-6">
+                <a
-        <a href="https://{server_address}/@{name}" title="{name}" target="_blank" rel="noopener noreferrer">
+                    href="https://{server_address}/@{name}/{post_id}"
-          <span style="width: 46px; height: 46px;"><img src="{avatar}" alt="{name}" style="width: 46px; height: 46px; border-radius: 50%;"></span>
+                    target="_blank"
-          <span><span>@{name}</span></span>
+                    rel="noopener noreferrer"
-        </a>
+                >
-      </div>
+                    <span><i class="fa fa-globe" title="Публичный"></i></span>
+                    <time datetime="{created_at}" title="{created_at}"
+                        >{created_at_show}</time
+                    >
+                    <abbr title="Последнее изменение: {edited_at}"> *</abbr>
+                </a>
+            </div>
+        </div>
 
-      <div class="col-md-6">
+        <div class="content" style="padding: 1rem; text-align: start">
-        <a href="https://{server_address}/@{name}/{post_id}" target="_blank" rel="noopener noreferrer">
+            {content}
-          <span><i class="fa fa-globe" title="Публичный"></i></span>
+        </div>
-          <time datetime="{created_at}" title="{created_at}">{created_at_show}</time>
+
-          <abbr title="Последнее изменение: {edited_at}"> *</abbr>
+        <div class="media_attachments" style="padding: 1rem">
-        </a>
+            {media_attachments}
-      </div>
+        </div>
+
+        <div class="tags" style="padding: 1rem">
+            <a href="https://{server_address}/tags/MelawyLinux"
+                >#<span>MelawyLinux</span></a
+            >
+        </div>
     </div>
-
-
-    <div class="content" style="padding: 1rem; text-align: start;">
-      {content}
-    </div>
-
-    <div class="media_attachments" style="padding: 1rem;">
-      {media_attachments}
-    </div>
-
-    <div class="tags" style="padding: 1rem;">
-      <a href="https://{server_address}/tags/MelawyLinux">#<span>MelawyLinux</span></a>
-    </div>
-
-  </div>
 </article>

public/news.tpl.html

@@ -1,194 +1,224 @@
+<div
+    id="myCarousel"
+    class="carousel slide carousel-fade carousel-light py-4"
+    data-bs-ride="carousel"
+>
+    <div class="carousel-indicators">
+        <button
+            type="button"
+            data-bs-target="#myCarousel"
+            data-bs-slide-to="0"
+            class="active"
+            aria-current="true"
+            aria-label="Slide 1"
+        ></button>
+        <button
+            type="button"
+            data-bs-target="#myCarousel"
+            data-bs-slide-to="1"
+            aria-label="Slide 2"
+        ></button>
+        <button
+            type="button"
+            data-bs-target="#myCarousel"
+            data-bs-slide-to="2"
+            aria-label="Slide 3"
+        ></button>
+        <button
+            type="button"
+            data-bs-target="#myCarousel"
+            data-bs-slide-to="3"
+            aria-label="Slide 3"
+        ></button>
+    </div>
 
-      <div id="myCarousel" class="carousel slide carousel-fade carousel-light py-4" data-bs-ride="carousel">
+    <div class="carousel-inner">
-
+        <div class="carousel-item active">
-        <div class="carousel-indicators">
+            <img src="/assets/img/slide1.png" class="d-block w-100" />
-          <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-          <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
-          <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
-          <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="3" aria-label="Slide 3"></button>
         </div>
 
-        <div class="carousel-inner">
+        <div class="carousel-item">
-
+            <img src="/assets/img/slide4.png" class="d-block w-100" />
-          <div class="carousel-item active">
-            <img src="/assets/img/slide1.png" class="d-block w-100">
-          </div>
-
-          <div class="carousel-item">
-            <img src="/assets/img/slide4.png" class="d-block w-100">
-          </div>
-
-          <div class="carousel-item">
-            <img src="/assets/img/slide6.png" class="d-block w-100">
-          </div>
-
-          <div class="carousel-item">
-            <img src="/assets/img/slide8.png" class="d-block w-100">
-          </div>
-
         </div>
 
-        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
+        <div class="carousel-item">
-          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <img src="/assets/img/slide6.png" class="d-block w-100" />
-          <span class="visually-hidden">Previous</span>
+        </div>
-        </button>
-        <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
-          <span class="carousel-control-next-icon" aria-hidden="true"></span>
-          <span class="visually-hidden">Next</span>
-        </button>
 
-      </div>
+        <div class="carousel-item">
+            <img src="/assets/img/slide8.png" class="d-block w-100" />
+        </div>
+    </div>
 
-      <div class="container py-5 my-5">
+    <button
+        class="carousel-control-prev"
+        type="button"
+        data-bs-target="#myCarousel"
+        data-bs-slide="prev"
+    >
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Previous</span>
+    </button>
+    <button
+        class="carousel-control-next"
+        type="button"
+        data-bs-target="#myCarousel"
+        data-bs-slide="next"
+    >
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+    </button>
+</div>
 
-        <div id="log"></div>
+<div class="container py-5 my-5">
+    <div id="log"></div>
 
-        <article class="container" style="text-align: center; border: 1px solid #444; border-radius: 10px; background-color: #353535; margin-top: 1rem; margin-bottom: 1rem;">
+    <article class="container article-card shadow-10-10-20-black bg-dark">
-
+        <div class="row" style="padding: 1rem 0; border-bottom: 1px solid #444">
-          <div class="row" style="padding: 1rem 0; border-bottom: 1px solid #444;">
             <div class="col-md-6">
-              <a href="https://melawy.ru/about" title="Valeria Fadeeva" target="_blank">
+                <a
-                <span style="width: 46px; height: 46px;"><img src="/assets/avatar/Valeria_Fadeeva.jpg" alt="Valeria Fadeeva" style="width: 46px; height: 46px; border-radius: 50%;"></span>
+                    href="https://melawy.ru/about"
-                <span><span>@Valeria Fadeeva</span></span>
+                    title="Valeria Fadeeva"
-              </a>
+                    target="_blank"
+                >
+                    <span style="width: 46px; height: 46px"
+                        ><img
+                            src="/assets/avatar/Valeria_Fadeeva.jpg"
+                            alt="Valeria Fadeeva"
+                            style="
+                                width: 46px;
+                                height: 46px;
+                                border-radius: 50%;
+                            "
+                    /></span>
+                    <span><span>@Valeria Fadeeva</span></span>
+                </a>
             </div>
 
             <div class="col-md-6">
-              <a href="https://melawy.ru/news" rel="noopener noreferrer">
+                <a href="https://melawy.ru/news" rel="noopener noreferrer">
-                <span><i class="fa fa-globe" title="Публичный"></i></span>
+                    <span><i class="fa fa-globe" title="Публичный"></i></span>
-                <time datetime="{created_at}" title="{created_at}">30 october 2023</time>
+                    <time datetime="{created_at}" title="{created_at}">30 october 2023</time>
-                <abbr title="Последнее изменение: {edited_at}"> *</abbr>
+                    <abbr title="Последнее изменение: {edited_at}"> *</abbr>
-              </a>
+                </a>
             </div>
-          </div>
+        </div>
 
-          <div style="padding: 1rem; text-align: start;">
+        <div style="padding: 1rem; text-align: start;">
-            <h2 class="blog-post-title mb-1">Distribution release Melawy Linux</h2>
+            <h2 class="blog-post-title mb-1">
+                Distribution release Melawy Linux
+            </h2>
 
             <p>
-              Quietly and almost imperceptibly, after 1.5 years of work, the first release of the Melawy Linux operating system was released.
+                Quietly and almost imperceptibly, after 1.5 years of work, the first release of the Melawy Linux operating system was released.
             </p>
 
             <h4>What's inside?</h4>
 
             <ul>
-              <li>
+                <li>
-                Installation from disk and over the network with the choice of bootloader rEFInd, systemd-boot, Grub2 in one installer.
+                    Installation from disk and over the network with the choice of bootloader rEFInd, systemd-boot, Grub2 in one installer.
-              </li>
+                </li>
 
-              <li>
+                <li>
-                Ability to select and install driver version for Nvidia video card:
+                    Ability to select and install driver version for Nvidia video card:
-                <ul>
-                  <li>
-                    installation from disk - drivers only for new video cards
-                  </li>
-
-                  <li>
-                    network installation - manual driver selection
-                  </li>
-                </ul>
-              </li>
-
-              <li>
-                Non-standard kernel - with patches for performance and protection against Meltdown and Specter, etc.
-              </li>
-
-              <li>
-                Builds the initial kernel environment using the modular, automated Dracut.
-              </li>
-
-              <li>
-              Generating digital signatures and signing the kernel to start via Secure Boot:
-                <ul>
-                  <li>
-                    Later, bootloader signing will be automated and the full boot cycle will be checked via Secure Boot.
-                  </li>
-
-                  <li>
-                    The complete boot phase through Secure Boot protects against viruses, starting with the bootloader and booting the kernel.
-                  </li>
-                </ul>
-              </li>
-
-              <li>
-                Support for Luks2 full-disk encryption using the latest Argon2 algorithm.
-              </li>
-
-              <li>
-                Beautiful, informative visual design:
-                <ul>
-                  <li>
-                    operating system boot selection screen
-                  </li>
-
-                  <li>
-                    stage of loading the kernel and base environment initrd
-                  </li>
-
-                  <li>
-                    login
-                  </li>
-
-                  <li>
-                    working environment:
                     <ul>
-                      <li>
+                        <li>
-                        styles
+                            installation from disk - drivers only for new video cards
-                      </li>
+                        </li>
 
-                      <li>
+                        <li>
-                        color
+                            network installation - manual driver selection
-                      </li>
+                        </li>
-
-                      <li>
-                        icons
-                      </li>
-
-                      <li>
-                        cursors
-                      </li>
                     </ul>
-                  </li>
+                </li>
 
-                  <li>
+                <li>
-                    A non-boring update checking applet:
+                    Non-standard kernel - with patches for performance and protection against Meltdown and Specter, etc.
+                </li>
+
+                <li>
+                    Builds the initial kernel environment using the modular, automated Dracut.
+                </li>
+
+                <li>
+                    Generating digital signatures and signing the kernel to start via Secure Boot:
                     <ul>
-                      <li>
+                        <li>
-                        automatic check at login after 10 seconds - after everything starts
+                            Later, bootloader signing will be automated and the full boot cycle will be checked via Secure Boot.
-                      </li>
+                        </li>
 
-                      <li>
+                        <li>
-                        force check button and install button
+                            The complete boot phase through Secure Boot protects against viruses, starting with the bootloader and booting the kernel.
-                      </li>
+                        </li>
                     </ul>
-                  </li>
+                </li>
-                </ul>
-              </li>
 
-              <li>
+                <li>
-                Pre-installed controls for AMD hardware through the user interface and Nvidia graphics card.
+                    Support for Luks2 full-disk encryption using the latest Argon2id algorithm.
-              </li>
+                </li>
 
-              <li>
+                <li>
-                A pre-selected large list of programs that can be used immediately.
+                    Beautiful, informative visual design:
-              </li>
+                    <ul>
+                        <li>operating system boot selection screen</li>
 
-              <li>
+                        <li>stage of loading the kernel and base environment initrd</li>
-                The ability to use all these programs directly on the Live image, without installing the system on disk.
-              </li>
 
-              <li>
+                        <li>login</li>
-              And other...
+
-              </li>
+                        <li>
+                            working environment:
+                            <ul>
+                                <li>styles</li>
+
+                                <li>color</li>
+
+                                <li>icons</li>
+
+                                <li>cursors</li>
+                            </ul>
+                        </li>
+
+                        <li>
+                            A non-boring update checking applet:
+                            <ul>
+                                <li>
+                                    automatic check at login after 10 seconds - after everything starts
+                                </li>
+
+                                <li>
+                                    force check button and install button
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+
+                <li>
+                    Pre-installed controls for AMD hardware through the user interface and Nvidia graphics card.
+                </li>
+
+                <li>
+                    A pre-selected large list of programs that can be used immediately.
+                </li>
+
+                <li>
+                    The ability to use all these programs directly on the Live image, without installing the system on disk.
+                </li>
+
+                <li>
+                    And other...
+                </li>
             </ul>
-          </div>
+        </div>
-        </article>
+    </article>
 
-      <!--
+    <!--
             <nav class="blog-pagination" aria-label="Pagination">
               <a class="btn btn-outline-primary rounded-pill" href="#">Older</a>
               <a class="btn btn-outline-secondary rounded-pill disabled">Newer</a>
             </nav>
       -->
-
+</div>
-      </div><!-- /.container -->
+<!-- /.container -->

public/overview.tpl.html

@@ -310,20 +310,18 @@
             <div class="collapse" id="collapse2">
               <p>Repositories:</p>
               <ul>
-                <li>melawy</li>
+                  <li>melawy</li>
-                <li>melawy-core</li>
+                  <li>melawy-core</li>
-                <li>melawy-3party</li>
+                  <li>core</li>
-                <li>melawy-archlinux</li>
+                  <li>extra</li>
-                <li>cachyos</li>
+                  <li>multilib</li>
-                <li>core</li>
+                  <li>melawy-3party</li>
-                <li>extra</li>
+                  <li>chaotic-aur</li>
-                <li>multilib</li>
+                  <li>arcolinux_repo</li>
-                <li>arcolinux_repo</li>
+                  <li>arcolinux_repo_xlarge</li>
-                <li>arcolinux_repo_xlarge</li>
+                  <li>arcolinux_repo_3party</li>
-                <li>arcolinux_repo_3party</li>
+                  <li>garuda</li>
-                <li>garuda</li>
+                  <li>endeavouros</li>
-                <li>chaotic-aur</li>
-                <li>endeavouros</li>
               </ul>
               <p>Programs and designs specific to ArcoLinux, Garuda Linux, EndeavourOS are not used.</p>
               <p>System components:</p>

push.sh

@@ -20,7 +20,8 @@ else
     fi
 fi
 
-git add . && git commit -m "Update" && git push $git
+git add . && git commit -m "Update"
+git push $git
 
 ssh ${ip} -f '~/update-en-site.sh'
 status=$?