Merge pull request #37 from tmck-code/new-ui

New UI: local Jekyll theme, article front matter, design system

Author: tmck-code

.gitignore

@@ -0,0 +1,7 @@
+.claude/
+.scratch/
+.playwright-mcp/
+.obsidian/
+_site/
+.jekyll-cache/
+.sass-cache/

README.md

@@ -1,3 +1,71 @@
+# tmck-code.github.io
+
+My blog — a GitHub *user* Pages site (served from the domain root, `baseurl: ""`)
+built with Jekyll and a small **local theme** that lives in this repo. No
+`remote_theme`, no gems beyond what `actions/jekyll-build-pages` ships.
+
+## What's built
+
+| Path | Purpose |
+|---|---|
+| `_layouts/` | `default` (html shell, theme pre-paint, navbar/footer/palette), `home`, `page`, `post` |
+| `_includes/` | partials: `head`, `navbar`, `footer`, `article-list`, `article-meta`, `post-row`, `repo-card`, `terminal`, `codeblock`, `icon` (SVG sprite), `palette` (⌘K search), `robot-mark` |
+| `assets/css/tokens/*.css` | design tokens — colours (dark/light via `data-theme`), spacing, typography, motion, effects |
+| `assets/css/site.css` | all component styles, built on the tokens |
+| `assets/js/site.js` | behaviour: theme toggle (persisted in `localStorage['theme']`), copy-to-clipboard + toasts, clock, list filtering/tabs, command palette, GitHub star/fork enrichment |
+| `assets/img/` | logo/avatar SVGs, icon sprite, hex texture |
+| `_data/pages.yml` | cards for the interactive one-offs under `pages/` (shown on `pages.html`) |
+| `_data/repos.yml` | pinned repos for `projects.html` (static star/fork fallbacks) |
+| `index.html`, `posts.html`, `projects.html`, `pages.html`, `about.html` | the top-level pages |
+| `feed.xml` | Atom feed of listed articles (`/feed.xml`), templated over the same `article-list.html` query |
+| `articles/<slug>/<slug>.md` | blog posts — every one has YAML front matter (`title`, `date`, `blurb`, `tags`, `unlisted`) and uses the `post` layout via `_config.yml` defaults |
+
+Fonts (Space Grotesk, IBM Plex Sans, JetBrains Mono, Victor Mono) are loaded from
+Google Fonts in `_includes/head.html`.
+
+### Adding an article
+
+```sh
+./create_article.py -title 'My Title' -description 'one-line blurb'
+```
+
+This creates `articles/<YYYYMMDD>_<slug>/<slug>.md` with front matter + heading,
+and prepends an entry to the article list below the `---` in this README.
+Set `unlisted: true` in the front matter to keep a post out of the list/palette
+while leaving it reachable by URL.
+
+## Building
+
+### GitHub Actions (production)
+
+`.github/workflows/jekyll-gh-pages.yml` runs on every push to `main` (or
+manually via *workflow_dispatch*): `actions/jekyll-build-pages@v1` builds the
+site into `_site/` with the github-pages gem's default plugin set
+(`jekyll-relative-links`, `jekyll-optional-front-matter`,
+`jekyll-titles-from-headings`, `jekyll-readme-index`, …) and
+`actions/deploy-pages@v4` publishes it. Nothing is built or committed locally.
+
+### Locally
+
+There is no `Gemfile` checked in — match the Actions build by using the
+`github-pages` gem, or the same thing in Docker:
+
+```sh
+# ruby/bundler
+gem install github-pages
+jekyll serve --livereload          # http://127.0.0.1:4000
+
+# or docker, no ruby on the host
+docker run --rm -it -p 4000:4000 -v "$PWD":/site -w /site --user "$(id -u):$(id -g)" \
+  --entrypoint jekyll ghcr.io/actions/jekyll-build-pages:latest \
+  serve --host 0.0.0.0 --livereload
+```
+
+`_site/`, `.jekyll-cache/` and `.sass-cache/` are gitignored. Because
+`baseurl` is empty and assets are root-absolute (`/assets/...`), the local
+server must be served from the root too (the default for `jekyll serve`).
+
+---
 ### [20260415 KSF Surf Maps: Data Visualisation](articles/20260415_ksf_surf_maps_data_visualisation/20260415_ksf_surf_maps_data_visualisation.md)
 
 > _Charts and insights for surf maps on KSF servers_

_config.yml

@@ -1,7 +1,51 @@
 title: tmck-code.github.io
 description: my blog
 
-remote_theme: pages-themes/hacker@v0.2.0
-plugins:
-- jekyll-remote-theme
+# GitHub *user* site — served from the domain root, so baseurl is empty and every
+# asset is referenced root-absolute (/assets/...).
+url: https://tmck-code.github.io
+baseurl: ""
 
