move book-presenter into a component

_includes/components/book-presenter.html

@@ -0,0 +1,26 @@
+<div class="book-presenter">
+  <div class="cover">
+    <img src="{{ include.book.cover_image }}" />
+  </div>
+
+  <div class="description">
+    <p>
+      {{ include.book.description }}
+    </p>
+
+    <p>You can get it from these vendors:</p>
+
+    {% for vendor in include.book.vendors %}
+      <div class="link-item">
+        <a class="link-item__main" href="{{ vendor.url }}">
+          {% include icons/book.svg %}
+          Buy on {{ vendor.name }}
+        </a>
+      </div>
+    {% endfor %}
+  </div>
+
+  <div class="details">
+    {{ include.book.details }}
+  </div>
+</div>

_layouts/book.html

@@ -2,32 +2,7 @@
 layout: wide
 ---
 
-<div class="book-presenter">
-  <div class="cover">
-    <img src="{{ page.book.cover_image }}" />
-  </div>
-
-  <div class="description">
-    <p>
-      {{ page.book.description }}
-    </p>
-
-    <p>You can get it from these vendors:</p>
-
-    {% for vendor in page.book.vendors %}
-      <div class="link-item">
-        <a class="link-item__main" href="{{ vendor.url }}">
-          {% include icons/book.svg %}
-          Buy on {{ vendor.name }}
-        </a>
-      </div>
-    {% endfor %}
-  </div>
-
-  <div class="details">
-    {{ page.book.details }}
-  </div>
-</div>
+{% include components/book-presenter.html book=page.book %}
 
 <section>
   <div class="full-width-rule">

_sass/main.scss

@@ -27,6 +27,7 @@
   @import "elements/table";
 
   @import "components/book-authors";
+  @import "components/book-presenter";
   @import "components/callout";
   @import "components/card";
   @import "components/cards-list";
@@ -50,7 +51,6 @@
   @import "pages/releases";
   @import "pages/sponsors";
   @import "pages/styleguide";
-  @import "pages/learning";
 }
 
 @layer utilities {

_style_guide/components/book-presenter.html

@@ -0,0 +1,24 @@
+---
+title: Book Presenter
+type: components
+module: _includes/components/book-presenter.html
+
+book:
+  cover_image: /assets/learning/crystal_programming.png
+  description: |
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem
+    veniam libero! Deleniti nemo quas optio voluptas voluptatibus sint ratione.
+    Id vel error quia ipsam sit saepe hic at amet excepturi ea.
+  details: |
+    Voluptas sunt ratione consequatur optio porro eaque nam quod ex illum modi
+    id animi fugiat vero explicabo illo officiis assumenda nulla rerum,
+    dignissimos sed dicta pariatur quis eum. Beatae ea cumque alias ducimus quos
+    maxime sed, modi illum at repellendus, ex deleniti nesciunt tempore placeat
+    in accusantium!
+  vendors:
+  - url: https://www.amazon.com/Crystal-Programming-project-based-introduction-applications/dp/1801818673/ref=sr_1_2
+    name: Amazon
+  - url: https://www.packtpub.com/product/crystal-programming/9781801818674
+    name: Packt
+---
+{% include components/book-presenter.html book=page.book %}