Skip to content

Commit 883aa5e

Browse files
robinrendlerobinrendle
committed
table-of-contents v1
1 parent 0ba953a commit 883aa5e

31 files changed

+310
-135
lines changed

‎_includes/layouts/base.njk‎

Lines changed: 47 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<!-- Hi. -->
1+
<!-- So. Many. Websites. -->
22
<!DOCTYPE html>
3-
<html lang="en" data-theme="light" class={{templateClass}}>
3+
<html lang="en" class={{templateClass}}>
44
<head>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1">
@@ -31,16 +31,20 @@
3131
</style>
3232
</head>
3333
<body>
34-
<nav class="sidebar">
35-
<a href="/" class="sidebar-link">
36-
<svg class="sidebar-logo" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="36" height="37"><svg width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
34+
<nav class="sidebar sidebar-main">
35+
<a href="{% if page.url == '/table-of-contents/' %}/{% else %}/table-of-contents/{% endif %}" class="sidebar-link">
36+
<svg id="logo" class="sidebar-logo" xmlns="http://www.w3.org/2000/svg" version="1.1" width="36" height="37" viewBox="0 0 36 37" fill="none">
3737
<path d="M35.2 18.1992C35.2 8.69992 27.4993 0.999219 18 0.999219C8.5007 0.999219 0.8 8.69992 0.8 18.1992C0.8 27.6985 8.5007 35.3992 18 35.3992C27.4993 35.3992 35.2 27.6985 35.2 18.1992Z" fill="white"></path>
3838
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 1.79922C8.94253 1.79922 1.6 9.14175 1.6 18.1992C1.6 27.2567 8.94253 34.5992 18 34.5992C27.0575 34.5992 34.4 27.2567 34.4 18.1992C34.4 9.14175 27.0575 1.79922 18 1.79922ZM0 18.1992C0 8.25809 8.05887 0.199219 18 0.199219C27.9411 0.199219 36 8.25809 36 18.1992C36 28.1403 27.9411 36.1992 18 36.1992C8.05887 36.1992 0 28.1403 0 18.1992Z" fill="black"></path>
3939
<path d="M31.1243 28.6702C30.5574 25.4791 29.1972 22.4986 27.2238 20.0084C27.2957 19.7203 27.3677 19.4323 27.4399 19.1445C28.8799 19.0726 30.3199 17.9926 30.3199 17.7045C30.3199 17.4165 29.0238 15.9764 27.5838 15.6884C27.4399 14.3923 27.0077 13.1684 26.3599 12.0884C24.8479 9.35227 22.0399 7.40839 18.6559 7.04839C16.2798 6.83229 13.9759 7.33644 12.1759 8.63227C9.79977 10.2884 6.63201 14.8963 6.63201 14.8963L0.636454 22.5591C2.68757 29.734 9.46072 35 17.5 35C19.0071 35 20.4696 34.8149 21.865 34.4669C18.7567 31.4382 15.9198 28.5769 15.9198 28.5769C12.1037 24.6888 12.0317 18.5689 15.6317 14.7529C17.5756 12.6648 20.0956 11.5848 22.9037 11.5848C23.3357 11.5848 23.8399 11.5848 24.2718 11.6568C24.5598 12.0168 24.8479 12.4487 25.0637 12.8807L25.2076 13.0968C25.9996 14.6087 26.2876 16.2648 26.1438 17.9206C26.0721 18.4943 25.9289 19.0676 25.7856 19.6413L25.7838 19.6487L25.5677 20.3687L26.0716 20.9448C28.2099 23.6044 29.4793 26.755 29.8252 30.0684C30.2841 29.6261 30.7179 29.1593 31.1243 28.6702Z" fill="black"></path>
4040
<path d="M20.7437 17.7045C21.3006 17.7045 21.7518 17.2533 21.7518 16.6967C21.7518 16.1398 21.3006 15.6886 20.7437 15.6886C20.1871 15.6886 19.7359 16.1398 19.7359 16.6967C19.7359 17.2533 20.1871 17.7045 20.7437 17.7045Z" fill="black"></path>
4141
</svg>
4242
<div class="sidebar-title">
43-
{{ title }}
43+
{% if page.url == '/table-of-contents/' %}
44+
Notes from the Field
45+
{% else %}
46+
{{ title }}
47+
{% endif %}
4448
</div>
4549
<div class="sidebar-name">◆</div>
4650
</a>
@@ -61,6 +65,7 @@
6165
6266
const loader = document.getElementById('infinite-scroll-loader');
6367
const pageContent = document.querySelector('page-content');
68+
const isHomepage = window.location.pathname === '/';
6469
6570
let isLoading = false;
6671
let loadedUrls = new Set([firstArticle.dataset.url]);
@@ -100,18 +105,33 @@
100105
pageContent.appendChild(newArticle);
101106
currentArticle = newArticle;
102107
103-
// Update URL without page reload
104-
history.pushState({ url: nextUrl }, '', nextUrl);
105-
106-
// Update page title
107-
const newTitle = doc.querySelector('title').textContent;
108-
document.title = newTitle;
108+
// If on homepage, wrap h1 in a link
109+
if (isHomepage) {
110+
const h1 = newArticle.querySelector('h1');
111+
if (h1 && !h1.querySelector('a')) {
112+
const link = document.createElement('a');
113+
link.href = nextUrl;
114+
link.textContent = h1.textContent;
115+
h1.textContent = '';
116+
h1.appendChild(link);
117+
}
118+
}
109119
110-
// Update sidebar title
111-
const sidebarTitle = document.querySelector('.sidebar-title');
112-
const newH1 = newArticle.querySelector('h1');
113-
if (sidebarTitle && newH1) {
114-
sidebarTitle.textContent = newH1.textContent;
120+
// Only update URL and title if not on homepage
121+
if (!isHomepage) {
122+
// Update URL without page reload
123+
history.pushState({ url: nextUrl }, '', nextUrl);
124+
125+
// Update page title
126+
const newTitle = doc.querySelector('title').textContent;
127+
document.title = newTitle;
128+
129+
// Update sidebar title
130+
const sidebarTitle = document.querySelector('.sidebar-title');
131+
const newH1 = newArticle.querySelector('h1');
132+
if (sidebarTitle && newH1) {
133+
sidebarTitle.textContent = newH1.textContent;
134+
}
115135
}
116136
}
117137
} catch (error) {
@@ -141,15 +161,17 @@
141161
}, 100);
142162
}, { passive: true });
143163
144-
// Handle browser back/forward buttons
145-
window.addEventListener('popstate', (event) => {
146-
if (event.state && event.state.url) {
147-
window.location.href = event.state.url;
148-
}
149-
});
164+
// Handle browser back/forward buttons (only if not homepage)
165+
if (!isHomepage) {
166+
window.addEventListener('popstate', (event) => {
167+
if (event.state && event.state.url) {
168+
window.location.href = event.state.url;
169+
}
170+
});
150171
151-
// Initial state
152-
history.replaceState({ url: firstArticle.dataset.url }, '', firstArticle.dataset.url);
172+
// Initial state
173+
history.replaceState({ url: firstArticle.dataset.url }, '', firstArticle.dataset.url);
174+
}
153175
})();
154176
</script>
155177
</body>

