Use client side rendering

ohayodash/base.py

@@ -1,11 +1,8 @@
-import datetime
-import logging
 import os
-import zoneinfo
 
 import kubernetes
 import yaml
-from flask import Blueprint, render_template, jsonify
+from flask import Blueprint, jsonify, render_template
 
 ANNOTATION_BASE = 'ohayodash.github.io'
 
@@ -14,12 +11,20 @@ base = Blueprint('base', __name__, template_folder='templates')
 
 def check_tags(tag, object):
     # Skip if we're limited to a tag, and the CM has tags but not that one.
-    tags = object.metadata.annotations.get('{0}/tags'.format(ANNOTATION_BASE), None)
+    tags = object.metadata.annotations.get('{0}/tags'.format(ANNOTATION_BASE), '')
-    if tag and tags:
+    obj_tags = {x for x in tags.split(',') if x != ''}
-        if tag not in {x for x in tags.split(',') if x != ''}:
+
-            return False
+    # If its not tagged, allow
+    if not obj_tags:
         return True
 
+    # If tag is on the object, allow
+    if tag in obj_tags:
+        return True
+
+    # Else, disallow
+    return False
+
 
 def get_k8s_applications(tag: str = None) -> list:
     """Get all ingresses from the cluster and produce a application list."""
@@ -70,7 +75,7 @@ def get_bookmarks(tag: str = None) -> list:
     v1 = kubernetes.client.CoreV1Api()
     ret = v1.list_config_map_for_all_namespaces(watch=False)
 
-    bookmarks = {}
+    bookmarks = []
     for cm in ret.items:
         # Skip if the CM has no annotations
         if cm.metadata.annotations is None:
@@ -84,67 +89,64 @@ def get_bookmarks(tag: str = None) -> list:
         if not check_tags(tag, cm):
             continue
 
+        # Load bookmark data
         bookmark_data = yaml.safe_load(cm.data['bookmarks'])
+
+        # Iterate each bookmark
         for bookmark in bookmark_data:
             if 'group' not in bookmark:
                 group = 'default'
             else:
                 group = bookmark['group'].lower()
-            if group not in bookmarks:
+
-                bookmarks[group] = []
+            # Find category dict and append or create
-            bookmarks[group].append(bookmark)
+            for cat in bookmarks:
+                if cat['category'] == group:
+                    cat['links'].append(bookmark)
+                    break
+            else:
+                bookmarks.append({'category': group, 'links': [bookmark]})
 
     return bookmarks
 
 
-def get_greeting() -> tuple:
-    """Generate the greeting string based on the defined timezone."""
-    try:
-        tz = zoneinfo.ZoneInfo(os.environ.get('TZ', 'UTC'))
-    except zoneinfo.ZoneInfoNotFound:
-        logging.warning('Timezone {0} is invalid, using UTC'.format(os.environ.get('TZ', 'UTC')))
-        tz = zoneinfo.ZoneInfo('UTC')
-
-    current_time = datetime.datetime.now(tz)
-
-    if 0 < current_time.hour < 12:
-        return 'おはようございます!', "Thats 'Good morning' in Japanese"
-    elif current_time.hour >= 19:
-        return 'こんばんは', "Thats 'Good evening' in Japanese"
-    return 'こんにちは', "Thats 'Good day' in Japanese"
-
-
-# TODO: Replace with JS
-@base.app_template_filter()
-def format_datetime(value):
-    return value.strftime(os.environ.get('DATE_FORMAT', '%Y-%m-%d %H:%M'))  # noqa: WPS323
-
-
 @base.route('/')
