generate blog index

makefile

@@ -19,7 +19,10 @@ IMAGES			= $(shell find $(IMG_DIR) -wholename "$(IMG_DIR)/*.png")
 HTML_INCLUDES 	= $(shell find $(SRC_DIR)/inc_html -name *.html)
 CSS_INCLUDES	= $(shell find $(SRC_DIR)/inc_css -name *.css)
 
-BLOG_TARGETS	= $(BLOG_PAGES:$(BLOG_SRC_DIR)/%.md=$(BLOG_OUT_DIR)/%.html)
+BLOG_INDEX 			= $(OUT_DIR)/blog.html
+BLOG_INDEX_LINKS 	= $(BLOG_TMP_DIR)/blogindexlinks.html
+BLOG_TARGETS		= $(BLOG_PAGES:$(BLOG_SRC_DIR)/%.md=$(BLOG_OUT_DIR)/%.html)
+
 HTML_TARGETS 	= $(PAGES:$(ROOT_DIR)/%.html=$(OUT_DIR)/%.html)
 CSS_TARGETS 	= $(STYLES:$(ROOT_DIR)/%.css=$(OUT_DIR)/%.css)
 PNG_TARGETS		= $(IMG_DIR)/%.png=$(OUT_DIR)/%.png
@@ -29,6 +32,11 @@ run: $(HTML_TARGETS) $(CSS_TARGETS) blog | $(OUT_DIR)
 
 blog: $(BLOG_TARGETS) | $(BLOG_TMP_DIR)
 
+blog-index: $(BLOG_INDEX)
+
+$(BLOG_INDEX_LINKS): $(BLOG_TARGETS) | $(BLOG_TMP_DIR)
+	python scripts/mkblogindex.py $(BLOG_TARGETS) > $@
+
 $(BLOG_OUT_DIR)/%.html: $(BLOG_OUT_DIR)/%.html.tmp $(HTML_INCLUDES) $(CSS_TARGETS)
 	python ppp/ppp.py $< $(HTML_INCLUDES) > $@
 	cp $(CSS_TARGETS) `dirname $@`
@@ -43,8 +51,8 @@ $(BLOG_OUT_DIR): | $(OUT_DIR)
 $(BLOG_TMP_DIR):
 	mkdir -p $@
 
-$(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES) | $(OUT_DIR)
-	python ppp/ppp.py $< $(HTML_INCLUDES) > $@
+$(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES) $(BLOG_INDEX_LINKS) | $(OUT_DIR)
+	python ppp/ppp.py $< $(HTML_INCLUDES) $(BLOG_INDEX_LINKS) > $@
 
 $(OUT_DIR)/%.css: $(ROOT_DIR)/%.css $(CSS_INCLUDES) | $(OUT_DIR)
 	python ppp/ppp.py $< $(CSS_INCLUDES) > $@
@@ -52,5 +60,5 @@ $(OUT_DIR)/%.css: $(ROOT_DIR)/%.css $(CSS_INCLUDES) | $(OUT_DIR)
 $(OUT_DIR):
 	mkdir -p $@
 
-clean: 
-	rm -r $(OUT_DIR)
+clean:
+	rm -rf $(OUT_DIR) $(BLOG_TMP_DIR)

scripts/mkblog.py

@@ -19,7 +19,7 @@ import re
 def print_usage():
     print("\nusage: python mkblog.py SRC DEST\n")
     print("\n")
-    print("\t\SRC\tinput markdown file")
+    print("\t\tSRC\tinput markdown file")
     print("\t\tDEST\tdestination html file")
 
 # check args

scripts/mkblogindex.py

@@ -0,0 +1,43 @@
+#!/usr/bin/env python3
+
+import sys
+import re
+
+# we expect the arguments to be filepaths to each blog post
+
+def print_usage():
+    print("\nusage: python mkblogindex.py POSTS\n")
+    print("\n")
+    print("\t\tPOSTS\tfilepaths of blog posts")
+
+# check args for at least one file path
+if len(sys.argv) < 2:
+    print_usage()
+    sys.exit(1)
+
+# posts are arguments from index 1 onwards
+posts = sys.argv[1:]
+
+dir_pattern = re.compile("(.+)/(blog\/.+\.html)")
+path_pattern = re.compile("(.+)\/(\d{4})\/(\d{1,2})\/(\d{1,2})\/(.+).html")
+title_pattern = re.compile("<h1>(.+)</h1>")
+
+# filter posts to just those with a date in them
+posts = [p for p in posts if path_pattern.match(p)]
+
+# for each file we want to output an <a> tag with a relative href to the site root
+for path in posts:
+    date = re.sub(path_pattern, r'<span class="post-date">\2-\3-\4</span>', path)
+
+    title = ""
+    with open(path) as f:
+        for line in f:
+            if title_pattern.match(line):
+                title = re.sub(title_pattern, r'<span class="post-title">\1</span>', line).strip()
+                break
+
+    # clean leading directories to get the relative path we'll use for the link
+    url = re.sub(dir_pattern, r"\2", path)
+
+    print(f'<li><a href="{url}">{date}{title}</a></li>')
+

src/inc_css/blog.css

@@ -63,29 +63,27 @@ ul.blog-index li {
 }
 
 ul.blog-index li a {
-    color: var(--foreground);
+    color: var(--foreground-inactive);
     transition: none;
     text-decoration: none;
 }
 
-/*
-.blog-index li {
-    color: var(--foreground);
-}
-
-*/
 .blog-index li a:hover {
     color: var(--accent);
 }
 
 .blog-index li a:visited {
-    color: var(--foreground-inactive);
+    color: var(--foreground);
 }
 
 .page ul.blog-index li a::before {
     content: "• "
 }
 
+.blog-index .post-date {
+    padding-right: 1em;
+}
+
 @media only screen and (max-width: 700px) {
     .page .blog .code-panel {
         padding: 1.0em 5.0em;

src/root/blog.html

@@ -21,9 +21,7 @@
 <div class="text-panel">
 
 <ul class="blog-index">
-    <li><a href="/blog/2022/5/14/bilingual-computing.html">2022/5/14 - Bilingual Computing</a></li>
-    <li><a href="/blog/2022/5/14/linformatique-bilingue.html">2022/5/14 - L'informatique Bilingue</a></li>
-    <li><a href="nowhere">2022/4/20 - An unvisited link</a></li>
+#include blogindexlinks.html
 </ul>
 
 </div>