update clarity-outline js with new keybindings and update post

Author: flakstad

content/posts/keyboard-first-outlining.md

@@ -6,21 +6,45 @@ params:
 title: "Keyboard-First Outlining"
 ---
 
-For as long as I’ve had to manage projects, I’ve disliked the tools built for the job.
-Notion, Asana, Trello, Jira, ..all powerful, but also bloated, complicated, and designed around the mouse. Basecamp is a nice breath of fresh air with it's relative simplicity and focus on communication, but still falls short of the fluid keyboard-driven workflow I’ve always wanted.
-
-Meanwhile, I kept coming back to my old favorite: Emacs org-mode.
-Org has everything I love: hierarchical outlines, flexible todos, notes, deadlines, and lightning-fast keyboard navigation. The problem is, it’s not built for teams. Nobody else can easily see your progress. You end up either isolated in your org files or forced back into the big, bloated tools.
-
-What I really want is simple: the speed and focus of org-mode combined with the visibility and integration of a web app. None of the existing tools get this balance right, so I’ve started building my own. The long-term vision is a full project management tool shaped by these principles, but the first step is small: an outline component for the web, inspired by org-mode.
+For as long as I’ve had to manage projects, I’ve disliked the tools built for
+the job. Notion, Asana, Trello, Jira, ..all powerful, but also bloated,
+complicated, and designed around the mouse. Basecamp is a nice breath of fresh
+air with it's relative simplicity and focus on communication, but still falls
+short of the fluid keyboard-driven workflow I’ve always wanted.
+
+Meanwhile, I kept coming back to my old favorite: Emacs org-mode. Org has
+everything I love: hierarchical outlines, flexible todos, notes, deadlines, and
+lightning-fast keyboard navigation. The problem is, it’s not built for teams.
+Nobody else can easily see your progress. You end up either isolated in your org
+files or forced back into the big, bloated tools.
+
+What I really want is simple: the speed and focus of org-mode combined with the
+visibility and integration of a web app. None of the existing tools strike this
+balance, so I’ve started building my own. The long-term vision is a complete
+project management tool shaped by these principles, but the first step is
+modest: an outline component for the web, inspired by org-mode.
 
 <!--more-->
 
 Here’s what it looks like:
 
 {{< clarity-outline-simple >}}
 
-The component is designed for keyboard-first interaction. You can fly through your tasks with arrows, use `Alt+arrow` to indent or outdent, and `Alt+Tab` to collapse or expand. Add new items with `Alt+Enter` to quickly expand your outline. Cycle through todo states with `Shift+left/right` arrows. When an item is focused, actions can be done with a single key press: **E** to edit, **S** to change status, **P** to mark priority, **A** to assign, etc. Mouse users aren’t left out: hover actions expose the same controls with shortcut hints. You won’t see rich task descriptions, comment threads or file uploads here; I think those belong on dedicated item pages. This component is the fast, structured backbone you can plug into bigger systems.
+The component is designed for keyboard-first interaction.
+- Move focus through the outline with the arrow keys, or with Emacs
+  (`Ctrl+F/B/N/P`) or Vi (`H/J/K/L`)
+  bindings.
+- Move items around in the structure using the same keys but while holding the `Alt` modifier.
+- Collapse and expand items that have sub-items with `Alt+T`.
+- Add new todos with `Alt+Enter`.
+- Cycle through item status with `Shift+←/→`.
+
+When an item is focused, actions can be done with a single key press: `E` to
+edit, `S` to change status, `P` to mark priority, `A` to assign, etc. Mouse
+users aren’t left out: hover actions expose the same controls with shortcut
+hints.
+
+You won’t see rich task descriptions, comment threads or file uploads here; I think those belong on dedicated item pages. This component is the fast, structured backbone you can plug into bigger systems.
 
 The outline takes JSON as input and emits events for every interaction. My plan is to drive it with [Datastar](https://data-star.dev/) with the server pushing live updates, but it can slot into any context.
 

layouts/shortcodes/clarity-outline-simple.html

@@ -32,6 +32,8 @@
       {"id":"8","text":"Fix the broken lamp","status":"CANCELLED"},
       {"id":"9","text":"Write blog post","status":"IN PROGRESS"}
     ]'
-    options='{"statusLabels": [{"label": "TODO", "isEndState": false}, {"label": "IN PROGRESS", "isEndState": false}, {"label": "DONE", "isEndState": true}, {"label": "CANCELLED", "isEndState": true}]}'>
+    options='{"statusLabels":[{"label": "TODO", "isEndState": false}, {"label": "IN PROGRESS", "isEndState": false}, {"label": "DONE", "isEndState": true}, {"label": "CANCELLED", "isEndState": true}],
+    "assignees": ["Alice", "Bob", "Charlie"],
+  "tags": ["urgent", "bug", "feature"]}'>
   </clarity-outline>
 </div>

public/index.html

@@ -30,11 +30,21 @@ <h1>Andreas Flakstad</h1>
         <article class="post">
           <p class="post-date">Sep 1, 2025</p>
           <h2 class="post-title">Keyboard-First Outlining</h2>
