diff --git a/assets/css/app.scss b/assets/css/app.scss index 681e9edca..b6a9f4d62 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -18,6 +18,8 @@ $primary: #06989a; @import "./_user_login.scss"; @import "./_user_edit.scss"; @import "./powerline-symbols.css"; +@import "./fonts/fira-code-nerd-font.css"; +@import "./fonts/jetbrains-mono-nerd-font.css"; @import "~asciinema-player/dist/bundle/asciinema-player.css"; .c-asciicast.a-index { diff --git a/assets/css/fonts/fira-code-nerd-font.css b/assets/css/fonts/fira-code-nerd-font.css new file mode 100644 index 000000000..78e544b0a --- /dev/null +++ b/assets/css/fonts/fira-code-nerd-font.css @@ -0,0 +1,19 @@ +@font-face { + font-family: "FiraCode Nerd Font"; + src: local(Fira Code Regular Nerd Font Complete Mono), + local(Fira Code Regular Nerd Font Complete), + url("../../static/fonts/Fira Code Regular Nerd Font Complete Mono.ttf") format("truetype"); + font-stretch: normal; + font-style: normal; + font-weight: 400; +} + +@font-face { + font-family: "FiraCode Nerd Font"; + src: local(Fira Code Bold Nerd Font Complete Mono), + local(Fira Code Bold Nerd Font Complete), + url("../../static/fonts/Fira Code Bold Nerd Font Complete Mono.ttf") format("truetype"); + font-stretch: normal; + font-style: normal; + font-weight: 700; +} diff --git a/assets/css/fonts/jetbrains-mono-nerd-font.css b/assets/css/fonts/jetbrains-mono-nerd-font.css new file mode 100644 index 000000000..3beb4366e --- /dev/null +++ b/assets/css/fonts/jetbrains-mono-nerd-font.css @@ -0,0 +1,39 @@ +@font-face { + font-family: "JetBrainsMono Nerd Font"; + src: local(JetBrains Mono Regular Nerd Font Complete Mono), + local(JetBrains Mono Regular Nerd Font Complete), + url("../../static/fonts/JetBrains Mono Regular Nerd Font Complete Mono.ttf") format("truetype"); + font-stretch: normal; + font-style: normal; + font-weight: 400; +} + +@font-face { + font-family: "JetBrainsMono Nerd Font"; + src: local(JetBrains Mono Bold Nerd Font Complete Mono), + local(JetBrains Mono Bold Nerd Font Complete), + url("../../static/fonts/JetBrains Mono Bold Nerd Font Complete Mono.ttf") format("truetype"); + font-stretch: normal; + font-style: normal; + font-weight: 700; +} + +@font-face { + font-family: "JetBrainsMono Nerd Font"; + src: local(JetBrains Mono Italic Nerd Font Complete Mono), + local(JetBrains Mono Italic Nerd Font Complete), + url("../../static/fonts/JetBrains Mono Italic Nerd Font Complete Mono.ttf") format("truetype"); + font-stretch: normal; + font-style: italic; + font-weight: 400; +} + +@font-face { + font-family: "JetBrainsMono Nerd Font"; + src: local(JetBrains Mono Bold Italic Nerd Font Complete Mono), + local(JetBrains Mono Bold Italic Nerd Font Complete), + url("../../static/fonts/JetBrains Mono Bold Italic Nerd Font Complete Mono.ttf") format("truetype"); + font-stretch: normal; + font-style: italic; + font-weight: 700; +} diff --git a/assets/js/app.js b/assets/js/app.js index 4ca388b9e..fd46c1881 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -7,6 +7,22 @@ import { create } from 'asciinema-player'; window.createPlayer = create; +function createPlayer(src, container, opts) { + if (opts.customTerminalFontFamily) { + opts.terminalFontFamily = `${opts.customTerminalFontFamily},Consolas,Menlo,'Bitstream Vera Sans Mono',monospace,'Powerline Symbols'`; + + document.fonts.load(`1em ${opts.customTerminalFontFamily}`).then(() => { + console.log(`loaded font ${opts.customTerminalFontFamily}`); + create(src, container, opts); + }).catch(error => { + console.log(`failed to load font ${opts.customTerminalFontFamily}`, error); + create(src, container, opts); + }); + } else { + create(src, container, opts); + } +} + $(function() { $('input[data-behavior=focus]:first').focus().select(); $('[data-toggle="popover"]').popover({ html: true }); @@ -22,6 +38,6 @@ $(function() { const players = window.players || new Map(); for (const [id, props] of players) { - create(props.src, document.getElementById(id), props); + createPlayer(props.src, document.getElementById(id), { ...props, logger: console }); }; }); diff --git a/assets/static/fonts/Fira Code Bold Nerd Font Complete Mono.ttf b/assets/static/fonts/Fira Code Bold Nerd Font Complete Mono.ttf new file mode 100644 index 000000000..c9d989107 Binary files /dev/null and b/assets/static/fonts/Fira Code Bold Nerd Font Complete Mono.ttf differ diff --git a/assets/static/fonts/Fira Code Regular Nerd Font Complete Mono.ttf b/assets/static/fonts/Fira Code Regular Nerd Font Complete Mono.ttf new file mode 100644 index 000000000..e7d8304f3 Binary files /dev/null and b/assets/static/fonts/Fira Code Regular Nerd Font Complete Mono.ttf differ diff --git a/assets/static/fonts/JetBrains Mono Bold Italic Nerd Font Complete Mono.ttf b/assets/static/fonts/JetBrains Mono Bold Italic Nerd Font Complete Mono.ttf new file mode 100644 index 000000000..4f5851286 Binary files /dev/null and b/assets/static/fonts/JetBrains Mono Bold Italic Nerd Font Complete Mono.ttf differ diff --git a/assets/static/fonts/JetBrains Mono Bold Nerd Font Complete Mono.ttf b/assets/static/fonts/JetBrains Mono Bold Nerd Font Complete Mono.ttf new file mode 100644 index 000000000..be4ff50f1 Binary files /dev/null and b/assets/static/fonts/JetBrains Mono Bold Nerd Font Complete Mono.ttf differ diff --git a/assets/static/fonts/JetBrains Mono Italic Nerd Font Complete Mono.ttf b/assets/static/fonts/JetBrains Mono Italic Nerd Font Complete Mono.ttf new file mode 100644 index 000000000..742257f8f Binary files /dev/null and b/assets/static/fonts/JetBrains Mono Italic Nerd Font Complete Mono.ttf differ diff --git a/assets/static/fonts/JetBrains Mono Regular Nerd Font Complete Mono.ttf b/assets/static/fonts/JetBrains Mono Regular Nerd Font Complete Mono.ttf new file mode 100644 index 000000000..fba326cfe Binary files /dev/null and b/assets/static/fonts/JetBrains Mono Regular Nerd Font Complete Mono.ttf differ diff --git a/lib/asciinema/asciicasts/asciicast.ex b/lib/asciinema/asciicasts/asciicast.ex index 2ef86dc1d..b04e434b8 100644 --- a/lib/asciinema/asciicasts/asciicast.ex +++ b/lib/asciinema/asciicasts/asciicast.ex @@ -38,6 +38,8 @@ defmodule Asciinema.Asciicasts.Asciicast do field :views_count, :integer, default: 0 field :archivable, :boolean, default: true field :archived_at, :utc_datetime_usec + field :terminal_line_height, :float + field :terminal_font_family, :string timestamps() @@ -88,13 +90,26 @@ defmodule Asciinema.Asciicasts.Asciicast do |> generate_secret_token end - def update_changeset(struct, attrs) do + def update_changeset(struct, attrs, custom_terminal_font_families \\ []) do struct |> changeset(attrs) - |> cast(attrs, [:description, :cols_override, :rows_override, :theme_name, :idle_time_limit]) + |> cast(attrs, [ + :description, + :cols_override, + :rows_override, + :theme_name, + :idle_time_limit, + :terminal_line_height, + :terminal_font_family + ]) |> validate_number(:cols_override, greater_than: 0, less_than: 1024) |> validate_number(:rows_override, greater_than: 0, less_than: 512) |> validate_number(:idle_time_limit, greater_than_or_equal_to: 0.5) + |> validate_number(:terminal_line_height, + greater_than_or_equal_to: 1.0, + less_than_or_equal_to: 2.0 + ) + |> validate_inclusion(:terminal_font_family, custom_terminal_font_families) |> validate_number(:snapshot_at, greater_than: 0) end diff --git a/lib/asciinema/asciicasts/asciicasts.ex b/lib/asciinema/asciicasts/asciicasts.ex index 728f94815..616dfba3d 100644 --- a/lib/asciinema/asciicasts/asciicasts.ex +++ b/lib/asciinema/asciicasts/asciicasts.ex @@ -5,6 +5,11 @@ defmodule Asciinema.Asciicasts do alias Asciinema.Asciicasts.{Asciicast, SnapshotUpdater} alias Ecto.Changeset + @custom_terminal_font_families [ + "FiraCode Nerd Font", + "JetBrainsMono Nerd Font" + ] + def fetch_asciicast(id) do case get_asciicast(id) do nil -> {:error, :not_found} @@ -442,7 +447,7 @@ defmodule Asciinema.Asciicasts do end def update_asciicast(asciicast, attrs \\ %{}) do - changeset = Asciicast.update_changeset(asciicast, attrs) + changeset = Asciicast.update_changeset(asciicast, attrs, @custom_terminal_font_families) with {:ok, asciicast} <- Repo.update(changeset) do if stale_snapshot?(changeset) do @@ -664,4 +669,6 @@ defmodule Asciinema.Asciicasts do q = from(a in Asciicast, where: a.user_id == ^src_user_id) Repo.update_all(q, set: [user_id: dst_user_id, updated_at: Timex.now()]) end + + def custom_terminal_font_families, do: @custom_terminal_font_families end diff --git a/lib/asciinema_web/templates/asciicast/edit.html.eex b/lib/asciinema_web/templates/asciicast/edit.html.eex index cc14e160f..88bfff1ca 100644 --- a/lib/asciinema_web/templates/asciicast/edit.html.eex +++ b/lib/asciinema_web/templates/asciicast/edit.html.eex @@ -45,12 +45,29 @@ +
+ <%= label f, :terminal_line_height, "Terminal line height", class: "col-sm-4 col-md-3 col-lg-3 col-form-label" %> +
+ <%= text_input f, :terminal_line_height, class: "form-control", type: "number", min: 1, max: 2, step: "any", placeholder: "1.33333" %> + <%= error_tag f, :terminal_line_height %> + Relative to font size. Lowering it ~1.1 helps with alignment of block characters like ▀ ▄ █ +
+
+ +
+ <%= label f, :terminal_font_family, "Terminal font family", class: "col-sm-4 col-md-3 col-lg-3 col-form-label" %> +
+ <%= select f, :terminal_font_family, terminal_font_family_options(), class: "form-control", prompt: "Default (web safe, platform specific)" %> + Choose one of Nerd Font variants if icons or other symbols in your recording are not visible. +
+
+
<%= label f, :snapshot_at, "Thumbnail frame", class: "col-sm-4 col-md-3 col-lg-3 col-form-label" %>
<%= text_input f, :snapshot_at, class: "form-control", type: "number", min: 0, step: "0.1" %> <%= error_tag f, :snapshot_at %> - Time of the frame to be displayed as snapshot/poster (float, in seconds, for example: 10.5) + Time of the frame to be displayed as snapshot/poster. For example: 10.5
diff --git a/lib/asciinema_web/views/asciicast_view.ex b/lib/asciinema_web/views/asciicast_view.ex index 885cc4a5b..053e5b9b4 100644 --- a/lib/asciinema_web/views/asciicast_view.ex +++ b/lib/asciinema_web/views/asciicast_view.ex @@ -1,6 +1,7 @@ defmodule AsciinemaWeb.AsciicastView do use AsciinemaWeb, :view import Scrivener.HTML + alias Asciinema.Asciicasts alias AsciinemaWeb.Endpoint alias AsciinemaWeb.Router.Helpers.Extra, as: RoutesX alias AsciinemaWeb.UserView @@ -38,6 +39,8 @@ defmodule AsciinemaWeb.AsciicastView do cols: cols(asciicast), rows: rows(asciicast), theme: theme_name(asciicast), + terminalLineHeight: asciicast.terminal_line_height, + customTerminalFontFamily: asciicast.terminal_font_family, poster: poster(asciicast.snapshot), idleTimeLimit: asciicast.idle_time_limit, title: title(asciicast), @@ -566,7 +569,16 @@ defmodule AsciinemaWeb.AsciicastView do end def asciicast_gc_days do - Asciinema.Asciicasts.gc_days() + Asciicasts.gc_days() + end + + def terminal_font_family_options do + for family <- Asciicasts.custom_terminal_font_families() do + case family do + "FiraCode Nerd Font" -> {"Nerd Font - Fira Code", family} + "JetBrainsMono Nerd Font" -> {"Nerd Font - JetBrains Mono", family} + end + end end defp cols(asciicast), do: asciicast.cols_override || asciicast.cols diff --git a/priv/repo/migrations/20230402201325_add_terminal_line_height_to_asciicasts.exs b/priv/repo/migrations/20230402201325_add_terminal_line_height_to_asciicasts.exs new file mode 100644 index 000000000..9f8051721 --- /dev/null +++ b/priv/repo/migrations/20230402201325_add_terminal_line_height_to_asciicasts.exs @@ -0,0 +1,9 @@ +defmodule Asciinema.Repo.Migrations.AddTerminalLineHeightToAsciicasts do + use Ecto.Migration + + def change do + alter table(:asciicasts) do + add :terminal_line_height, :float + end + end +end diff --git a/priv/repo/migrations/20230403182405_add_terminal_font_family_to_asciicasts.exs b/priv/repo/migrations/20230403182405_add_terminal_font_family_to_asciicasts.exs new file mode 100644 index 000000000..7108d635f --- /dev/null +++ b/priv/repo/migrations/20230403182405_add_terminal_font_family_to_asciicasts.exs @@ -0,0 +1,9 @@ +defmodule Asciinema.Repo.Migrations.AddTerminalFontFamilyToAsciicasts do + use Ecto.Migration + + def change do + alter table(:asciicasts) do + add :terminal_font_family, :string + end + end +end