Refactor speakerdeck partial

assets/sass/components/slides.sass

@@ -1,4 +1,4 @@
-.talk-slides
+.slides
   background: url('../images/loading.gif') center no-repeat
   min-height: 275px
 

assets/sass/site.sass

@@ -12,8 +12,8 @@
 @import 'components/listing'
 @import 'components/markdown'
 @import 'components/note'
+@import 'components/slides'
 @import 'components/table'
-@import 'components/talk/slides'
 @import 'components/talk/video'
 @import 'components/widget'
 

source/_partials/speakerdeck.html.twig

@@ -1 +1,10 @@
-<script async class="speakerdeck-embed" data-id="{{ data_id }}" data-ratio="1.29456384323641" src="//speakerdeck.com/assets/embed.js"></script>
+<div class="slides">
+    <noscript>**Please enable JavaScript to view slides.**</noscript>
+    <script
+        async
+        class="speakerdeck-embed"
+        data-id="{{ data.id }}"
+        data-ratio="{{ data.ratio ?: '1.29456384323641' }}"
+        src="//speakerdeck.com/assets/embed.js"
+    ></script>
+</div>

source/_partials/talk/slides.html.twig

@@ -1,8 +1,9 @@
 {% if page.speakerdeck.id and page.speakerdeck.ratio %}
-    <div class="talk-slides mt-4">
+    <div class="mt-4">
         <h2>Slides</h2>
 
-        <noscript>**Please enable JavaScript to view slides.**</noscript>
+        {% include 'speakerdeck' with {
-        <script async class="speakerdeck-embed" data-id="{{ page.speakerdeck.id }}" data-ratio="{{ page.speakerdeck.ratio }}" src="//speakerdeck.com/assets/embed.js"></script>
+            data: page.speakerdeck,
+        } %}
     </div>
 {% endif %}