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

<%= content_for :page_meta do %>
  <% title_with_timeframe(
       page_title: "#{community_qualified_name} 👩‍💻👨‍💻",
       timeframe: params[:timeframe],
       content_for: true,
     ) %>

  <link rel="canonical" href="<%= app_url(request.path) %>" />
  <meta name="description" content="<%= SiteConfig.community_description %>">
  <meta name="keywords" content="<%= SiteConfig.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_qualified_name, timeframe: params[:timeframe]) %>" />
  <meta property="og:image" content="<%= SiteConfig.main_social_image %>">
  <meta property="og:description" content="<%= SiteConfig.community_description %>" />
  <meta property="og:site_name" content="<%= community_qualified_name %>" />

  <meta name="twitter:site" content="@<%= SiteConfig.social_media_handles["twitter"] %>">
  <meta name="twitter:title" content="<%= title_with_timeframe(page_title: community_qualified_name, timeframe: params[:timeframe]) %>">
  <meta name="twitter:description" content="<%= SiteConfig.community_description %>">
  <meta name="twitter:image:src" content="<%= SiteConfig.main_social_image %>">
  <meta name="twitter:card" content="summary_large_image">
  <%= auto_discovery_link_tag(:rss, app_url("feed"), title: "#{community_name} RSS Feed") %>
<% 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 %>
  <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-articles-since="<%= Timeframer.new(params[:timeframe]).datetime&.iso8601 %>">

    <%= render "articles/sidebar" %>

    <%# BEGIN Feed menu bar %>
    <main class="articles-list crayons-layout__content" id="articles-list" role="main">
      <h1 class="visually-hidden-header">Articles</h1>
      <%= render(partial: "onboardings/task_card") if user_signed_in? %>

      <header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls">
        <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden" id="on-page-nav-butt-left" aria-label="nav-button-left">
          <div class="crayons-icon nav-icon ">
            <%= SiteConfig.left_navbar_svg_icon.html_safe %>
          </div>
        </button>
        <div class="flex-1 flex items-center justify-between">
          <h2 class="fs-l fw-heavy">Posts</h2>
          <nav class="crayons-tabs hidden s:flex">
            <a href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>">Feed</a>

            <a href="<%= list_path %>/top/week" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("week") %>">Week</a>
            <a href="<%= list_path %>/top/month" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("month") %>">Month</a>
            <a href="<%= list_path %>/top/year" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("year") %>">Year</a>
            <a href="<%= list_path %>/top/infinity" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("infinity") %>">Infinity</a>

            <a href="<%= list_path %>/latest" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("latest") %>">Latest</a>
          </nav>

          <select class="crayons-select s:hidden ml-2 s:ml-auto w-auto" id="feed-filter-select" aria-label="feed-filter-select">
            <option value="<%= list_path %>" <% if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %> selected<% end %>>Feed</option>
            <option value="<%= list_path %>/top/week" <% if timeframe_check("week") %> selected<% end %>>Week</option>
            <option value="<%= list_path %>/top/month" <% if timeframe_check("month") %> selected<% end %>>Month</option>
            <option value="<%= list_path %>/top/year" <% if timeframe_check("year") %> selected<% end %>>Year</option>
            <option value="<%= list_path %>/top/infinity" <% if timeframe_check("infinity") %> selected<% end %>>Infinity</option>
            <option value="<%= list_path %>/latest" <% if timeframe_check("latest") %> selected<% end %>>Latest</option>
          </select>
        </div>

        <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden" id="on-page-nav-butt-right" aria-label="nav-button-right">
          <div class="crayons-icon nav-icon ">
            <%= SiteConfig.right_navbar_svg_icon.html_safe %>
          </div>
        </button>
      </header>

      <% if user_signed_in? %>
        <div id="homepage-feed"></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">
        loading...
      </div>
    </main>

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

  <%= render "stories/narrow_nav_menu" %>
  <%= render "stories/stories_list_script" %>
<% end %>