Add page: Book: Crystal Programming (#509)

_includes/components/book-authors.html

@@ -0,0 +1,12 @@
+<div class="book-authors">
+  {% for author in include.authors %}
+    <div class="book-author">
+      <div class="book-author-icon">
+        <img class="book-author-icon" src="{{ author.image }}" />
+      </div>
+      <p class="small">
+        {{ author.description }}
+      </p>
+    </div>
+  {% endfor %}
+</div>

_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>

_includes/components/image-list.html

@@ -0,0 +1,10 @@
+<div class="image-list">
+  {% for item in include.items %}
+    <div class="item">
+      {% include elements/hex-icon.html file=item.image %}
+      <div class="small">
+        {{ item.description }}
+      </div>
+    </div>
+  {% endfor %}
+</div>

_includes/elements/hex-icon.html

@@ -0,0 +1,5 @@
+<div class="hex-icon">
+  <div class="inner">
+    {% include {{ include.file }} %}
+  </div>
+</div>

_layouts/book.html

@@ -0,0 +1,24 @@
+---
+layout: wide
+---
+
+{% include components/book-presenter.html book=page.book %}
+
+<section>
+  <div class="full-width-rule">
+    <div class="hex">
+      <span>What you will learn</span>
+    </div>
+  </div>
+  {% include components/image-list.html items=page.what_you_will_learn %}
+  <div class="full-width-rule">
+  </div>
+</section>
+
+<section>
+  <h2>About the Authors</h2>
+  {% include components/book-authors.html authors=page.authors %}
+</section>
+
+<div class="banner sponsorship">
+</div>

_pages/learning/crystal_programming.html

@@ -1,81 +1,48 @@
 ---
-title: "Book: Crystal Programming"
-description: |
-  <strong>Crystal Programming</strong> is a project-based book by George Dietrich and Guilherme Bernal that covers all the
-  fundamental concepts needed to start programming in Crystal, such as OOP and concurrent programming.
-layout: learning
+title: "Building efficient, safe, and readable web and CLI applications with Crystal"
+layout: book
 
-headline: Building efficient, safe, and readable web and CLI applications with Crystal
-cover_image: /assets/learning/crystal_programming.png
-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
+book:
+  cover_image: /assets/learning/crystal_programming.png
+  description: |
+    <strong>Crystal Programming</strong> is a project-based book by George Dietrich and Guilherme Bernal that covers all the
+    fundamental concepts needed to start programming in Crystal, such as OOP and concurrent programming.
+  details: |
+    While focused towards those with programming experience, previous knowledge of Crystal itself is not required, as
+    the book is outlined with step-by-step explanations of essential concepts and practical examples. By the end of
+    this book, you’ll be equipped with the skills you need to use Crystal programming for building and understanding any
+    application you come across.
+  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
 
-book_info:
-  name: Crystal Programming
-  isbn: 978-1801818674
-  publisher: Packt Publishing
-  numberOfPages: 356
-  datePublished: 2022-05-27
+what_you_will_learn:
+- image: icons/merge-type.svg
+  description: Explore how Crystal combines the merits of other languages
+- image: icons/folder.svg
+  description: Understand how to leverage existing C libraries without writing any C
+- image: icons/update.svg
+  description: Focus on zero-cost abstractions with compile-time macros
+- image: icons/code.svg
+  description: Use an example-based approach to demonstrate language features
+- image: icons/apps.svg
+  description: Develop a variety of Crystal applications, such as web and CLI apps
+- image: icons/library-books.svg
+  description: Gain an understanding of the macro API and annotations
 
 authors:
-- name: George Dietrich
-  image: /assets/learning/george.png
-  github_handle: Blacksmoke16
+- image: /assets/learning/george.png
   description: |
-    A software engineer, open-source aficionado, and Crystal community moderator. He
+    <strong>George Dietrich</strong> is a software engineer, open-source aficionado, and Crystal community moderator. He
     holds a Master of Science degree in internet information systems and a Bachelor of Science degree in
     information sciences.
-- name: Guilherme Bernal
-  image: /assets/learning/guilherme.jpg
-  github_handle: lbguilherme
+- image: /assets/learning/guilherme.jpg
   description: |
-    He is the chief technology officer at Cubos Tecnologia. He holds a bachelor's
+    <strong>Guilherme Bernal</strong> is the chief technology officer at Cubos Tecnologia. He holds a bachelor's
     degree in TI management. Guilherme co-founded a software development company
     and several tech start-ups, including one that focused on teaching programming
     skills to a new generation of developers. He is also a two-time world finalist
-     in the coding competition, ACM ICPC.
+    in the coding competition, ACM ICPC.
 ---
-<p class="book-summary" itemprop="description">
-  While focused towards those with programming experience, previous knowledge of Crystal itself is not required, as
-  the book is outlined with step-by-step explanations of essential concepts and practical examples. By the end of
-  this
-  book, you’ll be equipped with the skills you need to use Crystal programming for building and understanding any
-  application you come across.
-</p>
-
-<div class="flag hr">
-  What you will learn
-</div>
-
-<ul class="image-list">
-  <li>
-    <svg xmlns="http://www.w3.org/2000/svg"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
-    <span>Explore how Crystal combines the merits of other languages</span>
-  </li>
-  <li>
-    <svg xmlns="http://www.w3.org/2000/svg"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
-    <span>Understand how to leverage existing C libraries without writing any C</span>
-  </li>
-  <li>
-    <svg xmlns="http://www.w3.org/2000/svg"><path d="M15.91 0C20.93 0 25 4.03 25 9s-4.07 9-9.09 9c-5.022 0-9.092-4.03-9.092-9s4.07-9 9.091-9m0 2.25c-3.765 0-6.818 3.022-6.818 6.75s3.053 6.75 6.818 6.75c3.766 0 6.818-3.022 6.818-6.75s-3.052-6.75-6.818-6.75M14.773 4.5h1.704v4.252l2.648 2.622-1.205 1.192-3.147-3.116V4.5M1.136 15.75A1.13 1.13 0 0 1 0 14.625 1.13 1.13 0 0 1 1.136 13.5H5.49a11.52 11.52 0 0 0 1.33 2.25H1.135m1.137-5.625A1.13 1.13 0 0 1 1.136 9a1.13 1.13 0 0 1 1.137-1.125h2.33L4.544 9l.057 1.125h-2.33M3.41 4.5a1.13 1.13 0 0 1-1.136-1.125A1.13 1.13 0 0 1 3.409 2.25h3.41a11.52 11.52 0 0 0-1.33 2.25h-2.08Z" fill-rule="nonzero"/></svg>
-    <span>Focus on zero-cost abstractions with compile-time macros</span>
-  </li>
-  <li>
-    <svg xmlns="http://www.w3.org/2000/svg"><path d="M19.93,8.21l-3.6,1.68L14,7.7V6.3l2.33-2.19l3.6,1.68c0.38,0.18,0.82,0.01,1-0.36c0.18-0.38,0.01-0.82-0.36-1L16.65,2.6 c-0.38-0.18-0.83-0.1-1.13,0.2l-1.74,1.6C13.6,4.16,13.32,4,13,4c-0.55,0-1,0.45-1,1v1H8.82C8.34,4.65,6.98,3.73,5.4,4.07 C4.24,4.32,3.25,5.32,3.04,6.5C2.82,7.82,3.5,8.97,4.52,9.58L7.08,18H4v3h13v-3h-3.62L8.41,8.77C8.58,8.53,8.72,8.28,8.82,8H12v1 c0,0.55,0.45,1,1,1c0.32,0,0.6-0.16,0.78-0.4l1.74,1.6c0.3,0.3,0.75,0.38,1.13,0.2l3.92-1.83c0.38-0.18,0.54-0.62,0.36-1 C20.75,8.2,20.31,8.03,19.93,8.21z M6,8C5.45,8,5,7.55,5,7s0.45-1,1-1s1,0.45,1,1S6.55,8,6,8z"/></svg>
-    <span>Use an example-based approach to demonstrate language features</span>
-  </li>
-  <li>
-    <svg xmlns="http://www.w3.org/2000/svg"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
-    <span>Develop a variety of Crystal applications, such as web and CLI apps</span>
-  </li>
-  <li>
-    <svg xmlns="http://www.w3.org/2000/svg"><path d="M14,12l-2,2l-2-2l2-2L14,12z M12,6l2.12,2.12l2.5-2.5L12,1L7.38,5.62l2.5,2.5L12,6z M6,12l2.12-2.12l-2.5-2.5L1,12 l4.62,4.62l2.5-2.5L6,12z M18,12l-2.12,2.12l2.5,2.5L23,12l-4.62-4.62l-2.5,2.5L18,12z M12,18l-2.12-2.12l-2.5,2.5L12,23l4.62-4.62 l-2.5-2.5L12,18z"/></svg>
-    <span>Gain an understanding of the macro API and annotations</span>
-  </li>
-</ul>
-
-<div class="banner sponsorship">
-</div>

_sass/components/_book-authors.scss

@@ -0,0 +1,28 @@
+.book-authors {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
+
+  column-gap: var(--padding-md);
+  row-gap: var(--padding-lg);
+}
+
+.book-author {
+  display: grid;
+
+  grid-template-areas:
+    "icon main";
+  grid-template-columns: auto 1fr;
+  column-gap: var(--padding-sm);
+
+  > * {
+    grid-area: main;
+  }
+
+  > .book-author-icon {
+    grid-area: icon;
+    width: 6ch;
+    aspect-ratio: 1;
+    object-fit: cover;
+    clip-path: content-box circle(50%);
+  }
+}

_sass/components/_book-presenter.scss

@@ -0,0 +1,31 @@
+.book-presenter {
+  font-size: var(--font-size-lead);
+  display: grid;
+  grid-template-areas:
+    "cover"
+    "main"
+    "details";
+  row-gap: var(--padding-md);
+  column-gap: var(--padding-md);
+
+  > .cover {
+    grid-area: cover;
+  }
+
+  > .description {
+    @include blockflow;
+    grid-area: main;
+  }
+
+  > .details {
+    grid-area: details;
+  }
+}
+
+@media (min-width: 35em) {
+  .book-presenter {
+    grid-template-areas:
+      "cover main"
+      "details details";
+  }
+}

_sass/components/_image-list.scss

@@ -0,0 +1,14 @@
+.image-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
+  align-items: center;
+  row-gap: var(--block-flow-sm);
+  column-gap: var(--padding-md);
+
+  > .item {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    align-items: center;
+    column-gap: var(--padding-xs);
+  }
+}