Enable light/dark switch without JS
This commit is contained in:
parent
c2bf966dac
commit
812c95f341
4 changed files with 28 additions and 10 deletions
8
CHANGELOG.md
Normal file
8
CHANGELOG.md
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
# What’s New
|
||||||
|
|
||||||
|
## 0.2
|
||||||
|
|
||||||
|
+ Some code refactoring.
|
||||||
|
+ Light and dark theme.
|
||||||
|
+ Move database into `database/` folder.
|
||||||
|
+ Style improvements.
|
||||||
|
|
@ -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
22
app.py
|
|
@ -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 = {
|
||||||
|
|
|
||||||
|
|
@ -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">© 2020 Sakuragasaki46.</div>
|
<div class="footer-copyright">© 2020–2021 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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue