Enable light/dark switch without JS

This commit is contained in:
Yusur 2021-02-23 23:54:29 +01:00
parent c2bf966dac
commit 812c95f341
4 changed files with 28 additions and 10 deletions

8
CHANGELOG.md Normal file
View file

@ -0,0 +1,8 @@
# Whats New
## 0.2
+ Some code refactoring.
+ Light and dark theme.
+ Move database into `database/` folder.
+ Style improvements.

View file

@ -13,7 +13,7 @@ suitable as a community or team knowledge base.
+ Revision history + Revision history
+ Stored in SQLite databases + Stored in SQLite databases
+ Material Icons + Material Icons
+ Light/dark theme (requires JS as of now) + Light/dark theme
+ Works fine even with JavaScript disabled. + Works fine even with JavaScript disabled.
## Requirements ## Requirements

22
app.py
View file

@ -11,7 +11,9 @@ Application is kept compact, with all its core in a single file.
Extensions are supported, kept in extensions/ folder. Extensions are supported, kept in extensions/ folder.
''' '''
from flask import Flask, abort, flash, g, jsonify, redirect, request, render_template, send_from_directory from flask import (
Flask, abort, flash, g, jsonify, make_response, redirect, request,
render_template, send_from_directory)
from werkzeug.routing import BaseConverter from werkzeug.routing import BaseConverter
from peewee import * from peewee import *
import datetime, re, markdown, uuid, json, importlib, sys, hashlib, html, os, csv, random import datetime, re, markdown, uuid, json, importlib, sys, hashlib, html, os, csv, random
@ -27,7 +29,7 @@ try:
except ImportError: except ImportError:
slugify = None slugify = None
__version__ = '0.1-dev' __version__ = '0.2'
#### CONSTANTS #### #### CONSTANTS ####
@ -370,9 +372,10 @@ def is_url_available(url):
return url not in forbidden_urls and not Page.select().where(Page.url == url).exists() return url not in forbidden_urls and not Page.select().where(Page.url == url).exists()
forbidden_urls = [ forbidden_urls = [
'create', 'edit', 'p', 'ajax', 'history', 'manage', 'static', 'media', 'accounts', 'create', 'edit', 'p', 'ajax', 'history', 'manage', 'static', 'media',
'tags', 'init-config', 'upload', 'upload-info', 'about', 'stats', 'terms', 'privacy', 'accounts', 'tags', 'init-config', 'upload', 'upload-info', 'about',
'easter', 'search', 'help', 'circles' 'stats', 'terms', 'privacy', 'easter', 'search', 'help', 'circles',
'protect',
] ]
app = Flask(__name__) app = Flask(__name__)
@ -396,7 +399,7 @@ def _before_request():
@app.context_processor @app.context_processor
def _inject_variables(): def _inject_variables():
return { return {
'T': partial(get_string, g.lang) 'T': partial(get_string, g.lang),
} }
@app.route('/') @app.route('/')
@ -626,6 +629,13 @@ def stats():
revision_count=PageRevision.select().count() revision_count=PageRevision.select().count()
) )
@app.route('/accounts/theme-switch')
def theme_switch():
cook = request.cookies.get('dark')
resp = make_response(redirect(request.args.get('next', '/')))
resp.set_cookie('dark', '0' if cook == '1' else '1', max_age=31556952, path='/')
return resp
## easter egg (lol) ## ## easter egg (lol) ##
MNeaster = { MNeaster = {

View file

@ -9,7 +9,7 @@
<!-- material icons --> <!-- material icons -->
<link rel="stylesheet" href="https://cdn.sakuragasaki46.local/common/material-icons.css"> <link rel="stylesheet" href="https://cdn.sakuragasaki46.local/common/material-icons.css">
</head> </head>
<body> <body{% if request.cookies.get('dark') == '1' %} class="dark"{% endif %}>
<div id="__top"></div> <div id="__top"></div>
<div class="content"> <div class="content">
{% for msg in get_flashed_messages() %} {% for msg in get_flashed_messages() %}
@ -18,14 +18,14 @@
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
<ul class="top-menu"> <ul class="top-menu">
<li class="dark-theme-toggle-anchor"><a href="javascript:toggleDarkTheme(true)" class="dark-theme-toggle-on" title="Dark theme"><span class="material-icons">brightness_3</span></a><a href="javascript:toggleDarkTheme(false)" class="dark-theme-toggle-off" title="Light theme"><span class="material-icons">brightness_5</span></a><script>function toggleDarkTheme(a){document.cookie="dark="+(+a)+";max-age=31556952;path=/";document.body.classList.toggle("dark",a)}if(document.cookie.match(/\bdark=1\b/)){document.body.classList.add("dark")}</script></li> <li class="dark-theme-toggle-anchor"><a href="{{ url_for('theme_switch', next=request.path) }}" onclick="toggleDarkTheme(true);return false" class="dark-theme-toggle-on" title="Dark theme"><span class="material-icons">brightness_3</span></a><a href="{{ url_for('theme_switch', next=request.path) }}" onclick="toggleDarkTheme(false);return false" class="dark-theme-toggle-off" title="Light theme"><span class="material-icons">brightness_5</span></a><script>function toggleDarkTheme(a){document.cookie="dark="+(+a)+";max-age=31556952;path=/;SameSite=Strict";document.body.classList.toggle("dark",a)}</script></li>
<li><a href="/" title="{{ T('homepage') }}"><span class="material-icons">home</span></a></li> <li><a href="/" title="{{ T('homepage') }}"><span class="material-icons">home</span></a></li>
<li><a href="/search/" title="{{ T('search') }}"><span class="material-icons">search</span></a></li> <li><a href="/search/" title="{{ T('search') }}"><span class="material-icons">search</span></a></li>
<li><a href="/p/random/" title="{{ T('random-page') }}"><span class="material-icons">shuffle</span></a></li> <li><a href="/p/random/" title="{{ T('random-page') }}"><span class="material-icons">shuffle</span></a></li>
<li><a href="/create/" title="{{ T('new-note') }}"><span class="material-icons">create</span></a></li> <li><a href="/create/" title="{{ T('new-note') }}"><span class="material-icons">create</span></a></li>
</ul> </ul>
<div class="footer"> <div class="footer">
<div class="footer-copyright">&copy; 2020 Sakuragasaki46.</div> <div class="footer-copyright">&copy; 20202021 Sakuragasaki46.</div>
<div class="footer-actions" id="page-actions">{% block actions %}{% endblock %}</div> <div class="footer-actions" id="page-actions">{% block actions %}{% endblock %}</div>
</div> </div>
<div class="backontop"><a href="#__top" title="Back on top"><span class="material-icons">arrow_upward</span></a></div> <div class="backontop"><a href="#__top" title="Back on top"><span class="material-icons">arrow_upward</span></a></div>