-def index():
+@base.route('/<tag>/')
-    return render_template('index.j2',
+def index(tag=None):
-                           greeting=get_greeting(),
+    return render_template('index.j2')
-                           now=datetime.datetime.utcnow(),
-                           applications=get_k8s_applications(),
-                           bookmarks=get_bookmarks(),
-                           )
 
 
-@base.route('/<tag>')
+@base.route('/providers.json')
-def tag(tag):
+@base.route('/<tag>/providers.json')
-    return render_template('index.j2',
+def providers(tag=None):
-                           greeting=get_greeting(),
+    return jsonify({
-                           now=datetime.datetime.utcnow(),
+        'providers': [
-                           applications=get_k8s_applications(tag),
+            {'name': 'Allmusic', 'url': 'https://www.allmusic.com/search/all/', 'prefix': '/a'},
-                           bookmarks=get_bookmarks(tag),
+            {'name': 'Discogs', 'url': 'https://www.discogs.com/search/?q=', 'prefix': '/di'},
-                           )
+            {'name': 'Duck Duck Go', 'url': 'https://duckduckgo.com/?q=', 'prefix': '/d'},
+            {'name': 'iMDB', 'url': 'https://www.imdb.com/find?q=', 'prefix': '/i'},
+            {'name': 'TheMovieDB', 'url': 'https://www.themoviedb.org/search?query=', 'prefix': '/m'},
+            {'name': 'Reddit', 'url': 'https://www.reddit.com/search?q=', 'prefix': '/r'},
+            {'name': 'Qwant', 'url': 'https://www.qwant.com/?q=', 'prefix': '/q'},
+            {'name': 'Soundcloud', 'url': 'https://soundcloud.com/search?q=', 'prefix': '/so'},
+            {'name': 'Spotify', 'url': 'https://open.spotify.com/search/results/', 'prefix': '/s'},
+            {'name': 'TheTVDB', 'url': 'https://www.thetvdb.com/search?query=', 'prefix': '/tv'},
+            {'name': 'Trakt', 'url': 'https://trakt.tv/search?query=', 'prefix': '/t'}
+        ]
+    })
 
 
-@base.route('/api/applications')
+@base.route('/apps.json')
-def applications():
+@base.route('/<tag>/apps.json')
-    return jsonify(get_k8s_applications())
+def applications(tag=None):
+    return jsonify({
+        'apps': get_k8s_applications(tag)
+    })
 
 
-@base.route('/api/bookmarks')
+@base.route('/links.json')
-def bookmarks():
+@base.route('/<tag>/links.json')
-    return jsonify(get_bookmarks())
+def bookmarks(tag=None):
+    return jsonify({
+        'bookmarks': get_bookmarks(tag)
+    })

ohayodash/static/js/data.js

@@ -0,0 +1,16 @@
+function fetchAndRender (name) {
+    fetch(name + '.json')
+        .then(response => response.json())
+        .then(data => {
+            const mysource = document.getElementById(name + '-template').innerHTML;
+            const mytemplate = Handlebars.compile(mysource);
+            const myresult = mytemplate(data);
+            document.getElementById(name).innerHTML = myresult;
+        });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    fetchAndRender('apps');
+    fetchAndRender('links');
+    fetchAndRender('providers');
+});

ohayodash/static/js/script.js

@@ -0,0 +1,38 @@
+function date() {
+    let currentDate = new Date();
+    let dateOptions = {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+    };
+    let date = currentDate.toLocaleDateString("en-GB", dateOptions);
+    document.getElementById("header_date").innerHTML = date;
+}
+
+function greet() {
+    let currentTime = new Date();
+    let greet = Math.floor(currentTime.getHours() / 6);
+    let greeting = "こんにちは!";
+    switch (greet) {
+        case 0:
+            greeting = "おやすみなさい!";
+            break;
+        case 1:
+            greeting = "おはようございます!";
+            break;
+        case 2:
+            greeting = "こんにちは!";
+            break;
+        case 3:
+            greeting = "こんばんは!";
+            break;
+    }
+    document.getElementById("header_greet").innerHTML = greeting;
+    document.title = greeting;
+}
+
+function loadFunctions() {
+    date();
+    greet();
+}

ohayodash/static/js/search.js

@@ -1,5 +1,6 @@
 var sindex = 0;
 var cycle = false;
