midgard/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add blog posts

Browse source
This commit is contained in:
Midgard 2020-06-02 15:42:25 +02:00
parent 62b1cabdd5
commit cd6e8751dd
Signed by untrusted user who does not match committer: midgard
GPG key ID: 511C112F1331BBB4
8 changed files with 144 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
blog.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>{title} – midgard</title>
<link rel="stylesheet" href="../main.css"/>
</head>
<body class="blog">
<header>
<img src="../midgard.jpg" alt="A stuffed mouse in front of a wall with stripes of warm colours, this is Midgard's online avatar"/>
<div class="sitename">
<a href="/" class="wordmark"><span>mid</span><span>gard</span></a>
</div>
</header>
<main>
<h1>{title}</h1>
{body}
</main>
<aside id="social">
<a id="rss-link" href="/rss/">Follow with RSS</a>
<a id="irc-link" href="/irc/">Contact on IRC</a>
</aside>
<footer>© 2020 midgard</footer>
</body>
</html>

19
blog/feeds.md
View file

@ -1,5 +1,22 @@
title: Get started using feeds title: Get started using feeds
summary: Pick a client, add some feeds, done summary: Don't subscribe to our email newsletter
published: 2020-06-02 published: 2020-06-02
--- ---
Adding feeds in a feed reader is a simple way to subscribe to websites. A lot of sites support
this.
The website provides a machine-readable document on a certain URL. You add this in your feed reader
software, which will then periodically fetch them. Whenever a new item is added, the reader will
pick up on this. If you want, you can configure it to notify you.
## Pro and con
## Choose a client
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
## Add some feeds
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

8
blog/irc.md
View file

@ -3,3 +3,11 @@ summary: Pick a client, join some channels, maybe register with NickServ
published: 2020-06-02 published: 2020-06-02
--- ---
IRC is a simple text protocol that's useful for channel-oriented messaging. It's used for
communities...
## Choose a client
## Register your nickname

42
do_blog.py Executable file
View file

@ -0,0 +1,42 @@
#!/usr/bin/env python3
import sys
from strictyaml import load as load_yaml
from ipo import read, write, map, starstarmap, join, sort, ipo
from glob import glob
from markdown import markdown
import re
@ipo
def parted(data, regex):
"""
Two parts of data, delimited by the first element on which regex fullmatches.
If a delimiter is found, the second part is an iterator over the remaining elements. Else it is None.
"""
first = []
it = iter(data)
try:
while True:
item = next(it)
if re.fullmatch(regex, item):
break
first.append(item)
except StopIteration:
return (first, None)
return (first, it)
with open("blog.html") as blog_fh:
TEMPLATE = blog_fh.read()
with open(sys.argv[1]) as file_in:
metadata_yaml, content = read(file_in) | parted("---+")
metadata = load_yaml(metadata_yaml | join("\n")).data
body = markdown(content | join("\n"), extras=[])
with open(sys.argv[2], "w") as file_out:
TEMPLATE.format(**metadata, body=body) | write(file=file_out)

6
do_index.py
View file

