mirror of
https://github.com/tiyn/beaker-blog.git
synced 2025-04-02 15:37:46 +02:00
adding config.py and switchable css
This commit is contained in:
parent
a5a20398c0
commit
c223a21bdd
@ -18,12 +18,13 @@ However I dislike using a script for adding entries and just want to add entries
|
||||
- [x] Links to scrolling blog page
|
||||
- [x] RSS feed
|
||||
- [ ] Better navigation
|
||||
- [ ] Header
|
||||
- [x] Header
|
||||
- [ ] Footer
|
||||
- [ ] Switchable CSS
|
||||
- [ ] CSS dark-theme
|
||||
- [ ] CSS light-theme
|
||||
- [x] Switchable CSS
|
||||
- [x] CSS dark-theme
|
||||
- [x] CSS light-theme
|
||||
- [x] Docker installation
|
||||
- [ ] include config.py
|
||||
|
||||
## Usage
|
||||
|
||||
|
13
src/app.py
13
src/app.py
@ -1,6 +1,7 @@
|
||||
from flask import Flask, flash, make_response, render_template, request, redirect, abort
|
||||
|
||||
import content as con_gen
|
||||
import config
|
||||
|
||||
|
||||
app = Flask(__name__)
|
||||
@ -8,27 +9,28 @@ app = Flask(__name__)
|
||||
|
||||
@app.errorhandler(404)
|
||||
def page_not_found(e):
|
||||
return render_template('error.html', title='Error 404', errorcode='404'), 404
|
||||
return render_template('error.html', title=config.TITLE, errorcode='404', style=config.STYLE), 404
|
||||
|
||||
|
||||
@app.route('/')
|
||||
@app.route('/index.html')
|
||||
def index():
|
||||
content = con_gen.gen_index_string()
|
||||
return render_template('index.html', title='Blog', content_string=content)
|
||||
return render_template('index.html', title=config.TITLE, content_string=content, style=config.STYLE)
|
||||
|
||||
|
||||
@app.route('/archive')
|
||||
@app.route('/archive.html')
|
||||
def blog_archive():
|
||||
content = con_gen.gen_arch_string()
|
||||
return render_template('archive.html', title='Blog Archive', content_string=content)
|
||||
return render_template('archive.html', title=config.TITLE, content_string=content, style=config.STYLE)
|
||||
|
||||
|
||||
@app.route('/entry/<path>')
|
||||
def entry(path):
|
||||
content = con_gen.gen_stand_string(path)
|
||||
if content != '':
|
||||
return render_template('standalone.html', title='Blog Entry', content_string=content)
|
||||
return render_template('standalone.html', title=config.TITLE, content_string=content, style=config.STYLE)
|
||||
abort(404)
|
||||
|
||||
|
||||
@ -36,7 +38,8 @@ def entry(path):
|
||||
@app.route('/rss.xml')
|
||||
def feed():
|
||||
content = con_gen.get_rss_string()
|
||||
rss_xml = render_template('rss.xml', content_string=content)
|
||||
rss_xml = render_template('rss.xml', content_string=content, title=config.TITLE,
|
||||
description=config.DESCRIPTION, website=config.WEBSITE)
|
||||
response = make_response(rss_xml)
|
||||
response.headers['Content-Type'] = 'application/rss+xml'
|
||||
return response
|
||||
|
11
src/config.py
Normal file
11
src/config.py
Normal file
@ -0,0 +1,11 @@
|
||||
# Name/title of your blog
|
||||
TITLE = 'Tiyny-Blog'
|
||||
|
||||
# Description for RSS of your blog
|
||||
DESCRIPTION = 'This is your personal Tiyny-Blog.'
|
||||
|
||||
# URL for your website: e.g. https://domain.tld
|
||||
WEBSITE = 'localhost:5000'
|
||||
|
||||
# Theme for the blog: dark, light
|
||||
STYLE = 'dark'
|
@ -5,7 +5,7 @@ import os
|
||||
from os import path
|
||||
import pathlib
|
||||
|
||||
WEBSITE = 'localhost:5000'
|
||||
import config
|
||||
|
||||
ENTRY_DIR = 'templates/entry'
|
||||
|
||||
@ -36,7 +36,7 @@ def gen_arch_string():
|
||||
filename = filename.split('.', 1)[0]
|
||||
content_string += '<li>'
|
||||
content_string += curr_date + ' - '
|
||||
content_string += title + ' ['
|
||||
content_string += title + ' ['
|
||||
content_string += '<a href="' + '/index.html#' + \
|
||||
filename + '">' + 'link' + '</a> - '
|
||||
content_string += '<a href="' + '/entry/' + \
|
||||
@ -65,7 +65,8 @@ def gen_index_string():
|
||||
content_string += '<div class=\'entry\'>\n'
|
||||
content_string += '<h2 id=\'' + filename + '\'>' + title + '</h2>\n'
|
||||
content_string += '[<a href="' + '/entry/' + \
|
||||
pathlib.PurePath(file).name + '">' + 'standalone' + '</a>]<br>\n'
|
||||
pathlib.PurePath(file).name + '">' + \
|
||||
'standalone' + '</a>]<br>\n'
|
||||
if file.endswith('.html'):
|
||||
for line in text:
|
||||
content_string += line
|
||||
@ -135,7 +136,8 @@ def get_rss_string():
|
||||
filename = filename.split('.', 1)[0]
|
||||
content_string += '<item>\n'
|
||||
content_string += '<title>' + title + '</title>\n'
|
||||
content_string += '<guid>' + '/index.html#' + filename + '</guid>\n'
|
||||
content_string += '<guid>' + config.WEBSITE + \
|
||||
'/index.html#' + filename + '</guid>\n'
|
||||
content_string += '<pubDate>' + \
|
||||
datetime.fromtimestamp(os.path.getctime(file)).strftime(
|
||||
'%Y-%m-%d') + '</pubDate>\n'
|
||||
|
@ -1,6 +1,8 @@
|
||||
@import 'style.css';
|
||||
|
||||
:root {
|
||||
--bg0: rgb(29,32,33);
|
||||
--color0: rgb(0,0,0);
|
||||
--color0: rgb(220,120,0);
|
||||
--error: rgb(255,0,0);
|
||||
--footerbg0: rgb(29,32,33);
|
||||
--link0: rgb(220, 120, 0);
|
||||
@ -10,36 +12,24 @@
|
||||
--menubg0: rgb(29,32,33);
|
||||
--text0: rgb(235,219,178);
|
||||
--text1: rgb(220, 120, 0);
|
||||
--transtime: 0.7s;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link0);
|
||||
text-decoration: none;
|
||||
transition: var(--transtime);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg0);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
footer {
|
||||
background: var(--footerbg0);
|
||||
color: var(--text0);
|
||||
}
|
||||
|
||||
span {
|
||||
@ -48,11 +38,6 @@ span {
|
||||
|
||||
.container {
|
||||
color: var(--text0);
|
||||
min-height: 100%;
|
||||
padding-bottom: 50px;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
padding-top: 5%;
|
||||
}
|
||||
|
||||
.container h1,
|
||||
@ -60,17 +45,39 @@ span {
|
||||
color: var(--text1);
|
||||
}
|
||||
|
||||
.container .flash {
|
||||
background-color: var(--error);
|
||||
}
|
||||
|
||||
.hide-menu:hover,
|
||||
.main-menu a:hover,
|
||||
.show-menu:hover {
|
||||
color: var(--menulink1);
|
||||
}
|
||||
|
||||
.main-menu a {
|
||||
color: var(--menulink0);
|
||||
}
|
||||
|
||||
.main-menu-dropdown {
|
||||
background: var(--menubg0);
|
||||
color: var(--menulink0);
|
||||
}
|
||||
|
||||
@media screen and (max-width:800px) {
|
||||
|
||||
.main-menu {
|
||||
background: var(--menubg0);
|
||||
}
|
||||
}
|
||||
|
||||
.entry {
|
||||
background: var(--blogbg0);
|
||||
border-left: 10px solid var(--blogclr0);
|
||||
border-radius: 0 10px 30px 0;
|
||||
background: var(--bg0);
|
||||
border-left: 10px solid var(--color0);
|
||||
color: var(--text0);
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.entry h1,
|
||||
.entry h2 {
|
||||
color: var(--text1);
|
||||
margin: 5px auto 2px auto;
|
||||
}
|
83
src/static/css/light.css
Normal file
83
src/static/css/light.css
Normal file
@ -0,0 +1,83 @@
|
||||
@import 'style.css';
|
||||
|
||||
:root {
|
||||
--bg0: rgb(255,255,255);
|
||||
--color0: rgb(0,0,120);
|
||||
--error: rgb(255,0,0);
|
||||
--footerbg0: rgb(192,192,192);
|
||||
--link0: rgb(0,0,120);
|
||||
--link1: rgb(255,255,255);
|
||||
--menulink0: rgb(0,0,120);
|
||||
--menulink1: rgb(255,255,255);
|
||||
--menubg0: rgb(192,192,192);
|
||||
--text0: rgb(0,0,0);
|
||||
--text1: rgb(0,0,120);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link0);
|
||||
transition: var(--transtime);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link1);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg0);
|
||||
}
|
||||
|
||||
footer {
|
||||
background: var(--footerbg0);
|
||||
color: var(--text0);
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--text1);
|
||||
}
|
||||
|
||||
.container {
|
||||
color: var(--text0);
|
||||
}
|
||||
|
||||
.container h1,
|
||||
.container h2 {
|
||||
color: var(--text1);
|
||||
}
|
||||
|
||||
.container .flash {
|
||||
background-color: var(--error);
|
||||
}
|
||||
|
||||
.hide-menu:hover,
|
||||
.main-menu a:hover,
|
||||
.show-menu:hover {
|
||||
color: var(--menulink1);
|
||||
}
|
||||
|
||||
.main-menu a {
|
||||
color: var(--menulink0);
|
||||
}
|
||||
|
||||
.main-menu-dropdown {
|
||||
background: var(--menubg0);
|
||||
color: var(--menulink0);
|
||||
}
|
||||
|
||||
@media screen and (max-width:800px) {
|
||||
|
||||
.main-menu {
|
||||
background: var(--menubg0);
|
||||
}
|
||||
}
|
||||
|
||||
.entry {
|
||||
background: var(--bg0);
|
||||
border-left: 10px solid var(--color0);
|
||||
color: var(--text0);
|
||||
}
|
||||
|
||||
.entry h1,
|
||||
.entry h2 {
|
||||
color: var(--text1);
|
||||
}
|
@ -1 +1,169 @@
|
||||
@import "blog.css";
|
||||
:root {
|
||||
--error: rgb(255,0,0);
|
||||
--transtime: 0.7s;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
transition: var(--transtime);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 100px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
footer .center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100%;
|
||||
padding-bottom: 50px;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
padding-top: 5%;
|
||||
}
|
||||
|
||||
.container .flash {
|
||||
padding: 10px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.hide-menu,
|
||||
.show-menu {
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-size: 30px;
|
||||
transition: var(--transtime);
|
||||
}
|
||||
|
||||
.important {
|
||||
font-size: xx-large;
|
||||
padding-left: 25vw;
|
||||
padding-right: 25vw;
|
||||
padding-top: 30vh;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.important span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 80px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.main-menu-dropdown span {
|
||||
float: left;
|
||||
font-family: monospace;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
line-height: 100px;
|
||||
padding: 0 10px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: 0.7s;
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
float: right;
|
||||
font-family: monospace;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.main-menu a {
|
||||
padding: 0 10px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: 0.7s;
|
||||
}
|
||||
|
||||
.main-menu-dropdown {
|
||||
height: 100px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.show-menu {
|
||||
float: right;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
#main-menu-check {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
z-index: -1111;
|
||||
}
|
||||
|
||||
@media screen and (max-width:800px) {
|
||||
.hide-menu {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.hide-menu,
|
||||
.show-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
height: 100vh;
|
||||
line-height: normal;
|
||||
padding: 80px 0;
|
||||
position: fixed;
|
||||
right: -100%;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
transition: var(--transtime);
|
||||
width: 100%;
|
||||
}
|
||||
.main-menu a {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#main-menu-check:checked ~ .main-menu {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.entry {
|
||||
border-radius: 0 10px 30px 0;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.entry h1,
|
||||
.entry h2 {
|
||||
margin: 5px auto 2px auto;
|
||||
}
|
||||
|
||||
.entry ul {
|
||||
padding-left: 20;
|
||||
}
|
||||
|
||||
|
0
src/static/images/logo.png
Normal file
0
src/static/images/logo.png
Normal file
@ -2,7 +2,7 @@
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="blogarchive">
|
||||
<h1>Blog-Archive</h1><br>
|
||||
<h1>Archive</h1><br>
|
||||
{% autoescape off %}
|
||||
{{ content_string }}
|
||||
{% endautoescape %}
|
||||
|
@ -3,7 +3,7 @@
|
||||
<div class="container">
|
||||
<div class="important">
|
||||
Error<br>
|
||||
<span>{{ errorcode }}</span>
|
||||
<span>{{ errorcode }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
@ -2,11 +2,7 @@
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="blog">
|
||||
<h1>Blog-Index</h1><br>
|
||||
<p>
|
||||
<a href="archive">Archive</a><br>
|
||||
<a href="feed.xml">RSS</a>
|
||||
</p>
|
||||
<h1>Index</h1><br>
|
||||
{% autoescape off %}
|
||||
{{ content_string }}
|
||||
{% endautoescape %}
|
||||
|
@ -2,10 +2,10 @@
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
|
||||
<channel>
|
||||
<title>Blog Title</title>
|
||||
<description>A short description of the blog.</description>
|
||||
<title>{{ title }}</title>
|
||||
<description>{{ description }}</description>
|
||||
<language>en-us</language>
|
||||
<link>localhost:5000/feed.xml</link>
|
||||
<link>{{ website }}/feed.xml</link>
|
||||
<atom:link href="/feed.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
{% autoescape off %}
|
||||
|
@ -1,11 +1,24 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ title }}</title>
|
||||
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" type="text/css">
|
||||
<link href="{{ url_for('static', filename='css/' + style + '.css') }}" rel="stylesheet" type="text/css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width", initial-scale=1.0>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Menu -->
|
||||
<div class="main-menu-dropdown">
|
||||
<!-- <img class="logo" src="/static/images/logo.png"> -->
|
||||
<span>{{ title }}</span>
|
||||
<input type="checkbox" id="main-menu-check">
|
||||
<label for="main-menu-check" class="show-menu">☰</label>
|
||||
<div class="main-menu">
|
||||
<a href="/">Blog</a>
|
||||
<a href="/archive">Archive</a>
|
||||
<label for="main-menu-check" class="hide-menu">X</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<!-- Content -->
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user