livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-10-12 14:36:20 +08:00
Code Issues Projects Releases Packages Wiki Activity

Use <kbd> for keyboard keys (#351)

Browse source 
* 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>
This commit is contained in:
Wojtek Mach 2021-06-16 13:31:53 +02:00 • committed by GitHub
parent e75ef5f339
commit 8cf8f2697c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 79 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/css/app.css
View file

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

29
assets/css/notebook.css Normal file
View file

@ -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";
}

16
lib/livebook/notebook/explore/elixir_and_livebook.livemd
View file

@ -55,10 +55,11 @@ and options.
## Autocompletion ## Autocompletion
Elixir code cells also support autocompletion by 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 autocompleting the code below to `System.version()`. First put
the cursor after the `.` below and the cursor after the `.` below and
press <kbd>Ctrl</kbd> + <kbd>Spacebar</kbd>: press <kbd>ctrl</kbd>&nbsp;+&nbsp;<kbd>␣</kbd>:
```elixir ```elixir
System. 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 which you can use to find `version`. Executing the code will
return the Elixir version. 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. alternatives.
## Imports ## 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 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 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 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 can click reconnect whenever you want to discard the current node and start
a new one. a new one.
You can also choose to run inside a _Mix_ project (as you would with `iex -S mix`), 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 manually *attach* to an existing distributed node, or run your Elixir notebook
_embedded_ within the Livebook source itself. *embedded* within the Livebook source itself.
## Running tests ## Running tests

41
lib/livebook/notebook/explore/intro_to_livebook.livemd
View file

@ -43,9 +43,9 @@ as you keep working on it!
## Sections ## Sections
You can leverage so called **sections** to nicely group related cells together. 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. Click on the "Book" icon (<i class="ri-livebook-sections"></i>) in the sidebar
As you can see, this approach helps to easily jump around the notebook, to reveal a list of all sections. As you can see, this approach helps to easily
especially once it grows. jump around the notebook, especially once it grows.
Let's make use of this section to see how output is captured! 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, 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 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 can be persisted by clicking on the "Disk" icon (<i class="ri-livebook-save"></i>)
and selecting the file location. in the bottom-right corner and selecting the file location.
Notebooks are stored in **live markdown** format, which is essentially the markdown you know, 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 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 ## Math
Livebook uses $\\TeX$ syntax for math. Livebook uses $\TeX$ syntax for math.
It supports both inline math like $e^{\\pi i} + 1 = 0$, as well as display 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). 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 Once you start using notebooks more, it's gonna be beneficial
to optimise how you move around. Livebook leverages the concept of to optimise how you move around. Livebook leverages the concept of
**navigation**/**insert** modes and offers many shortcuts for common operations. **navigation**/**insert** modes and offers many shortcuts for common operations.
Make sure to check out the shortcuts by clicking the "Keyboard" icon in Make sure to check out the shortcuts by clicking the "Keyboard" icon
the sidebar or by typing `?`. (<i class="ri-livebook-shortcuts"></i>) in the sidebar or
by pressing <kbd>?</kbd>.
## Next steps ## Next steps
That's our quick your intro to Livebook! Where to go next? That's our quick your intro to Livebook! Where to go next?
* If you are not familiar with Elixir, there is a fast paced * If you are not familiar with Elixir, there is a fast paced
introduction to the language in the [Distributed portals introduction to the language in the [Distributed portals
with Elixir](/explore/notebooks/distributed-portals-with-elixir) with Elixir](/explore/notebooks/distributed-portals-with-elixir)
notebook; notebook;
* Learn how Elixir integrates with Livebook in the * Learn how Elixir integrates with Livebook in the
[Elixir and Livebook](/explore/notebooks/elixir-and-livebook) notebook; [Elixir and Livebook](/explore/notebooks/elixir-and-livebook) notebook;
* Finally, remember Livebook is an open source project, so feel free to * Finally, remember Livebook is an open source project, so feel free to
look into [the repository](https://github.com/elixir-nx/livebook) look into [the repository](https://github.com/elixir-nx/livebook)
to contribute, report bugs, suggest features or just skim over the to contribute, report bugs, suggest features or just skim over the
codebase. codebase.
Now go ahead and build something cool! 🚢 Now go ahead and build something cool! 🚢

43
lib/livebook_web/live/session_live/shortcuts_component.ex
View file

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