update homepage; update colors; add source link

scripts/build.py

@@ -1,12 +1,15 @@
 #!/usr/bin/env python3
 
+from __future__ import annotations
 import json
 import os
 import shutil
 import subprocess
 import tempfile
 from datetime import datetime
 from pathlib import Path
+import dataclasses
+from typing import Any
 
 import jinja2 # type: ignore
 
@@ -21,6 +24,24 @@ def formatdate(x: str) -> str:
 je.filters["formatdate"] = formatdate
 
 
+@dataclasses.dataclass
+class PostMeta:
+ title: str
+ date: str
+ public: bool
+
+ @classmethod
+ def parse(cls, d: dict[str, Any]) -> PostMeta:
+ return cls(
+ title=d["title"],
+ date=d["date"],
+ public=d["public"],
+ )
+
+
+PostIndex = dict[str, PostMeta]
+
+
 def empty_dist() -> None:
  # Removing and recreating the directory messes with the `make watch+serve` workflow. So we
  # instead empty the directory each time if it already exists.
@@ -38,13 +59,27 @@ def empty_dist() -> None:
  raise Exception(f"{f} is not a file or directory.")
 
 
-def compile_posts():
+def compile_index(posts: PostIndex):
+ with Path("src/index.jinja").open("r") as fp:
+ tpl = je.from_string(fp.read())
+
+ # Write the main index.html
+ publicposts = {k: v for k, v in posts.items() if v.public}
+ index = tpl.render(posts=publicposts)
+ with Path("dist/index.html").open("w") as fp:
+ fp.write(index)
+
+ # Write a staging index.html
+ staging = tpl.render(posts=posts)
+ with Path("dist/staging.html").open("w") as fp:
+ fp.write(staging)
+
+
+def compile_posts(posts: PostIndex):
  Path("dist/posts").mkdir()
  with Path("src/posts/template.jinja").open("r") as fp:
  tpl = je.from_string(fp.read())
- with Path("src/posts/index.json").open("r") as fp:
- meta = json.load(fp)
- for f in Path("src/posts").iterdir():
+ for f in Path("src/posts/tex").iterdir():
  if not f.suffix == ".tex":
  continue
 
@@ -74,21 +109,25 @@ def compile_posts():
  post = post[:nav_end] + '<div id="POST">' + post[nav_end:] + "</div>"
 
  # Wrap the post with a Jinja template.
- postmeta = meta[f.stem]
- post = tpl.render(meta=postmeta, body=post)
+ slug = f.stem
+ meta = posts[slug]
+ post = tpl.render(slug=slug, meta=meta, body=post)
 
  # Write the compiled post.
- with Path("dist", *f.parts[1:]).with_suffix(".html").open("w") as fp:
+ with Path("dist/posts", f.parts[-1]).with_suffix(".html").open("w") as fp:
  fp.write(post)
 
 
 def main():
  os.chdir(os.environ["PROJECT_ROOT"])
 
+ with Path("src/posts/index.json").open("r") as fp:
+ posts = {k: PostMeta.parse(v) for k, v in json.load(fp).items()}
+
  empty_dist()
  shutil.copytree("src/assets", "dist/assets")
- shutil.copyfile("src/index.html", "dist/index.html")
- compile_posts()
+ compile_index(posts)
+ compile_posts(posts)
 
 
 if __name__ == "__main__":

src/assets/css/global.css

@@ -24,6 +24,9 @@ p, h1, h2, h3, h4, h5, h6 {
 h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
 }