+# Local theme lives in _layouts/ + _includes/ + assets/. No remote_theme, no plugins
+# list: actions/jekyll-build-pages always loads the github-pages DEFAULT_PLUGINS
+# (jekyll-optional-front-matter, jekyll-relative-links, jekyll-titles-from-headings,
+# jekyll-readme-index, ...) which the articles and the README links depend on.
+
+defaults:
+  # Everything that Jekyll renders gets the plain page chrome ...
+  - scope:
+      path: ""
+    values:
+      layout: page
+  # ... except articles, which are blog posts.
+  - scope:
+      path: "articles"
+    values:
+      layout: post
+
+exclude:
+  # Jekyll's own defaults (re-stated because `exclude` replaces rather than extends)
+  - Gemfile
+  - Gemfile.lock
+  - gemfiles
+  - node_modules
+  - vendor/bundle/
+  - vendor/cache/
+  - vendor/gems/
+  - vendor/ruby/
+  # Repo-local
+  - create_article.py
+  - LICENSE
+  - .scratch
+  - .claude
+  - .obsidian
+  - .playwright-mcp
+  - tmck-code-design-system
+  - tmck-code-new-ui-poc
+
+# Keep GitHub-flavoured heading anchors stable: many articles hand-write TOCs
+# against kramdown's default id generation.
+markdown: kramdown
+kramdown:
+  input: GFM
+  syntax_highlighter: rouge

_data/pages.yml

@@ -0,0 +1,32 @@
+# The interactive one-off apps under pages/ (and one that still lives in articles/).
+# `name` doubles as the card eyebrow and the thumbnail filename:
+# assets/img/pages/<name>.png — a styled placeholder renders when it is absent.
+- name: bingo
+  title: Bingo, by the numbers
+  url: https://tmck-code.github.io/pages/bingo/index.html
+  blurb: >-
+    Two ways to read the same room — the cold mathematics of the odds, and a day
+    spent inside the hall watching where the money goes.
+- name: pikachu-stitch-companion
+  title: Glowing Pikachu · Stitch Companion
+  url: https://tmck-code.github.io/pages/pikachu-stitch-companion/pikachu-stitch-companion.html
+  blurb: >-
+    An interactive cross-stitch pattern companion — colour isolation, carry audits,
+    block-by-block progress across 6,088 stitches.
+- name: space-planner
+  title: Space Planner
+  url: https://tmck-code.github.io/pages/space-planner/index.html
+  blurb: >-
+    Set your space footprint, add shelving units, then drag them into place. Plan,
+    front, side and 3D views.
+- name: yas
+  title: YAS! — Yet Another Statusline
+  url: https://tmck-code.github.io/pages/yas.html
+  blurb: >-
+    The official landing page for yet-another-statusline — a statusline for Claude
+    Code inspired by terminal monitor programs.
+- name: ksf-surf-maps
+  title: 'KSF Surf Maps: Data Visualisation'
+  url: https://tmck-code.github.io/articles/20260415_ksf_surf_maps_data_visualisation/analysis.html
+  blurb: Charts and insights for surf maps on KSF servers.
+  soon: true

_data/repos.yml

@@ -0,0 +1,32 @@
+# Pinned/public repos. stars/forks are static fallbacks — site.js may enrich them
+# from the GitHub API via [data-repo] / [data-stars] / [data-forks].
+- name: yet-another-statusline
+  description: A statusline for Claude Code inspired by terminal monitor programs
+  language: Python
+  stars: 239
+  forks: 24
+- name: pokesay
+  description: Print pokemon in the CLI! An adaptation of the classic "cowsay"
+  language: Go
+  stars: 33
+  forks: 3
+- name: py-ansi-art-convert
+  description: ANSI > Unicode Converter
+  language: Python
+  stars: 6
+  forks: 0
+- name: dotfiles
+  description: My shell configuration
+  language: Shell
+  stars: 4
+  forks: 0
+- name: tmck-code.github.io
+  description: My blog
+  language: HTML
+  stars: 0
+  forks: 0
+- name: laser-prynter
+  description: terminal/cli/python helpers for colour and pretty-printing
+  language: Python
+  stars: 0
+  forks: 0

_includes/article-list.html

@@ -0,0 +1,23 @@
+{%- comment -%}
+Defines the site-wide `articles` variable: every *listed* markdown page under
+articles/, newest first.
+
+They are *pages*, not posts — there is no _posts/ directory and adding one would
+change every existing URL. `.html` files that live inside article directories
+(the huge generated one-file reports) are excluded, and `unlisted: true` articles
+are hidden from every listing while remaining reachable by direct URL.
+
+Ordering: sorted by `date` descending. The pre-sort on `path` (descending) is a
+tie-break — after the final `reverse` it leaves same-day articles in ascending
+path order, so multi-part series such as articles/20200419_csv/ read 0 → 4.
+Articles without `date:` fall back to their articles/YYYYMMDD_slug/ stamp for
+display (see article-meta.html).
+
+Liquid `assign` writes to the global scope, so `articles` is visible to the caller
+after {% include article-list.html %}.
+{%- endcomment -%}
+{%- assign articles = site.pages
+      | where_exp: "p", "p.path contains 'articles/'"
+      | where_exp: "p", "p.path contains '.md'"
+      | where_exp: "p", "p.unlisted != true"
+      | sort: "path" | reverse | sort: "date" | reverse -%}

