update automatically, fixed some bugs

.gitignore

@@ -1,3 +1,4 @@
 data
 data.db
 indexdir
+*.bak

Dockerfile

@@ -6,11 +6,11 @@ COPY src /blog
 
 WORKDIR /blog
 
-VOLUME /blog/data
-
 RUN pip3 install -r requirements.txt
 
-VOLUME /blog/templates/entry
+VOLUME /blog/data
+
+VOLUME /blog/static/graphics
 
 EXPOSE 5000
 

rebuild.sh

@@ -4,7 +4,8 @@ docker rm container-critique
 docker build . -t tiyn/container-critique
 docker run --name container-critique \
     --restart unless-stopped \
-    -p "5000:5000" \
+    -p "5001:5000" \
     -e FLASK_ENV=development \
-    -v data:/blog/data
+    -v data:/blog/data \
+    -v graphics:/blog/static/graphics \
     -d tiyn/container-critique

src/forms.py

@@ -1,8 +1,8 @@
 from datetime import date
 from flask_ckeditor import CKEditorField
 from flask_wtf import FlaskForm
-from wtforms import StringField, PasswordField, SubmitField, TextField
+from wtforms import StringField, PasswordField, SubmitField, StringField
-from wtforms.fields.html5 import IntegerField
+from wtforms.fields import IntegerField
 from wtforms.validators import DataRequired, EqualTo, InputRequired, \
     NumberRange, ValidationError, Length
 
@@ -35,7 +35,7 @@ class SearchForm(FlaskForm):
     """
     A Class for the Form that is used while searching.
     """
-    query_str = TextField(
+    query_str = StringField(
         "Query", [DataRequired("Please enter the search term")])
     submit = SubmitField("Search")
 

src/requirements.txt

@@ -1,7 +1,7 @@
-Flask==2.1.3
+Flask
-Flask_CKEditor==0.4.6
+Flask_CKEditor
-Flask_Login==0.6.2
+Flask_Login
-Flask_WTF==0.14.3
+Flask_WTF
-Werkzeug==2.0.0
+Werkzeug
-Whoosh==2.7.4
+Whoosh
-WTForms==2.2.1
+WTForms

src/static/css/dark.css

@@ -2,14 +2,71 @@
 
 :root {
     --bg0: rgb(29,32,33);
-    --bg1: rgb(50,55,60);
     --color0: rgb(220,120,0);
-    --footerbg0: rgb(50,55,60);
+    --error: rgb(255,0,0);
+    --footerbg0: rgb(29,32,33);
     --link0: rgb(220, 120, 0);
     --link1: rgb(255,255,255);
     --menulink0: rgb(220, 120, 0);
     --menulink1: rgb(255,255,255);
-    --menubg0: rgb(50,55,60);
+    --menubg0: rgb(29,32,33);
     --text0: rgb(235,219,178);
     --text1: rgb(220, 120, 0);
 }
+
+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);
+    }
+}

src/static/css/light.css

@@ -2,14 +2,71 @@
 
 :root {
     --bg0: rgb(255,255,255);
-    --bg1: rgb(192,192,192);
     --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);
+    --link1: rgb(0,0,0);
     --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);
+    }
+}

src/static/css/style.css

@@ -3,56 +3,27 @@
     --transtime: 0.7s;
 }
 
