Use client side rendering

This commit is contained in:
2022-01-08 15:25:19 +00:00
parent a9414663e0
commit 243c2aa3fd
5 changed files with 278 additions and 102 deletions

View File

@@ -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,11 +11,19 @@ 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)
if tag and tags:
if tag not in {x for x in tags.split(',') if x != ''}:
return False
return True
tags = object.metadata.annotations.get('{0}/tags'.format(ANNOTATION_BASE), '')
obj_tags = {x for x in tags.split(',') if x != ''}
# 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:
@@ -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] = []
bookmarks[group].append(bookmark)
# Find category dict and append or create
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():
return render_template('index.j2',
greeting=get_greeting(),
now=datetime.datetime.utcnow(),
applications=get_k8s_applications(),
bookmarks=get_bookmarks(),
)
@base.route('/<tag>/')
def index(tag=None):
return render_template('index.j2')
@base.route('/<tag>')
def tag(tag):
return render_template('index.j2',
greeting=get_greeting(),
now=datetime.datetime.utcnow(),
applications=get_k8s_applications(tag),
bookmarks=get_bookmarks(tag),
)
@base.route('/providers.json')
@base.route('/<tag>/providers.json')
def providers(tag=None):
return jsonify({
'providers': [
{'name': 'Allmusic', 'url': 'https://www.allmusic.com/search/all/', 'prefix': '/a'},
{'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')
def applications():
return jsonify(get_k8s_applications())
@base.route('/apps.json')
@base.route('/<tag>/apps.json')
def applications(tag=None):
return jsonify({
'apps': get_k8s_applications(tag)
})
@base.route('/api/bookmarks')
def bookmarks():
return jsonify(get_bookmarks())
@base.route('/links.json')
@base.route('/<tag>/links.json')
def bookmarks(tag=None):
return jsonify({
'bookmarks': get_bookmarks(tag)
})

View File

@@ -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');
});

View File

@@ -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();
}

View File

@@ -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);
};
};

View File

@@ -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="paper" class="theme-button theme-paper">Paper</button>
<button data-theme="cloud" class="theme-button theme-cloud">Cloud</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>{{ now | format_datetime }}</h2>
<h2 id="header_date"></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 %}
<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>
{{#apps}}
<div class="apps_item">
<div class="apps_icon">
<span class="iconify icon" data-icon="mdi-{{icon}}"></span>
</div>
<div class="apps_text">
<a href="http://{{url}}" {{#if target}}target="{{target}}"{{/if}} >{{name}}</a>
{{#if show_url}}<span id="app-address">{{url}}</span>{{/if}}
</div>
</div>
<div class="apps_text">
<a href="{{ app.url }}">{{ app.name }}</a>
{% if app.show_url %}
<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 %}
<div id="links_item">
<h4>{{ group }}</h4>
{% for link in bookmarks[group] %}
<a href="{{ link.url }}" class="theme_color-border theme_text-select">{{ link.name }}</a>
{% endfor %}
</div>
{% endfor %}
{{#bookmarks}}
<div id="links_item">
<h4>{{category}}</h4>
{{#links}}
<a href="{{url}}" target="{{target}}" class="theme_color-border theme_text-select">{{name}}</a>
{{/links}}
</div>
{{/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/search.js" type="text/javascript"></script>
<script src="/static/js/data.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>