Move shortcuts link to top nav bar

justfile

@@ -18,7 +18,7 @@ build:
   cargo lbuild
 
 serve: build
-  ./target/debug/filepack serve --address localhost --http-port 8000
+  ./target/debug/filepack --unstable serve --address localhost --http-port 8000
 
 open:
   open http://localhost:8000

src/templates/item.rs

@@ -364,7 +364,6 @@ mod tests {
                 </a>
               </p>
             </hgroup>
-            <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
           </footer>
         "
       ),
@@ -402,7 +401,6 @@ mod tests {
                 </a>
               </p>
             </hgroup>
-            <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
           </footer>
         "
       ),
@@ -430,7 +428,6 @@ mod tests {
                 </a>
               </p>
             </hgroup>
-            <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
           </footer>
         "
       ),
@@ -465,7 +462,6 @@ mod tests {
                 </a>
               </p>
             </hgroup>
-            <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
           </footer>
         "
       ),
@@ -493,7 +489,6 @@ mod tests {
                 </a>
               </p>
             </hgroup>
-            <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
           </footer>
         "
       ),
@@ -524,7 +519,6 @@ mod tests {
                 </a>
               </p>
             </hgroup>
-            <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
           </footer>
         "
       )),

src/templates/page.rs

@@ -33,12 +33,10 @@ impl<T: Page> PageHtml<T> {
 
     shortcuts.extend(self.content.shortcuts());
 
-    if !shortcuts.is_empty() {
-      shortcuts.push(Shortcut {
-        description: "toggle shortcuts",
-        key: '?',
-      });
-    }
+    shortcuts.push(Shortcut {
+      description: "toggle shortcuts",
+      key: '?',
+    });
 
     shortcuts
   }
@@ -161,6 +159,7 @@ mod tests {
                   <a href=/packages>Packages</a>
                   <a href=https://filepack.com/book>Book</a>
                   <a href=https://github.com/casey/filepack>GitHub</a>
+                  <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
                 </nav>
               </header>
               <main>
@@ -213,11 +212,17 @@ mod tests {
                   <a href=/packages>Packages</a>
                   <a href=https://filepack.com/book>Book</a>
                   <a href=https://github.com/casey/filepack>GitHub</a>
+                  <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
                 </nav>
               </header>
               <main>
                 foo
               </main>
+              <div id=shortcuts popover>
+                <dl>
+                  <div><dt><kbd>?</kbd></dt><dd>toggle shortcuts</dd></div>
+                </dl>
+              </div>
             </body>
           </html>
         "
@@ -248,11 +253,17 @@ mod tests {
                   <a href=/packages>Packages</a>
                   <a href=https://filepack.com/book>Book</a>
                   <a href=https://github.com/casey/filepack>GitHub</a>
+                  <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
                 </nav>
               </header>
               <main>
                 foo
               </main>
+              <div id=shortcuts popover>
+                <dl>
+                  <div><dt><kbd>?</kbd></dt><dd>toggle shortcuts</dd></div>
+                </dl>
+              </div>
             </body>
           </html>
         "
@@ -286,11 +297,17 @@ mod tests {
                   <a href=/packages>Packages</a>
                   <a href=https://filepack.com/book>Book</a>
                   <a href=https://github.com/casey/filepack>GitHub</a>
+                  <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
                 </nav>
               </header>
               <main>
                 bar
               </main>
+              <div id=shortcuts popover>
+                <dl>
+                  <div><dt><kbd>?</kbd></dt><dd>toggle shortcuts</dd></div>
+                </dl>
+              </div>
             </body>
           </html>
         "

static/item.css

@@ -69,22 +69,6 @@ footer {
       }
     }
   }
-
-  button {
-    background-color: transparent;
-    border: 1px solid var(--border);
-    border-radius: 50%;
-    color: var(--muted);
-    cursor: pointer;
-    font: inherit;
-    height: 1.75em;
-    padding: 0;
-    width: 1.75em;
-
-    &:hover {
-      color: var(--text);
-    }
-  }
 }
 
 audio {

static/page.css

@@ -218,9 +218,28 @@ body > header > nav {
     color: var(--text);
   }
 
-  a:last-child {
+  a:last-of-type {
     margin-inline-start: auto;
   }
+
+  button {
+    align-self: center;
+    background-color: transparent;
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    color: var(--muted);
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.7em;
+    height: 1.5em;
+    padding: 0;
+    transition: color var(--duration);
+    width: 1.5em;
+
+    &:hover {
+      color: var(--text);
+    }
+  }
 }
 
 [popover] {

static/page.js

@@ -12,7 +12,7 @@ document.addEventListener('keydown', (event) => {
     return;
   }
 
-  if (event.key === '?' && shortcuts !== null) {
+  if (event.key === '?') {
     shortcuts.togglePopover();
     return;
   }

templates/item.html

@@ -36,5 +36,4 @@ <h1>{{ self.item().display_title(self.index) }}</h1>
       </a>
     </p>
   </hgroup>
-  <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
 </footer>

templates/page.html

@@ -42,20 +42,18 @@
         <a href=/packages>Packages</a>
         <a href=https://filepack.com/book>Book</a>
         <a href=https://github.com/casey/filepack>GitHub</a>
+        <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
       </nav>
     </header>
     <main>
       {{ Trusted(&self.content) }}
     </main>
-%% let shortcuts = self.shortcuts();
-%% if !shortcuts.is_empty() {
     <div id=shortcuts popover>
       <dl>
-%%   for shortcut in shortcuts {
+%% for shortcut in self.shortcuts() {
         <div><dt><kbd>{{ shortcut.key }}</kbd></dt><dd>{{ shortcut.description }}</dd></div>
-%%   }
+%% }
       </dl>
     </div>
-%% }
   </body>
 </html>