docs(site): show all six themes, and put the demo line in English

Adds a gallery of the same Today view in each of the six themes — Northern lights,
Charcoal, Dusk, Daylight, Paper, Contrast — so the range is shown rather than
described, on the landing page and (as the swatch panel) the docs home. The lone
Charcoal Today capture is folded into it.

And the quick-add demo that leads the docs — "betal moms i morgen kl 10 p1 #Firma
@regnskab" — is now English, "file the VAT return tomorrow at 10am p1 #Accounts
@tax", on every page it appears as the line to type: the home, the quick-add page,
the API and MCP examples, and the OpenAPI blurb. The Danish date words on the
quick-add page stay, because documenting the Danish parser is their job.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
kristianwind
2026-09-04 09:46:50 +02:00
co-authored by Claude Opus 4.8
parent 18db79c063
commit 9d390d021f
27 changed files with 102 additions and 21 deletions
+1 -1
View File
@@ -85,7 +85,7 @@ what a person reads is decided by the client, which knows what language they are
curl -X POST https://todo.example.dk/api/v1/tasks/quick-add \ curl -X POST https://todo.example.dk/api/v1/tasks/quick-add \
-H "Authorization: Bearer vrd_..." \ -H "Authorization: Bearer vrd_..." \
-H "Content-Type: application/json" \ -H "Content-Type: application/json" \
-d '{"text": "betal moms i morgen kl 10 p1 #Firma @regnskab"}' -d '{"text": "file the VAT return tomorrow at 10am p1 #Accounts @tax"}'
``` ```
### Projects and sections ### Projects and sections
+10 -5
View File
@@ -18,9 +18,10 @@ forward mail to, and an MCP endpoint so Claude can work your task list directly.
## What it does ## What it does
- **[Quick add](quick-add.md) that reads what you type.** `betal moms i morgen kl - **[Quick add](quick-add.md) that reads what you type.** `file the VAT return
10 p1 #Firma @regnskab` becomes a task due tomorrow at 10:00, priority 1, in tomorrow at 10am p1 #Accounts @tax` becomes a task due tomorrow at 10:00,
Firma, labelled regnskab. Danish and English, mixed freely in one line. priority 1, in Accounts, labelled tax. Danish and English, mixed freely in one
line.
- **Projects, sections, sub-tasks, labels, [saved filters](filters.md).** List, - **Projects, sections, sub-tasks, labels, [saved filters](filters.md).** List,
board and calendar views, and foldable groups over the projects in the sidebar. board and calendar views, and foldable groups over the projects in the sidebar.
The calendar draws each task to its length — drag the foot to resize, the body The calendar draws each task to its length — drag the foot to resize, the body
@@ -72,8 +73,12 @@ meet it.*
![Notes in the Charcoal theme](screenshots/notes-charcoal.png) ![Notes in the Charcoal theme](screenshots/notes-charcoal.png)
*Charcoal, the newest of six themes — a warm near-black after Apple Notes, with *Charcoal, the newest of six themes — a warm near-black after Apple Notes, with
amber where the accent green usually is. Three dark themes and three light, and a amber where the accent green usually is.*
typeface and size chosen apart from them.*
![The six themes as swatches](screenshots/themes.png)
*Six themes — three dark, three light — chosen on the settings page, with the
typeface and how tightly it sits set apart from them.*
![Settings, integrations](screenshots/settings.png) ![Settings, integrations](screenshots/settings.png)
+3 -3
View File
@@ -57,9 +57,9 @@ Both endpoints run the same server and reach the same things.
| `complete_task` | Tick one off. | | `complete_task` | Tick one off. |
| `add_comment` | Comment on a task. | | `add_comment` | Comment on a task. |
`create_task` prefers natural language, so *"add betal moms i morgen kl 10 p1 `create_task` prefers natural language, so *"add file the VAT return tomorrow at
#Firma"* goes through the same parser the app uses — dates, priorities, projects, 10am p1 #Accounts"* goes through the same parser the app uses — dates, priorities,
labels and recurrence in either language. projects, labels and recurrence in either language.
## What it can reach ## What it can reach
+3 -3
View File
@@ -832,9 +832,9 @@ paths:
tags: [tasks] tags: [tasks]
summary: Create a task from one line of natural language. summary: Create a task from one line of natural language.
description: | description: |
Danish and English. `betal moms i morgen kl 10 p1 #Firma @vigtigt` becomes Danish and English. `file the VAT return tomorrow at 10am p1 #Accounts @tax`
a task due tomorrow at 10:00, priority 1, in the project Firma, labelled becomes a task due tomorrow at 10:00, priority 1, in the project Accounts,
vigtigt. An unknown `#project` is not an error — the task goes to the labelled tax. An unknown `#project` is not an error — the task goes to the
Inbox rather than a thought being thrown away over a typo. Inbox rather than a thought being thrown away over a typo.
requestBody: requestBody:
required: true required: true
+5 -5
View File
@@ -3,11 +3,11 @@
One line in, a fully-formed task out. One line in, a fully-formed task out.
``` ```
betal moms i morgen kl 10 p1 #Firma @regnskab file the VAT return tomorrow at 10am p1 #Accounts @tax
``` ```
becomes a task called **betal moms**, due tomorrow at 10:00, priority 1, in the becomes a task called **file the VAT return**, due tomorrow at 10:00, priority 1,
Firma project, labelled regnskab. in the Accounts project, labelled tax.
The parts it understands are tinted underneath the text as you type, so you can see The parts it understands are tinted underneath the text as you type, so you can see
it being read before you commit to it. it being read before you commit to it.
@@ -16,8 +16,8 @@ it being read before you commit to it.
| You type | It means | | You type | It means |
|---|---| |---|---|
| `#Firma` | Put it in that project. `#"Q3 rapport"` for a name with spaces. | | `#Accounts` | Put it in that project. `#"Q3 report"` for a name with spaces. |
| `@regnskab` | Add that label. As many as you like. | | `@tax` | Add that label. As many as you like. |
| `p1` … `p4` | Priority. `!!!`, `!!` and `!` also work. | | `p1` … `p4` | Priority. `!!!`, `!!` and `!` also work. |
| `i dag`, `i morgen`, `i overmorgen` | Today, tomorrow, the day after. | | `i dag`, `i morgen`, `i overmorgen` | Today, tomorrow, the day after. |
| `mandag`, `på fredag` | The next such weekday. | | `mandag`, `på fredag` | The next such weekday. |
Binary file not shown.

