Merge pull request #434 from jonpetersathan/develop

Adding support for Nerd Fonts in iframes
asciinema · May 9, 2024 · 68a675e · 68a675e
2 parents 6ef2f46 + 5cbb842
commit 68a675e
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 12 deletions.
diff --git a/assets/css/_base.scss b/assets/css/_base.scss
@@ -1,4 +1,4 @@
-@import "./_source_sans_pro.css";
+@import "./fonts/source_sans_pro.css";
 
 html {
   height: 100%;

diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -18,7 +18,7 @@ $primary: #06989a;
 @import "./_user_profile.scss";
 @import "./_user_login.scss";
 @import "./_user_edit.scss";
-@import "./powerline-symbols.css";
+@import "./fonts/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";

diff --git a/assets/css/powerline-symbols.css → assets/css/fonts/powerline-symbols.css b/assets/css/powerline-symbols.css → assets/css/fonts/powerline-symbols.css
@@ -1,4 +1,4 @@
 @font-face {
   font-family: 'Powerline Symbols';
-  src: local('Powerline Symbols'), local('PowerlineSymbols'), url('../static/fonts/PowerlineSymbols.otf') format('opentype');
+  src: local('Powerline Symbols'), local('PowerlineSymbols'), url('../../static/fonts/PowerlineSymbols.otf') format('opentype');
 }
diff --git a/assets/css/_source_sans_pro.css → assets/css/fonts/source_sans_pro.css b/assets/css/_source_sans_pro.css → assets/css/fonts/source_sans_pro.css
@@ -2,29 +2,29 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 300;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../static/fonts/SourceSansPro-Light.ttf') format('truetype');
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../../static/fonts/SourceSansPro-Light.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('../static/fonts/SourceSansPro-Regular.ttf') format('truetype');
+  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('../../static/fonts/SourceSansPro-Regular.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 600;
-  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('../static/fonts/SourceSansPro-Semibold.ttf') format('truetype');
+  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('../../static/fonts/SourceSansPro-Semibold.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('../static/fonts/SourceSansPro-Bold.ttf') format('truetype');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('../../static/fonts/SourceSansPro-Bold.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: italic;
   font-weight: 400;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('../static/fonts/SourceSansPro-Italic.ttf') format('truetype');
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('../../static/fonts/SourceSansPro-Italic.ttf') format('truetype');
 }
diff --git a/assets/css/iframe.scss b/assets/css/iframe.scss
@@ -1,6 +1,8 @@
-@import "./_source_sans_pro.css";
+@import "./fonts/source_sans_pro.css";
+@import "./fonts/fira-code-nerd-font.css";
+@import "./fonts/jetbrains-mono-nerd-font.css";
 @import "~asciinema-player/dist/bundle/asciinema-player.css";
-@import "./powerline-symbols.css";
+@import "./fonts/powerline-symbols.css";
 
 body.iframe {
   background-color: transparent;

diff --git a/lib/asciinema_web/controllers/recording/iframe.html.heex b/lib/asciinema_web/controllers/recording/iframe.html.heex
@@ -5,10 +5,10 @@
 </p>
 
 <script>
-  window.addEventListener('load', function() {
+  window.addEventListener('load', async function() {
     const opts = <%= safe_json(player_opts(@asciicast, @player_opts)) %>;
 
-    const player = window.createPlayer(
+    const player = await window.createPlayer(
       <%= safe_json(player_src(@asciicast)) %>,
       document.getElementById('player'),
       {