landing-page.html

---
layout: base
permalink: /
---

{% comment %} Get the next stream. {% endcomment %}
{% include 1-tools/sort-videos.html videos=site.Streams future=true reverse=true %}
{% assign nextStream = out_sortedVideos | where_exp: 'stream', 'stream.date >= site.time' | first %}

{% comment %} Get latest coding challenges. {% endcomment %}
{% include 1-tools/sort-videos.html videos=site.CodingChallenges reverse=true %}

{% comment %} Use the latest coding challenge if a stream hasn't been scheduled yet. {% endcomment %}
{% if nextStream == null %}
  {% assign offset = 1 %}
  {% assign nextStream = out_sortedVideos | first %}
{% else %}
  {% assign offset = 0 %}
{% endif %}

{% assign featuredVideos = '' | split: '' %}

{% comment %} Add latest coding challenges to featured videos array. {% endcomment %}
{% for challenge in out_sortedVideos limit:2 offset:offset %}
  {% assign featuredVideos = featuredVideos | push: challenge %}
{% endfor %}

{% comment %} Get lastest stream and add it to the featured videos array. {% endcomment %}
{% include 1-tools/sort-videos.html videos=site.Streams reverse=true %}
{% assign featuredVideos = featuredVideos | push: out_sortedVideos[0] %}

<div class="landing-page">
  <div class="welcome-message">
    <div class="learn-to-code">
      <h1>Choo choo!</h1>
      <p>All aboard the Coding Train with Daniel Shiffman, a YouTube channel dedicated to beginner-friendly creative
        coding tutorials and challenges.</p>
      <div class="ctas">
        <a href="{{ site.links.youtube }}?sub_confirmation=1" target="_blank" class="youtube">Subscribe on YouTube</a>
        <a href="{{ site.links.youtube }}join" target="_blank" class="patreon">Become a Member</a>
      </div>
    </div>

    {% include 3-modules/video-card.html video=nextStream %}

  </div>

  <h2>Latest Videos</h2>
  <div class="featured-videos">
    {% include 3-modules/video-list.html sortedVideos=featuredVideos %}
    <a href="{{ site.links.youtube }}" target="_blank" class="more-videos">Watch more videos</a>
  </div>

  <h2>Support The Coding Train</h2>
  <div class="support">
    {% capture patreonLogo %}{% include 4-vector-graphics/patreon.svg %}{% endcapture %}
    {% include 3-modules/hero-item.html image=patreonLogo title='Consider supporting?' content='Join the Coding Train
    community with a YouTube membership or Patreon subscription!' url=site.links.patreon cta='Become a Patron' class='patreon' %}

    {% capture merchStoreImage %}<img alt='The Coding Train Merchandise Store' src="{{ '/assets/images/merch-store.png' | relative_url }}" />{%
    endcapture %}
    {% include 3-modules/hero-item.html image=merchStoreImage title='Coding Train Store'
    content='Visit Design by Humans for a variety of Coding Train merchandise.' url=site.links.merch cta='Shop for Merchandise' class='merch-store' %}

    {% capture amazonStoreImage %}<img alt='The Coding Train Amazon Store' src="{{ '/assets/images/amazon-store.png' | relative_url }}" />{%
    endcapture %}
    {% include 3-modules/hero-item.html image=amazonStoreImage title="Love to read?" content='Find
    books and other products featured on The Coding Train!' url=site.links.amazon cta='Shop for Books and more'
    class='amazon-store' %}
  </div>
</div>