Update index

.gitignore

@@ -112,3 +112,5 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+.vscode/settings.json
+settings.json

core/database.py

@@ -0,0 +1,12 @@
+from pymongo import MongoClient
+from PyJS import JSON
+from PyJS.modules import fs
+
+col = MongoClient(JSON.parse(fs.createReadStream('settings.json'))['mongo'])['BytesBump']['servers']
+
+class Servers:
+    def get_all(**checks):
+        return [server for server in col.find(checks)]
+    
+    def get_one(**checks):
+        return col.find_one(checks)

core/routes.py

@@ -0,0 +1,5 @@
+from PyJS import JSON
+from PyJS.modules import fs
+
+def route_for(route):
+    return JSON.parse(fs.createReadStream('data/routes.json'))[route]

data/routes.json

@@ -0,0 +1 @@
+{}

main.py

@@ -0,0 +1,40 @@
+"""
+MIT License
+
+Copyright (c) 2021 Nemika
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+"""
+
+from flask import Flask, render_template
+
+from PyJS import JSON
+from PyJS.modules import fs
+
+from core.database import Servers
+
+app = Flask(__name__)
+
+settings = JSON.parse(fs.createReadStream('settings.json'))
+
+@app.route("/")
+def index():
+    return render_template('index.html', servers=Servers.get_all(),**settings)
+
+app.run(debug=True)

pug/base.pug

@@ -0,0 +1,25 @@
+doctype html
+html(lang="en")
+    head
+        meta(charset="UTF-8")
+        meta(http-equiv="X-UA-Compatible", content="IE=edge")
+        meta(name="viewport", content="width=device-width, initial-scale=1.0")
+        link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous")
+        link(rel="stylesheet", href="{{url_for('static', filename='styles/base.css')}}")
+        block links 
+        
+        block title
+
+    body
+
+        block content
+
+
+        div#particles-js
+        script(src="{{url_for('static', filename='js/particles.js')}}") 
+        script(src="{{url_for('static', filename='js/app.js')}}") 
+        script(src="{{url_for('static', filename='js/base.js')}}")
+        script(src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.4/markdown-it.js")
+        script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous")
+        script(src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous")
+        block scripts

pug/index.pug

@@ -0,0 +1,41 @@
+extends base.pug
+
+block title 
+    title Home | {{site_name}}
+
+block links 
+    link(rel="stylesheet", href="{{url_for('static', filename='styles/index.css')}}")
+
+block content 
+
+    .servers
+        | {% for server in servers %}
+
+        .card.shadow-lg(style="width: 18rem; margin:5px;")
+            img.card-img-top(src="{{server['icon_url']}}")
+            .card-body
+                .card-header.bg-danger.bg-gradient.text-light(style="margin-bottom:5px;")
+                    strong {{server['server_name']}}
+                p.card-text {{server['description'][:100] + '...'}}
+                
+                a.btn.btn-outline-success.d-block.mx-auto(href="/server/{{server['_id']}}") View Server
+
+        | {% endfor %}
+
+block scripts 
+    script.
+        $(document).ready(() => {
+
+            const md = window.markdownit();
+
+            const elements = document.getElementsByClassName("card-text");
+
+            for(var i = 0; i<elements.length; i++) {
+                elements[i].innerHTML = md.render(elements[i].innerHTML);
+            }
+
+            $(".servers").animate({
+                opacity: "100%"
+            }, 600)
+
+        })

settings-example.json

@@ -0,0 +1,4 @@
+{
+    "site_name": "BytesBump Server List",
+    "mongo": "mongo-uri (same as the bot's)"
+}

static/js/app.js

@@ -0,0 +1,133 @@
+/* -----------------------------------------------
+/* How to use? : Check the GitHub README
+/* ----------------------------------------------- */
+
+/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
+/*
+particlesJS.load('particles-js', 'particles.json', function() {
+  console.log('particles.js loaded - callback');
+});
+*/
+
+/* Otherwise just put the config content (json): */
+
+particlesJS('particles-js',
+  
+  {
+    "particles": {
+      "number": {
+        "value": 80,
+        "density": {
+          "enable": true,
+          "value_area": 2000
+        }
+      },
+      "color": {
+        "value": "#1300ff"
+      },
+      "shape": {
+        "type": "circle",
+        "stroke": {
+          "width": 0,
+          "color": "#000000"
+        },
+        "polygon": {
+          "nb_sides": 5
+        },
+        "image": {
+          "src": "img/github.svg",
+          "width": 100,
+          "height": 100
+        }
+      },
+      "opacity": {
+        "value": 0.5,
+        "random": false,
+        "anim": {
+          "enable": false,
+          "speed": 1,
+          "opacity_min": 0.1,
+          "sync": false
+        }
+      },
+      "size": {
+        "value": 5,
+        "random": true,
+        "anim": {
+          "enable": false,
+          "speed": 40,
+          "size_min": 0.1,
+          "sync": false
+        }
+      },
+      "line_linked": {
+        "enable": true,
+        "distance": 150,
+        "color": "#ffffff",
+        "opacity": 0.4,
+        "width": 1
+      },
+      "move": {
+        "enable": true,
+        "speed": 6,
+        "direction": "none",
+        "random": false,
+        "straight": false,
+        "out_mode": "out",
+        "attract": {
+          "enable": false,
+          "rotateX": 600,
+          "rotateY": 1200
+        }
+      }
+    },
+    "interactivity": {
+      "detect_on": "canvas",
+      "events": {
+        "onhover": {
+          "enable": true,
+          "mode": "grab"
+        },
+        "onclick": {
+          "enable": true,
+          "mode": "push"
+        },
+        "resize": true
+      },
+      "modes": {
+        "grab": {
+          "distance": 400,
+          "line_linked": {
+            "opacity": 1
+          }
+        },
+        "bubble": {
+          "distance": 400,
+          "size": 40,
+          "duration": 2,
+          "opacity": 8,
+          "speed": 3
+        },
+        "repulse": {
+          "distance": 200
+        },
+        "push": {
+          "particles_nb": 4
+        },
+        "remove": {
+          "particles_nb": 2
+        }
+      }
+    },
+    "retina_detect": true,
+    "config_demo": {
+      "hide_card": false,
+      "background_color": "#b61924",
+      "background_image": "",
+      "background_position": "50% 50%",
+      "background_repeat": "no-repeat",
+      "background_size": "cover"
+    }
+  }
+
+);

static/js/base.js

@@ -0,0 +1,10 @@
+// Update Time
+const updateTime = setInterval(() => {
+    const currentTime = new Date();
+    let hours = currentTime.getHours();
+    let minutes = currentTime.getMinutes();
+    let seconds = currentTime.getSeconds();
+
+    document.getElementById("time").innerHTML = `${hours > 9 ? hours : '0' + hours}:${minutes> 9 ? minutes : '0' + minutes}:${seconds> 9 ? seconds : '0' + seconds}`;
+
+}, 1000)

static/styles/base.css

@@ -0,0 +1,14 @@
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+}
+
+#particles-js {
+    z-index: -1;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+}

