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
This commit is contained in:
ktyl 2022-01-05 00:54:43 +00:00
parent 45997b1295
commit f961338956
16 changed files with 353 additions and 25 deletions

1
.gitignore vendored
View File

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

2
blog

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

10
local Executable file
View File

@ -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

View File

@ -10,14 +10,23 @@ OUT_DIR = site
ROOT_DIR = $(SRC_DIR)/root 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") PAGES = $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.html")
STYLES = $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.css") 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") IMAGES = $(shell find $(IMG_DIR) -wholename "$(IMG_DIR)/*.png")
HTML_INCLUDES = $(shell find $(SRC_DIR)/inc_html -name *.html) HTML_INCLUDES = $(shell find $(SRC_DIR)/inc_html -name *.html)
CSS_INCLUDES = $(shell find $(SRC_DIR)/inc_css -name *.css) 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) HTML_TARGETS = $(PAGES:$(ROOT_DIR)/%.html=$(OUT_DIR)/%.html)
CSS_TARGETS = $(STYLES:$(ROOT_DIR)/%.css=$(OUT_DIR)/%.css) CSS_TARGETS = $(STYLES:$(ROOT_DIR)/%.css=$(OUT_DIR)/%.css)
PNG_TARGETS = $(IMG_DIR)/%.png=$(OUT_DIR)/%.png PNG_TARGETS = $(IMG_DIR)/%.png=$(OUT_DIR)/%.png
@ -37,11 +46,38 @@ $(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES)
mkdir -p $(OUT_DIR) mkdir -p $(OUT_DIR)
python ppp/ppp.py $< $(HTML_INCLUDES) > $@ 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) > $@ python ppp/ppp.py $< $(CSS_INCLUDES) > $@
$(OUT_DIR):
mkdir -p $@
clean: clean:
rm -r $(OUT_DIR) rm -rf $(OUT_DIR) $(BLOG_TMP_DIR)
.PHONY: site .PHONY: site

2
ppp

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

84
scripts/mkblog.py Normal file
View File

@ -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)

44
scripts/mkblogindex.py Normal file
View File

@ -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>')

View File

@ -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;
}
}

View File

@ -46,7 +46,15 @@ ul.nav-links {
color: var(--accent); 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 { .nav {
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -54,6 +62,8 @@ ul.nav-links {
z-index: 1; z-index: 1;
top: 0; top: 0;
height: 3em; height: 3em;
border-bottom: 3px solid var(--background-alt);
} }
.nav .title { .nav .title {
@ -84,6 +94,14 @@ ul.nav-links {
display: none; display: none;
} }
.nav .socials {
position: fixed;
left: .5em;
bottom: .5em;
}
}
@media only screen and (max-width: 700px) {
.nav .socials { .nav .socials {
display: none; display: none;
} }

View File

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

View File

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

View File

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

View File

@ -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">

View File

@ -1,4 +1,5 @@
<ul class="nav-links"> <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> </ul>

View File

@ -6,7 +6,7 @@
<body> <body>
<title>ktyl ~ blog</title> <title>ktyl ~ blog</title>
<div class="sidebar"> <div class="nav">
#include titlestart.html #include titlestart.html
/blog /blog
#include titleend.html #include titleend.html
@ -15,8 +15,16 @@
#include socials.html #include socials.html
</div> </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> </div>
#include planets.html #include planets.html

15
todo.md
View File

@ -16,6 +16,12 @@
* [x] space out title * [x] space out title
* [x] solar system * [x] solar system
* [x] smaller * [x] smaller
* [x] combine needlessly separated planets lol
* [ ] planet accent colors?
* [ ] variable block
* [ ] orbit color
* [ ] orbit thickness
* [ ] planet color
* [-] gallery * [-] gallery
* [x] column too thin * [x] column too thin
* [x] make whole image into link * [x] make whole image into link
@ -27,7 +33,14 @@
* [-] features * [-] features
* [-] blog * [-] 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 * [ ] embed parsed html into templated pages
* [ ] header * [ ] header