removed js/jquery and made cards static

Amolith created

Change summary

app.js              | 108 ----------------------------------------------
cards.json          |  90 +++++++++++++++++++-------------------
cards.py            |  24 ++++++++++
index.html          |   6 +-
jquery-3.3.1.min.js |   1 
5 files changed, 72 insertions(+), 157 deletions(-)

Detailed changes

app.js 🔗

@@ -1,108 +0,0 @@
-
-$(function(){
-
-    var model = {
-        // renomear
-        dat: [
-        ],
-        read_json: function() {
-            $.ajax({
-                url: "/cards.json",
-                dataType: 'json',
-                async: false,
-                success: function(data) {
-                    $(data["cards"]).each(function(){
-                        var card_info = $(this)[0];
-                        model.set_data(card_info);
-                    });
-                }
-            });
-        },
-        set_data: function(d) {
-            model.dat.push(d);
-        },
-        get_data: function() {
-            return model.dat;
-        },
-        filter_data: function(conteudo) {
-            var $d = model.dat;
-            var $filter = [];
-            var $c = conteudo.toLowerCase();
-            $($d).each(function(i){
-                if(
-                    $d[i].name.toLowerCase().indexOf($c) >= 0 ||
-                    $d[i].description.toLowerCase().indexOf($c) >= 0 ||
-                    $d[i].button_text.toLowerCase().indexOf($c) >= 0
-                ) {
-                    $filter.push($d[i]);
-                }
-            });
-            return $filter;
-        },
-        init: function() {
-            model.read_json();
-        }
-    };
-    var octopus = {
-        init: function() {
-            model.init();
-            view.init();
-            octopus.create_card(model.get_data());
-        },
-        create_card: function(d) {
-            $.each(d, function(i){
-                view.create_card(d[i].name, d[i].description, d[i].button_text, d[i].link, d[i].tor);
-            });
-        },
-        filter_data: function(c) {
-            var d = model.filter_data(c);
-            $.each(d, function(i){
-                view.create_card(d[i].name, d[i].description, d[i].button_text, d[i].link, d[i].tor);
-            });
-        },
-        recreate_cards: function() {
-            octopus.create_card(model.get_data());
-        }
-    };
-
-    // Renomear
-    var view = {
-        init: function() {
-            this.container = $(".flex-cards");
-            this.search_field = $("#search_field");
-            view.events();
-        },
-        events: function(){
-            this.search_field.on('input',function(){
-                var $conteudo = $(this).val();
-                view.clean_cards();
-                if($conteudo.length == 0){
-                    octopus.recreate_cards();
-                }else {
-                    octopus.filter_data($conteudo);
-                }
-            });
-        },
-        create_card: function(name, desc, bt_txt, link, tor){
-            var $card = $("<div>").addClass("card");
-            var $h1 = $("<h1>").text(name);
-            var $desc = $("<p>").text(desc);
-            var $button = $("<button>").addClass("button").text(bt_txt);
-            var $icon = $("<button>").addClass("tor").text("Tor");
-            var $a = $("<a>").attr("href", link);
-            var $tor = $("<a>").attr("href", tor);
-            $a.append($button);
-            $tor.append($icon);
-            if (tor == "#") {
-                $card.append($h1).append($desc).append($a);
-            } else {
-            $card.append($h1).append($desc).append($a).append($tor); 
-            }
-            this.container.append($card);
-        },
-        clean_cards: function() {
-            this.container.empty();
-        }
-    };
-    octopus.init();
-});

cards.json 🔗