‎_includes/layouts/home.njk‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,31 @@ layout: layouts/base.njk
33
title: Robin Rendle
44
---
55

6-
<img src="/images/me/robin-rendle-2.webp" class="home-img full-bleed" />
6+
{%- set notes = collections.notes | reverse -%}
7+
{%- set firstPost = notes[0] -%}
8+
{%- set nextPost = notes[1] if notes.length > 1 else null -%}
79

8-
<ol class="notes">
9-
{% for post in collections.notes | reverse %}
10-
<li>
11-
<a href="{{ post.url }}" class="note-link">
12-
<h3 class="h-1">{{ post.data.title }}</h3>
13-
<time datetime="{{ post.data.date | htmlDateString }}">{{ post.data.date | dinkyDate }}</time>
14-
</a>
15-
</li>
16-
{% endfor %}
17-
</ol>
10+
<article class="note-article" data-url="{{ firstPost.url }}" data-title="{{ firstPost.data.title }}" data-next-url="{% if nextPost %}{{ nextPost.url }}{% endif %}">
11+
<header class="title-header">
12+
<h1>
13+
<a href="{{ firstPost.url }}">{{ firstPost.data.title }}</a>
14+
</h1>
15+
{% if firstPost.data.extract %}
16+
<h2 class="text-subtitle">
17+
{{ firstPost.data.extract }}
18+
</h2>
19+
{% endif %}
20+
</header>
21+
22+
<div class="prose flow">
23+
{{ firstPost.templateContent | safe }}
24+
25+
<div class="note-date">
26+
— <time datetime="{{ firstPost.data.date | htmlDateString }}">{{ firstPost.data.date | fullDate }}</time>
27+
</div>
28+
</div>
29+
</article>
30+
31+
<div id="infinite-scroll-loader" style="display: none; text-align: center; padding: 2rem; color: var(--color-text-meta);">
32+
Loading next post...
33+
</div>

