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:
parent
45997b1295
commit
f961338956
|
|
@ -1,2 +1,3 @@
|
|||
html/
|
||||
site/
|
||||
.blogtmp/
|
||||
|
|
|
|||
2
blog
2
blog
|
|
@ -1 +1 @@
|
|||
Subproject commit 9624dd16001391ce33e982caeefd81e02cee1a42
|
||||
Subproject commit 12ceea71990c4dc255a964a809b65b1a3a2ae333
|
||||
|
|
@ -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
|
||||
44
makefile
44
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)
|
||||
mkdir -p $(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 $@`
|
||||
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:
|
||||
rm -r $(OUT_DIR)
|
||||
$(OUT_DIR):
|
||||
mkdir -p $@
|
||||
|
||||
clean:
|
||||
rm -rf $(OUT_DIR) $(BLOG_TMP_DIR)
|
||||
|
||||
.PHONY: site
|
||||
|
||||
|
|
|
|||
2
ppp
2
ppp
|
|
@ -1 +1 @@
|
|||
Subproject commit 1c1265c6fe150c7af42a7e96d02c130891338651
|
||||
Subproject commit b615241f8c5d5e5e332e5cdd1a53979447ab36e3
|
||||
|
|
@ -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)
|
||||
|
||||
|
||||
|
|
@ -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>')
|
||||
|
||||
|
|
@ -1,4 +1,92 @@
|
|||
.blog.page h1 {
|
||||
padding-top: 10%;
|
||||
font-size: 3em;
|
||||
.page .blog {
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
padding: .6em 2em;
|
||||
margin-left: -1.5em;
|
||||
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%;
|
||||
|
|
|
|||
|
|
@ -21,3 +21,5 @@
|
|||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
#include planets.html
|
||||
|
||||
</body>
|
||||
</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">
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<ul class="nav-links">
|
||||
<li><a href="about.html" class="fsText">about</a></li>
|
||||
<li><a href="gallery.html" class="fsText">gallery</a></li>
|
||||
<li><a href="/about.html" class="fsText">about</a></li>
|
||||
<li><a href="/blog.html" class="fsText">blog</a></li>
|
||||
<li><a href="/gallery.html" class="fsText">gallery</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<h1>coming soon !!</h1>
|
||||
<div class="page">
|
||||
<h1>Just Testing</h1>
|
||||
|
||||
<div class="text-panel">
|
||||
|
||||
<ul class="blog-index">
|
||||
#include blogindexlinks.html
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#include planets.html
|
||||
|
|
|
|||
15
todo.md
15
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
|
||||
|
|
|
|||
Loading…
Reference in New Issue