-          <div class="post-summary"><p>For as long as I’ve had to manage projects, I’ve disliked the tools built for the job.
-Notion, Asana, Trello, Jira, ..all powerful, but also bloated, complicated, and designed around the mouse. Basecamp is a nice breath of fresh air with it&rsquo;s relative simplicity and focus on communication, but still falls short of the fluid keyboard-driven workflow I’ve always wanted.</p>
-<p>Meanwhile, I kept coming back to my old favorite: Emacs org-mode.
-Org has everything I love: hierarchical outlines, flexible todos, notes, deadlines, and lightning-fast keyboard navigation. The problem is, it’s not built for teams. Nobody else can easily see your progress. You end up either isolated in your org files or forced back into the big, bloated tools.</p>
-<p>What I really want is simple: the speed and focus of org-mode combined with the visibility and integration of a web app. None of the existing tools get this balance right, so I’ve started building my own. The long-term vision is a full project management tool shaped by these principles, but the first step is small: an outline component for the web, inspired by org-mode.</p></div>
+          <div class="post-summary"><p>For as long as I’ve had to manage projects, I’ve disliked the tools built for
+the job. Notion, Asana, Trello, Jira, ..all powerful, but also bloated,
+complicated, and designed around the mouse. Basecamp is a nice breath of fresh
+air with it&rsquo;s relative simplicity and focus on communication, but still falls
+short of the fluid keyboard-driven workflow I’ve always wanted.</p>
+<p>Meanwhile, I kept coming back to my old favorite: Emacs org-mode. Org has
+everything I love: hierarchical outlines, flexible todos, notes, deadlines, and
+lightning-fast keyboard navigation. The problem is, it’s not built for teams.
+Nobody else can easily see your progress. You end up either isolated in your org
+files or forced back into the big, bloated tools.</p>
+<p>What I really want is simple: the speed and focus of org-mode combined with the
+visibility and integration of a web app. None of the existing tools strike this
+balance, so I’ve started building my own. The long-term vision is a complete
+project management tool shaped by these principles, but the first step is
+modest: an outline component for the web, inspired by org-mode.</p></div>
         </article>
       </a>
 

public/index.xml

@@ -13,7 +13,7 @@
       <link>https://andreasflakstad.no/posts/keyboard-first-outlining/</link>
       <pubDate>Mon, 01 Sep 2025 10:00:00 +0200</pubDate>
       <guid>https://andreasflakstad.no/posts/keyboard-first-outlining/</guid>
-      <description>&lt;p&gt;For as long as I’ve had to manage projects, I’ve disliked the tools built for the job.&#xA;Notion, Asana, Trello, Jira, ..all powerful, but also bloated, complicated, and designed around the mouse. Basecamp is a nice breath of fresh air with it&amp;rsquo;s relative simplicity and focus on communication, but still falls short of the fluid keyboard-driven workflow I’ve always wanted.&lt;/p&gt;&#xA;&lt;p&gt;Meanwhile, I kept coming back to my old favorite: Emacs org-mode.&#xA;Org has everything I love: hierarchical outlines, flexible todos, notes, deadlines, and lightning-fast keyboard navigation. The problem is, it’s not built for teams. Nobody else can easily see your progress. You end up either isolated in your org files or forced back into the big, bloated tools.&lt;/p&gt;&#xA;&lt;p&gt;What I really want is simple: the speed and focus of org-mode combined with the visibility and integration of a web app. None of the existing tools get this balance right, so I’ve started building my own. The long-term vision is a full project management tool shaped by these principles, but the first step is small: an outline component for the web, inspired by org-mode.&lt;/p&gt;</description>
+      <description>&lt;p&gt;For as long as I’ve had to manage projects, I’ve disliked the tools built for&#xA;the job. Notion, Asana, Trello, Jira, ..all powerful, but also bloated,&#xA;complicated, and designed around the mouse. Basecamp is a nice breath of fresh&#xA;air with it&amp;rsquo;s relative simplicity and focus on communication, but still falls&#xA;short of the fluid keyboard-driven workflow I’ve always wanted.&lt;/p&gt;&#xA;&lt;p&gt;Meanwhile, I kept coming back to my old favorite: Emacs org-mode. Org has&#xA;everything I love: hierarchical outlines, flexible todos, notes, deadlines, and&#xA;lightning-fast keyboard navigation. The problem is, it’s not built for teams.&#xA;Nobody else can easily see your progress. You end up either isolated in your org&#xA;files or forced back into the big, bloated tools.&lt;/p&gt;&#xA;&lt;p&gt;What I really want is simple: the speed and focus of org-mode combined with the&#xA;visibility and integration of a web app. None of the existing tools strike this&#xA;balance, so I’ve started building my own. The long-term vision is a complete&#xA;project management tool shaped by these principles, but the first step is&#xA;modest: an outline component for the web, inspired by org-mode.&lt;/p&gt;</description>
     </item>
     <item>
       <title>The Creator’s Oath</title>