Allow navigating between items with left and right arrow

src/shortcut.rs

@@ -3,5 +3,5 @@ use super::*;
 #[derive(Debug, PartialEq)]
 pub struct Shortcut {
   pub(crate) description: &'static str,
-  pub(crate) key: char,
+  pub(crate) keys: &'static [char],
 }

src/templates/item.rs

@@ -74,7 +74,7 @@ impl Page for ItemHtml {
   fn shortcuts(&self) -> Vec<Shortcut> {
     vec![Shortcut {
       description: "toggle full screen",
-      key: 'f',
+      keys: &['f'],
     }]
   }
 
@@ -531,7 +531,7 @@ mod tests {
       ItemHtml::default().shortcuts(),
       vec![Shortcut {
         description: "toggle full screen",
-        key: 'f',
+        keys: &['f'],
       }],
     );
   }

src/templates/page.rs

@@ -13,29 +13,29 @@ impl<T: Page> PageHtml<T> {
     if self.content.prev().is_some() {
       shortcuts.push(Shortcut {
         description: "go to previous",
-        key: 'p',
+        keys: &['←', 'p'],
       });
     }
 
     if self.content.next().is_some() {
       shortcuts.push(Shortcut {
         description: "go to next",
-        key: 'n',
+        keys: &['→', 'n'],
       });
     }
 
     if self.content.up().is_some() {
       shortcuts.push(Shortcut {
         description: "go up",
-        key: 'u',
+        keys: &['u'],
       });
     }
 
     shortcuts.extend(self.content.shortcuts());
 
     shortcuts.push(Shortcut {
       description: "toggle shortcuts",
-      key: '?',
+      keys: &['?'],
     });
 
     shortcuts
@@ -100,7 +100,7 @@ mod tests {
     fn shortcuts(&self) -> Vec<Shortcut> {
       vec![Shortcut {
         description: "foo",
-        key: 'f',
+        keys: &['f'],
       }]
     }
 
@@ -167,8 +167,8 @@ mod tests {
               </main>
               <div id=shortcuts popover>
                 <dl>
-                  <div><dt><kbd>p</kbd></dt><dd>go to previous</dd></div>
-                  <div><dt><kbd>n</kbd></dt><dd>go to next</dd></div>
+                  <div><dt><kbd>←</kbd> or <kbd>p</kbd></dt><dd>go to previous</dd></div>
+                  <div><dt><kbd>→</kbd> or <kbd>n</kbd></dt><dd>go to next</dd></div>
                   <div><dt><kbd>u</kbd></dt><dd>go up</dd></div>
                   <div><dt><kbd>f</kbd></dt><dd>foo</dd></div>
                   <div><dt><kbd>?</kbd></dt><dd>toggle shortcuts</dd></div>

static/page.css

@@ -48,7 +48,7 @@ body {
   min-height: 100dvh;
 }
 
-code {
+code, kbd {
   font-family: ui-monospace, Menlo, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
 }
 

static/page.js

@@ -17,8 +17,13 @@ document.addEventListener('keydown', (event) => {
     return;
   }
 
-  let link = event.key === 'p' ? prev
-    : event.key === 'n' ? next
+  let arrow = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+  if (arrow && event.target.matches('audio, video, input, textarea, select')) {
+    return;
+  }
+
+  let link = event.key === 'ArrowLeft' || event.key === 'p' ? prev
+    : event.key === 'ArrowRight' || event.key === 'n' ? next
     : event.key === 'u' ? up
     : null;
 

templates/page.html

@@ -51,7 +51,7 @@
     <div id=shortcuts popover>
       <dl>
 %% for shortcut in self.shortcuts() {
-        <div><dt><kbd>{{ shortcut.key }}</kbd></dt><dd>{{ shortcut.description }}</dd></div>
+        <div><dt>{% for (i, key) in shortcut.keys.iter().enumerate() { %}{% if i > 0 { %} or {% } %}<kbd>{{ key }}</kbd>{% } %}</dt><dd>{{ shortcut.description }}</dd></div>
 %% }
       </dl>
     </div>