_includes/article-meta.html

@@ -0,0 +1,29 @@
+{%- comment -%}
+{% include article-meta.html article=p %} defines, in the caller's scope:
+  art_title  art_date (YYYY-MM-DD, may be '')  art_read ("N min")
+  art_blurb  art_tags (array, may be empty)
+
+Everything degrades: `date`/`blurb`/`tags` front matter is used when present,
+otherwise the date comes from the articles/YYYYMMDD_slug/ directory name, the
+title from jekyll-titles-from-headings, and the blurb/tags are simply omitted.
+{%- endcomment -%}
+{%- assign am = include.article -%}
+{%- assign art_title = am.title | default: am.name -%}
+{%- assign art_blurb = am.blurb | default: am.description | default: '' -%}
+{%- assign art_tags = am.tags | default: empty_array -%}
+{%- assign art_read = am.content | number_of_words | divided_by: 200 | plus: 1 | append: ' min' -%}
+{%- if am.date -%}
+  {%- assign art_date = am.date | date: '%Y-%m-%d' -%}
+{%- else -%}
+  {%- assign am_parts = am.path | split: '/' -%}
+  {%- assign am_stamp = am_parts[1] | slice: 0, 8 -%}
+  {%- assign am_num = am_stamp | plus: 0 -%}
+  {%- if am_num > 19000000 -%}
+    {%- assign am_y = am_stamp | slice: 0, 4 -%}
+    {%- assign am_m = am_stamp | slice: 4, 2 -%}
+    {%- assign am_d = am_stamp | slice: 6, 2 -%}
+    {%- assign art_date = am_y | append: '-' | append: am_m | append: '-' | append: am_d -%}
+  {%- else -%}
+    {%- assign art_date = '' -%}
+  {%- endif -%}
+{%- endif -%}

_includes/codeblock.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+{% include codeblock.html label="go" code="go install …" %}
+The copy button is a no-JS-safe enhancement: `data-copy` carries the payload.
+{%- endcomment -%}
+<div class="codeblock">
+  <div class="codeblock__label eyebrow">{{ include.label }}</div>
+  <button type="button" class="codeblock__copy" data-copy="{{ include.code | escape }}">{% include icon.html name="copy" size=12 %}copy</button>
+  <pre>{{ include.code | escape }}</pre>
+</div>

_includes/footer.html

@@ -0,0 +1,7 @@
+<footer class="site-footer">
+  <div class="container">
+    {% include robot-mark.html variant="mark" size=28 %}
+    <span class="site-footer__text">tmck-code.github.io — built in the terminal, mostly</span>
+    <span class="site-footer__hint">press <kbd>⌘K</kbd> for the command palette</span>
+  </div>
+</footer>

_includes/head.html

@@ -0,0 +1,40 @@
+{%- assign head_title = page.title | default: site.title -%}
+{%- assign head_desc = page.blurb | default: page.description | default: site.description -%}
+{%- assign head_desc = head_desc | strip_html | normalize_whitespace | truncate: 200 -%}
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="dark light">
+<title>{% if page.url == '/' %}{{ site.title }}{% else %}{{ head_title }} · {{ site.title }}{% endif %}</title>
+<meta name="description" content="{{ head_desc | escape }}">
+<meta property="og:type" content="{% if page.layout == 'post' %}article{% else %}website{% endif %}">
+<meta property="og:site_name" content="{{ site.title | escape }}">
+<meta property="og:title" content="{{ head_title | escape }}">
+<meta property="og:description" content="{{ head_desc | escape }}">
+<meta property="og:url" content="{{ page.url | absolute_url }}">
+<meta name="twitter:card" content="summary">
+<link rel="canonical" href="{{ page.url | absolute_url }}">
+<link rel="icon" href="/assets/img/logo-mark.svg" type="image/svg+xml">
+
+{%- comment -%}
+site.css @imports the design tokens itself, so it is the only sheet to link.
+The font URLs are duplicated as <link>s purely to start those fetches in
+parallel with the @import chain; the browser dedupes by URL.
+{%- endcomment %}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap">
+{%- if page.victor_mono %}
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Victor+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap">
+{%- endif %}
+<link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="/feed.xml">
+<link rel="stylesheet" href="/assets/css/site.css">
+
+{%- comment -%}
+The theme toggle's two glyphs. site.css has no rule for them (it only knows the
+[data-theme-toggle] button), so the swap lives here with the markup that needs it.
+{%- endcomment %}
+<style>
+  [data-theme-toggle] .theme-icon { display: none; }
+  html[data-theme="dark"] [data-theme-toggle] .theme-icon--sun { display: inline-flex; }
+  html[data-theme="light"] [data-theme-toggle] .theme-icon--moon { display: inline-flex; }
+</style>