Merge branch 'feature/blog'
This commit is contained in:
commit
3e627c5a0f
|
|
@ -1,2 +1,3 @@
|
|||
html/
|
||||
site/
|
||||
.blogtmp/
|
||||
|
|
|
|||
2
blog
2
blog
|
|
@ -1 +1 @@
|
|||
Subproject commit 9624dd16001391ce33e982caeefd81e02cee1a42
|
||||
Subproject commit af1abc0b051802e0a305d45a78541320d47b33a0
|
||||
|
|
@ -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
|
||||
49
makefile
49
makefile
|
|
@ -10,24 +10,31 @@ 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
|
||||
|
||||
site: $(HTML_TARGETS) $(CSS_TARGETS)
|
||||
all: $(HTML_TARGETS) $(CSS_TARGETS) blog | $(OUT_DIR)
|
||||
cp $(IMG_DIR)/*.png $(OUT_DIR)/
|
||||
|
||||
run: site
|
||||
|
||||
deploy: site
|
||||
deploy: all
|
||||
cp -r $(OUT_DIR) $(SITE_NAME)
|
||||
rsync -rP $(SITE_NAME) $(HOST):~
|
||||
rm -r $(SITE_NAME)
|
||||
|
|
@ -37,11 +44,35 @@ $(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 $@
|
||||
|
||||
.PHONY: site
|
||||
clean:
|
||||
rm -rf $(OUT_DIR) $(BLOG_TMP_DIR)
|
||||
|
|
|
|||
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