commit ad70a8f6d8d7339f6c6db91f38b81b8e677cb7ed
parent 7ff09c86b5206bd0e0495621829f7002c4686549
Author: Shiimoe <samuelfrost@tuta.io>
Date: Mon, 27 Sep 2021 21:28:28 +0100
Added a blog system that converts from markdown to an html page
Diffstat:
14 files changed, 246 insertions(+), 6 deletions(-)
diff --git a/blog/under.md b/blog/under.md
@@ -0,0 +1,15 @@
+---
+title: Down Under
+published: 2021-09-27 17:45:00
+---
+
+> "A wise man shits, but he does not fart"
+> <cite>---Confuscious</cite>
+
+## Cats
+
+Cats are actually aliens sent from a far away planet to watch over and protect us, few know this. How do you think the pyramids were built? Slaves? *pssht* The Egyptians worshiped the cats and as a reward they constructed the pyramids for them. How did the British Empire become so vast, and why is it in such disarray now? Well, Queen Victoria was a known cat lover, whereas Queen Elizabeth II has umpteen corgies, I'll let you figure that one out.
+
+
+
+So true.+
\ No newline at end of file
diff --git a/blog/wa-state.md b/blog/wa-state.md
@@ -0,0 +1,6 @@
+---
+title: Wa State (佤邦)
+published: 2021-09-27 18:45:00
+---
+
+*There is nothing here yet*+
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
@@ -81,6 +81,27 @@ pre code {
display: block;
}
+blockquote {
+ margin: 0.5em 0;
+ border-left: 5pt solid #0002;
+ padding: 0.4em 1.6em;
+ color: #000a
+}
+
+blockquote cite {
+ display: block;
+ margin-left: 1em;
+ color: #0008
+}
+
+blockquote > *:first-child {
+ margin-top: 0;
+}
+
+blockquote > *:last-child {
+ margin-bottom: 0;
+}
+
#content > a:first-child {
text-decoration: none;
}
diff --git a/requirements.txt b/requirements.txt
@@ -1,5 +1,7 @@
Flask
Pygments
markdown
+markdown-full-yaml-metadata
+markdown-captions
bleach
pymdown-extensions
diff --git a/shiimoe.py b/shiimoe.py
@@ -13,13 +13,17 @@ import os
import json
import re
+BLOG_PATH = os.path.realpath('./blog')
STATIC_PATH = os.path.realpath('./static')
PUBLIC_PATH = os.path.realpath('./public')
COMMENT_FILE = os.path.realpath('./comments.json')
DATE_FORMAT = "%Y-%m-%d %H:%M"
app = Flask(__name__, static_folder=PUBLIC_PATH)
md = markdown.Markdown(
- extensions=['fenced_code', 'codehilite', 'pymdownx.emoji'],
+ extensions=[
+ 'fenced_code', 'codehilite',
+ 'pymdownx.emoji', 'smarty', 'attr_list',
+ 'full_yaml_metadata', 'markdown_captions'],
extension_configs={
'pymdownx.emoji': {
'emoji_index': pymdownx.emoji.gemoji,
@@ -93,6 +97,49 @@ def render_guestbook(**kw):
def guestbook():
return render_guestbook()
+@app.route('/blog')
+@app.route('/blog/index.html')
+def blogindex():
+ posts = []
+ for file in os.listdir(BLOG_PATH):
+ slug = file[:-3]
+ meta = None
+ with open(f"{BLOG_PATH}/{file}", 'r') as f:
+ md.convert(f.read())
+ meta = md.Meta
+ posts.append({
+ 'slug': slug,
+ 'title': meta['title'],
+ 'published': meta['published'],
+ 'date': datetime.strftime(meta['published'], '%Y-%m-%d'),
+ 'datetime': meta['published'].isoformat()
+ })
+ print(posts)
+ posts.sort(key = lambda post: post['published'], reverse=True)
+ return render_template("blogindex.html", posts = posts)
+
+@app.route('/blog/<slug>')
+@app.route('/blog/<slug>.html')
+def blogpost(slug):
+ keywords = {
+ 'slug': slug,
+ 'title': None
+ }
+ for post in os.listdir(BLOG_PATH):
+ if post == slug + ".md":
+ with open(f"{BLOG_PATH}/{post}", 'r') as file:
+ content = file.read()
+ keywords["content"] = md.convert(content)
+ keywords["title"] = md.Meta['title']
+ break
+
+ if 'content' not in keywords:
+ return send_static_page('./', '404.html'), 404
+
+
+ return render_template("blogpost.html", **keywords)
+
+
LINK_MATCH = re.compile("https?://")
@app.route('/postcomment', methods=['POST'])
diff --git a/static/404.html b/static/404.html
@@ -19,6 +19,7 @@
<div class="titleButton"><a href="/school">Skole</a></div>
<div class="titleButton"><a href="/norsk">Norsk</a></div>
<div class="titleButton"><a href="/books">Bøker</a></div>
+ <div class="titleButton"><a href="/blog">Blog</a></div>
</div>
<h1>404, Not Found!</h1>
diff --git a/static/books.html b/static/books.html
@@ -19,6 +19,7 @@
<div class="titleButton"><a href="/school">Skole</a></div>
<div class="titleButton"><a href="/norsk">Norsk</a></div>
<div class="titleButton"><a href="/">Hjem</a></div>
+ <div class="titleButton"><a href="/blog">Blog</a></div>
</div>
<p><em>The Trial?</em> more like <em>The Smile</em>, because it makes me happy
diff --git a/static/index.html b/static/index.html
@@ -19,6 +19,7 @@
<div class="titleButton"><a href="/school">Skole</a></div>
<div class="titleButton"><a href="/norsk">Norsk</a></div>
<div class="titleButton"><a href="/books">Bøker</a></div>
+ <div class="titleButton"><a href="/blog">Blog</a></div>
</div>
<noscript><p>Welcome, Based JavaScript Hater.</p></noscript>
diff --git a/static/music.html b/static/music.html
@@ -18,6 +18,7 @@
<div class="titleButton"><a href="/school">Skole</a></div>
<div class="titleButton"><a href="/norsk">Norsk</a></div>
<div class="titleButton"><a href="/books">Bøker</a></div>
+ <div class="titleButton"><a href="/blog">Blog</a></div>
</div>
<div class="guitarAudio">
diff --git a/static/norsk.html b/static/norsk.html
@@ -19,6 +19,7 @@
<div class="titleButton"><a href="/school">Skole</a></div>
<div class="titleButton"><a href="/">Hjem</a></div>
<div class="titleButton"><a href="/books">Bøker</a></div>
+ <div class="titleButton"><a href="/blog">Blog</a></div>
</div>
<p>Hei, kjæresten min er Norsk, han prøver å lære meg Norsk, men det går ikke veldig bra.</p>
diff --git a/static/school.html b/static/school.html
@@ -19,6 +19,7 @@
<div class="titleButton"><a href="/">Hjem</a></div>
<div class="titleButton"><a href="/norsk">Norsk</a></div>
<div class="titleButton"><a href="/books">Bøker</a></div>
+ <div class="titleButton"><a href="/blog">Blog</a></div>
</div>
<h3 style="text-align: center;">Maths</h3>
diff --git a/templates/blogindex.html b/templates/blogindex.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel='stylesheet' type='text/css' href="style.css"/>
+ <link rel='icon' type='image/png' href="/mascots/8-square.png">
+ <link rel="preload" as="image" href="/background-300x300.png">
+ <title>Blog Index</title>
+ <style>
+ .blog-posts {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+ .blog-listing a {
+ display: flex;
+ justify-content: space-between;
+ padding: 0.7em 1em;
+ margin: 0.3em 0;
+ border-radius: 5pt;
+ transition: background-color .05s ease;
+ text-decoration: none;
+ }
+ .blog-listing a:hover {
+ background-color: #679dd727;
+ }
+ .blog-listing .title {
+ text-decoration: underline;
+ }
+ .blog-listing .published {
+ opacity: 0.4;
+ }
+ </style>
+</head>
+<body>
+ <div id="content">
+
+ <a href="/"><h1>Blog Posts!!</h1></a>
+
+ <div class="titleBar">
+ <div class="titleButton"><a href="/music">Musik</a></div>
+ <div class="titleButton"><a href="/school">Skole</a></div>
+ <div class="titleButton"><a href="/norsk">Norsk</a></div>
+ <div class="titleButton"><a href="/books">Bøker</a></div>
+ <div class="titleButton"><a href="/blog">Blog</a></div>
+ </div>
+
+ <ul class="blog-posts">
+ {% for post in posts %}
+ <li class="blog-listing">
+ <a href="/blog/{{ post['slug'] }}">
+ <span class="title">{{ post['title'] }}</span>
+ <span class="published">
+ (<time datetime="{{ post['datetime'] }}">{{ post['date'] }}</time>)
+ </span>
+ </a>
+ </li>
+ {% endfor %}
+ </ul>
+
+ </div>
+ <noscript><style>#mascot { opacity: 0.85; }</style></noscript>
+ <img src="/mascots/8.png" id="mascot"></img>
+ <script src="/colours.js"></script>
+ <script src="/image.js"></script>
+ <script>randomMascot(NOVELTY);</script>
+
+</body>
+</html>+
\ No newline at end of file
diff --git a/templates/blogpost.html b/templates/blogpost.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel='stylesheet' type='text/css' href="/style.css"/>
+ <link rel='icon' type='image/png' href="/mascots/8-square.png">
+ <link rel="preload" as="image" href="/background-300x300.png">
+ <title>{{ title }}</title>
+ <style>
+ .blog-title {
+ text-align: left;
+ font-size: 3em;
+ text-shadow: none;
+ font-weight: 300;
+ }
+ article figure {
+ display: flex;
+ margin-left: 0;
+ margin-right: 0;
+ padding: 0;
+ justify-content: center;
+ align-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+ article figure figcaption {
+ font-style: italic;
+ font-size: small;
+ margin-top: 1em;
+ }
+ article img {
+ max-width: 100%;
+ max-height: 30em;
+ border-radius: 7pt;
+ border: 1pt solid #fff8;
+ box-shadow: 0 4px 20px -7px #0006;
+ }
+ </style>
+</head>
+<body>
+ <div id="content">
+
+ <a href="/"><h1>Shimo!!</h1></a>
+
+ <div class="titleBar">
+ <div class="titleButton"><a href="/music">Musik</a></div>
+ <div class="titleButton"><a href="/school">Skole</a></div>
+ <div class="titleButton"><a href="/norsk">Norsk</a></div>
+ <div class="titleButton"><a href="/books">Bøker</a></div>
+ <div class="titleButton"><a href="/blog">Blog</a></div>
+ </div>
+
+ <h1 class="blog-title">{{ title }}</h1>
+ <article>{{ content | safe }}</article>
+
+ </div>
+
+ <noscript><style>#mascot { opacity: 0.85; }</style></noscript>
+ <img src="/mascots/8.png" id="mascot"></img>
+ <script src="/colours.js"></script>
+ <script src="/image.js"></script>
+ <script>randomMascot(NOVELTY);</script>
+
+</body>
+</html>+
\ No newline at end of file
diff --git a/templates/guestbook.html b/templates/guestbook.html
@@ -109,6 +109,7 @@
<div class="titleButton"><a href="/school">Skole</a></div>
<div class="titleButton"><a href="/norsk">Norsk</a></div>
<div class="titleButton"><a href="/books">Bøker</a></div>
+ <div class="titleButton"><a href="/blog">Blog</a></div>
</div>
{% if error_msg is defined %}
@@ -175,8 +176,8 @@
{{ comment['comment'] | safe }}
</div>
</div>
- {% else %}
- <center><p>No comment posted yet... :(</p></center>
+ {% else %}
+ <p align="center">No comment posted yet... :(</p>
{% endfor %}
</div>
{% else %}
@@ -185,9 +186,9 @@
</div>
<noscript><style>#mascot { opacity: 0.85; }</style></noscript>
- <img src="mascots/8.png" id="mascot"></img>
- <script src="colours.js"></script>
- <script src="image.js"></script>
+ <img src="/mascots/8.png" id="mascot"></img>
+ <script src="/colours.js"></script>
+ <script src="/image.js"></script>
<script>randomMascot(NOVELTY);</script>
</body>
</html>
