feat: Keyboard shortcut (#331)

Close #327

- [jaywcjlove/hotkeys: ➷ A robust Javascript library for capturing keyboard input. It has no dependencies.](https://github.com/jaywcjlove/hotkeys)
- [Modal | Bulma: Free, open source, and modern CSS framework based on Flexbox](https://bulma.io/documentation/components/modal/)

2 files changed, 90 insertions, 6 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 9c004987..e3bbf905 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -25,12 +25,13 @@
         </div>
       </section>
       {{ partial "footer" . }}
-    {{ end }}
-    {{ if $.Params.math }}
-      {{ partialCached "mathjax" . }}
-    {{ end }}
-    {{ if .HasShortcode "mermaid" }}
-      {{ partialCached "mermaid" . }}
+      {{ if $.Params.math }}
+        {{ partialCached "mathjax" . }}
+      {{ end }}
+      {{ if .HasShortcode "mermaid" }}
+        {{ partialCached "mermaid" . }}
+      {{ end }}
+      {{ partialCached "keyboard-shortcut" . }}
     {{ end }}
   </body>
 </html>
diff --git a/layouts/partials/keyboard-shortcut.html b/layouts/partials/keyboard-shortcut.html
new file mode 100644
index 00000000..14ab0f7f
--- /dev/null
+++ b/layouts/partials/keyboard-shortcut.html
@@ -0,0 +1,83 @@
+<!-- https://github.com/jaywcjlove/hotkeys -->
+
+<div class="modal" id="keyboard-shortcut-help-modal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head has-background-grey-darker">
+      <p class="modal-card-title has-text-light">Keyboard Shortcuts</p>
+      <button class="delete" aria-label="close" onclick="toggleActive(keyboardShortcutHelpModal);"></button>
+    </header>
+    <section class="modal-card-body has-background-grey-dark has-text-grey-light">
+      <table class="table is-striped is-hoverable">
+        <thead>
+          <tr>
+            <th>Command</th>
+            <th>Function</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th class="has-text-grey-light">? (Shift+/)</th>
+            <td>Bring up this help modal</td>
+          </tr>
+          <tr>
+            <th class="has-text-grey-light">g+h</th>
+            <td>Go to Home</td>
+          </tr>
+          <tr>
+            <th class="has-text-grey-light">g+p</th>
+            <td>Go to Posts</td>
+          </tr>
+          <tr>
+            <th class="has-text-grey-light">g+e</th>
+            <td>Open Editor page on GitHub in a new tab</td>
+          </tr>
+          <tr>
+            <th class="has-text-grey-light">g+s</th>
+            <td>Open Source page on GitHub in a new tab</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <footer class="modal-card-foot has-background-grey-darker has-text-grey">
+      Press ? (Shift+/) to close this help modal.
+    </footer>
+  </div>
+</div>
+
+{{ $js := resources.Get "mod/hotkeys/hotkeys.min.js" }}
+{{ $secureJS := $js | resources.Fingerprint "sha512" }}
+<script src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
+<script>
+  var keyboardShortcutHelpModal = document.getElementById("keyboard-shortcut-help-modal");
+
+  function toggleActive(obj) {
+    obj.classList.toggle("is-active");
+  }
+
+  hotkeys('shift+/, g+h, g+p, g+e, g+s', function (event, handler){
+    switch (handler.key) {
+      case 'shift+/':
+        toggleActive(keyboardShortcutHelpModal);
+        break;
+      case 'g+h':
+        window.location.href = '{{ relLangURL "/" }}';
+        break;
+      case 'g+p':
+        window.location.href = '{{ relLangURL "/posts" }}';
+        break;
+      {{ with $.Site.Params.repo }}
+      case 'g+e':
+        window.open('{{ .URL }}/edit/{{ .branch }}/{{ .contentDir }}/{{ $.Lang }}/{{ $.File.Path }}', '_blank');
+        break;
+      {{ end }}
+      {{ with $.Site.Params.repo }}
+      case 'g+s':
+        window.open('{{ .URL }}/blob/{{ .branch }}/{{ .contentDir }}/{{ $.Lang }}/{{ $.File.Path }}', '_blank');
+        break;
+      {{ end }}
+      default:
+        break;
+    }
+  });
+</script>