Update

public/assets/css/style.css

@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
     width: 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,15 +1,17 @@
 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]) => {
@@ -21,7 +23,10 @@ async function fetchData(log, tpl) {
         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}`);
@@ -32,14 +37,22 @@ async function fetchData(log, tpl) {
 
         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) {
@@ -51,20 +64,19 @@ 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") {
-                value.forEach(obj1 => {
+        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}`);
+        post_tpl = post_tpl.replace("{media_attachments}", `${media_link}`);
       }
 
       if (key == "created_at") {
@@ -74,8 +86,11 @@ async function fetchData(log, tpl) {
       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('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_}`);
       }
@@ -102,11 +117,11 @@ 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) {
     setTimeout(getLog, 1000);
   } else {
@@ -114,9 +129,9 @@ async function getLog() {
   }
 }
 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 = "";
 
@@ -131,10 +146,9 @@ async function getMastodonPage() {
   try {
     const response = await fetch(tplUrl, { signal });
     tpl = await response.text();
-
   } catch (error) {
     // DOMException: The user aborted a request.
-        console.log('Error: ', error);
+    console.log("Error: ", error);
     log.innerHTML = "<p>1) Ой всё сломалось :(</p>";
   }
 

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
+    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="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 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"
+                    title="Valeria Fadeeva"
+                    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>
@@ -63,7 +105,9 @@
         </div>
 
         <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.
@@ -111,42 +155,28 @@
                 </li>
 
                 <li>
-                Support for Luks2 full-disk encryption using the latest Argon2 algorithm.
+                    Support for Luks2 full-disk encryption using the latest Argon2id algorithm.
                 </li>
 
                 <li>
                     Beautiful, informative visual design:
                     <ul>
-                  <li>
+                        <li>operating system boot selection screen</li>
-                    operating system boot selection screen
-                  </li>
 
-                  <li>
+                        <li>stage of loading the kernel and base environment initrd</li>
-                    stage of loading the kernel and base environment initrd
-                  </li>
 
-                  <li>
+                        <li>login</li>
-                    login
-                  </li>
 
                         <li>
                             working environment:
                             <ul>
-                      <li>
+                                <li>styles</li>
-                        styles
-                      </li>
 
-                      <li>
+                                <li>color</li>
-                        color
-                      </li>
 
-                      <li>
+                                <li>icons</li>
-                        icons
-                      </li>
 
-                      <li>
+                                <li>cursors</li>
-                        cursors
-                      </li>
                             </ul>
                         </li>
 
@@ -190,5 +220,5 @@
               <a class="btn btn-outline-secondary rounded-pill disabled">Newer</a>
             </nav>
       -->
-
+</div>
-      </div><!-- /.container -->
+<!-- /.container -->

public/overview.tpl.html

@@ -312,17 +312,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>Programs and designs specific to ArcoLinux, Garuda Linux, EndeavourOS are not used.</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=$?