+var sengine = "https://www.google.com/?q="; // Default search engine
 
 function start() {
     var query = getParameterByName('q');
@@ -20,7 +21,30 @@ function handleKeyPress(e) {
     if (key == 13) { // Search functions
         search(text);
     }
-    if (key == 32) { //Space to go to search
+    if (key == 9) { // Tab Completion Functions
+        e.preventDefault();
+        e.stopPropagation();
+        if (text[0] === ';') {
+            switch (option) {
+                case 't':
+                    var streamers = ['admiralbahroo', 'moonmoon_ow', 'witwix'];
+                    if (!subtext || cycle) {
+                        cycle = true;
+                        if (sindex > streamers.length - 1) sindex = 0;
+                        document.getElementById("keywords").value = ';t ' + streamers[sindex++];
+                        return;
+                    }
+                    for (var streamer of streamers) {
+                        if (subtext === streamer.substr(0, subtext.length)) {
+                            document.getElementById("keywords").value = ';t ' + streamer;
+                            return;
+                        }
+                    }
+                    break;
+            }
+        }
+    }
+    if(key == 32){ //Space to go to search
         document.getElementById("keywords").focus();
     }
     sindex = 0;
@@ -28,13 +52,75 @@ function handleKeyPress(e) {
 }
 
 function search(text) {
-    if (validURL(text)) {
+    var option = text.substr(1, text.indexOf(' ') - 1) || text.substr(1);
+    var subtext = text.substr(2 + option.length);
+    if (text[0] === '/') {
+        if (text.indexOf(' ') > -1) {
+            switch (option) {
+                case "am":
+                    window.location = "https://www.allmusic.com/search/all/" + subtext;
+                    break;
+                case "d":
+                    window.location = "https://duckduckgo.com/?q=" + subtext;
+                    break;
+                case "di":
+                    window.location = "https://www.discogs.com/search/?q=" + subtext;
+                    break;
+                case "i":
+                    window.location = "https://www.imdb.com/find?q=" + subtext;
+                    break;
+                case "m":
+                    window.location = "https://www.themoviedb.org/search?query=" + subtext;
+                    break;
+                case "r":
+                    window.location = "https://www.reddit.com/search?q=" + subtext;
+                    break;
+                case "q":
+                    window.location = "https://www.qwant.com/?q=" + subtext;
+                    break;
+                case "so":
+                    window.location = "https://soundcloud.com/search?q=" + subtext;
+                    break;
+                case "s":
+                    window.location = "https://open.spotify.com/search/results/" + subtext;
+                    break;
+                case "t":
+                    window.location = "https://trakt.tv/search?query=" + subtext;
+                    break;
+                case "tv":
+                    window.location = "https://www.thetvdb.com/search?query=" + subtext;
+                    break;
+                case "y":
+                    window.location = "https://www.youtube.com/results?search_query=" + subtext;
+                    break;
+                case "g":
+                    window.location = "https://www.google.com/?q=" + subtext;
+                    break;
+            }
+        } else {
+            var option = text.substr(1);
+            switch (option) {
+                case "d":
+                    window.location = "https://www.duckduckgo.com";
+                    break;
+                case "y":
+                    window.location = "https://www.youtube.com";
+                    break;
+                case "r":
+                    window.location = "https://reddit.com";
+                    break;
+                case "s":
+                    window.location = "https://open.spotify.com";
+                    break;
+            }
+        }
+    } else if (validURL(text)) {
         if (containsProtocol(text))
             window.location = text;
         else
             window.location = "https://" + text;
     } else {
-        window.location = "https://www.google.com/search?q=" + text;
+        window.location = sengine + text;
     }
 }
 
@@ -54,7 +140,7 @@ function containsProtocol(str) {
     return !!pattern.test(str);
 }
 
-String.prototype.replaceAll = function (search, replacement) {
+String.prototype.replaceAll = function(search, replacement) {
     var target = this;
     return target.split(search).join(replacement);
 };

ohayodash/templates/index.j2

@@ -2,17 +2,19 @@
 <html lang="en">
 
 <head>
-    <title>{{ title | default("おはよう!") }}</title>
+    <title>おはよう!</title>
     <meta charset="utf-8">
+    <meta name="description" content="a startpage for your server and / or new tab page">
     <meta http-equiv="Default-Style" content="">
-    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
     <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
-    <link type="text/css" rel="stylesheet" href="./static/css/styles.css" media="screen,projection" />
+    <link type="text/css" rel="stylesheet" href="/static/css/styles.css" media="screen,projection" />
     <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
     <script src="//code.iconify.design/1/1.0.7/iconify.min.js"></script>
 </head>
 
-<body>
+<body onload="loadFunctions()">
+
     <section id="modal">
         <div>
             <header id="modal-header">
@@ -26,69 +28,98 @@
 
             <div id="modal-theme">
                 <button data-theme="blackboard" class="theme-button theme-blackboard">Blackboard</button>
-                <button data-theme="gazette" class="theme-button theme-gazette">Gazette</button>
-                <button data-theme="espresso" class="theme-button theme-espresso">Espresso</button>
-                <button data-theme="cab" class="theme-button theme-cab">Cab</button>
-                <button data-theme="cloud" class="theme-button theme-cloud">Cloud</button>
-                <button data-theme="lime" class="theme-button theme-lime">Lime</button>
-                <button data-theme="passion" class="theme-button theme-passion">Passion</button>
                 <button data-theme="blues" class="theme-button theme-blues">Blues</button>
+                <button data-theme="cab" class="theme-button theme-cab">Cab</button>
                 <button data-theme="chalk" class="theme-button theme-chalk">Chalk</button>
-                <button data-theme="tron" class="theme-button theme-tron">Tron</button>
+                <button data-theme="cloud" class="theme-button theme-cloud">Cloud</button>
-                <button data-theme="paper" class="theme-button theme-paper">Paper</button>
+                <button data-theme="espresso" class="theme-button theme-espresso">Espresso</button>
+                <button data-theme="gazette" class="theme-button theme-gazette">Gazette</button>
+                <button data-theme="lime" class="theme-button theme-lime">Lime</button>
                 <button data-theme="nord" class="theme-button theme-nord">Nord</button>
+                <button data-theme="paper" class="theme-button theme-paper">Paper</button>
+                <button data-theme="passion" class="theme-button theme-passion">Passion</button>
+                <button data-theme="tron" class="theme-button theme-tron">Tron</button>
             </div>
 
+            <h2>Search options</h2>
+
+            <section id="providers">
+                {% raw %}
+                <script type="text/handlebars-template" id="providers-template">
+                    <table>
+                        <tr>
+                            <th>Website</th>
+                            <th>Prefix</th>
+                        </tr>
+                        {{#providers}}
+                        <tr>
+                            <td><a href="{{url}}">{{name}}</a></td>
+                            <td>{{prefix}}</td>
+                        </tr>
+                        {{/providers}}
+                    </table>
+                </script>
+                {% endraw %}
+            </section>
+
+            <header id="modal-footer">
+                <a href="https://github.com/nikdoof/ohayodash/"><span class="iconify" data-icon="mdi-github-box"></span></a>
+                <a href="https://materialdesignicons.com/"><span class="iconify"
+                        data-icon="mdi-material-design"></span></a>
+            </header>
         </div>
     </section>
 
     <main id="container" class="fade">
+
         <section id="search">
             <input name="keywords" type="text" id="keywords" size="50" spellcheck="false" autofocus="true"
                 onkeydown="handleKeyPress(event)">
         </section>
 
         <section id="header">
-            <h1><span title="{{ greeting[1] }}">{{ greeting[0] | default("Welcome")}}</span></h1>
+            <h2 id="header_date"></h2>
-            <h2>{{ now | format_datetime }}</h2>
+            <h1 id="header_greet"></h1>
         </section>
 
-        {% if applications %}
         <section id="apps">
+            {% raw %}
+            <script type="text/handlebars-template" id="apps-template">
             <h3>Applications</h3>
             <div id="apps_loop">
-                {% for app in applications %}
+                {{#apps}}
                     <div class="apps_item">
                         <div class="apps_icon">
-                        <a href="{{ app.url }}"><span class="iconify icon" data-icon="mdi-{{ app.icon | default("application") }}"></span></a>
+                            <span class="iconify icon" data-icon="mdi-{{icon}}"></span>
                         </div>
                         <div class="apps_text">
-                        <a href="{{ app.url }}">{{ app.name }}</a>
+                            <a href="http://{{url}}" {{#if target}}target="{{target}}"{{/if}} >{{name}}</a>
-                        {% if app.show_url %}
+                            {{#if show_url}}<span id="app-address">{{url}}</span>{{/if}}
-                        <span id="app-address">{{ app.url }}</span>
-                        {% endif %}
                         </div>
                     </div>
-                {% endfor %}
+                {{/apps}}
             </div>
+            </script>
+            {% endraw %}
         </section>
-        {% endif %}
 
-        {% if bookmarks %}
         <section id="links">
+            {% raw %}
+            <script type="text/handlebars-template" id="links-template">
             <h3>Bookmarks</h3>
             <div id="links_loop">
-                {% for group, value in bookmarks|dictsort %}
+                {{#bookmarks}}
                     <div id="links_item">
-                    <h4>{{ group }}</h4>
+                        <h4>{{category}}</h4>
-                    {% for link in bookmarks[group] %}
+                        {{#links}}
-                    <a href="{{ link.url }}" class="theme_color-border theme_text-select">{{ link.name }}</a>
+                            <a href="{{url}}" target="{{target}}" class="theme_color-border theme_text-select">{{name}}</a>
-                    {% endfor %}
+                        {{/links}}
                     </div>
-                {% endfor %}
+                {{/bookmarks}}
             </div>
+            </script>
+            {% endraw %}
         </section>
-        {% endif %}
     </main>
 
     <div id="modal_init">
@@ -97,8 +128,11 @@
         </a>
     </div>
 
-    <script src="./static/js/themer.js" type="text/javascript"></script>
+    <script src="/static/js/data.js" type="text/javascript"></script>
-    <script src="./static/js/search.js" type="text/javascript"></script>
+    <script src="/static/js/script.js" type="text/javascript"></script>
+    <script src="/static/js/themer.js" type="text/javascript"></script>
+    <script src="/static/js/search.js" type="text/javascript"></script>
+
 </body>
 
 </html>