update blog

update blog

update blog

update todo

update blog

correctly render fenced code blocks

work on blog generation

update blog

script to deploy to local web server

abs navigation links

finish styling blog pages, start blog index

update ppp

generate blog index

reverse blog index order

update blog

.gitignore

@@ -1,2 +1,3 @@
 html/
 site/
+.blogtmp/

blog

@@ -1 +1 @@
-Subproject commit 9624dd16001391ce33e982caeefd81e02cee1a42
+Subproject commit 12ceea71990c4dc255a964a809b65b1a3a2ae333

local

@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+
+outdir=site
+dest="/srv/http/"
+
+make clean
+make run
+
+sudo rm -r $dest/*
+sudo cp -r $outdir/* $dest

makefile

@@ -10,14 +10,23 @@ OUT_DIR			= site
 
 ROOT_DIR		= $(SRC_DIR)/root
 
+BLOG_SRC_DIR	= blog/blogs
+BLOG_OUT_DIR	= $(OUT_DIR)/blog
+BLOG_TMP_DIR	= .blogtmp
+
 PAGES 			= $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.html")
 STYLES			= $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.css")
+BLOG_PAGES		= $(shell find $(BLOG_SRC_DIR) -wholename "$(BLOG_SRC_DIR)*.md")
 
 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_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
@@ -37,11 +46,38 @@ $(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES)
 	mkdir -p $(OUT_DIR)
 	python ppp/ppp.py $< $(HTML_INCLUDES) > $@
 
-$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css $(CSS_INCLUDES)
+blog: $(BLOG_TARGETS) | $(BLOG_TMP_DIR)
-	mkdir -p $(OUT_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 $@`
+	rm $<
+
+$(BLOG_OUT_DIR)/%.html.tmp: $(BLOG_SRC_DIR)/%.md | $(BLOG_TMP_DIR) 
+	python scripts/mkblog.py $< $@
+
+$(BLOG_OUT_DIR): | $(OUT_DIR)
+	mkdir -p $@
+
+$(BLOG_TMP_DIR):
+	mkdir -p $@
+
+$(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) > $@
 
-clean: 
+$(OUT_DIR):
-	rm -r $(OUT_DIR)
+	mkdir -p $@
+
+clean:
+	rm -rf $(OUT_DIR) $(BLOG_TMP_DIR)
 
 .PHONY: site
+

ppp

@@ -1 +1 @@
-Subproject commit 1c1265c6fe150c7af42a7e96d02c130891338651
+Subproject commit b615241f8c5d5e5e332e5cdd1a53979447ab36e3

scripts/mkblog.py

@@ -0,0 +1,84 @@
+#!/usr/bin/env python
+
+import os
+import sys
+import markdown
+import re
+
+#   SRC
+#   +-2022/
+#   | +-10/
+#   | +-12/
+#   |   +-25/
+#   +-2023/
+#   | +-1/
+#   |   +-26/
+#   | +-3/
+#   ... 
+
+def print_usage():
+    print("\nusage: python mkblog.py SRC DEST\n")
+    print("\n")
+    print("\t\tSRC\tinput markdown file")
+    print("\t\tDEST\tdestination html file")
+
+# check args
+if len(sys.argv) != 3:
+    print_usage()
+    sys.exit(1)
+
+src_file = sys.argv[1]
+dest_file = sys.argv[2]
+
+# check blog root exists
+if not os.path.isfile(src_file):
+    print("{blog_root} doesn't exist")
+    sys.exit(1)
+
+# make dest dir if it doesnt exist
+
+dest_dir = os.path.dirname(dest_file)
+print(dest_dir)
+if not os.path.isdir(dest_dir):
+    os.makedirs(dest_dir)
+
+# write markdown into a dummy file first so that we can add lines before it in the final output
+dummy_file = f"{dest_file}.bak"
+open(dummy_file, 'w').close()
+
+print(f"{dummy_file} -> {dummy_file}")
+markdown.markdownFromFile(input=src_file, output=dummy_file, extensions=["fenced_code"])
+
+print(f"{dummy_file} -> {dest_file}")
+with open(dummy_file, 'r') as read_file, open(dest_file, 'w') as write_file:
+    write_file.write("#include blogstart.html\n")
+
+    # modify the basic html to make it nicer for styling later
+    html = read_file.read()
+
+    # insert text-panel start between non-<p> and <p> elements
+    html = re.sub('((?<!</p>)\n)(<p>)', r'\1<div class="text-panel">\n\2', html)
+    # insert para-block end between <p> and non-<p> elements
+    html = re.sub('(</p>\n)((?!<p>))', r'\1</div>\n\2', html)
+
+    # insert code-panel start before <pre> elements
+    html = re.sub('(<pre>)', r'<div class="code-panel">\n\1', html)
+    # insert code-panel end after </pre> elements
+    html = re.sub('(</pre>)', r'\1\n</div>', html)
+
+    # replace horizontal rules with nice separator dot
+    html = re.sub('<hr />', r'<div class="separator"></div>', html)
+
+    lines = html.split("\n")
+
+    # tack on a closing div because we will have opened one without closing it on the final <p>
+    lines.append("</div>")
+
+    for line in lines:
+        write_file.write(line + "\n")
+
+    write_file.write("\n#include blogend.html\n")
+
+os.remove(dummy_file)
+
+

scripts/mkblogindex.py

@@ -0,0 +1,44 @@
+#!/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)]
+posts.reverse()
+
+# 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

@@ -1,4 +1,92 @@
-.blog.page h1 {
+.page .blog  {
-    padding-top: 10%;
-    font-size: 3em;
 }
+
+.page .blog h1 {
+    font-size: 2.5em;
+}
+
+.page .blog .para-block {
+    color: var(--foreground-inactive);
+    font-size: 1.1em;
+
+    line-height: 1.25em;
+
+    background-color: var(--background);
+    border-color: var(--background-alt);
+    border-width: 3px;
+    border-radius: 2em;
+    border-style: solid;
+
+    padding: 1.0em 1.5em;
+}
+
+.page .blog .code-panel {
+    color: var(--background);
+    background-color: var(--foreground);
+
+    font-size 1.5em;
+    line-height: 1.3em;
+
+    border-color: var(--accent);
+    border-width: 2px;
+    border-radius: 2em;
+    border-style: solid;
+
+    padding: 1.0em 2.0em;
+    margin: 2.5em -4.0em;
+
+    overflow: hidden;
+}
+
+.page .blog .code-panel pre {
+    overflow: scroll;
+}
+
+.page .blog .separator {
+    margin: 2em;
+}
+
+.page .blog p code {
+    font-size: 1.2em;
+    height: 0.8em;
+    padding: 0.07em 0.25em;
+    margin: 0 0.1em;
+    background-color: var(--foreground);
+    color: var(--background);
+    border-radius: .3em;
+}
+
+ul.blog-index li {
+
+    display: block;
+    margin: .2em 0;
+}
+
+ul.blog-index li a {
+    color: var(--foreground-inactive);
+    transition: none;
+    text-decoration: none;
+}
+
+.blog-index li a:hover {
+    color: var(--accent);
+}
+
+.blog-index li a:visited {
+    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/inc_css/nav.css

@@ -46,7 +46,15 @@ ul.nav-links {
     color: var(--accent);
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 1200px) {
+    .nav .socials a {
+        padding: .2em 0;
+        display: block;
+        text-align: center;
+    }
+}
+
+@media only screen and (max-width: 1000px) {
     .nav {
         position: fixed;
         width: 100%;
@@ -54,6 +62,8 @@ ul.nav-links {
         z-index: 1;
         top: 0;
         height: 3em;
+
+        border-bottom: 3px solid var(--background-alt);
     }
 
     .nav .title {
@@ -84,6 +94,14 @@ ul.nav-links {
         display: none;
     }
 
+    .nav .socials {
+        position: fixed;
+        left: .5em;
+        bottom: .5em;
+    }
+}
+
+@media only screen and (max-width: 700px) {
     .nav .socials {
         display: none;
     }

src/inc_css/page.css

@@ -9,7 +9,7 @@
     transform: translate(-50%, 0);
 }
 
-.page .text-panel .separator {
+.page .separator {
     position: relative;
     background-color: var(--foreground-inactive);
 
@@ -23,10 +23,6 @@
 }
 
 .page a {
-    /*
-    color: #dd2570;
-    text-decoration: none;
-    */
     color: var(--accent);
 
     transition: all 0.1s;