-
-
-@font-face{
-    font-family: "LocalMono";
-    src: url("/static/fonts/jetbrainsmono-medium.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: "LocalSans";
-    font-style: normal;
-    font-weight: 400;
-    src: url("/static/fonts/linux_libertine.woff2") format("woff2");
-}
-
 * {
     margin: 0;
     padding: 0;
 }
 
 a {
-    color: var(--link0);
     text-decoration: none;
     transition: var(--transtime);
 }
 
 a:hover {
-    color: var(--link1);
     cursor: pointer;
 }
 
-.main-menu a {
-    color: var(--menulink0);
-    padding: 0 10px;
-    text-decoration: none;
-    text-transform: uppercase;
-    transition: 0.7s;
-}
-
-.main-menu a:hover {
-    color: var(--menulink1);
-}
-
 body {
-    background: var(--bg0);
     margin: 0;
 }
 
 body,
 html {
-    font-family: LocalSans, sans-serif;
+    font-family: sans-serif;
     height: 100%;
     max-width: 100%;
     overflow-x: hidden;
@@ -66,54 +37,11 @@ footer {
     text-align: center;
 }
 
-.container h1,
+footer .center {
-.container h2 {
+    text-align: center;
-    color: var(--text1);
 }
 
-.entry h1,
-.entry h2 {
-    color: var(--text1);
-    margin: 5px auto 2px auto;
-}
-
-li:not(:last-child) {
-    margin-bottom: 5px;
-}
-
-ol {
-    margin: 10px 0;
-    padding-left: 20;
-}
-
-ul {
-    margin: 10px 0;
-    padding-left: 20;
-}
-
-span {
-    color: var(--text1);
-}
-
-.main-menu-dropdown span {
-    float: left;
-    font-family: LocalMono, monospace;
-    font-size: 30px;
-    font-weight: bold;
-    line-height: 100px;
-    padding: 0 10px;
-    text-decoration: none;
-    text-transform: uppercase;
-    transition: 0.7s;
-}
-
-.important span {
-    font-weight: bold;
-}
-
-
 .container {
-    color: var(--text0);
     min-height: 100%;
     padding-bottom: 50px;
     padding-left: 10%;
@@ -122,20 +50,10 @@ span {
 }
 
 .container .flash {
-    background-color: var(--error);
     padding: 10px;
     width: 400px;
 }
 
-.entry {
-    background: var(--bg1);
-    border-left: 10px solid var(--color0);
-    border-radius: 0 10px 30px 0;
-    color: var(--text0);
-    margin-bottom: 20px;
-    padding: 10px;
-}
-
 .hide-menu,
 .show-menu {
     cursor: pointer;
@@ -144,13 +62,6 @@ span {
     transition: var(--transtime);
 }
 
-
-.hide-menu:hover,
-.show-menu:hover {
-    color: var(--menulink1);
-}
-
-
 .important {
     font-size: xx-large;
     padding-left: 25vw;
@@ -159,22 +70,47 @@ span {
     text-align: left;
 }
 
+.important span {
+    font-weight: bold;
+}
+
 .logo {
     height: 80px;
     padding-top: 10px;
 }
 
+
+.main-menu-dropdown img {
+    float: left;
+}
+.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: LocalMono, monospace;
+    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 {
-    background: var(--menubg0);
-    color: var(--menulink0);
     height: 100px;
     padding: 0 20px;
 }
@@ -191,11 +127,6 @@ span {
 }
 
 @media screen and (max-width:800px) {
-    .main-menu a {
-        display: block;
-        padding: 20px;
-    }
-
     .hide-menu {
         position: absolute;
         right: 40px;
@@ -208,7 +139,6 @@ span {
     }
 
     .main-menu {
-        background: var(--menubg0);
         height: 100vh;
         line-height: normal;
         padding: 80px 0;
@@ -219,8 +149,49 @@ span {
         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;
+}
+
+figure {
+    padding:20px;
+}
+
+ul {
+    padding-left:20px;
+}
+
+ol {
+    padding-left:20px;
+}
+
+code {
+    border-radius: 25px;
+    padding-left: 20px;
+    padding-right: 20px;
+    page-break-inside: avoid;
+    font-family: monospace;
+    white-space: pre;
+    display: inline-block
+}

src/templates/standalone.html

@@ -13,14 +13,14 @@
                     {{ entry.user.name }}
                 </a>
                 on
-                <a href="{{ url_for('index', _anchor=entry.id) }}">
+                <a href="{{ url_for('index', _anchor='{0:d}'.format(entry.id)) }}">
                     {{ entry.date }}
                 </a>
             </small><br>
             {% if current_user.id == entry.user.id -%}
             <small>
                 [
-                <a href="{{ url_for('delete_entry', ident=entry.id) }}">
+                <a href="{{ url_for('delete_entry', ident='{0:d}'.format(entry.id)) }}">
                     delete entry
                 </a>
                 ]

src/templates/template.html

@@ -10,12 +10,16 @@
     <title>{{ title }}</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width" initial-scale=1.0>
+    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='graphics/logo.png') }}">
     <link href="{{ url_for('static', filename='css/' + style + '.css') }}" rel="stylesheet" type="text/css">
 </head>
 <body>
     <div class="main-menu-dropdown">
         <!-- <img class="logo" src="/static/images/logo.png"> -->
-        <span>{{ title }}</span>
+        <a href="{{ url_for('index') }}">
+          <img class="logo" src="{{ url_for('static', filename='graphics/logo.png') }}">
+          <span>{{ title }}</span>
+        </a>
         <input type="checkbox" id="main-menu-check">
         <label for="main-menu-check" class="show-menu">&#9776;</label>
         <div class="main-menu">