+ol, ul {
+ padding-left: 2.5rem;
+}
 
 /* Fonts */
 @font-face {
@@ -145,11 +148,12 @@ h1, h2, h3, h4, h5, h6 {
 
 html {
  /* Color variables. */
- --color-bg-base: #f7f6f4;
- --color-bg-nested: #f4f1ec;
+ --color-bg-base: #f6f5f4;
+ --color-bg-nested: #f5f3ef;
  --color-fg-primary: #322107;
- --color-fg-secondary: #6b512b;
- --color-border: #ece8e2;
+ --color-fg-secondary: #605b53;
+ --color-border-primary: #c5b194;
+ --color-border-secondary: #ece8e2;
 
  /* Font Variables */
  --font-size-xxl: 2.25rem;
@@ -208,6 +212,9 @@ code {
 .decoration-none { text-decoration: none }
 .decoration-underline { text-decoration: underline }
 
+/* Tabular nums. */
+.tabular-nums { font-variant-numeric: tabular-nums }
+
 /* Background color. */
 .bg-base { background: var(--color-bg-base) }
 .bg-nested { background: var(--color-bg-nested) }
@@ -217,7 +224,14 @@ code {
 .fg-secondary { color: var(--color-fg-secondary) }
 
 /* Border color. */
-.border { color: var(--color-border) }
+.br-primary { color: var(--color-border-primary) }
+.br-secondary { color: var(--color-border-secondary) }
+
+/* Border. */
+.br-top { border-top-width: 1px; border-top-style: solid }
+.br-right { border-right-width: 1px; border-right-style: solid }
+.br-bottom { border-bottom-width: 1px; border-bottom-style: solid }
+.br-left { border-left-width: 1px; border-left-style: solid }
 
 /* Flex. */
 .flex { display: flex }
@@ -241,48 +255,55 @@ code {
 .p-4 { padding: 1rem }
 .p-6 { padding: 1.5rem }
 .p-8 { padding: 2rem }
+.p-10 { padding: 2.5rem }
 .p-12 { padding: 3rem }
 .p-16 { padding: 4rem }
 .px-1 { padding-left: .25rem; padding-right: .25rem }
 .px-2 { padding-left: .5rem; padding-right: .5rem }
 .px-4 { padding-left: 1rem; padding-right: 1rem }
 .px-6 { padding-left: 1.5rem; padding-right: 1.5rem }
 .px-8 { padding-left: 2rem; padding-right: 2rem }
+.px-10 { padding-left: 2.5rem; padding-right: 2.5rem }
 .px-12 { padding-left: 3rem; padding-right: 3rem }
 .px-16 { padding-left: 4rem; padding-right: 4rem }
 .py-1 { padding-top: .25rem; padding-bottom: .25rem }
 .py-2 { padding-top: .5rem; padding-bottom: .5rem }
 .py-4 { padding-top: 1rem; padding-bottom: 1rem }
 .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem }
 .py-8 { padding-top: 2rem; padding-bottom: 2rem }
+.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem }
 .py-12 { padding-top: 3rem; padding-bottom: 3rem }
 .py-16 { padding-top: 4rem; padding-bottom: 4rem }
 .pl-1 { padding-left: .25rem }
 .pl-2 { padding-left: .5rem }
 .pl-4 { padding-left: 1rem }
 .pl-6 { padding-left: 1.5rem }
 .pl-8 { padding-left: 2rem }
+.pl-10 { padding-left: 2.5rem }
 .pl-12 { padding-left: 3rem }
 .pl-16 { padding-left: 4rem }
 .pt-1 { padding-top: .25rem }
 .pt-2 { padding-top: .5rem }
 .pt-4 { padding-top: 1rem }
 .pt-6 { padding-top: 1.5rem }
 .pt-8 { padding-top: 2rem }
+.pt-10 { padding-top: 2.5rem }
 .pt-12 { padding-top: 3rem }
 .pt-16 { padding-top: 4rem }
 .pr-1 { padding-right: .25rem }
 .pr-2 { padding-right: .5rem }
 .pr-4 { padding-right: 1rem }
 .pr-6 { padding-right: 1.5rem }
 .pr-8 { padding-right: 2rem }
+.pr-10 { padding-right: 2.5rem }
 .pr-12 { padding-right: 3rem }
 .pr-16 { padding-right: 4rem }
 .pb-1 { padding-bottom: .25rem }
 .pb-2 { padding-bottom: .5rem }
 .pb-4 { padding-bottom: 1rem }
 .pb-6 { padding-bottom: 1.5rem }
 .pb-8 { padding-bottom: 2rem }
+.pb-10 { padding-bottom: 2.5rem }
 .pb-12 { padding-bottom: 3rem }
 .pb-16 { padding-bottom: 4rem }
 

src/assets/css/post.css

@@ -6,15 +6,16 @@
 .pandoc #TOC {
  padding: 1rem;
  margin-bottom: 1.5rem;
- background: var(--color-bg-nested);
- border: 2px solid var(--color-border);
+ /* background: var(--color-bg-nested); */
+ border-left: 2px solid var(--color-border-primary);
 }
 .pandoc #TOC ul,
 .pandoc #TOC li {
  list-style-type: none;
+ padding-bottom: 0;
 }
 .pandoc #TOC ul {
- padding-left: 0;
+ padding-left: .5rem;
 }
 .pandoc #TOC li > ul {
  padding-left: 1.25rem;
@@ -72,13 +73,6 @@
  color: var(--color-fg-secondary);
 }
 