Before

Width:  |  Height:  |  Size: 346 KiB

After

Width:  |  Height:  |  Size: 346 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 283 KiB

After

Width:  |  Height:  |  Size: 283 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 365 KiB

After

Width:  |  Height:  |  Size: 367 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 352 KiB

After

Width:  |  Height:  |  Size: 352 KiB

Before

Width:  |  Height:  |  Size: 237 KiB

After

Width:  |  Height:  |  Size: 237 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 232 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 245 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

+69
View File
@@ -1050,6 +1050,75 @@
<figcaption>Integrations: your mailbox, your calendar feed, your address.</figcaption> <figcaption>Integrations: your mailbox, your calendar feed, your address.</figcaption>
</figure> </figure>
</div> </div>
<h3 class="sub">Six themes, the same day</h3>
<p class="muted">
Three dark and three light — a property of the screen you are sitting at, a
laptop in the sun and a monitor in a dark room wanting different answers. The
typeface and how tight it sits are chosen apart from them.
</p>
<div class="shots">
<figure class="shot">
<img
src="screenshots/theme-northern-lights.webp"
alt="The Today view in the Northern lights theme: dark, with a green accent."
width="1400"
height="900"
loading="lazy"
/>
<figcaption>Northern lights — dark, a green accent. The default.</figcaption>
</figure>
<figure class="shot">
<img
src="screenshots/theme-charcoal.webp"
alt="The Today view in the Charcoal theme: a warm near-black modelled on Apple Notes, with amber for the accent."
width="1400"
height="900"
loading="lazy"
/>
<figcaption>Charcoal — a warm near-black after Apple Notes, amber accent.</figcaption>
</figure>
<figure class="shot">
<img
src="screenshots/theme-dusk.webp"
alt="The Today view in the Dusk theme: dark and warm, with an amber accent."
width="1400"
height="900"
loading="lazy"
/>
<figcaption>Dusk — dark and warm.</figcaption>
</figure>
<figure class="shot">
<img
src="screenshots/theme-daylight.webp"
alt="The Today view in the Daylight theme: light and coolly neutral."
width="1400"
height="900"
loading="lazy"
/>
<figcaption>Daylight — light and coolly neutral.</figcaption>
</figure>
<figure class="shot">
<img
src="screenshots/theme-paper.webp"
alt="The Today view in the Paper theme: light and warm, like paper."
width="1400"
height="900"
loading="lazy"
/>
<figcaption>Paper — light and warm, like paper.</figcaption>
</figure>
<figure class="shot">
<img
src="screenshots/theme-contrast.webp"
alt="The Today view in the Contrast theme: black on white, for bright light."
width="1400"
height="900"
loading="lazy"
/>
<figcaption>Contrast — black on white, for bright light.</figcaption>
</figure>
</div>
</section> </section>
<section id="features"> <section id="features">
Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

+11 -4
View File
@@ -74,11 +74,18 @@ const SHOTS = [
{ name: 'notes', path: '/noter', theme: 'dark', prepare: openMeetingNote }, { name: 'notes', path: '/noter', theme: 'dark', prepare: openMeetingNote },
{ name: 'notes-source', path: '/noter', theme: 'dark', prepare: showNoteSource }, { name: 'notes-source', path: '/noter', theme: 'dark', prepare: showNoteSource },
// Charcoal, the newest theme — a warm near-black modelled on Apple Notes, with // Charcoal, the newest theme — a warm near-black modelled on Apple Notes, with
// amber where the green usually is. Today and the notes list are the two views // amber where the green usually is. The notes list shows a theme's surfaces, text
// that show a theme's surfaces, text and one accent at once, so those are the two // and one accent at once, so that is where the landing page carries it up close.
// the landing page carries it in.
{ name: 'today-charcoal', path: '/', theme: 'charcoal' },
{ name: 'notes-charcoal', path: '/noter', theme: 'charcoal', prepare: openMeetingNote }, { name: 'notes-charcoal', path: '/noter', theme: 'charcoal', prepare: openMeetingNote },
// The same Today view in each of the six themes, for a gallery that shows the
// whole range at a glance. One view throughout, so the only thing that changes
// from picture to picture is the theme itself. Names are the themes' own.
{ name: 'theme-northern-lights', path: '/', theme: 'dark' },
{ name: 'theme-charcoal', path: '/', theme: 'charcoal' },
{ name: 'theme-dusk', path: '/', theme: 'dusk' },
{ name: 'theme-daylight', path: '/', theme: 'light' },
{ name: 'theme-paper', path: '/', theme: 'paper' },
{ name: 'theme-contrast', path: '/', theme: 'contrast' },
// The new work, and in the light theme, which is what most people want to look // The new work, and in the light theme, which is what most people want to look
// at a landing page in. The calendar drawing tasks to their length, and a note // at a landing page in. The calendar drawing tasks to their length, and a note
// somebody shared into the "Shared with me" group. // somebody shared into the "Shared with me" group.