@ -1,10 +1,11 @@
#!/usr/bin/env python3 #!/usr/bin/env python3
import sys import sys
from strictyaml import load as load_yaml
from ipo import list, str, read, write, map, starstarmap, takewhile, join, sort
from glob import glob from glob import glob
import re import re
from strictyaml import load as load_yaml
from ipo import list, str, read, write, map, starstarmap, takewhile, join, sort
TEMPLATE = """ TEMPLATE = """
<li><a href="{path}"> <li><a href="{path}">
@ -12,6 +13,7 @@ TEMPLATE = """
<div class="summary">{summary}</div> <div class="summary">{summary}</div>
</a></li>""" </a></li>"""
def metadata(filename): def metadata(filename):
with open(filename) as fh: with open(filename) as fh:
metadata_yaml = read(fh) | takewhile(lambda line: line != "---") | join("\n") metadata_yaml = read(fh) | takewhile(lambda line: line != "---") | join("\n")

2
index.html
View file

@ -9,7 +9,7 @@
<body> <body>
<header> <header>
<img src="midgard.jpg" alt="A stuffed mouse in front of a wall with stripes of warm colours, this is Midgard's online avatar"/> <img src="midgard.jpg" alt="A stuffed mouse in front of a wall with stripes of warm colours, this is Midgard's online avatar"/>
<h1> <h1 class="sitename">
<a href="/" class="wordmark"><span>mid</span><span>gard</span></a> <a href="/" class="wordmark"><span>mid</span><span>gard</span></a>
</h1> </h1>
</header> </header>

11
makefile
View file

@ -7,15 +7,18 @@ BLOG_HTML ::= $(BLOG:%.md=$(BUILD_DIR)/%.html)
all: $(BUILD_DIR)/index.html public $(BLOG_HTML) all: $(BUILD_DIR)/index.html public $(BLOG_HTML)
$(BUILD_DIR)/index.html: $(BUILD_DIR) do_index.py index.html $(BLOG) $(BUILD_DIR)/index.html: index.html $(BLOG) do_index.py $(BUILD_DIR)
./do_index.py "index.html" "$@" ./do_index.py "$<" "$@"
$(BUILD_DIR)/%.html: $(BUILD_DIR) do_blog.py %.md $(BUILD_DIR)/blog/%.html: blog/%.md blog.html do_blog.py $(BUILD_DIR)/blog
./do_blog.py "$(*F).md" "$@" ./do_blog.py "$<" "$@"
$(BUILD_DIR): $(BUILD_DIR):
mkdir -p "$@" mkdir -p "$@"
$(BUILD_DIR)/blog:
mkdir -p "$@"
public: public:
cp -rt "$(BUILD_DIR)" public/. cp -rt "$(BUILD_DIR)" public/.

41
public/main.css
View file

@ -34,9 +34,21 @@ body {
"footer"; "footer";
align-items: start; align-items: start;
} }
body.blog {
grid-template-rows: auto auto auto 1fr;
grid-template-areas:
"header"
"main"
"social"
"footer";
}
header { header {
grid-area: header; grid-area: header;
} }
main {
grid-area: main;
justify-self: center;
}
#blog { #blog {
grid-area: blog; grid-area: blog;
} }
@ -67,6 +79,13 @@ footer {
"footer footer"; "footer footer";
gap: 1em 3em; gap: 1em 3em;
} }
body.blog {
grid-template-rows: auto;
grid-template-areas:
"header main"
"social main"
"footer footer";
}
header { header {
grid-area: header; grid-area: header;
} }
@ -95,6 +114,13 @@ footer {
"footer footer footer"; "footer footer footer";
gap: 1em 4em; gap: 1em 4em;
} }
body.blog {
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
"header main ."
"social main ."
"footer footer footer";
}
} }
@ -152,13 +178,13 @@ header img {
height: 25vmin; height: 25vmin;
display: inline-block; display: inline-block;
} }
h1 { .sitename {
margin: 0; margin: 0;
margin-left: 0.3em; margin-left: 0.3em;
display: inline-block; display: inline-block;
font-size: 12vmin; font-size: 12vmin;
} }
header img, h1 { header img, .sitename {
vertical-align: middle; vertical-align: middle;
} }
@media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) { @media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
@ -170,7 +196,7 @@ header img, h1 {
height: 27vmin; height: 27vmin;
display: block; display: block;
} }
h1 { .sitename {
margin: 0.3em 0 0 0; margin: 0.3em 0 0 0;
display: block; display: block;
font-size: 8vmin; font-size: 8vmin;
@ -182,7 +208,7 @@ header img, h1 {
height: 250px; height: 250px;
display: block; display: block;
} }
h1 { .sitename {
margin: 0.3em 0 0 0; margin: 0.3em 0 0 0;
display: block; display: block;
font-size: 56pt; font-size: 56pt;
@ -219,10 +245,13 @@ a .title {
aside { main {
line-height: 1.5;
max-width: 50em;
} }
#social a { #social a {
display: inline-block; display: inline-block;
width: 4em; width: 4em;