Use <kbd> for keyboard keys (#351)

* Use <kbd> for keyboard keys

* Show keyboard icon

* Render each key explicitly

* Update lib/livebook_web/live/session_live/shortcuts_component.ex

Co-authored-by: Wojtek Mach <wojtekmach@users.noreply.github.com>

* Add Livebook specific icons to the introductory notebooks

* More updates

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

assets/css/app.css

@@ -11,3 +11,4 @@
 @import "./js_interop.css";
 @import "./tooltips.css";
 @import "./editor.css";
+@import "./notebook.css";

assets/css/notebook.css

@@ -0,0 +1,29 @@
+/*
+  Specific icons used in the built-in notebooks
+
+  Note: we use the ri- prefix to use the existing
+  Remix icon CSS
+*/
+
+.ri-livebook-sections,
+.ri-livebook-runtime,
+.ri-livebook-shortcuts,
+.ri-livebook-save {
+  @apply text-xl align-middle;
+}
+
+.ri-livebook-sections:before {
+  content: "\eade";
+}
+
+.ri-livebook-runtime:before {
+  content: "\ebf0";
+}
+
+.ri-livebook-shortcuts:before {
+  content: "\ee72";
+}
+
+.ri-livebook-save:before {
+  content: "\f0b3";
+}

lib/livebook/notebook/explore/elixir_and_livebook.livemd

@@ -55,10 +55,11 @@ and options.
 ## Autocompletion
 
 Elixir code cells also support autocompletion by
-pressing <kbd>Ctrl</kbd> + <kbd>Spacebar</kbd>. Try it out by
+pressing <kbd>ctrl</kbd> + <kbd>␣</kbd>
+(<kbd>⌘</kbd> + <kbd>␣</kbd> on a Mac). Try it out by
 autocompleting the code below to `System.version()`. First put
 the cursor after the `.` below and
-press <kbd>Ctrl</kbd> + <kbd>Spacebar</kbd>:
+press <kbd>ctrl</kbd>&nbsp;+&nbsp;<kbd>␣</kbd>:
 
 ```elixir
 System.
@@ -68,7 +69,7 @@ You should have seen the editor listing many different options,
 which you can use to find `version`. Executing the code will
 return the Elixir version.
 
-Note you can also press `Tab` to cycle across the completion
+Note you can also press <kbd>tab</kbd> to cycle across the completion
 alternatives.
 
 ## Imports
@@ -129,15 +130,16 @@ runtime. Let's learn how to do that.
 
 Livebook has a concept of **runtime**, which in practice is an Elixir node responsible
 for evaluating your code. You can choose the runtime by clicking the "Runtime" icon
-on the sidebar (or by using the `rs` keyword shortcut).
+(<i class="ri-livebook-runtime"></i>) on the sidebar (or by using the <kbd>s</kbd> <kbd>r</kbd>
+keyboard shortcut).
 
 By default, a new Elixir node is started (similarly to starting `iex`). You
 can click reconnect whenever you want to discard the current node and start
 a new one.
 
-You can also choose to run inside a _Mix_ project (as you would with `iex -S mix`),
-manually _attach_ to an existing distributed node, or run your Elixir notebook
-_embedded_ within the Livebook source itself.
+You can also choose to run inside a *Mix* project (as you would with `iex -S mix`),
+manually *attach* to an existing distributed node, or run your Elixir notebook
+*embedded* within the Livebook source itself.
 
 ## Running tests
 

lib/livebook/notebook/explore/intro_to_livebook.livemd

@@ -43,9 +43,9 @@ as you keep working on it!
 ## Sections
 
 You can leverage so called **sections** to nicely group related cells together.
-Click on the "Book" icon in the sidebar to reveal a list of all sections.
-As you can see, this approach helps to easily jump around the notebook,
-especially once it grows.
+Click on the "Book" icon (<i class="ri-livebook-sections"></i>) in the sidebar
+to reveal a list of all sections. As you can see, this approach helps to easily
+jump around the notebook, especially once it grows.
 
 Let's make use of this section to see how output is captured!
 
@@ -64,8 +64,8 @@ end
 
 By default notebooks are kept in memory, which is fine for interactive hacking,
 but oftentimes you will want to save your work for later. Fortunately, notebooks
-can be persisted by clicking on the "Disk" icon in the bottom-right corner
-and selecting the file location.
+can be persisted by clicking on the "Disk" icon (<i class="ri-livebook-save"></i>)
+in the bottom-right corner and selecting the file location.
 
 Notebooks are stored in **live markdown** format, which is essentially the markdown you know,
 with just a few assumptions on how particular elements are represented. Thanks to this
@@ -74,11 +74,11 @@ You can also easily preview those files, reuse for blog posts, and even edit in
 
 ## Math
 
-Livebook uses $\\TeX$ syntax for math.
-It supports both inline math like $e^{\\pi i} + 1 = 0$, as well as display math:
+Livebook uses $\TeX$ syntax for math.
+It supports both inline math like $e^{\pi i} + 1 = 0$, as well as display math:
 
 $$
-S(x) = \\frac{1}{1 + e^{-x}} = \\frac{e^{x}}{e^{x} + 1}
+S(x) = \frac{1}{1 + e^{-x}} = \frac{e^{x}}{e^{x} + 1}
 $$
 
 You can explore all supported expressions [here](https://katex.org/docs/supported.html).
@@ -88,24 +88,25 @@ You can explore all supported expressions [here](https://katex.org/docs/supporte
 Once you start using notebooks more, it's gonna be beneficial
 to optimise how you move around. Livebook leverages the concept of
 **navigation**/**insert** modes and offers many shortcuts for common operations.
-Make sure to check out the shortcuts by clicking the "Keyboard" icon in
-the sidebar or by typing `?`.
+Make sure to check out the shortcuts by clicking the "Keyboard" icon
+(<i class="ri-livebook-shortcuts"></i>) in the sidebar or
+by pressing <kbd>?</kbd>.
 
 ## Next steps
 
 That's our quick your intro to Livebook! Where to go next?
 
-  * If you are not familiar with Elixir, there is a fast paced
-    introduction to the language in the [Distributed portals
-    with Elixir](/explore/notebooks/distributed-portals-with-elixir)
-    notebook;
+* If you are not familiar with Elixir, there is a fast paced
+  introduction to the language in the [Distributed portals
+  with Elixir](/explore/notebooks/distributed-portals-with-elixir)
+  notebook;
 
-  * Learn how Elixir integrates with Livebook in the
-    [Elixir and Livebook](/explore/notebooks/elixir-and-livebook) notebook;
+* Learn how Elixir integrates with Livebook in the
+  [Elixir and Livebook](/explore/notebooks/elixir-and-livebook) notebook;
 
-  * Finally, remember Livebook is an open source project, so feel free to
-    look into [the repository](https://github.com/elixir-nx/livebook)
-    to contribute, report bugs, suggest features or just skim over the
-    codebase.
+* Finally, remember Livebook is an open source project, so feel free to
+  look into [the repository](https://github.com/elixir-nx/livebook)
+  to contribute, report bugs, suggest features or just skim over the
+  codebase.
 
 Now go ahead and build something cool! 🚢

lib/livebook_web/live/session_live/shortcuts_component.ex

@@ -4,10 +4,11 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
   @shortcuts %{
     insert_mode: [
       %{seq: ["esc"], desc: "Switch back to navigation mode"},
-      %{seq: ["ctrl", "↵"], desc: "Evaluate cell and stay in insert mode"},
+      %{seq: ["ctrl", "↵"], press_all: true, desc: "Evaluate cell and stay in insert mode"},
       %{seq: ["tab"], desc: "Autocomplete expression when applicable"},
       %{
         seq: ["ctrl", "␣"],
+        press_all: true,
         transform_for_mac: false,
         desc: "Show completion list, use twice for details"
       }
@@ -24,18 +25,18 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
       %{seq: ["N"], desc: "Insert Elixir cell above"},
       %{seq: ["M"], desc: "Insert Markdown cell above"},
       %{seq: ["S"], desc: "Add section"},
-      %{seq: ["dd"], desc: "Delete cell"},
-      %{seq: ["ee"], desc: "Evaluate cell"},
-      %{seq: ["es"], desc: "Evaluate section"},
-      %{seq: ["ea"], desc: "Evaluate all stale/new cells"},
-      %{seq: ["ej"], desc: "Evaluate cells below"},
-      %{seq: ["ex"], desc: "Cancel cell evaluation"},
-      %{seq: ["ss"], desc: "Toggle sections panel"},
-      %{seq: ["su"], desc: "Toggle users panel"},
-      %{seq: ["sr"], desc: "Show runtime settings"}
+      %{seq: ["d", "d"], desc: "Delete cell"},
+      %{seq: ["e", "e"], desc: "Evaluate cell"},
+      %{seq: ["e", "s"], desc: "Evaluate section"},
+      %{seq: ["e", "a"], desc: "Evaluate all stale/new cells"},
+      %{seq: ["e", "j"], desc: "Evaluate cells below"},
+      %{seq: ["e", "x"], desc: "Cancel cell evaluation"},
+      %{seq: ["s", "s"], desc: "Toggle sections panel"},
+      %{seq: ["s", "u"], desc: "Toggle users panel"},
+      %{seq: ["s", "r"], desc: "Show runtime settings"}
     ],
     universal: [
-      %{seq: ["ctrl", "s"], desc: "Save notebook"}
+      %{seq: ["ctrl", "s"], press_all: true, desc: "Save notebook"}
     ]
   }
 
@@ -113,17 +114,18 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
         shortcut.seq
       end
 
-    joiner = remix_icon("add-line", class: "text-xl text-gray-600")
+    press_all = Map.get(shortcut, :press_all, false)
 
-    elements =
-      seq
-      |> Enum.map(&render_key/1)
-      |> Enum.intersperse(joiner)
+    joiner =
+      if press_all do
+        remix_icon("add-line", class: "text-xl text-gray-600")
+      end
 
+    elements = Enum.map_intersperse(seq, joiner, &content_tag("kbd", &1))
     assigns = %{elements: elements}
 
     ~L"""
-    <div class="flex space-x-1 items-center">
+    <div class="flex space-x-1 items-center markdown">
       <%= for element <- @elements do %>
         <%= element %>
       <% end %>
@@ -131,13 +133,6 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
     """
   end
 
-  defp render_key(key) do
-    content_tag("span", key,
-      class:
-        "bg-editor text-gray-200 text-sm font-semibold h-8 w-8 flex items-center justify-center rounded-lg inline-flex items-center"
-    )
-  end
-
   defp seq_for_mac(seq) do
     Enum.map(seq, fn
       "ctrl" -> "⌘"