Images: added examples for HEEx, Surface and LiveView.

azizk · princemaple · commit 4951e45fb1bb · 2021-09-19T07:41:18.000+10:00
diff --git a/images/elixir_heex_example.svg b/images/elixir_heex_example.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 260 20">
+<style type="text/css"><![CDATA[
+  div { padding:0.1em;font-family:monospace;font-size:16px;white-space:pre;color:#eee!important;background-color:#282923;border-radius:4px; }
+  .fnc { color:#67d8ef }
+  .mod { color:#70a800 }
+  .kw { color:#f92472 }
+  .intp_bg { background-color: rgba(0, 0, 0, 0.03) }
+  .intp_dlm { color:#ababab }
+  .sigil { color:#67d8ef; }
+  .str_dlm { color:#dbca33 }
+  .str { color:#e7db74 }
+  .prpl { color:#ac80ff }
+  .akw { color:#8a66cc }
+  .colon { color:#aeafad }
+  .entity { color:#a6e22c }
+  .param { color:#fd9621 }
+]]>
+</style>
+<foreignObject width="100%" height="100%">
+<div xmlns="http://www.w3.org/1999/xhtml"><span class="sigil">~H</span><span class="str_dlm">"</span>&lt;.<span class="fnc">form</span>>&lt;<span class="kw">%=</span> <span class="kw">@</span><span class="prpl">input</span> <span class="kw">%</span>>&lt;/.<span class="fnc">form</span>><span class="str_dlm">"</span>
+</div>
+</foreignObject>
+</svg>
diff --git a/images/elixir_json_example.svg b/images/elixir_json_example.svg
@@ -7,6 +7,7 @@
   .kw { color:#f92472 }
   .intp_bg { background-color: rgba(0, 0, 0, 0.03) }
   .intp_dlm { color:#ababab }
+  .sigil { color:#67d8ef; }
   .str_dlm { color:#dbca33 }
   .str { color:#e7db74 }
   .prpl { color:#ac80ff }
@@ -17,7 +18,7 @@
 ]]>
 </style>
 <foreignObject width="100%" height="100%">
-<div xmlns="http://www.w3.org/1999/xhtml"><span class="blu_i">~j</span><span class="str_dlm">"""</span>
+<div xmlns="http://www.w3.org/1999/xhtml"><span class="sigil">~j</span><span class="str_dlm">"""</span>
 {
   <span class="str_dlm">"</span><span class="str">key</span><span class="str_dlm">"</span>: <span class="str_dlm">"</span><span class="intp_dlm">#{</span><span class="intp_bg">value</span><span class="intp_dlm">}</span><span class="str_dlm">"</span>,
   <span class="str_dlm">"</span><span class="intp_dlm">#{</span><span class="intp_bg">key</span><span class="intp_dlm">}</span><span class="str_dlm">"</span>: <span class="str_dlm">"</span><span class="str">value</span><span class="str_dlm">"</span>
diff --git a/images/elixir_liveview_example.svg b/images/elixir_liveview_example.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 230 20">
+<style type="text/css"><![CDATA[
+  div { padding:0.1em;font-family:monospace;font-size:16px;white-space:pre;color:#eee!important;background-color:#282923;border-radius:4px; }
+  .fnc { color:#67d8ef }
+  .mod { color:#70a800 }
+  .kw { color:#f92472 }
+  .intp_bg { background-color: rgba(0, 0, 0, 0.03) }
+  .intp_dlm { color:#ababab }
+  .sigil { color:#67d8ef; }
+  .str_dlm { color:#dbca33 }
+  .str { color:#e7db74 }
+  .prpl { color:#ac80ff }
+  .akw { color:#8a66cc }
+  .colon { color:#aeafad }
+  .entity { color:#a6e22c }
+  .param { color:#fd9621 }
+]]>
+</style>
+<foreignObject width="100%" height="100%">
+<div xmlns="http://www.w3.org/1999/xhtml"><span class="sigil">~L</span><span class="str_dlm">"</span>&lt;<span class="kw">div</span>>&lt;<span class="kw">%=</span> <span class="kw">@</span><span class="prpl">live!</span> <span class="kw">%</span>>&lt;/<span class="kw">div</span>><span class="str_dlm">"</span>
+</div>
+</foreignObject>
+</svg>
diff --git a/images/elixir_regex_example.svg b/images/elixir_regex_example.svg
@@ -7,6 +7,7 @@
   .kw { color:#f92472 }
   .intp_bg { background-color: rgba(0, 0, 0, 0.03) }
   .intp_dlm { color:#ababab }
+  .sigil { color:#67d8ef; }
   .str_dlm { color:#dbca33 }
   .str { color:#e7db74 }
   .prpl { color:#ac80ff }
@@ -17,7 +18,7 @@
 ]]>
 </style>
 <foreignObject width="100%" height="100%">
-<div xmlns="http://www.w3.org/1999/xhtml"><span class="blu_i">~r</span><span class="str_dlm">"</span><span class="kw">(</span><span class="kw">?&gt;</span><span class="kw">[</span><span class="kw">[:</span><span class="prpl">alpha</span><span class="kw">:]</span><span class="str">_</span><span class="kw">]</span><span class="kw">[</span><span class="prpl">\w</span><span class="str">@</span><span class="kw">]</span><span class="kw">*+</span><span class="kw">[</span><span class="str">?</span><span class="str">!</span><span class="kw">]</span><span class="kw">?+</span><span class="kw">)</span><span class="str_dlm">"</span>
+<div xmlns="http://www.w3.org/1999/xhtml"><span class="sigil">~r</span><span class="str_dlm">"</span><span class="kw">(</span><span class="kw">?&gt;</span><span class="kw">[</span><span class="kw">[:</span><span class="prpl">alpha</span><span class="kw">:]</span><span class="str">_</span><span class="kw">]</span><span class="kw">[</span><span class="prpl">\w</span><span class="str">@</span><span class="kw">]</span><span class="kw">*+</span><span class="kw">[</span><span class="str">?</span><span class="str">!</span><span class="kw">]</span><span class="kw">?+</span><span class="kw">)</span><span class="str_dlm">"</span>
 </div>
 </foreignObject>
 </svg>
diff --git a/images/elixir_surface_example.svg b/images/elixir_surface_example.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 215 20">
+<style type="text/css"><![CDATA[
+  div { padding:0.1em;font-family:monospace;font-size:16px;white-space:pre;color:#eee!important;background-color:#282923;border-radius:4px; }
+  .fnc { color:#67d8ef }
+  .mod { color:#70a800 }
+  .kw { color:#f92472 }
+  .intp_bg { background-color: rgba(0, 0, 0, 0.03) }
+  .intp_dlm { color:#ababab }
+  .sigil { color:#67d8ef; }
+  .str_dlm { color:#dbca33 }
+  .str { color:#e7db74 }
+  .prpl { color:#ac80ff }
+  .akw { color:#8a66cc }
+  .colon { color:#aeafad }
+  .entity { color:#a6e22c }
+  .param { color:#fd9621 }
+]]>
+</style>
+<foreignObject width="100%" height="100%">
+<div xmlns="http://www.w3.org/1999/xhtml"><span class="sigil">~F</span><span class="str_dlm">"</span>&lt;<span class="kw">Face</span> <span class="intp_dlm" style="background-color:#2e2f29;">{</span><span class="kw" style="background-color:#2e2f29;">=</span><span class="kw" style="background-color:#2e2f29;">@</span><span class="prpl" style="background-color:#2e2f29;">type</span><span class="intp_dlm" style="background-color:#2e2f29;">}</span>>&lt;/<span class="kw">Face</span>><span class="str_dlm">"</span>
+</div>
+</foreignObject>
+</svg>
diff --git a/images/elixir_yaml_example.svg b/images/elixir_yaml_example.svg
@@ -7,6 +7,7 @@
   .kw { color:#f92472 }
   .intp_bg { background-color: rgba(0, 0, 0, 0.03) }
   .intp_dlm { color:#ababab }
+  .sigil { color:#67d8ef; }
   .str_dlm { color:#dbca33 }
   .str { color:#e7db74 }
   .prpl { color:#ac80ff }
@@ -17,7 +18,7 @@
 ]]>
 </style>
 <foreignObject width="100%" height="100%">
-<div xmlns="http://www.w3.org/1999/xhtml"><span class="blu_i">~Y</span><span class="str_dlm">"""</span>
+<div xmlns="http://www.w3.org/1999/xhtml"><span class="sigil">~Y</span><span class="str_dlm">"""</span>
 <span class="kw">user</span>:
   <span class="kw">name</span>: <span class="str">YAML</span>
   <span class="kw">born</span>: <span class="prpl">2001</span><span class="prpl">-</span><span class="prpl">05</span><span class="prpl">-</span><span class="prpl">11</span>
