From f9613389562fe20eb7fb2d3a9cf9ea8b648c347b Mon Sep 17 00:00:00 2001 From: ktyl Date: Wed, 5 Jan 2022 00:54:43 +0000 Subject: [PATCH] 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 + blog | 2 +- local | 10 ++++ makefile | 44 +++++++++++++++-- ppp | 2 +- scripts/mkblog.py | 84 +++++++++++++++++++++++++++++++++ scripts/mkblogindex.py | 44 +++++++++++++++++ src/inc_css/blog.css | 94 +++++++++++++++++++++++++++++++++++-- src/inc_css/nav.css | 20 +++++++- src/inc_css/page.css | 14 ++---- src/inc_css/socials.css | 2 + src/inc_html/blogend.html | 7 +++ src/inc_html/blogstart.html | 20 ++++++++ src/inc_html/nav.html | 5 +- src/root/blog.html | 14 ++++-- todo.md | 15 +++++- 16 files changed, 353 insertions(+), 25 deletions(-) create mode 100755 local create mode 100644 scripts/mkblog.py create mode 100644 scripts/mkblogindex.py create mode 100644 src/inc_html/blogend.html create mode 100644 src/inc_html/blogstart.html diff --git a/.gitignore b/.gitignore index aebb415..190ecae 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ html/ site/ +.blogtmp/ diff --git a/blog b/blog index 9624dd1..12ceea7 160000 --- a/blog +++ b/blog @@ -1 +1 @@ -Subproject commit 9624dd16001391ce33e982caeefd81e02cee1a42 +Subproject commit 12ceea71990c4dc255a964a809b65b1a3a2ae333 diff --git a/local b/local new file mode 100755 index 0000000..42806dc --- /dev/null +++ b/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 diff --git a/makefile b/makefile index 2a98199..de2fde9 100644 --- a/makefile +++ b/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 + diff --git a/ppp b/ppp index 1c1265c..b615241 160000 --- a/ppp +++ b/ppp @@ -1 +1 @@ -Subproject commit 1c1265c6fe150c7af42a7e96d02c130891338651 +Subproject commit b615241f8c5d5e5e332e5cdd1a53979447ab36e3 diff --git a/scripts/mkblog.py b/scripts/mkblog.py new file mode 100644 index 0000000..aed2d65 --- /dev/null +++ b/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-

and

elements + html = re.sub('((?)\n)(

)', r'\1

\n\2', html) + # insert para-block end between

and non-

elements + html = re.sub('(

\n)((?!

))', r'\1

\n\2', html) + + # insert code-panel start before 
 elements
+    html = re.sub('(
)', r'
\n\1', html)
+    # insert code-panel end after 
 elements
+    html = re.sub('(
)', r'\1\n', html) + + # replace horizontal rules with nice separator dot + html = re.sub('
', r'
', html) + + lines = html.split("\n") + + # tack on a closing div because we will have opened one without closing it on the final

+ lines.append("") + + for line in lines: + write_file.write(line + "\n") + + write_file.write("\n#include blogend.html\n") + +os.remove(dummy_file) + + diff --git a/scripts/mkblogindex.py b/scripts/mkblogindex.py new file mode 100644 index 0000000..7db00bd --- /dev/null +++ b/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("

(.+)

") + +# 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 tag with a relative href to the site root +for path in posts: + date = re.sub(path_pattern, r'\2-\3-\4', path) + + title = "" + with open(path) as f: + for line in f: + if title_pattern.match(line): + title = re.sub(title_pattern, r'\1', 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'
  • {date}{title}
    • ') + diff --git a/src/inc_css/blog.css b/src/inc_css/blog.css index fba2ce1..8ec4a26 100644 --- a/src/inc_css/blog.css +++ b/src/inc_css/blog.css @@ -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; + } +} + diff --git a/src/inc_css/nav.css b/src/inc_css/nav.css index 3c314e7..b5c1f9c 100644 --- a/src/inc_css/nav.css +++ b/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; } diff --git a/src/inc_css/page.css b/src/inc_css/page.css index 6f64dd1..1807a86 100644 --- a/src/inc_css/page.css +++ b/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; - 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%; diff --git a/src/inc_css/socials.css b/src/inc_css/socials.css index 7e48ccf..6e66db6 100644 --- a/src/inc_css/socials.css +++ b/src/inc_css/socials.css @@ -21,3 +21,5 @@ text-decoration: none; transition: color 0.3s; } + + diff --git a/src/inc_html/blogend.html b/src/inc_html/blogend.html new file mode 100644 index 0000000..55de9bd --- /dev/null +++ b/src/inc_html/blogend.html @@ -0,0 +1,7 @@ + + + +#include planets.html + + + diff --git a/src/inc_html/blogstart.html b/src/inc_html/blogstart.html new file mode 100644 index 0000000..b19813c --- /dev/null +++ b/src/inc_html/blogstart.html @@ -0,0 +1,20 @@ + + + +#include header.html + + +ktyl ~ blog + +
    +#include titlestart.html +/blog +#include titleend.html + +#include nav.html + +#include socials.html +
    + +
    +
    diff --git a/src/inc_html/nav.html b/src/inc_html/nav.html index 5e9e52f..f484b9a 100644 --- a/src/inc_html/nav.html +++ b/src/inc_html/nav.html @@ -1,4 +1,5 @@ diff --git a/src/root/blog.html b/src/root/blog.html index 0ba89a3..8dcb595 100644 --- a/src/root/blog.html +++ b/src/root/blog.html @@ -6,7 +6,7 @@ ktyl ~ blog -
    +
    #include titlestart.html /blog #include titleend.html @@ -15,8 +15,16 @@ #include socials.html
    -
    -

    coming soon !!

    +
    +

    Just Testing

    + +
    + +
      +#include blogindexlinks.html +
    + +
    #include planets.html diff --git a/todo.md b/todo.md index 7d1dbca..a100e4d 100644 --- a/todo.md +++ b/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 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