Change SVR.JS website, because of the new installer

source/docs.md

@@ -28,7 +28,26 @@ _This documentation is in the public domain._
 
 ### Installation
 
-#### Using SVR.JS installer (GNU/Linux only)
+
+#### Using SVR.JS installer (installer packages made in April 5, 2024 and later; GNU/Linux only)
+
+The command for SVR.JS installation is available in [the SVR.JS home page](https://svrjs.org). First off, switch to _GNU/Linux_ tab, then copy the command below the tab. After starting the installer, you will be prompted to select the type of SVR.JS installation. After selecting the type, SVR.JS installer will install Node.JS, SVR.JS and create SVR.JS service. During installation, you may be prompted for the installation of dependencies. Once the installation is done, the server is already started at _http://localhost_.
+
+File structure will look like this:
+
+*   _/usr/lib/svrjs_ - SVR.JS installation directory
+*   _/var/log/svrjs_ - SVR.JS logs
+*   _/var/www/svrjs_ - SVR.JS web root
+*   _/etc/svrjs-config.json_ - SVR.JS configuration file (SVR.JS _config.json_)
+
+SVR.JS installer will also install these commands:
+
+*   _svrjs-loghighlight_ - SVR.JS log highlighter
+*   _svrjs-logviewer_ - SVR.JS log viewer
+*   _svrpasswd_ - SVR.JS user management tool
+*   _svrjs-updater_ - SVR.JS updater
+
+#### Using SVR.JS installer (installer packages made before April 5, 2024; GNU/Linux only)
 
 SVR.JS now has a brand new installer for GNU/Linux. First, [download SVR.JS installer](https://downloads.svrjs.org/installer), then unpack your SVR.JS installer zip archive. After unpacking the installer, download SVR.JS zip archive (not installer), copy it to the installer directory and rename it to "_svrjs.zip_". Then run SVR.JS installer using `sudo bash installer.sh`. After starting the installer, you will be prompted to select the type of OS (type of GNU/Linux distribution). After selecting the type, SVR.JS installer will install Node.JS, SVR.JS and create SVR.JS service. During installation, you may be prompted for the installation of dependencies. Once the installation is done, restart your server OS or type `systemctl start svrjs` or `/etc/init.d/svrjs start` to start SVR.JS and get a web server on _http://localhost_.
 
@@ -39,7 +58,7 @@ File structure will look like this:
 *   _/var/www/svrjs_ - SVR.JS web root
 *   _/etc/svrjs-config.json_ - SVR.JS configuration file (SVR.JS _config.json_)
 
-SVR.JS installer will also install those commands:
+SVR.JS installer will also install these commands:
 
 *   _svrjs-loghighlight_ - SVR.JS log highlighter
 *   _svrjs-logviewer_ - SVR.JS log viewer
@@ -180,7 +199,9 @@ These commands provide an easy and convenient way to manage and control the SVR.
 
 #### Using SVR.JS updater (included in SVR.JS installer package; GNU/Linux only)
 
-SVR.JS can be updated using SVR.JS updater (if it's installed using SVR.JS installer) by changing working directory to one containing SVR.JS updater, and running `sudo bash updater.sh` (**make sure _svrjs.zip_ file contains new version of SVR.JS**). Once the update is done, restart your server OS or type `systemctl start svrjs` or `/etc/init.d/svrjs start` to restart SVR.JS.
+If you installed SVR.JS using installer packages in April 5, 2024 and later, you can just run `sudo svrjs-updater` command to update SVR.JS to latest version. Once the update is done, restart your server OS or type `systemctl start svrjs` or `/etc/init.d/svrjs start` to restart SVR.JS.
+
+For older installer packages, SVR.JS can be updated using SVR.JS updater by changing working directory to one containing SVR.JS updater, and running `sudo bash updater.sh` (**make sure _svrjs.zip_ file contains new version of SVR.JS**). Once the update is done, restart your server OS or type `systemctl start svrjs` or `/etc/init.d/svrjs start` to restart SVR.JS.
 
 #### Using _create-svrjs-server_ tool
 

source/index.md

@@ -12,7 +12,7 @@ svrjsversion: 3.14.10
         <h1>SVR.JS is a web server running on Node.JS</h1>
         <p>Host a webpage, run server-side JavaScript, use mods to expand server functionality, or use it as a reverse proxy &mdash; all in SVR.JS! SVR.JS is a web server that runs on top of Node.JS, thus enabling server-side JavaScript on webpages. SVR.JS also has an integrated log viewer, log highlighter, and user management tool. SVR.JS can run not only on Node.JS but also in Bun (experimental support).</p>
       </div>
-      <div class="maindownloads">
+      <div class="maindownloads" id="command-tab-other">
         <a href="https://downloads.svrjs.org/svr.js.3.14.10.zip" class="styled-button">Download SVR.JS 3.14.10</a>
         <div class="download-separator">
           <br />

themes/svrjswebsite/layout/layout.ejs

@@ -7,6 +7,7 @@
     <%- partial('_partial/footer.ejs') %>
     <% if (is_home() || ((is_current('/') || is_current('/index.html')) && page.layout == 'index-page')) { %>
     <script type="text/javascript" src="/js/fancyheader.js" async=""></script>
+    <script type="text/javascript" src="/js/indextabs.js" async=""></script>
     <% } %>
   </body>
 </html>

themes/svrjswebsite/source/css/highlight.css

@@ -17,8 +17,7 @@
 	line-height: 1.88235em;
 }
 
-.content pre,
+pre, code {
-.content code {
   font-family: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Hack, Menlo, Consolas, Monaco, monospace;
         font-size: 0.85em;
 }

themes/svrjswebsite/source/css/index-page.css

@@ -302,6 +302,95 @@ tr.comparison-table-mobile-feature td {
   font-size: 0.75em;
 }
 
+.command-tab {
+  display: inline;
+  display: inline-block;
+  text-decoration: none;
+  color: #ffffff;
+  background-color: #00b000;
+  font-size: 0.95em;
+  padding: 0.2em 0.5em;
+  margin-right: 0.5em;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
+  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+}
+
+.command-tab.command-tab-selected {
+  color: #007000;
+  background-color: #ffffff;
+}
+
+.command-tab:hover {
+  background-color: #007000;
+}
+
+.command-tab.command-tab-selected:hover {
+  color: #007000;
+  background-color: #ffffff;
+}
+
+#command-tab-tabcontainer {
+  width: 100%;
+  max-width: 480px;
+  text-align: left;
+  position: relative;
+  z-index: 1;
+}
+
+#command-tab-container {
+  background-color: #dfffdf;
+  color: #000000;
+  width: 100%;
+  max-width: 480px;
+  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
+  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
+  position: relative;
+  z-index: 2;
+}
+
+#command-tab-container .maindownloads {
+  padding: 0.5em;
+}
+
+#command-tab-command {
+  display: block;
+  overflow-x: auto;
+  overflow-y: visible;
+  text-align: left;
+  white-space: nowrap;
+  padding: 0.5em 0.65em;
+  font-size: 1em;
+}
+
+#command-tab-copy {
+  display: inline;
+  float: right;
+  padding: 0.25em 0.4em;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+#command-tab-h {
+  font-size: 0.88em;
+  padding: 0.35em 0.6em;
+  padding-bottom: 0;
+  font-weight: bold;
+  text-align: left;
+}
+
+.command-tab-clearfix {
+  content: "";
+  display: table;
+  clear: both
+}
+
 /*CSS hacks for Webp support check*/
 @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
   @supports (background-image: -webkit-image-set(url('/img/hero-image.webp') 1x)) {
@@ -378,6 +467,31 @@ tr.comparison-table-mobile-feature td {
     background-color: #c0c000;
     color: #ffffff;
   }
+
+  .command-tab {
+    background-color: #00b000;
+    -webkit-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
+    -moz-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
+    box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
+  }
+
+  .command-tab:hover {
+    background-color: #00d000;
+    color: #ffffff;
+  }
+
+  .command-tab.command-tab-selected:hover {
+    color: #007000;
+    background-color: #ffffff;
+  }
+
+  #command-tab-container {
+    background-color: #002000;
+    color: #ffffff;
+    -webkit-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
+    -moz-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
+    box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
+  }
 }
 
 @media screen and (min-width: 1800px) {
@@ -476,6 +590,10 @@ tr.comparison-table-mobile-feature td {
     min-height: 0px;
   }
   
+  #command-tab-container, #command-tab-tabcontainer {
+    margin: auto;
+  }
+
   /*CSS hacks for Webp support check*/
   @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
     @supports (background-image: -webkit-image-set(url('/img/hero-image.webp') 1x)) {

themes/svrjswebsite/source/js/indextabs.js

@@ -0,0 +1,82 @@
+function escapeHTML(source) {
+  return source.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/[\r\n]/g, "<br/>");
+}
+
+function decodeHTML(html) {
+  var txt = document.createElement("textarea");
+  txt.innerHTML = html;
+  return txt.value;
+}
+
+var tabs = [
+  {
+    name: "GNU/Linux",
+    command: "curl -fsSL https://downloads.svrjs.org/installer/svr.js.installer.linux.20240405.sh | sudo bash",
+    uaRegex: /\b(?:GNU\/)?Linux\b/gi
+  }
+];
+
+if (tabs.length > 0) {
+  var otherTab = document.getElementById("command-tab-other");
+  var otherTabOuterHTML = otherTab.outerHTML;
+  var tabsHTML = "";
+  var tabToClick = tabs.length;
+  for (var i = 0; i <= tabs.length; i++) {
+    tabsHTML += "<span class=\"command-tab\" id=\"command-tab-" + i + "\">";
+    if (i == tabs.length) {
+      tabsHTML += "Manually";
+    } else {
+      tabsHTML += escapeHTML(tabs[i].name);
+    }
+    tabsHTML += "</span>";
+    if (tabToClick == tabs.length && i != tabs.length && navigator.userAgent.match(tabs[i].uaRegex)) tabToClick = i;
+  }
+  otherTab.outerHTML = "<div id=\"command-tab-tabcontainer\">" + tabsHTML + "</div><div id=\"command-tab-container\"></div>";
+  var tabContainer = document.getElementById("command-tab-container");
+  for (var i = 0; i <= tabs.length; i++) {
+    document.getElementById("command-tab-" + i).onclick = createTabClickHandler(i);
+  }
+
+  function copyHandler() {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(decodeHTML(document.getElementById("command-tab-command").innerHTML));
+    } else {
+      if (document.selection) {
+        var range = document.body.createTextRange();
+        range.moveToElementText(document.getElementById("command-tab-command"));
+        range.select();
+      } else if (window.getSelection) {
+        var range = document.createRange();
+        range.selectNode(document.getElementById("command-tab-command"));
+        window.getSelection().removeAllRanges();
+        window.getSelection().addRange(range);
+      }
+
+      document.execCommand("copy");
+
+      if (document.selection) {
+        document.selection.empty();
+      } else if (window.getSelection) {
+        window.getSelection().removeAllRanges();
+      }
+    }
+    document.getElementById("command-tab-copy").innerHTML = "Copied!";
+  }
+
+  function createTabClickHandler(i) {
+    return function () {
+      for (var j = 0; j <= tabs.length; j++) {
+        document.getElementById("command-tab-" + j).className = "command-tab";
+      }
+      document.getElementById("command-tab-" + i).className = "command-tab command-tab-selected";
+      var container = document.getElementById("command-tab-container");
+      if (i == tabs.length) {
+        container.innerHTML = otherTabOuterHTML;
+      } else {
+        container.innerHTML = "<div id=\"command-tab-h\">Install SVR.JS</div><div id=\"command-tab-copy\">Copy</div><code id=\"command-tab-command\">" + escapeHTML(tabs[i].command) + "</code><div class=\"command-tab-clearfix\"></div>";
+        document.getElementById("command-tab-copy").onclick = copyHandler;
+      }
+    }
+  }
+  document.getElementById("command-tab-" + tabToClick).click();
+}