docbrown/app/views/podcast_episodes/index.html.erb

<%= content_for :page_meta do %>
  <%= render "podcast_episodes/meta" %>
<% end %>
<% if @podcast %>
  <div class="spec__podcast-header mb-3" style="background:#<%= @podcast.main_color_hex %>;" class="mb-4">
    <div class="crayons-layout relative">
      <nav class="s:absolute mt-2">
        <a href="/pod" class="crayons-btn crayons-btn--ghost crayons-btn--inverted"><%= t("views.podcasts.view_all_podcasts") %></a>
      </nav>
      <div class="flex s:flex-col items-start s:items-center p-3 pt-0 s:pt-3">
        <span class="crayons-logo crayons-logo--2xl s:crayons-logo--3xl mr-4 s:mr-0 s:mb-2">
          <img class="crayons-logo__image" src="<%= Images::Optimizer.call(@podcast.image_url, crop: "fill", width: 420, height: 420) %>" alt="<%= @podcast.title %>" />
        </span>
        <div class="s:align-center">
          <h1 class="crayons-title color-base-inverted mb-2">
            <%= @podcast.title %>
          </h1>
          <p>
            <button
              id="user-follow-butt"
              class="crayons-btn crayons-btn--inverted follow-action-button"
              style="min-width: 100px;"
              data-info='<%= DataInfo.to_json(object: @podcast) %>'>
                &nbsp;
            </button>
          </p>
        </div>
      </div>
    </div>
  </div>
<% end %>

<main id="main-content" class="crayons-layout <% unless @podcast %>crayons-layout--header-inside<% end %> podcast-index mb-8">
  <% unless @podcast %>
    <header class="crayons-page-header">
      <h1 class="crayons-title">
        <%= t("views.podcasts.heading") %>
      </h1>
      <p><%= link_to t("views.podcasts.suggest_a_podcast"), new_podcast_path, class: "crayons-btn crayons-btn--ghost" %></p>
    </header>
  <% end %>
  <h2 class="crayons-subtitle-1 p-3 pt-0 m:p-0"><%= t("views.podcasts.latest_episodes") %></h2>
  <div class="grid gap-2 m:gap-4 grid-cols-2 s:grid-cols-3 m:grid-cols-5 px-2 m:px-0 mb-6">
    <% @podcast_episodes.each do |episode| %>
      <% episode = episode.decorate %>
      <a href="/<%= episode.podcast.slug %>/<%= episode.slug %>" class="crayons-card media-card <% unless @podcast %>media-card--all<% end %>">
        <div class="media-card__artwork">
          <%= optimized_image_tag(episode.image_url || episode.podcast.image_url,
                                  optimizer_options: { crop: "crop", width: 240, height: 240 },
                                  image_options: { alt: episode.title, loading: "lazy", class: "w-100 h-100" }) %>
        </div>
        <div class="media-card__content">
          <h3 class="fs-base mb-2 fw-medium"><%= episode.title %></h3>
          <small class="fs-s">
            <%= episode.podcast.title %>,
            <% if episode.published_at? %>
              <time class="published-at" datetime="<%= episode.published_timestamp %>">
                <%= episode.readable_publish_date %>
              </time>
              <span class="time-ago-indicator-initial-placeholder" data-seconds="<%= episode.published_at_int %>"></span>
            <% end %>
          </small>
        </div>
      </a>
    <% end %>
  </div>
  <% if @podcast %>
    <%= paginate @podcast_episodes, params: { i: nil } %>
  <% end %>
  <% if @featured_podcasts && @featured_podcasts.any? %>
    <h2 class="crayons-subtitle-1 p-3 m:p-0"><%= t("views.podcasts.featured_shows") %></h2>
    <div class="grid gap-2 m:gap-4 l:gap-6 grid-cols-2 m:grid-cols-<%= [@featured_podcasts.size, 3].max %> px-2 m:px-0 mb-6">
      <% @featured_podcasts.each do |podcast| %>
        <a href="/<%= podcast.slug %>">
            <%= optimized_image_tag(podcast.image_url,
                                    optimizer_options: { crop: "crop", width: 500, height: 500 },
                                    image_options: { alt: podcast.title, loading: "lazy", class: "w-100 h-auto border-2" }) %>
            <h3 class="crayons-subtitle-2 align-center">
              <%= podcast.title %>
            </h3>
        </a>
      <% end %>
    </div>
  <% end %>
  <h2 class="crayons-subtitle-1 p-3 m:p-0"><%= t("views.podcasts.browse") %></h2>
  <div class="grid gap-2 s:grid-cols-2 m:grid-cols-4 px-2 m:px-0">
    <% @more_podcasts&.each do |podcast| %>
      <a href="/<%= podcast.slug %>" class="crayons-link flex items-center m:fs-l  lh-tight">
        <span class="crayons-logo crayons-logo--xl mr-3">
          <img src="<%= Images::Optimizer.call(podcast.image_url, crop: "crop", width: 100, height: 100) %>"
            alt="<%= podcast.title %>" aria-hidden="true" class="crayons-logo__image" />
        </span>
        <span class="truncate-at-2">
          <%= podcast.title %>
        </span>
      </a>
    <% end %>
  </div>
</main>

<%= javascript_include_tag "storiesList", "followButtons", defer: true %>