-.pandoc #TOC ol,
-.pandoc #TOC ul,
-.pandoc #TOC p
-{
- padding-bottom: 0;
-}
-
 .pandoc a[href^="#"] {
  color: var(--color-fg-primary);
 }

src/index.jinja

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link rel="stylesheet" type="text/css" href="/assets/css/global.css" />
+ <link rel="stylesheet" type="text/css" href="/assets/css/index.css" />
+ <title>sunset glow</title>
+ </head>
+ <body>
+ <div class="flex flex-col gap-2 p-4">
+ <div>sunset glow</div>
+ <div class="flex flex-col gap-1">
+ <div class="bold">About:</div>
+ <ul>
+ <li>I like theology, history, and computing.</li>
+ <li>23yo; gainfully unemployed; studying.</li>
+ <li>Open to emails and DMs :)</li>
+ </ul>
+ </div>
+ <div class="flex flex-col gap-1">
+ <div class="bold">Find Me:</div>
+ <ul>
+ <li><a href="mailto:[email protected]">[email protected]</a></li>
+ <li><a href="https://github.com/azuline">github/azuline</a></li>
+ <li><a href="https://x.com/hiddenwaterways">twitter/hiddenwaterways</a></li>
+ </ul>
+ </div>
+ <div class="flex flex-col gap-1">
+ <div class="bold">Writing:</div>
+ <ul>
+ {% for slug, post in posts.items() %}
+ <li><span class="tabular-nums">{{ post.date }}</span> | <a href="/posts/{{ slug }}.html">{{ post.title }}</a></li>
+ {% endfor %}
+ </ul>
+ </div>
+ <div class="flex flex-col gap-1">
+ <div class="bold">Software:</div>
+ <ul>
+ <li><a href="https://github.com/azuline/rose">Rosé</a>, a music management library with with CLI and virtual filesystem frontends.</li>
+ </ul>
+ </div>
+ <div>
+ <a href="https://github.com/azuline/sunsetglow" class="text-xs fg-secondary">(source)</a>
+ </div>
+ </div>
+ </body>
+</html>
+

src/posts/index.json

@@ -1,6 +1,7 @@
 {
  "frontend-build-systems": {
  "title": "Exposition of Frontend Build Systems",
- "date": "2024-06-08"
+ "date": "2024-06-08",
+ "public": true
  }
 }

src/posts/template.jinja

@@ -20,6 +20,13 @@
  <div class="pandoc">
  {{ body | safe }}
  </div>
+ <div class="py-8">
+ <div class="br-top br-secondary"></div>
+ </div>
+ <div class="text-xs fg-secondary">
+ <a href="https://github.com/azuline/sunsetglow/blob/master/src/posts/tex/{{ slug }}.tex" class="fg-secondary">Source</a>
+ | Found an error or typo? PRs welcome!
+ </div>
  </div>
  </div>
  </body>