adding config.py and switchable css

dependabot/pip/src/flask-2.3.2
TiynGER 5 years ago
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

@ -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

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

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

@ -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">&#9776;</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…
Cancel
Save