commit 325b236db099fa2e35b8c80c58ea268c709b1298
parent 2849854794d343554da36b3665a0452be1502542
Author: David Eisinger <[email protected]>
Date: Sun, 11 Oct 2026 00:10:31 -0400
Add latest track to homepage
Diffstat:
7 files changed, 206 insertions(+), 29 deletions(-)
diff --git a/content/_index.md b/content/_index.md
@@ -1 +1 @@
-I'm a technologist in Durham, North Carolina, USA. I write about adventures with my family, stuff I make, and interesting things I find on the web.
+I'm a technologist in Durham, North Carolina. I write about family adventures, things I make, and interesting finds from around the web.
diff --git a/themes/v2/assets/css/style.scss b/themes/v2/assets/css/style.scss
@@ -1,4 +1,5 @@
body {
+ margin: 8px;
font-family: "courier", monospace;
font-size: 18px;
padding: 50px;
@@ -7,9 +8,15 @@ body {
color: #333;
}
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 800px) {
body {
-webkit-text-size-adjust: 100%;
+ font-size: 16px;
+ }
+}
+
+@media only screen and (max-width: 600px) {
+ body {
padding: 10px;
}
}
@@ -33,6 +40,14 @@ a {
color: #00a;
}
+header > h1 {
+ margin: 1em 0;
+
+ a {
+ text-underline-offset: 3px;
+ }
+}
+
hr {
border: 0;
border-top: 2px solid #ddd;
@@ -215,6 +230,156 @@ pre {
border-radius: 3px;
}
+// HOMEPAGE INTRO
+
+.home-intro {
+ display: grid;
+ grid-template-areas: "name" "bio" "about";
+ margin-top: 1em;
+ margin-bottom: 0;
+
+ + section > hr:first-child {
+ margin-top: 0;
+ }
+
+ &.home-intro-with-music {
+ grid-template-columns: minmax(0, 1fr) 330px;
+ grid-template-areas:
+ "name music-heading"
+ "bio music"
+ "about more-music";
+
+ .home-name,
+ .home-bio,
+ .home-about {
+ padding-right: 26px;
+ }
+ }
+
+ h1 {
+ grid-area: name;
+ margin: 0;
+ padding-bottom: 22px;
+ }
+
+ p {
+ margin: 0;
+ }
+
+ a {
+ text-underline-offset: 3px;
+ }
+
+ .home-bio {
+ grid-area: bio;
+ padding-bottom: 14px;
+ }
+
+ .home-about,
+ .more-music {
+ font-size: 14px;
+ padding-bottom: 20px;
+ }
+
+ .home-about {
+ grid-area: about;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px 24px;
+
+ a {
+ white-space: nowrap;
+ }
+ }
+
+ .more-music {
+ grid-area: more-music;
+ }
+}
+
+.home-music-cell {
+ border-left: 2px solid #ddd;
+ padding-left: 26px;
+ min-width: 0;
+}
+
+.home-music-heading {
+ grid-area: music-heading;
+ color: #666;
+ font-size: 13px;
+ font-weight: normal;
+ letter-spacing: 1.1px;
+ line-height: 28.8px;
+ text-transform: uppercase;
+ margin: 0;
+ padding-top: 4px;
+ padding-bottom: 18px;
+}
+
+.home-music {
+ grid-area: music;
+ padding-bottom: 22px;
+
+ .track-title {
+ font-size: inherit;
+ font-weight: bold;
+ margin-bottom: 6px;
+ }
+
+ .track-source {
+ color: #666;
+ font-size: 14px;
+ line-height: 1.5;
+ margin-bottom: 16px;
+ }
+
+ audio {
+ display: block;
+ width: 100%;
+ min-width: 0;
+ height: 42px;
+ }
+}
+
+@media only screen and (max-width: 800px) {
+ .home-intro {
+ margin-bottom: 26px;
+
+ &.home-intro-with-music {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "name"
+ "bio"
+ "about"
+ "music-heading"
+ "music"
+ "more-music";
+
+ .home-name,
+ .home-bio,
+ .home-about {
+ padding-right: 0;
+ }
+ }
+
+ .home-about,
+ .more-music {
+ padding-bottom: 0;
+ }
+ }
+
+ .home-music-cell {
+ border-left: 0;
+ padding-left: 0;
+ }
+
+ .home-music-heading {
+ border-top: 2px solid #ddd;
+ padding-top: 20px;
+ margin-top: 26px;
+ }
+}
+
// AUDIO
.music-track {
diff --git a/themes/v2/layouts/_default/baseof.html b/themes/v2/layouts/_default/baseof.html
@@ -4,7 +4,7 @@
{{- partial "head.html" . -}}
{{- block "head" . }}{{- end }}
</head>
- <body>
+ <body{{ if .IsHome }} class="home"{{ end }}>
{{- partial "header.html" . -}}
<div id="content">
{{- block "main" . }}{{- end }}
diff --git a/themes/v2/layouts/index.html b/themes/v2/layouts/index.html
@@ -1,26 +1,34 @@
{{ define "main" }}
- {{ .Content }}
-
- <ul>
- {{ $recentDispatch := first 1 (where .Site.RegularPages "Params.tags" "intersect" (slice "dispatch")) }}
- {{ with index $recentDispatch 0 }}
- <li>
- <a href="{{ .Permalink }}">Read the latest dispatch</a>
- </li>
+ {{ $latestTrack := false }}
+ {{ range (where .Site.RegularPages "Params.exclude_music" "!=" true).ByDate.Reverse }}
+ {{ $page := . }}
+ {{ with first 1 (sort (.Resources.Match "*.mp3") "Title" "desc") }}
+ {{ $latestTrack = dict "track" (index . 0) "page" $page }}
+ {{ break }}
{{ end }}
+ {{ end }}
- <li>
- <a href="/music">Music I’ve made</a>
- </li>
-
- <li>
- <a href="https://dispatch.davideisinger.com/subscription/form">Subscribe via email</a>
- </li>
+ <header class="home-intro{{ if $latestTrack }} home-intro-with-music{{ end }}">
+ <h1 class="home-name"><a href="/">{{ .Site.Title }}</a></h1>
+ <div class="home-bio">
+ {{ .Content }}
+ </div>
+ <p class="home-about">
+ <a href="/about/">More about me →</a>
+ <a href="https://dispatch.davideisinger.com/subscription/form">Subscribe via email →</a>
+ </p>
- <li>
- <a href="/about">More about me</a>
- </li>
- </ul>
+ {{ with $latestTrack }}
+ {{ $title := substr .track.Title 0 -4 }}
+ <h2 class="home-music-heading home-music-cell" id="latest-track-heading">Latest track</h2>
+ <div class="home-music home-music-cell" role="group" aria-labelledby="latest-track-heading">
+ <p class="track-title">{{ $title }}</p>
+ <p class="track-source">From <a href="{{ .page.RelPermalink }}">{{ .page.Title }}</a></p>
+ <audio controls preload="none" aria-label="{{ $title }}" src="{{ .track.RelPermalink }}"></audio>
+ </div>
+ <p class="more-music home-music-cell"><a href="/music/">More music →</a></p>
+ {{ end }}
+ </header>
<section>
<hr>
diff --git a/themes/v2/layouts/music/list.html b/themes/v2/layouts/music/list.html
@@ -10,13 +10,7 @@
{{ $page := . }}
{{ range sort (.Resources.Match "*.mp3") "Title" "desc" }}
- <div id="{{ substr .Title 0 -4|urlize }}" class="music-track">
- <audio controls src="{{ .RelPermalink }}"></audio>
-
- <div>
- “{{ substr .Title 0 -4 }}”<br><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
- </div>
- </div>
+ {{ partial "music-track.html" (dict "track" . "page" $page) }}
{{ end }}
{{ end }}
</section>
diff --git a/themes/v2/layouts/partials/header.html b/themes/v2/layouts/partials/header.html
@@ -1,3 +1,5 @@
+{{ if not .IsHome }}
<header>
<h1><a href="/">{{ .Site.Title }}</a></h1>
</header>
+{{ end }}
diff --git a/themes/v2/layouts/partials/music-track.html b/themes/v2/layouts/partials/music-track.html
@@ -0,0 +1,8 @@
+{{ $title := substr .track.Title 0 -4 }}
+<div id="{{ $title | urlize }}" class="music-track">
+ <audio controls preload="none" aria-label="{{ $title }}" src="{{ .track.RelPermalink }}"></audio>
+
+ <div>
+ “{{ $title }}”<br><a href="{{ .page.RelPermalink }}">{{ .page.Title }}</a>
+ </div>
+</div>
