feat: add non-optional drop-shadow

README.md

@@ -120,7 +120,7 @@ This should result in general support for emoji's and `nerd font` icons.
 
 - [ ] add unit tests
 - [x] add support for nerd-fonts
-- [ ] add optional shadow
+- [x] add ~~optional~~ shadow
 - [ ] add more themes
 
 

assets/demo.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 323 123.19999999999999" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 323 123.19999999999999" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-601689729-r1 { fill: #c6d0f5 }
 .terminal-601689729-r2 { fill: #c6d0f5;font-weight: bold;font-style: italic; }
 .terminal-601689729-r3 { fill: #94e2d5 }

assets/logo.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 580 220.79999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 580 220.79999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-470432081-r1 { fill: #06dc9d }
 .terminal-470432081-r2 { fill: #0de988 }
 .terminal-470432081-r3 { fill: #18f373 }

assets/themes/cat-frappe.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-337599305-r1 { fill: #c6ceef;font-style: italic; }
 .terminal-337599305-r2 { fill: #c6ceef }
 .terminal-337599305-r3 { fill: #f38ba8;font-weight: bold }

assets/themes/cat-latte.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-3090832101-r1 { fill: #4c4f69;font-style: italic; }
 .terminal-3090832101-r2 { fill: #4c4f69 }
 .terminal-3090832101-r3 { fill: #f38ba8;font-weight: bold }

assets/themes/cat-macchiato.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-699554932-r1 { fill: #c5cff5;font-style: italic; }
 .terminal-699554932-r2 { fill: #c5cff5 }
 .terminal-699554932-r3 { fill: #f38ba8;font-weight: bold }

assets/themes/cat-mocha.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-3081394899-r1 { fill: #c6d0f5;font-style: italic; }
 .terminal-3081394899-r2 { fill: #c6d0f5 }
 .terminal-3081394899-r3 { fill: #f38ba8;font-weight: bold }

assets/themes/dimmed_monokai.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-2354076963-r1 { fill: #b9bcba;font-style: italic; }
 .terminal-2354076963-r2 { fill: #b9bcba }
 .terminal-2354076963-r3 { fill: #be3f48;font-weight: bold }

assets/themes/dracula.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-60971586-r1 { fill: #f8f8f2;font-style: italic; }
 .terminal-60971586-r2 { fill: #f8f8f2 }
 .terminal-60971586-r3 { fill: #ff5555;font-weight: bold }

assets/themes/gruvbox-dark.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-3504430146-r1 { fill: #d5c4a1;font-style: italic; }
 .terminal-3504430146-r2 { fill: #d5c4a1 }
 .terminal-3504430146-r3 { fill: #fb4934;font-weight: bold }

assets/themes/gruvbox-light.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-786586808-r1 { fill: #504945;font-style: italic; }
 .terminal-786586808-r2 { fill: #504945 }
 .terminal-786586808-r3 { fill: #9d0006;font-weight: bold }

assets/themes/monokai.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-76700244-r1 { fill: #d9d9d9;font-style: italic; }
 .terminal-76700244-r2 { fill: #d9d9d9 }
 .terminal-76700244-r3 { fill: #f4005f;font-weight: bold }

assets/themes/night-owlish.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-3489946691-r1 { fill: #403f53;font-style: italic; }
 .terminal-3489946691-r2 { fill: #403f53 }
 .terminal-3489946691-r3 { fill: #d3423e;font-weight: bold }

assets/themes/nord.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-4100741401-r1 { fill: #d8dee9;font-style: italic; }
 .terminal-4100741401-r2 { fill: #d8dee9 }
 .terminal-4100741401-r3 { fill: #bf616a;font-weight: bold }

assets/themes/rich-default.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 1482 1465.1999999999998" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-3451345950-r1 { fill: #c5c8c6;font-style: italic; }
 .terminal-3451345950-r2 { fill: #c5c8c6 }
 .terminal-3451345950-r3 { fill: #cc555a;font-weight: bold }

assets/yartsu.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 909 513.5999999999999" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 909 513.5999999999999" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {
@@ -26,6 +26,10 @@
         font-weight: bold;
         font-family: arial;
     }
+    .shadow {
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }
     .terminal-3015887605-r1 { fill: #94e2d5;font-weight: bold;font-style: italic; }
 .terminal-3015887605-r2 { fill: #c6d0f5 }
 .terminal-3015887605-r3 { fill: #8288a5 }

docs/rich-diff.md

@@ -11,8 +11,9 @@
 ```diff
 --- 
 +++ 
-@@ -1,47 +1,39 @@
+@@ -1,47 +1,43 @@
- <svg class="rich-terminal" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
+-<svg class="rich-terminal" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
++<svg class="rich-terminal shadow" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
      <!-- Generated with Rich https://www.textualize.io -->
      <style>
 -
@@ -48,6 +49,10 @@
          font-family: arial;
      }}
 -
++    .shadow {{
++        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
++        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
++    }}
      {styles}
      </style>
 -

yartsu/_export_format.py

@@ -1,5 +1,5 @@
 CONSOLE_SVG_FORMAT = """\
-<svg class="rich-terminal" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal shadow" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
     @font-face {{
@@ -27,6 +27,10 @@ CONSOLE_SVG_FORMAT = """\
         font-weight: bold;
         font-family: arial;
     }}
+    .shadow {{
+        -webkit-filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+        filter: drop-shadow( 5px 10px 15px rgba(0, 0, 0, .7));
+    }}
     {styles}
     </style>
     <defs>