‎about.md‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
---
22
title: About
3+
extract: This is a thing.
34
layout: layouts/note.njk
45
eleventyExcludeFromCollections: true
56
date: 2024-03-17 09:03:28
67
country: California
78
city: San Francisco
8-
templateClass: no-footer
9+
templateClass: about
910
---
1011

11-
<p class="intro">Today I’m a designer at Apple. Previously I’ve designed software at Retool, Sentry, and Gusto as well as for clients like Buttondown and XOXO.</p>
12+
<img src="/images/me/robin-rendle-2.webp" class="about-img full-width">
1213

13-
I was a staff writer at CSS-Tricks where I wrote about the web, too. Prototypes! CSS! Complex layouts and design systems! For almost a decade I wrote about it all.
14+
<p class="intro">I’m Robin, a British designer, writer, and typographic nuisance from San Francisco. Today I’m a designer at <a href="https://apple.com">Apple</a> although previously I’ve made software at <a href="https://retool.com">Retool</a>, <a href="https://sentry.io">Sentry</a>, and <a href="https://gusto.com">Gusto</a> as well as for clients like <a href="https://buttondown.email">Buttondown</a> and <a href="https://xoxofest.com">XOXO</a>.</p>
1415

15-
This website is where I’ve jotted down notes about my reading and what I’ve been working on. It’s also where I’ve learned to write and design, learning about typography and front-end code.
16+
For the best part of a decade I was a staff writer at [CSS-Tricks](https://css-tricks.com/) where I wrote about front-end development and UI engineering on the web. Prototypes! Accessibility! Complex layouts and design systems! Over the years I wrote about almost everything when it comes to making a website.
1617

17-
Every once in a while I tend to publish bigger, more thoughtful stories though too.
18+
You can keep up with the notes and stories that I publish here [via RSS](/feed.xml) or through the extremely slow publishing schedule of the ol’ [newsletter](/newsletter/). You can also reach out via [Mastodon](https://sfba.social/@fonts), [Bluesky](https://bsky.app/profile/robinrendle.bsky.social), or <a href="mailto:robinjrendle@gmail.com?subject=Why%20Must%20You%20Disturb%20My%20Slumber">email</a>.
1819

1920
You can buzz me at <a href="mailto:robinjrendle@gmail.com?subject=Why%20Must%20You%20Disturb%20My%20Slumber">robinjrendle@gmail.com</a>
2021

@@ -24,6 +25,3 @@ You can buzz me at <a href="mailto:robinjrendle@gmail.com?subject=Why%20Must%20Y
2425
Body text is [Söhne](https://klim.co.nz/collections/soehne/) by Klim Type and I can’t think of anything else to read my words in. The ever-so-lovely headings are set in [Bradley](https://djr.com/notes/bradley-djr-font-of-the-month/) by David Jonathan Ross which have the perfect amount of charm.
2526

2627
Under the hood, everything is powered by [Eleventy](https://www.11ty.dev/) which just happens to be my favorite tool for publishing websites.
27-
28-
29-
— May 2025

‎adventures/cardigan-sci-fi.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ title: Cardigan Sci-fi
44
date: 2019-07-20
55
tags:
66
- typography
7+
- featured
78
---
89

910
There are many subgenres within sci-fi. You’ve got your steam punk sci-fi, your miserable dystopian sci-fi, and you have your big city Bladerunner/Transmetropolitan sci-fi. But my favorite category of all the varieties of science fiction that you can find is the much rarer sort:

‎eleventy.config.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ module.exports = function (eleventyConfig) {
4848
});
4949

5050
eleventyConfig.addFilter("dinkyDate", (dateObj) => {
51-
return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat("MM.dd");
51+
return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat("MM.dd.yyyy");
5252
});
5353

5454
// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
@@ -106,7 +106,9 @@ module.exports = function (eleventyConfig) {
106106

107107
eleventyConfig.addCollection("featured", function (collection) {
108108
return collection.getAll().filter(function (item) {
109-
return "featured" in (item.data.tags || []);
109+
return (item.data.tags || []).includes("featured");
110+
}).sort(function (a, b) {
111+
return a.date - b.date; // ascending order (oldest first)
110112
});
111113
});
112114

‎navigation.njk‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
layout: layouts/base.njk
3+
permalink: /table-of-contents/
4+
title: Table of Contents
5+
templateClass: nav-page
6+
---
7+
8+
<svg id="logo" class="sidebar-logo hide" fill="none" width="36" height="37">
9+
<symbol id="logo" viewBox="0 0 36 37">
10+
<path d="M35.2 18.1992C35.2 8.69992 27.4993 0.999219 18 0.999219C8.5007 0.999219 0.8 8.69992 0.8 18.1992C0.8 27.6985 8.5007 35.3992 18 35.3992C27.4993 35.3992 35.2 27.6985 35.2 18.1992Z" fill="white"></path>
11+
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 1.79922C8.94253 1.79922 1.6 9.14175 1.6 18.1992C1.6 27.2567 8.94253 34.5992 18 34.5992C27.0575 34.5992 34.4 27.2567 34.4 18.1992C34.4 9.14175 27.0575 1.79922 18 1.79922ZM0 18.1992C0 8.25809 8.05887 0.199219 18 0.199219C27.9411 0.199219 36 8.25809 36 18.1992C36 28.1403 27.9411 36.1992 18 36.1992C8.05887 36.1992 0 28.1403 0 18.1992Z" fill="black"></path>
12+
<path d="M31.1243 28.6702C30.5574 25.4791 29.1972 22.4986 27.2238 20.0084C27.2957 19.7203 27.3677 19.4323 27.4399 19.1445C28.8799 19.0726 30.3199 17.9926 30.3199 17.7045C30.3199 17.4165 29.0238 15.9764 27.5838 15.6884C27.4399 14.3923 27.0077 13.1684 26.3599 12.0884C24.8479 9.35227 22.0399 7.40839 18.6559 7.04839C16.2798 6.83229 13.9759 7.33644 12.1759 8.63227C9.79977 10.2884 6.63201 14.8963 6.63201 14.8963L0.636454 22.5591C2.68757 29.734 9.46072 35 17.5 35C19.0071 35 20.4696 34.8149 21.865 34.4669C18.7567 31.4382 15.9198 28.5769 15.9198 28.5769C12.1037 24.6888 12.0317 18.5689 15.6317 14.7529C17.5756 12.6648 20.0956 11.5848 22.9037 11.5848C23.3357 11.5848 23.8399 11.5848 24.2718 11.6568C24.5598 12.0168 24.8479 12.4487 25.0637 12.8807L25.2076 13.0968C25.9996 14.6087 26.2876 16.2648 26.1438 17.9206C26.0721 18.4943 25.9289 19.0676 25.7856 19.6413L25.7838 19.6487L25.5677 20.3687L26.0716 20.9448C28.2099 23.6044 29.4793 26.755 29.8252 30.0684C30.2841 29.6261 30.7179 29.1593 31.1243 28.6702Z" fill="black"></path>
13+
<path d="M20.7437 17.7045C21.3006 17.7045 21.7518 17.2533 21.7518 16.6967C21.7518 16.1398 21.3006 15.6886 20.7437 15.6886C20.1871 15.6886 19.7359 16.1398 19.7359 16.6967C19.7359 17.2533 20.1871 17.7045 20.7437 17.7045Z" fill="black"></path>
14+
</symbol>
15+
</svg>
16+
17+
<div class="nav-wrapper">
18+
{% for post in collections.featured | reverse %}
19+
{% set hue = 150 + (loop.index0 * 5) %}
20+
{% set lightness = 0.2 + (loop.index0 * 0.02) %}
21+
{% set delay = (loop.index0 + 0.5) * 0.05 %}
22+
<div class="sidebar" style="--color-sidebar: light-dark(oklch(from var(--primary) l c {{ hue }}), oklch({{ lightness }} 0.00 0)); animation-delay: {{ delay }}s;">
23+
<a class="sidebar-link"href="{{ post.url }}">
24+
<svg width="36" height="36">
25+
<use xlink:href="#logo"></use>
26+
</svg>
27+
<div class="sidebar-title">
28+
{{ post.data.title }}
29+
</div>
30+
<div class="sidebar-name">◆</div>
31+
</a>
32+
</div>
33+
{% endfor %}
34+
<!--<div class="sidebar sidebar-about" style="animation-delay: 0s;">
35+
<a href="/about" class="sidebar-link">
36+
<p class="intro">I’m Robin, a British designer, writer, and typographic nuisance from San Francisco.</p>
37+
</a>
38+
</div>-->
39+
</div>

‎newsletter/devastating-nope.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ date: 2024-09-29
55
city: San Francisco
66
country: CA
77
extract: I just did a big and scary thing.
8+
tags: featured
89
---
910

1011

@@ -48,4 +49,4 @@ _Ed Wood’s_ big idea is that perhaps, instead, we shouldn’t spend our lives
4849

4950
So this is a reminder to myself here: stop looking for prestige, stop looking for fame and attention. Push back against any signs of a fragile ego and try not to chase accolades from people who aren’t your people. That will only lead to more rejection, more frustration, and a life spent trying to be someone you just ain’t.
5051

51-
Instead: find your weirdos. They’re out there, somewhere.
52+
Instead: find your weirdos. They’re out there, somewhere.

‎newsletter/note-on-job-hunting.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ date: 2023-08-19T11:47:18-07:00
55
city: San Francisco
66
country: California
77
extract: ...it’s going to absolutely suck and there’s nothing you can do about it.
8+
tags: featured
89
---
910

1011
This week: a few quick notes on job hunting. But first, a blog update. This week I wrote about...

‎newsletter/the-book-club-of-california.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ date: 2023-08-28T15:58:05-07:00
55
city: San Francisco
66
country: California
77
extract: In Shar We Trust.
8+
tags: featured
89
---
910

1011
Friends! Book pals! Fellow worshipers of Shar!

‎notes/a-few-nice-words-about-viewfinder.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ date: 2025-09-20T16:11:19-07:00
55
city: San Francisco
66
country: California
77
extract:
8+
tags:
9+
- videogames
810
---
911

1012
Have you played [Viewfinder](https://store.steampowered.com/app/1382070/Viewfinder/) yet? I picked it up last night on a whim and I wasn’t prepared for how brilliantly designed and creative and straight-up weird it all is. Here’s the gist: the game is about solving little puzzles by taking photographs and then “pasting” those objects into the real world. So a photo of a wall, once turned on its side, can be used as a bridge that helps you cross a void. It’s all super smart.

0 commit comments

Comments
 (0)