feat: use html code snippets

Author: palkan

src/modules/blocks/slide-show.scss

@@ -23,8 +23,19 @@ $className: 'slide-show';
   }
 
   &__code-wrapper {
-    overflow: hidden;
-    border-radius: 6px;
+    font-size: 12px;
+    line-height: 1.4;
+    width: 100%;
+
+    & pre {
+      border-radius: 6px;
+      display: flex;
+      align-items: stretch;
+      justify-content: stretch;
+      width: 100%;
+      min-height: 100%;
+      margin: 0 !important;
+    }
   }
 
   &__img {

src/modules/common.scss

@@ -1,6 +1,14 @@
 @import './veriables.scss';
 @import './mixins.scss';
 
+@font-face {
+  font-family: 'Martian Mono';
+  font-display: swap;
+  src: url('/fonts/MartianMono.woff2') format('woff2');
+  font-weight: 100 800;
+  font-stretch: 75% 150%;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -12,6 +20,10 @@
   min-width: 375px;
 }
 
+code {
+  font-family: 'Martian Mono', monospace;
+}
+
 .mobile-only {
   @include mediaMin($tablet) {
     display: none;

src/partials/slides/about-slide.hbs

@@ -47,7 +47,7 @@
       <div class='about-slide__content'>
         <h3 class='about-slide__subtitle'>Time-tested abstractions</h3>
         <p class='about-slide__text'>
-          Write clean and maintainable code, leveraging clear abstractions: channels and subscriptions. Higher-level APIs like presence, collaboration: coming soon!
+          Write clean and maintainable code, leveraging clear abstractions: channels, subscriptions, presence tracking. Higher-level APIs like collaboration: coming soon!
         </p>
         <div class='about-slide__arrow'>
           <svg width="171" height="20" viewBox="0 0 171 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -68,25 +68,13 @@
         </div>
         <div class='slide-show__frame' id="codes">
           <div data-tabs-id="code-pubsub" class='slide-show__code-wrapper'>
-            <img
-              class='slide-show__img'
-              src='./images/pubsub.png'
-              alt='Pub/Sub demo'
-            />
+{{> slides/code-snippets/pubsub}}
           </div>
           <div data-tabs-id="code-rb" style="display:none" class='slide-show__code-wrapper'>
-            <img
-              class='slide-show__img'
-              src='./images/ruby-channels.png'
-              alt='Ruby channels code demo'
-            />
+{{> slides/code-snippets/ruby}}
           </div>
           <div data-tabs-id="code-js" style="display:none" class='slide-show__code-wrapper'>
-            <img
-              class='slide-show__img'
-              src='./images/js-channels.png'
-              alt='JS channels code demo'
-            />
+{{> slides/code-snippets/js}}
           </div>
         </div>
       </div>

src/partials/slides/code-snippets/js.html

@@ -0,0 +1,15 @@
+<!-- Code is generated by Code to Markup. Go there if you want to update it: https://psd-coder.github.io/code-to-markup/?h=shiki&t=github-dark-high-contrast&l=javascript# -->
+<pre class="shiki github-dark-high-contrast" style="background-color:#0a0c10;color:#f0f3f6" tabindex="0"><code style="padding:1em;overflow-x: auto;"><span class="line"><span style="color:#FF9492">export</span><span style="color:#FF9492"> class</span><span style="color:#FFB757"> ChatChannel</span><span style="color:#FF9492"> extends</span><span style="color:#91CBFF"> Channel</span><span style="color:#F0F3F6"> {</span></span>
+<span class="line"><span style="color:#FF9492">  async</span><span style="color:#DBB7FF"> speak</span><span style="color:#F0F3F6">(</span><span style="color:#FFB757">handle</span><span style="color:#F0F3F6">, </span><span style="color:#FFB757">params</span><span style="color:#F0F3F6">, </span><span style="color:#FFB757">data</span><span style="color:#F0F3F6">) {</span></span>
+<span class="line"><span style="color:#FF9492">    const</span><span style="color:#F0F3F6"> { </span><span style="color:#91CBFF">message</span><span style="color:#F0F3F6"> } </span><span style="color:#FF9492">=</span><span style="color:#F0F3F6"> data;</span></span>
+<span class="line"><span style="color:#FF9492">    const</span><span style="color:#91CBFF"> name</span><span style="color:#FF9492"> =</span><span style="color:#F0F3F6"> handle.identifiers.username;</span></span>
+<span class="line"><span style="color:#FF9492">    const</span><span style="color:#91CBFF"> payload</span><span style="color:#FF9492"> =</span><span style="color:#F0F3F6"> {</span></span>
+<span class="line"><span style="color:#F0F3F6">      event: </span><span style="color:#ADDCFF">"newMessage"</span><span style="color:#F0F3F6">,</span></span>
+<span class="line"><span style="color:#F0F3F6">      name,</span></span>
+<span class="line"><span style="color:#F0F3F6">      message,</span></span>
+<span class="line"><span style="color:#F0F3F6">    };</span></span>
+<span class="line"><span style="color:#F0F3F6">   </span></span>
+<span class="line"><span style="color:#FF9492">    await</span><span style="color:#DBB7FF"> broadcastTo</span><span style="color:#F0F3F6">(</span><span style="color:#ADDCFF">`roomId:${</span><span style="color:#F0F3F6">params</span><span style="color:#ADDCFF">.</span><span style="color:#F0F3F6">id</span><span style="color:#ADDCFF">}`</span><span style="color:#F0F3F6">, payload);</span></span>
+<span class="line"><span style="color:#F0F3F6">  }</span></span>
+<span class="line"><span style="color:#F0F3F6">}</span></span>
+<span class="line"></span></code></pre>

src/partials/slides/code-snippets/pubsub.html

@@ -0,0 +1,18 @@
+<pre class="shiki github-dark-high-contrast" style="background-color:#0a0c10;color:#f0f3f6" tabindex="0"><code style="padding:1em;overflow-x: auto;"><span class="line"><span style="color:#FF9492">import</span><span style="color:#F0F3F6"> { createCable } </span><span style="color:#FF9492">from</span><span style="color:#ADDCFF"> "@anycable/web"</span><span style="color:#F0F3F6">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#FF9492">const</span><span style="color:#91CBFF"> cable</span><span style="color:#FF9492"> =</span><span style="color:#DBB7FF"> createCable</span><span style="color:#F0F3F6">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BDC4CC">// Basic pub/sub interface</span></span>
+<span class="line"><span style="color:#FF9492">let</span><span style="color:#F0F3F6"> channel </span><span style="color:#FF9492">=</span><span style="color:#F0F3F6"> cable.</span><span style="color:#DBB7FF">streamFrom</span><span style="color:#F0F3F6">(</span><span style="color:#ADDCFF">"chatty/2025"</span><span style="color:#F0F3F6">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F0F3F6">channel.</span><span style="color:#DBB7FF">on</span><span style="color:#F0F3F6">(</span><span style="color:#ADDCFF">"message"</span><span style="color:#F0F3F6">, (</span><span style="color:#FFB757">msg</span><span style="color:#F0F3F6">) </span><span style="color:#FF9492">=&gt;</span><span style="color:#F0F3F6"> {</span></span>
+<span class="line"><span style="color:#BDC4CC">  // handle notification</span></span>
+<span class="line"><span style="color:#F0F3F6">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BDC4CC">// join the channel's presence set</span></span>
+<span class="line"><span style="color:#F0F3F6">channel.presence.</span><span style="color:#DBB7FF">join</span><span style="color:#F0F3F6">(user.id, { name: user.name })</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F0F3F6">channel.</span><span style="color:#DBB7FF">on</span><span style="color:#F0F3F6">(</span><span style="color:#ADDCFF">"presence"</span><span style="color:#F0F3F6">, (</span><span style="color:#FFB757">event</span><span style="color:#F0F3F6">) </span><span style="color:#FF9492">=&gt;</span><span style="color:#F0F3F6"> {</span></span>
+<span class="line"><span style="color:#BDC4CC">  // handle presence updates</span></span>
+<span class="line"><span style="color:#F0F3F6">})</span></span>
+<span class="line"></span></code></pre>

src/partials/slides/code-snippets/ruby.html

@@ -0,0 +1,14 @@
+<!-- Code is generated by Code to Markup. Go there if you want to update it: https://psd-coder.github.io/code-to-markup/?h=shiki&t=github-dark-high-contrast&l=ruby# -->
+<pre class="shiki github-dark-high-contrast" style="background-color:#0a0c10;color:#f0f3f6" tabindex="0"><code style="padding:1em;overflow-x: auto;"><span class="line"><span style="color:#FF9492">class</span><span style="color:#FFB757"> ChatChannel</span><span style="color:#F0F3F6"> &#x3C; </span><span style="color:#91CBFF">ApplicationCable::Channel</span></span>
+<span class="line"><span style="color:#FF9492">  def</span><span style="color:#DBB7FF"> speak</span><span style="color:#F0F3F6">(data)</span></span>
+<span class="line"><span style="color:#FFB757">    message</span><span style="color:#FF9492"> =</span><span style="color:#F0F3F6"> data.</span><span style="color:#DBB7FF">fetch</span><span style="color:#F0F3F6">(</span><span style="color:#ADDCFF">"message"</span><span style="color:#F0F3F6">)</span></span>
+<span class="line"><span style="color:#FFB757">    name</span><span style="color:#FF9492"> =</span><span style="color:#F0F3F6"> user.</span><span style="color:#DBB7FF">name</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBB7FF">    broadcast_to</span><span style="color:#F0F3F6">(</span></span>
+<span class="line"><span style="color:#F0F3F6">      workspace,</span></span>
+<span class="line"><span style="color:#91CBFF">      action:</span><span style="color:#ADDCFF"> "newMessage"</span><span style="color:#F0F3F6">,</span></span>
+<span class="line"><span style="color:#91CBFF">      html:</span><span style="color:#DBB7FF"> render</span><span style="color:#F0F3F6">(</span><span style="color:#ADDCFF">"chats/message"</span><span style="color:#F0F3F6">, </span><span style="color:#91CBFF">message:</span><span style="color:#F0F3F6">, </span><span style="color:#91CBFF">name:</span><span style="color:#F0F3F6">),</span></span>
+<span class="line"><span style="color:#91CBFF">      author_id:</span><span style="color:#F0F3F6"> user.</span><span style="color:#DBB7FF">id</span></span>
+<span class="line"><span style="color:#F0F3F6">    )</span></span>
+<span class="line"><span style="color:#FF9492">  end</span></span>
+<span class="line"><span style="color:#FF9492">end</span></span></code></pre>