Add blog posts
This commit is contained in:
Midgard
parent
62b1cabdd5
commit
cd6e8751dd
GPG Key ID:
511C112F1331BBB4
|
|
@ -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>
|
||||
|
|
@ -1,5 +1,22 @@
|
|||
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
|
||||
|
||||
---
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -3,3 +3,11 @@ summary: Pick a client, join some channels, maybe register with NickServ
|
|||
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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
#!/usr/bin/env python3
|
||||
|
||||
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
|
||||
import re
|
||||
from strictyaml import load as load_yaml
|
||||
from ipo import list, str, read, write, map, starstarmap, takewhile, join, sort
|
||||
|
||||
|
||||
TEMPLATE = """
|
||||
<li><a href="{path}">
|
||||
|
|
@ -12,6 +13,7 @@ TEMPLATE = """
|
|||
<div class="summary">{summary}</div>
|
||||
</a></li>"""
|
||||
|
||||
|
||||
def metadata(filename):
|
||||
with open(filename) as fh:
|
||||
metadata_yaml = read(fh) | takewhile(lambda line: line != "---") | join("\n")
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<body>
|
||||
<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"/>
|
||||
<h1>
|
||||
<h1 class="sitename">
|
||||
<a href="/" class="wordmark"><span>mid</span><span>gard</span></a>
|
||||
</h1>
|
||||
</header>
|
||||
|
|
|
|||
11
makefile
11
makefile
|
|
@ -7,15 +7,18 @@ BLOG_HTML ::= $(BLOG:%.md=$(BUILD_DIR)/%.html)
|
|||
|
||||
all: $(BUILD_DIR)/index.html public $(BLOG_HTML)
|
||||
|
||||
$(BUILD_DIR)/index.html: $(BUILD_DIR) do_index.py index.html $(BLOG)
|
||||
./do_index.py "index.html" "$@"
|
||||
$(BUILD_DIR)/index.html: index.html $(BLOG) do_index.py $(BUILD_DIR)
|
||||
./do_index.py "$<" "$@"
|
||||
|
||||
$(BUILD_DIR)/%.html: $(BUILD_DIR) do_blog.py %.md
|
||||
./do_blog.py "$(*F).md" "$@"
|
||||
$(BUILD_DIR)/blog/%.html: blog/%.md blog.html do_blog.py $(BUILD_DIR)/blog
|
||||
./do_blog.py "$<" "$@"
|
||||
|
||||
$(BUILD_DIR):
|
||||
mkdir -p "$@"
|
||||
|
||||
$(BUILD_DIR)/blog:
|
||||
mkdir -p "$@"
|
||||
|
||||
public:
|
||||
cp -rt "$(BUILD_DIR)" public/.
|
||||
|
||||
|
|
|
|||
|
|
@ -34,9 +34,21 @@ body {
|
|||
"footer";
|
||||
align-items: start;
|
||||
}
|
||||
body.blog {
|
||||
grid-template-rows: auto auto auto 1fr;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"main"
|
||||
"social"
|
||||
"footer";
|
||||
}
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
main {
|
||||
grid-area: main;
|
||||
justify-self: center;
|
||||
}
|
||||
#blog {
|
||||
grid-area: blog;
|
||||
}
|
||||
|
|
@ -67,6 +79,13 @@ footer {
|
|||
"footer footer";
|
||||
gap: 1em 3em;
|
||||
}
|
||||
body.blog {
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"header main"
|
||||
"social main"
|
||||
"footer footer";
|
||||
}
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
|
@ -95,6 +114,13 @@ footer {
|
|||
"footer footer footer";
|
||||
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;
|
||||
display: inline-block;
|
||||
}
|
||||
h1 {
|
||||
.sitename {
|
||||
margin: 0;
|
||||
margin-left: 0.3em;
|
||||
display: inline-block;
|
||||
font-size: 12vmin;
|
||||
}
|
||||
header img, h1 {
|
||||
header img, .sitename {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
|
||||
|
|
@ -170,7 +196,7 @@ header img, h1 {
|
|||
height: 27vmin;
|
||||
display: block;
|
||||
}
|
||||
h1 {
|
||||
.sitename {
|
||||
margin: 0.3em 0 0 0;
|
||||
display: block;
|
||||
font-size: 8vmin;
|
||||
|
|
@ -182,7 +208,7 @@ header img, h1 {
|
|||
height: 250px;
|
||||
display: block;
|
||||
}
|
||||
h1 {
|
||||
.sitename {
|
||||
margin: 0.3em 0 0 0;
|
||||
display: block;
|
||||
font-size: 56pt;
|
||||
|
|
@ -219,10 +245,13 @@ a .title {
|
|||
|
||||
|
||||
|
||||
aside {
|
||||
|
||||
main {
|
||||
line-height: 1.5;
|
||||
max-width: 50em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#social a {
|
||||
display: inline-block;
|
||||
width: 4em;
|
||||
|
|
|
|||
Loading…
Reference in New Issue