static/styles/index.css

@@ -0,0 +1,6 @@
+.servers {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    opacity: 0%;
+}

templates/base.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"><link rel="stylesheet" href="{{url_for('static', filename='styles/base.css')}}"></head><body><div id="particles-js"></div><script src="{{url_for('static', filename='js/particles.js')}}"> </script><script src="{{url_for('static', filename='js/app.js')}}"> </script><script src="{{url_for('static', filename='js/base.js')}}"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.4/markdown-it.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script></body></html>

templates/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"><link rel="stylesheet" href="{{url_for('static', filename='styles/base.css')}}"><link rel="stylesheet" href="{{url_for('static', filename='styles/index.css')}}"><title>Home | {{site_name}}</title></head><body><div class="servers">{% for server in servers %}<div class="card shadow-lg" style="width: 18rem; margin:5px;"><img class="card-img-top" src="{{server['icon_url']}}"><div class="card-body"><div class="card-header bg-danger bg-gradient text-light" style="margin-bottom:5px;"><strong>{{server['server_name']}}</strong></div><p class="card-text">{{server['description'][:100] + '...'}}</p><a class="btn btn-outline-success d-block mx-auto" href="/server/{{server['_id']}}">View Server</a></div></div>{% endfor %}</div><div id="particles-js"></div><script src="{{url_for('static', filename='js/particles.js')}}"> </script><script src="{{url_for('static', filename='js/app.js')}}"> </script><script src="{{url_for('static', filename='js/base.js')}}"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.4/markdown-it.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script><script>$(document).ready(() => {
+
+    const md = window.markdownit();
+
+    const elements = document.getElementsByClassName("card-text");
+
+    for(var i = 0; i<elements.length; i++) {
+        elements[i].innerHTML = md.render(elements[i].innerHTML);
+    }
+
+    $(".servers").animate({
+        opacity: "100%"
+    }, 600)
+
+})</script></body></html>