@@ -37,8 +33,8 @@
 
 .page .text-panel {
     margin: 0;
-    margin-left: -2em;
+    margin-left: -1.5em;
-    padding: .6em 2em;
+    padding: 1.0em 1.5em;
     color: var(--foreground-inactive);
 
     font-size: 1.1em;
@@ -56,7 +52,7 @@
 }
 
 
-.page h1 {
+.page h1, h2 {
     color: var(--foreground-inactive);
 
     font-size: 1.7em;
@@ -67,7 +63,7 @@
     text-align: center;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 700px) {
     .page {
         margin-top: 2.5em;
         width: 100%;

src/inc_css/socials.css

@@ -21,3 +21,5 @@
     text-decoration: none;
     transition: color 0.3s;
 }
+
+

src/inc_html/blogend.html

@@ -0,0 +1,7 @@
+</div>
+</div>
+
+#include planets.html
+
+</body>
+</html>

src/inc_html/blogstart.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+
+#include header.html
+
+<body>
+<title>ktyl ~ blog</title>
+
+<div class="nav">
+#include titlestart.html
+/blog
+#include titleend.html
+
+#include nav.html
+
+#include socials.html
+</div>
+
+<div class="page">
+<div class="blog">

src/inc_html/nav.html

@@ -1,4 +1,5 @@
 <ul class="nav-links">
-    <li><a href="about.html" class="fsText">about</a></li>
+    <li><a href="/about.html" class="fsText">about</a></li>
-    <li><a href="gallery.html" class="fsText">gallery</a></li>
+    <li><a href="/blog.html" class="fsText">blog</a></li>
+    <li><a href="/gallery.html" class="fsText">gallery</a></li>
 </ul>

src/root/blog.html

@@ -6,7 +6,7 @@
 <body>
 <title>ktyl ~ blog</title>
 
-<div class="sidebar">
+<div class="nav">
 #include titlestart.html
 /blog
 #include titleend.html
@@ -15,8 +15,16 @@
 #include socials.html
 </div>
 
-<div class="blog page">
+<div class="page">
-<h1>coming soon !!</h1>
+<h1>Just Testing</h1>
+
+<div class="text-panel">
+
+<ul class="blog-index">
+#include blogindexlinks.html
+</ul>
+
+</div>
 </div>
 
 #include planets.html

todo.md

@@ -16,6 +16,12 @@
         * [x] space out title
     * [x] solar system
         * [x] smaller
+        * [x] combine needlessly separated planets lol
+        * [ ] planet accent colors?
+        * [ ] variable block
+            * [ ] orbit color
+            * [ ] orbit thickness
+            * [ ] planet color
     * [-] gallery
         * [x] column too thin
         * [x] make whole image into link
@@ -27,7 +33,14 @@
 
 * [-] features
     * [-] blog
-        * [x] parse markdown blog into html
+    * [ ] blog builder
+        * [ ] i want to generate an entire page based on the existence of one markdown file
+        * [ ] the file should contain no metadata, that should all be generated automatically
+        * [ ] yyyy/mm/dd folder structure - can probably be copied from source
+        * [ ] auto generated <title> tags
+        * [ ] generated file will be in html but will need a second pass from ppp to insert regular templating things
+
+        * [ ] parse markdown blog into html
         * [ ] embed parsed html into templated pages
 
     * [ ] header