add drone ci

update submodule url

use arch image

remove defunct deploy script

use pipenv

extract build stage

connect to remote server

deploy with ubuntu

copy old site

copy new site to host

deploy new site

only deploy on main

.drone.yml

@@ -0,0 +1,73 @@
+kind: pipeline
+type: docker
+name: deploy
+
+steps:
+- name: submodules
+  image: archlinux
+  commands: 
+  - pacman -Sy --noconfirm git >/dev/null
+  - git submodule update --init --recursive
+
+- name: build
+  image: archlinux
+  environment:
+    PYTHON_ENV: python python-pipenv python-setuptools
+
+  commands:
+    # set up python
+    - pacman -Sy --noconfirm make $PYTHON_ENV > /dev/null
+    - pipenv install
+
+    # build site
+    - make all
+
+- name: deploy
+  image: ubuntu
+  environment:
+    HOST:
+      from_secret: host
+    USER:
+      from_secret: user
+    SSH_KEY:
+      from_secret: ssh_key
+
+  commands:
+    # install deps
+    - apt-get update -qq > /dev/null
+    - apt-get install ssh rsync -qq > /dev/null
+
+    # configure ssh
+    - eval $(ssh-agent -s)
+    - mkdir -p ~/.ssh
+    - echo "$SSH_KEY" > ~/.ssh/id_rsa
+    - chmod 600 ~/.ssh/id_rsa
+    - ssh-add
+    - echo "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
+
+    # prepare vars for host operations
+    - host_dir="/var/www/$${HOST}"
+    - backup_dir="~/backups/$${HOST}/$${HOST}-$${DRONE_STAGE_STARTED}"
+    - host="$${USER}@$${HOST}"
+
+    # tasks
+    - make_backup_dir="mkdir -p $backup_dir"
+    - copy_backup_files="rsync -rP $host_dir $backup_dir"
+    - delete_current_files="sudo -n rm -r $host_dir"
+    - deploy_new_files="sudo -n mv $${HOST} $host_dir"
+
+    # archive old site
+    - ssh $host $make_backup_dir
+    - ssh $host $copy_backup_files
+
+    # deploy new site
+    - rsync -rP site/* "$host:$${HOST}"
+    - ssh $host $delete_current_files
+    - ssh $host $deploy_new_files
+  when:
+    branch:
+    - main
+    event:
+      exclude:
+      - pull_request
+

.gitignore

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

.gitmodules

@@ -3,7 +3,4 @@
 	url = https://github.com/ktyldev/ppp
 [submodule "blog"]
 	path = blog
-	url = https://github.com/ktyldev/blog.git
+	url = https://sauce.pizzawednes.day/ktyl/blog.git
-[submodule "cv"]
-	path = cv
-	url = https://gitlab.com/ktyldev/cv.git

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Cat Flynn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Pipfile

@@ -0,0 +1,12 @@
+[[source]]
+url = "https://pypi.org/simple"
+verify_ssl = true
+name = "pypi"
+
+[packages]
+markdown = "*"
+
+[dev-packages]
+
+[requires]
+python_version = "3.10"

Pipfile.lock

@@ -0,0 +1,29 @@
+{
+    "_meta": {
+        "hash": {
+            "sha256": "4f4f4fc0dc77addc9a4bf6c737f31df9507ee22a83548fcff1891a4e7bc27bed"
+        },
+        "pipfile-spec": 6,
+        "requires": {
+            "python_version": "3.10"
+        },
+        "sources": [
+            {
+                "name": "pypi",
+                "url": "https://pypi.org/simple",
+                "verify_ssl": true
+            }
+        ]
+    },
+    "default": {
+        "markdown": {
+            "hashes": [
+                "sha256:08fb8465cffd03d10b9dd34a5c3fea908e20391a2a90b88d66362cb05beed186",
+                "sha256:3b809086bb6efad416156e00a0da66fe47618a5d6918dd688f53f40c8e4cfeff"
+            ],
+            "index": "pypi",
+            "version": "==3.4.1"
+        }
+    },
+    "develop": {}
+}

README.md

@@ -0,0 +1,5 @@
+# ktyl.dev
+
+[![Build Status](https://oven.pizzawednes.day/api/badges/ktyl/ktyl.dev/status.svg)](https://oven.pizzawednes.day/ktyl/ktyl.dev)
+
+website at https://ktyl.dev/

blog

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

cv

@@ -1 +0,0 @@
-Subproject commit da919196896f04f103c83812f2187fa44c56096f

deploy

@@ -1,8 +0,0 @@
-#!/usr/bin/env bash
-
-make run
-mv site ktyl.dev
-scp -r ktyl.dev admin@saturn:~
-rm -r ktyl.dev
-
-ssh saturn "sudo ./deploy"

local

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

makefile

@@ -1,33 +1,80 @@
+SITE_NAME 		= ktyl.dev
+# configured in ~/.ssh/config
+HOST			= pluto
+# a script on the remote server to move it on arrival
+REMOTE_SCRIPT	= ./deploy-$(SITE_NAME)
+
 SRC_DIR			= src
 IMG_DIR			= img
 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")
-#IMAGES			= $(IMAGES:$(shell find $(IMG_DIR) -wholename "$(IMG_DIR)/*.jpg"))
-#IMAGES			= $(IMAGES:$(shell find $(IMG_DIR) -wholename "$(IMG_DIR)/*.gif"))
 
 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_RSS			= $(BLOG_OUT_DIR)/index.xml
+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
 
-run: $(HTML_TARGETS) $(CSS_TARGETS)
+
+all: $(HTML_TARGETS) $(CSS_TARGETS) blog | $(OUT_DIR)
 	cp $(IMG_DIR)/*.png $(OUT_DIR)/
+	cp $(IMG_DIR)/*.jpg $(OUT_DIR)/
 
-$(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES)
+deploy: site
-	mkdir -p $(OUT_DIR)
+	cp -r $(OUT_DIR) $(SITE_NAME)
-	python ppp/ppp.py $< $(HTML_INCLUDES) > $@
+	rsync -rP $(SITE_NAME) $(HOST):~
+	rm -r $(SITE_NAME)
+	ssh $(HOST) "sudo $(REMOTE_SCRIPT)"
 
-$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css $(CSS_INCLUDES)
+$(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES) $(BLOG_INDEX_LINKS) | $(OUT_DIR)
-	mkdir -p $(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) > $@
 
+$(OUT_DIR):
+	mkdir -p $@
+
+blog: $(BLOG_TARGETS) $(BLOG_RSS) | $(BLOG_TMP_DIR)
+
+$(BLOG_RSS): $(BLOG_PAGES)
+	pipenv run python scripts/mkblogrss.py $(BLOG_PAGES) > $@
+
+$(BLOG_INDEX_LINKS): $(BLOG_TARGETS) | $(BLOG_TMP_DIR)
+	pipenv run 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) 
+	pipenv run python scripts/mkblog.py $< $@
+
+$(BLOG_OUT_DIR): | $(OUT_DIR)
+	mkdir -p $@
+
+$(BLOG_TMP_DIR):
+	mkdir -p $@
+
 clean:
-	rm -r $(OUT_DIR)
+	rm -rf $(OUT_DIR) $(BLOG_TMP_DIR)
+
+.PHONY: site

ppp

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

scripts/mkblog.py

@@ -0,0 +1,86 @@
+#!/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)
+
+print(f"{src_file} -> {dest_file}")
+markdown.markdownFromFile(input=src_file, output=dest_file, extensions=["fenced_code"])
+

scripts/mkblogindex.py

@@ -0,0 +1,59 @@
+#!/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()
+
+links = []
+
+# for each file we want to output an <a> tag with a relative href to the site root
+for path in posts:
+    m = re.match(path_pattern, path)
+    year = m.group(2)
+    month = m.group(3).rjust(2, '0')
+    day = m.group(4).rjust(2, '0')
+
+    date = f'<span class="post-date">{year}-{month}-{day}</span>'
+
+    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)
+
+    item = (date, f'<li><a href="{url}">{date}{title}</a></li>')
+    links.append(item)
+
+# make sure we're properly ordered in reverse date order lol
+links = sorted(links, key=lambda x: x[0])
+links.reverse()
+
+for l in links:
+    print(l[1])
+

scripts/mkblogrss.py

@@ -0,0 +1,76 @@
+#!/usr/bin/env python3
+
+import markdown
+import pathlib
+import sys
+import re
+
+def print_usage():
+    print("\nusage: python mkblogrss.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:]
+
+# header and footer to enclose feed items
+header = """<?xml version="1.0" encoding="utf-8" ?>
+<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
+<channel>
+    <title>ktyl.dev</title>
+    <link>https://ktyl.dev/blog/index.html</link>
+    <description>mostly computer stuff!</description>
+    <atom:link href="https://ktyl.dev/blog/index.xml" rel="self" type="application/rss+xml"/>
+    """
+footer = "</channel></rss>"
+
+# regex patterns
+title_pattern = re.compile("<h1>(.+)</h1>")
+path_pattern = re.compile("(.+)\/(\d{4})\/(\d{1,2})\/(\d{1,2})\/(.+).md")
+
+def make_item(path):
+    str = "<item>\n"
+
+    # get the HTML version of the file
+    text = ""
+    with open(path) as f:
+        text = f.read()
+    html = markdown.markdown(text, extensions=["fenced_code"])
+
+    # title
+    title = ""
+    m = title_pattern.match(html)
+    title = m.group(1)
+    str += f"<title>{title}</title>\n"
+
+    # link
+    url = "/".join(pathlib.Path(path).parts[2:])
+    url = url.replace(".md", ".html")
+    link = f"https://ktyl.dev/blog/{url}"
+    str += f"<link>{link}</link>\n"
+
+    # content
+    description = html
+    description = re.sub('<', '&lt;', description)
+    description = re.sub('>', '&gt;', description)
+    str += f"<description>{description}</description>\n"
+
+    # pub date
+    date = re.sub(path_pattern, r'\2-\3-\4', path)
+    str += f"<pubDate>{date}</pubDate>\n"
+
+    str += "</item>"
+
+    return str
+
+# print everything!
+print(header)
+for p in posts:
+    print(make_item(p))
+print(footer)
+

src/inc_css/about.css

@@ -0,0 +1,24 @@
+.pfp {
+    position: relative;
+    top: 3em;
+    left: 50%;
+    width: 20em;
+    height: 20em;
+    text-align: center;
+    overflow: hidden;
+    border-color: var(--background-alt);
+    border-style: solid;
+    border-width: 3px;
+    border-radius: 50%;
+    transform: translate(-50%, 0);
+    margin-bottom: 4em;
+}
+
+.pfp img {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    height: 100%;
+    width: auto;
+    transform: translate(-50%, -50%);
+}

src/inc_css/blog.css

@@ -1,4 +1,96 @@
-.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 .code-panel pre::-webkit-scrollbar {
+    height: 0;
+    width: 0;
+    background: transparent;
+}
+
+.page .blog .separator {
+    margin: 2em;
+}
+
+.page .blog p code {
+    height: 0.8em;
+    padding: 0.07em 0.25em;
+    margin: 0 0.1em;
+    background-color: var(--foreground-inactive);
+    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/footer.css

@@ -1,7 +1,11 @@
 .footer {
-    position: fixed;
+    position: relative;
-    right: 0;
+}
-    bottom: 0;
+
-
+.footer span {
-    padding: 0 10px 10px;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+    color: var(--foreground-inactive);
+    padding: 2em;
 }

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,11 @@
+</div>
+</div>
+
+#include footer.html
+
+</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/footer.html

@@ -1,2 +1,3 @@
 <div class="footer">
+<span>© Cat Flynn 2021-2022</span>
 </div>

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/inc_html/socials.html

@@ -1,7 +1,6 @@
 <div class="socials">
+    <a href="mailto:me@ktyl.dev"><i class="fas fa-envelope"></i></a>
+    <a href="https://ktyl.dev/blog/index.xml"><i class="fas fa-rss"></i></a>
     <a href="https://github.com/ktyldev/"><i class="fab fa-github"></i></a>
     <a href="https://ktyl.itch.io/"><i class="fab fa-itch-io"></i></a>
-    <a href="https://instagram.com/ktyldev"><i class="fab fa-instagram"></i></a>
-    <a href="https://linkedin.com/in/cat-flynn-08751611b/"><i class="fab fa-linkedin"></i></a>
-    <a href="https://youtube.com/channel/UCwAHiEt20BuQtih7yYFAokA"><i class="fab fa-youtube"></i></a>
 </div>

src/inc_html/titlestart.html

@@ -1,2 +1,2 @@
 <div class="title">
-    <h1 class="fsText"><a href="index.html">ktyl.dev</a><span class="pageTitle">
+    <h1 class="fsText"><a href="https://ktyl.dev/">ktyl.dev</a><span class="pageTitle">

src/root/about.html

@@ -17,35 +17,45 @@
 
 <div class="page">
 
+<div class="pfp">
+<img src="pfp.jpg"></img>
+</div>
+
 <h1>Hi, I'm Cat</h1>
 
 <div class="text-panel">
 
 <p>
-<!--
+I am an engineer/artist exploring human technology.
-by day i work with hardware, software and people finding useful things to do with immersive technology. for professional inquiries, please find me on <a href="https://www.linkedin.com/in/cat-flynn-08751611b/">linkedin</a>.
--->
-
-By day I work with hardware, software and people finding useful things to do with immersive technology.
-For professional inquiries, please fine me on <a href="https://www.linkedin.com/in/cat-flynn-08751611b/">LinkedIn</a>.
 </p>
 
 <div class="separator"></div>
 
 <p>
-<!--
+In my day job I find novel uses for interactive, immersive and games technology for training and simulation.
-by night, i create. often it's <a href="https://ktyl.itch.io/">games</a> or <a href="https://github.com/ktyldev/">code</a>, but i am also interested in photography, writing, drawing, and making music. this website is to share those things. i'm working on building it out at the moment, so for now please just enjoy some things i've made in the <a href="gallery.html">gallery</a>!
+I am passionate about free and open source software, and the importance of developing tools that serve everyone.
--->
+</p>
 
-By night, I create.
+<p>
-Often it's <a href="https://ktyl.itch.io/">games</a> or <a href="https://github.com/ktyldev/">code</a>, but I am also interested in photography, writing, drawing, and making music.
+I tinker for fun and when I can, make things inspired by physics, the universe and boundaries, physical, imagined or otherwise.
-This website is to share those things.
+I am currently most enamoured by optics, orbital mechanics and relativity.
-I'm working on building it out at the moment, so for now please just enjoy some things I've made in the <a href="gallery.html">gallery</a>!
+</p>
 
+<p>
+Besides computing, I like caring for my plants, photography, and studying language, culture and philosophy. 
+I explore fashion, makeup, gender expression and regularly see live music.
+</p>
 
+<div class="separator"></div>
+
+<p>
+For inquiries, professional or otherwise, please <a href="mailto:me@ktyl.dev">send me an email</a>!
 </p>
 
 </div>
+
+#include footer.html
+
 </div>
 
 #include planets.html

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,19 @@
 #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>
+
+#include footer.html
+
 </div>
 
 #include planets.html

src/root/gallery.html

@@ -17,7 +17,7 @@
 
 <div class="page portfolio">
 
-<h1><span class="glass">Ray Tracing<span></h1>
+<h1><span class="glass">Ray Tracing</span></h1>
 <p><span class="glass">Optics are beautiful, fascinating and fun to code!</span></p>
 <div class="wrapper">
 
@@ -56,6 +56,11 @@
 <a href="https://github.com/ktyldev/oglc"></a>
 </div>
 
+<div class="imgHolder">
+<img src="pinkspheres.png"></img>
+<a href="https://gitlab.com/ktyldev/ray-tracing-in-one-weekend"></a>
+</div>
+
 <div class="imgHolder">
 <img src="rti1w.png"></img>
 <a href="https://gitlab.com/ktyldev/ray-tracing-in-one-weekend"></a>
@@ -95,7 +100,7 @@
 
 <div class="imgHolder">
 <img src="erf.png"></img>
-<a href="erf.png">earth</a>
+<a href="erf.png"></a>
 </div>
 
 <div class="imgHolder">
@@ -120,6 +125,11 @@
 
 <div class="wrapper">
 
+<div class="imgHolder">
+<img src="pinkspheresframed.png"></img>
+<a href="pinkspheresframed.png"></a>
+</div>
+
 <div class="imgHolder">
 <img src="relanoise.png"></img>
 <a href="relanoise.png"></a>
@@ -147,10 +157,11 @@
 
 </div>
 
+#include footer.html
+
 </div>
 
 #include planets.html
-#include footer.html
 
 </body>
 

src/root/styles.css

@@ -17,6 +17,7 @@ body {
 #include page.css
 #include landing.css
 #include blog.css
+#include about.css
 
 li {
     display:inline;

todo.md

@@ -1,24 +1,23 @@
-
+* [ ] transfer domain https://www.mythic-beasts.com/support/domains/transfer
+* [ ] hide scrollbars in bloggy code blocks https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
 * [-] responsive design
     * [-] nav
-        * [x] top bar
-            * [x] no socials
-            * [x] title left (no trail)
-            * [x] page links right (no prefix)
         * [ ] side bar
             * [ ] transparent
-    * [x] landing page
-        * [x] central
-        * [x] move up a squidge to avoid planets intersecting icons
     * [x] about
         * [x] narrow text
         * [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
-        * [ ] invert media queries for :hover handling on mobile
 
 * [x] content
     * lx] about
@@ -26,15 +25,22 @@
 
 * [-] 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
         * [ ] sticky slidy from middle to side with scroll
     * [ ] nav
         * [ ] turn into <nav>
-    * [ ] footer
+    * [-] footer
-        * [ ] integrate solar system
+        * [x] integrate solar system
         * [ ] fade out along bottom edge
         * [ ] made by me
     * [ ] gallery
@@ -53,3 +59,4 @@
         * [ ] strip comments
     * [ ] deploy
         * [ ] github actions pipeline?
+