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,16 @@ html, body {
         display: none;
     }
 }
+
+.article-card {
+    text-align: center;
+    /* border: 1px solid #444; */
+    border-radius: 10px;
+    background-color: #353535;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.shadow-10-10-20-black {
+    box-shadow: 10px 10px 20px black;
+}

public/assets/js/mastodon.js

@@ -1,48 +1,61 @@
 async function fetchData(log, tpl) {
-    var log = document.getElementById('log');
+  var log = document.getElementById("log");
 
   var server_address = `techhub.social`;
 
   // 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();
 
-    data.forEach(obj => {
+  data.forEach((obj) => {
     let post_tpl = tpl;
     var media_link = "";
     Object.entries(obj).forEach(([key, value]) => {
-            if(key == "id") {
+      if (key == "id") {
         post_tpl = post_tpl.replace(/{post_id}/g, `${value}`);
       }
 
-            if(key == "account") {
+      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(
+          /{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") {
+      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=';
+        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 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) {
+        youtube_frame_arr.forEach(function (elem) {
           text += elem;
         });
 
@@ -51,48 +64,50 @@ async function fetchData(log, tpl) {
 
         value = text;
 
-                post_tpl = post_tpl.replace('{content}', `${value}`);
+        post_tpl = post_tpl.replace("{content}", `${value}`);
       }
 
-            if(key == "media_attachments") {
+      if (key == "media_attachments") {
-                value.forEach(obj1 => {
+        value.forEach((obj1) => {
           Object.entries(obj1).forEach(([k, v]) => {
-                        if(k == "preview_url") {
+            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}`);
+        post_tpl = post_tpl.replace("{media_attachments}", `${media_link}`);
       }
 
-            if(key == "created_at") {
+      if (key == "created_at") {
         post_tpl = post_tpl.replace(/{created_at}/g, `${value}`);
       }
 
-            if(key == "created_at") {
+      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" });
+        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") {
+      if (key == "edited_at") {
         post_tpl = post_tpl.replace(/{edited_at}/g, `${value}`);
       }
 
-            if(key == "favorites_count") {
+      if (key == "favorites_count") {
         post_tpl = post_tpl.replace(/{favorites_count}/g, `${value}`);
       }
 
-            if(key == "replies_count") {
+      if (key == "replies_count") {
         post_tpl = post_tpl.replace(/{replies_count}/g, `${value}`);
       }
 
-            if(key == "reblogs_count") {
+      if (key == "reblogs_count") {
         post_tpl = post_tpl.replace(/{reblogs_count}/g, `${value}`);
       }
 
@@ -102,21 +117,21 @@ async function fetchData(log, tpl) {
   });
 }
 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);
   } else {
     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);
   var tpl = "";
 
@@ -129,16 +144,15 @@ async function getMastodonPage() {
   setTimeout(() => controller.abort(), 500);
 
   try {
-        const response = await fetch(tplUrl, {signal});
+    const response = await fetch(tplUrl, { signal });
     tpl = await response.text();
-
+  } catch (error) {
-    } catch(error) {
     // DOMException: The user aborted a request.
-        console.log('Error: ', error);
+    console.log("Error: ", error);
     log.innerHTML = "<p>1) Ой всё сломалось :(</p>";
   }
 
-    if(!tpl) {
+  if (!tpl) {
     log.innerHTML = "<p>2) Ой всё сломалось :(</p>";
   }
 

public/index.html

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

public/news.tpl.html

@@ -1,54 +1,96 @@
-
+<div
-      <div id="myCarousel" class="carousel slide carousel-fade carousel-light py-4" data-bs-ride="carousel">
+    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
-          <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
+            type="button"
-          <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
+            data-bs-target="#myCarousel"
-          <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="3" aria-label="Slide 3"></button>
+            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 active">
-            <img src="/assets/img/slide1.png" class="d-block w-100">
+            <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">
+            <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">
+            <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">
+            <img src="/assets/img/slide8.png" class="d-block w-100" />
+        </div>
     </div>
 
-        </div>
+    <button
-
+        class="carousel-control-prev"
-        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="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">
+    <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>
+<div class="container py-5 my-5">
-
-      <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">
-
+        <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="Валерия Фадеева" target="_blank">
+                <a
-                <span style="width: 46px; height: 46px;"><img src="/assets/avatar/Valeria_Fadeeva.jpg" alt="Валерия Фадеева" style="width: 46px; height: 46px; border-radius: 50%;"></span>
+                    href="https://melawy.ru/about"
+                    title="Валерия Фадеева"
+                    target="_blank"
+                >
+                    <span style="width: 46px; height: 46px"
+                        ><img
+                            src="/assets/avatar/Valeria_Fadeeva.jpg"
+                            alt="Валерия Фадеева"
+                            style="
+                                width: 46px;
+                                height: 46px;
+                                border-radius: 50%;
+                            "
+                    /></span>
                     <span><span>@Валерия Фадеева</span></span>
                 </a>
             </div>
@@ -56,97 +98,95 @@
             <div class="col-md-6">
                 <a href="https://melawy.ru/news" rel="noopener noreferrer">
                     <span><i class="fa fa-globe" title="Публичный"></i></span>
-                <time datetime="{created_at}" title="{created_at}">30 октября 2023</time>
+                    <time datetime="{created_at}" title="{created_at}"
+                        >30 октября 2023</time
+                    >
                     <abbr title="Последнее изменение: {edited_at}"> *</abbr>
                 </a>
             </div>
         </div>
 
-          <div style="padding: 1rem; text-align: start;">
+        <div style="padding: 1rem; text-align: start">
-            <h2 class="blog-post-title mb-1">Релиз дистрибутива Melawy Linux</h2>
+            <h2 class="blog-post-title mb-1">
+                Релиз дистрибутива Melawy Linux
+            </h2>
 
             <p>
-              Тихо и почти незаметно спустя 1,5 года работы вышел первый релиз операционно системы Melawy Linux.
+                Тихо и почти незаметно спустя 1,5 года работы вышел первый релиз
+                операционно системы Melawy Linux.
             </p>
 
             <h4>Что внутри?</h4>
 
             <ul>
                 <li>
-                Установка с диска и по сети с выбором загрузчика rEFInd, systemd-boot, Grub2 в одном установщике.
+                    Установка с диска и по сети с выбором загрузчика rEFInd,
+                    systemd-boot, Grub2 в одном установщике.
                 </li>
 
                 <li>
-                Возможность выбрать и установить версию драйверов для видеокарты Nvidia:
+                    Возможность выбрать и установить версию драйверов для
+                    видеокарты Nvidia:
                     <ul>
                         <li>
-                    установка с диска - драйверы только для новых видеокарт
+                            установка с диска - драйверы только для новых
+                            видеокарт
+                        </li>
+
+                        <li>установка по сети - выбор драйвера вручную</li>
+                    </ul>
                 </li>
 
                 <li>
-                    установка по сети - выбор драйвера вручную
+                    Нестандартное ядро - с патчами на производительность и
+                    защиту от Meltdown и Spectre и др.
+                </li>
+
+                <li>
+                    Сборщик начального окружения ядра с помощью модульного,
+                    автоматизированного Dracut.
+                </li>
+
+                <li>
+                    Генерация цифровых подписей и подписывания ядра для старта
+                    через Secure Boot:
+                    <ul>
+                        <li>
+                            Позже будет автоматизировано подписывание загрузчика
+                            и проверен полный цикл загрузки через Secure Boot.
+                        </li>
+
+                        <li>
+                            Полный этап загрузки через Secure Boot защищает от
+                            вирусов начиная с загрузчика и загрузки ядра.
                         </li>
                     </ul>
                 </li>
 
                 <li>
-                Нестандартное ядро - с патчами на производительность и защиту от Meltdown и Spectre и др.
+                    Поддержка полнодискового шифрования Luks2 последним
-              </li>
+                    алгоритмом Аrgon2.
-
-              <li>
-                Сборщик начального окружения ядра с помощью модульного, автоматизированного Dracut.
-              </li>
-
-              <li>
-              Генерация цифровых подписей и подписывания ядра для старта через Secure Boot:
-                <ul>
-                  <li>
-                    Позже будет автоматизировано подписывание загрузчика и проверен полный цикл загрузки через Secure Boot.
-                  </li>
-
-                  <li>
-                    Полный этап загрузки через Secure Boot защищает от вирусов начиная с загрузчика и загрузки ядра.
-                  </li>
-                </ul>
-              </li>
-
-              <li>
-                Поддержка полнодискового шифрования Luks2 последним алгоритмом Аrgon2.
                 </li>
 
                 <li>
                     Красивое, информативное визуальное оформление:
                     <ul>
-                  <li>
+                        <li>экран выбора заргузки операционной системы</li>
-                    экран выбора заргузки операционной системы
-                  </li>
 
-                  <li>
+                        <li>этап загрузки ядра и базового окружения initrd</li>
-                    этап загрузки ядра и базового окружения initrd
-                  </li>
 
-                  <li>
+                        <li>вход в систему</li>
-                    вход в систему
-                  </li>
 
                         <li>
                             рабочее окружение:
                             <ul>
-                      <li>
+                                <li>стили</li>
-                        стили
-                      </li>
 
-                      <li>
+                                <li>цвет</li>
-                        цвет
-                      </li>
 
-                      <li>
+                                <li>иконки</li>
-                        иконки
-                      </li>
 
-                      <li>
+                                <li>курсоры</li>
-                        курсоры
-                      </li>
                             </ul>
                         </li>
 
@@ -154,11 +194,13 @@
                             Не надоедающий апплет проверки обновлений:
                             <ul>
                                 <li>
-                        автоматическая проверка при входе через 10 секунд - после того как всё запустится
+                                    автоматическая проверка при входе через 10
+                                    секунд - после того как всё запустится
                                 </li>
 
                                 <li>
-                        кнопка принудительной проверки и кнопка установки
+                                    кнопка принудительной проверки и кнопка
+                                    установки
                                 </li>
                             </ul>
                         </li>
@@ -166,20 +208,21 @@
                 </li>
 
                 <li>
-                Предустановленные средства управления оборудованием AMD через пользовательский интерфейс и видеокартой Nvidia.
+                    Предустановленные средства управления оборудованием AMD
+                    через пользовательский интерфейс и видеокартой Nvidia.
                 </li>
 
                 <li>
-                Заранее выбранный большой список программ, которые можно сразу использовать.
+                    Заранее выбранный большой список программ, которые можно
+                    сразу использовать.
                 </li>
 
                 <li>
-                Возможность использовать все эти программы прямо на Live образе, без установки системы на диск.
+                    Возможность использовать все эти программы прямо на Live
+                    образе, без установки системы на диск.
                 </li>
 
-              <li>
+                <li>И другое...</li>
-              И другое...
-              </li>
             </ul>
         </div>
     </article>
@@ -190,5 +233,5 @@
               <a class="btn btn-outline-secondary rounded-pill disabled">Newer</a>
             </nav>
       -->
-
+</div>
-      </div><!-- /.container -->
+<!-- /.container -->

public/overview.tpl.html

@@ -311,17 +311,15 @@
               <ul>
                 <li>melawy</li>
                 <li>melawy-core</li>
-                <li>melawy-3party</li>
-                <li>melawy-archlinux</li>
-                <li>cachyos</li>
                 <li>core</li>
                 <li>extra</li>
                 <li>multilib</li>
+                <li>melawy-3party</li>
+                <li>chaotic-aur</li>
                 <li>arcolinux_repo</li>
                 <li>arcolinux_repo_xlarge</li>
                 <li>arcolinux_repo_3party</li>
                 <li>garuda</li>
-                <li>chaotic-aur</li>
                 <li>endeavouros</li>
               </ul>
               <p>Не используются специфичные для ArcoLinux, Garuda Linux, EndeavourOS программы и оформление.</p>