@@ -2,18 +2,18 @@
   "cards" :
   [
     {
-    "name": "Mattermost",
-      "description": "Mattermost is a FLOSS application for real-time chat. Use this for communicating with other users, joining a few different communities, and getting support for NixNet services.",
-      "button_text": "Chat!",
-      "link":"/mattermost/",
-      "tor":"http://l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/mattermost/"
+    "name": "Wireguard",
+      "description": "Wireguard is an open source application and protocol that uses VPN techniques to create secure tunnels in various configurations. It aims to be more performant than OpenVPN or IPsec.",
+      "button_text": "Tunnel!",
+      "link": "/wireguard/",
+      "tor":"http://l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/wireguard/"
     },
     {
-    "name": "Firefly III",
-      "description": "Firefly III is an open source personal finance manager. It can help you keep track of expenses, income, budgets, supports credit cards, checking/savings accounts, and everything in between.",
-      "button_text": "Budget!",
-      "link": "https://firefly.nixnet.xyz/",
-      "tor":"http://firefly.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/"
+    "name": "Jabber/XMPP",
+      "description": "Jabber/XMPP is a set of open technologies for instant messaging, multi-party chat, and voice/video calls. XMPP stands for the Extensible Messaging and Presence Protocol.",
+      "button_text": "Register!",
+      "link": "/jabber-xmpp/",
+      "tor":"http://l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/jabber-xmpp/"
     },
     {
     "name": "Mastodon",
@@ -23,27 +23,6 @@
       "tor":"#"
     },
     {
-    "name": "Framadate",
-      "description": "Framadate is a simple and wonderful poll creation tool by Framasoft. It's perfect for planning an appointment or making a decision quickly and easily. No registration is required.",
-      "button_text": "Poll!",
-      "link": "https://poll.nixnet.xyz/",
-      "tor":"#"
-    },
-    {
-    "name": "Presentator",
-      "description": "Presentator is an open source application for collaborative design that is also completely free to use. It's a wonderful alternative to proprietary solutions such as Invision!",
-      "button_text": "Design!",
-      "link": "https://design.nixnet.xyz",
-      "tor":"http://design.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/"
-    },
-    {
-    "name": "Wireguard",
-      "description": "Wireguard is an open source application and protocol that uses VPN techniques to create secure tunnels in various configurations. It aims to be more performant than OpenVPN or IPsec.",
-      "button_text": "Tunnel!",
-      "link": "/wireguard/",
-      "tor":"http://l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/wireguard/"
-    },
-    {
     "name": "Gitea",
       "description": "Gitea is a simple, easy-to-use, yet full-featured and completely open source code hosting solution. Please be conscientious of storage use and don't upload large files as users have unlimited repos.",
       "button_text": "Code!",
@@ -51,6 +30,20 @@
       "tor":"http://git.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/"
     },
     {
+    "name": "Searx",
+      "description": "searX is a meta search engine that aggregates results from more than 70 different search engines. Users are neither tracked nor profiled. searX can also be used over Tor for increased anonymity.",
+      "button_text": "Search!",
+      "link": "https://searx.nixnet.xyz/",
+      "tor":"http://searx.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/"
+    },
+    {
+    "name": "Firefly III",
+      "description": "Firefly III is an open source personal finance manager. It can help you keep track of expenses, income, budgets, supports credit cards, checking/savings accounts, and everything in between.",
+      "button_text": "Budget!",
+      "link": "https://firefly.nixnet.xyz/",
+      "tor":"http://firefly.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/"
+    },
+    {
     "name": "CodiMD",
       "description": "CodiMD is an application that allows users to collaborate in real time on markdown documents and presentations. Perfect for quick and easy slideshows and documentation.",
       "button_text": "Write!",
@@ -72,6 +65,13 @@
       "tor":"http://plume.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/"
     },
     {
+    "name": "Mumble",
+      "description": "Mumble is an open source, low-latency, high quality voice chat software primarily intended for use while gaming. It's also great for private calls between yourself and others.",
+      "button_text": "Chat!",
+      "link": "/mumble/",
+      "tor":"#"
+    },
+    {
     "name": "wallabag",
       "description": "wallabag is like a self-hosted version of Mozilla's Pocket. You throw it some links and it saves them to read later in a minimal UI, and downloads them to the mobile app if you have it.",
       "button_text": "Read!",
@@ -93,25 +93,25 @@
       "tor":"http://rss.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/"
     },
     {
-    "name": "Jabber/XMPP",
-      "description": "Jabber/XMPP is a set of open technologies for instant messaging, multi-party chat, and voice/video calls. XMPP stands for the Extensible Messaging and Presence Protocol.",
-      "button_text": "Register!",
-      "link": "/jabber-xmpp/",
-      "tor":"http://l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/jabber-xmpp/"
+    "name": "Framadate",
+      "description": "Framadate is a simple and wonderful poll creation tool by Framasoft. It's perfect for planning an appointment or making a decision quickly and easily. No registration is required.",
+      "button_text": "Poll!",
+      "link": "https://poll.nixnet.xyz/",
+      "tor":"#"
     },
     {
-    "name": "searX",
-      "description": "searX is a meta search engine that aggregates results from more than 70 different search engines. Users are neither tracked nor profiled. searX can also be used over Tor for increased anonymity.",
-      "button_text": "Search!",
-      "link": "https://searx.nixnet.xyz/",
-      "tor":"http://searx.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/"
+    "name": "Presentator",
+      "description": "Presentator is an open source application for collaborative design that is also completely free to use. It's a wonderful alternative to proprietary solutions such as Invision!",
+      "button_text": "Design!",
+      "link": "https://design.nixnet.xyz",
+      "tor":"http://design.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/"
     },
     {
-    "name": "Mumble",
-      "description": "Mumble is an open source, low-latency, high quality voice chat software primarily intended for use while gaming. It's also great for private calls between yourself and others.",
+    "name": "Mattermost",
+      "description": "Mattermost is a FLOSS application for real-time chat. Use this for communicating with other users, joining a few different communities, and getting support for NixNet services.",
       "button_text": "Chat!",
-      "link": "/mumble/",
-      "tor":"#"
+      "link":"/mattermost/",
+      "tor":"http://l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion/mattermost/"
     }
   ]
 }

