shii.moe

Source for `shii.moe' website.
git clone git://git.knutsen.co/shii.moe
Log | Files | Refs | README | LICENSE

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:
Ablog/under.md | 16++++++++++++++++
Ablog/wa-state.md | 7+++++++
Mpublic/style.css | 21+++++++++++++++++++++
Mrequirements.txt | 2++
Mshiimoe.py | 49++++++++++++++++++++++++++++++++++++++++++++++++-
Mstatic/404.html | 1+
Mstatic/books.html | 1+
Mstatic/index.html | 1+
Mstatic/music.html | 1+
Mstatic/norsk.html | 1+
Mstatic/school.html | 1+
Atemplates/blogindex.html | 72++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Atemplates/blogpost.html | 68++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mtemplates/guestbook.html | 11++++++-----
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. + +![He's literally me.](https://images.pexels.com/photos/3616232/pexels-photo-3616232.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2) + +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>