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

<%= content_for :page_meta do %>
  <% title_with_timeframe(
       page_title: community_name,
       timeframe: params[:timeframe],
       content_for: true,
     ) %>

  <link rel="canonical" href="<%= app_url(request.path) %>" />
  <meta name="description" content="<%= Settings::Community.community_description %>">
  <%= meta_keywords_default %>

  <meta property="og:type" content="website" />
  <meta property="og:url" content="<%= app_url(request.path) %>" />
  <meta property="og:title" content="<%= title_with_timeframe(page_title: community_name, timeframe: params[:timeframe]) %>" />
  <meta property="og:image" content="<%= Settings::General.main_social_image %>">
  <meta property="og:description" content="<%= Settings::Community.community_description %>" />
  <meta property="og:site_name" content="<%= community_name %>" />

  <meta name="twitter:site" content="@<%= Settings::General.social_media_handles["twitter"] %>">
  <meta name="twitter:title" content="<%= title_with_timeframe(page_title: community_name, timeframe: params[:timeframe]) %>">
  <meta name="twitter:description" content="<%= Settings::Community.community_description %>">
  <meta name="twitter:image:src" content="<%= Settings::General.main_social_image %>">
  <meta name="twitter:card" content="summary_large_image">
  <%= auto_discovery_link_tag(:rss, app_url("feed"), title: t("views.stories.meta.rss", name: community_name)) %>
<% end %>

<%= javascript_packs_with_chunks_tag "homePage", defer: true %>
<% cache(release_adjusted_cache_key("main-stories-index-#{params}-#{user_signed_in?}"), expires_in: 90.seconds) do %>
  <% if @hero_billboard && FeatureFlag.enabled?(:hero_billboard) %>
    <%= render partial: "shared/billboard", locals: { billboard: @hero_billboard, data_context_type: BillboardEvent::CONTEXT_TYPE_HOME } %>
  <% end %>
  <div class="crayons-layout crayons-layout--3-cols crayons-layout--3-cols--drop-right-left" id="index-container"
      data-params="<%= params.merge(sort_by: "hotness_score", sort_direction: "desc").to_json(only: %i[tag username q sort_by sort_direction]) %>" data-which="<%= @list_of %>"
      data-tag=""
      data-feed="<%= params[:timeframe] || "base-feed" %>"
      data-feed-context-type="<%= FeedEvent::CONTEXT_TYPE_HOME %>"
      <% FeedEvent.categories.keys.each do |category| %>
      data-feed-category-<%= category %>="<%= category %>"
      <% end %>
      data-articles-since="<%= Timeframe.datetime_iso8601(params[:timeframe]) %>">

    <%= render "articles/sidebar" %>

    <%# BEGIN Feed menu bar %>
    <main class="articles-list crayons-layout__content" id="main-content" data-follow-button-container="true">
      <%= render(partial: "onboardings/task_card") if user_signed_in? %>

      <header class="p-2 px-3 m:p-0 m:px-0 m:mb-2 fs-l">
        <h1 class="screen-reader-only"><%= t("views.stories.heading") %></h1>
        <nav class="-mx-3 m:mx-0 s:flex items-center justify-between" aria-label="<%= t("views.stories.sort.aria_label") %>">
          <ul class="crayons-navigation crayons-navigation--horizontal">
            <li>
              <a data-text="<%= t("views.stories.sort.relevant") %>" href="<%= list_path.presence || "/" %>" class="crayons-navigation__item <%= "crayons-navigation__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"
                <%= %w[week month year infinity latest].exclude?(params[:timeframe]) ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.relevant") %></a>
            </li>
            <li>
              <a data-text="<%= t("views.stories.sort.latest") %>" href="<%= list_path %>/latest" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? ' aria-current="page"'.html_safe : "" %>>
                <%= t("views.stories.sort.latest") %>
              </a>
            </li>
            <li>
              <a data-text="<%= t("views.stories.sort.top") %>" href="<%= list_path %>/top/week"
                class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") %>"
                <%= timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>
                  <%= t("views.stories.sort.top") %>
              </a>
            </li>
          </ul>
          <% if timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") %>
            <ul class="crayons-navigation crayons-navigation--horizontal fs-base">
              <li>
                <a data-text="<%= t("views.stories.sort.week") %>" href="<%= list_path %>/top/week" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? ' aria-current="page"'.html_safe : "" %>>
                  <%= t("views.stories.sort.week") %>
                </a>
              </li>
              <li>
                <a data-text="<%= t("views.stories.sort.month") %>" href="<%= list_path %>/top/month" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? ' aria-current="page"'.html_safe : "" %>>
                  <%= t("views.stories.sort.month") %>
                </a>
              </li>
              <li>
                <a data-text="<%= t("views.stories.sort.year") %>" href="<%= list_path %>/top/year" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? ' aria-current="page"'.html_safe : "" %>>
                  <%= t("views.stories.sort.year") %>
                </a>
              </li>
              <li>
                <a data-text="<%= t("views.stories.sort.infinity") %>" href="<%= list_path %>/top/infinity" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>
                  <%= t("views.stories.sort.infinity") %>
                </a>
              </li>
            </ul>
          <% end %>
        </nav>
      </header>

      <% if user_signed_in? %>
        <div id="homepage-feed" style="min-height: 90vh"></div>
      <% else %>
        <%= render "stories/main_stories_feed" %>
      <% end %>

      <div id="followed-podcasts" data-episodes="<%= @podcast_episodes.to_json(include: { podcast: { only: %i[slug title id], methods: %i[image_90] } }) %>"></div>
      <div class="loading-articles" id="loading-articles">
        <%= t("core.loading") %>
      </div>
    </main>

    <%= render "articles/sidebar_additional" %>
  </div>

  <%= javascript_packs_with_chunks_tag "storiesList", "followButtons", "feedPreviewCards", "heroBannerClose", "localizeArticleDates", "feedEvents", defer: true %>
<% end %>