cards.py 🔗

@@ -0,0 +1,24 @@
+import json
+
+with open('cards.json') as f:
+    x = json.load(f)
+
+text = ""
+for i in x["cards"]:
+    text += f"""
+    <div class="card">
+        <h1>{i["name"]}</h1>
+        <p>{i["description"]}</p>
+        <a href="{i["link"]}"><button class="button">{i["button_text"]}</button></a>
+    """
+    if i["tor"] != "#":
+        text += f'<a href="{i["tor"]}"><button class="tor">Tor</button></a>'
+
+    text += "</div>"
+
+with open('_site/index.html') as f:
+    y = f.read()
+
+y = y.replace('<!-- JS cards here -->', text)
+with open('_site/index.html', 'w') as f:
+    f.write(y)

index.html 🔗

@@ -10,6 +10,7 @@ priority: 0.9
 <center><p>I host a variety of services that are available for anyone to use free of charge. Below is a list with descriptions of each.</p></center>
 <br/>
 <center><h1><a href="https://status.nixnet.xyz" target="_blank"><u>Status page</u></a> / <a href="https://netdata.nixnet.xyz" target="_blank"><u>Stats page</u></a></h1></center>
+<!--
 <br/>
 <center>
     <form>
@@ -17,12 +18,11 @@ priority: 0.9
     </form>
 </center>
 <br/>
+-->
 <br/>
 <div class="flex-wrapper">
     <div class="flex-cards">
-        <!-- JS cards here -->
+    <!-- JS cards here -->    
     </div>
 </div>
 <center><h1><u><a href="https://git.nixnet.xyz/NixNet/" target="_blank">Technical information about NixNet</a></u></h1></center>
-<script src="/jquery-3.3.1.min.js" charset="utf-8"></script>
-<script src="/app.js" charset="utf-8"></script>

jquery-3.3.1.min.js 🔗

@@ -1,2 +0,0 @@
-/*! jQuery v3.3.1 | (c) JS Foundation and other contributors | jquery.org/license */