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

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

  <link rel="canonical" href="https://dev.to<%= request.path %>" />
  <meta name="description" content="Where programmers share ideas and help each other grow.">
  <meta name="keywords" content="software development,engineering,rails,javascript,ruby">

  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://dev.to<%= request.path %>" />
  <meta property="og:title" content="<%= title_with_timeframe(page_title: community_qualified_name, timeframe: params[:timeframe]) %>" />
  <meta property="og:image" content="<%= ApplicationConfig["MAIN_SOCIAL_IMAGE"] %>">
  <meta property="og:description" content="Where programmers share ideas and help each other grow." />
  <meta property="og:site_name" content="<%= community_qualified_name %>" />

  <meta name="twitter:site" content="@<%= ApplicationConfig["SITE_TWITTER_HANDLE"] %>">
  <meta name="twitter:title" content="<%= title_with_timeframe(page_title: community_qualified_name, timeframe: params[:timeframe]) %>">
  <meta name="twitter:description" content="Where programmers share ideas, experiences, and help each other grow.">
  <meta name="twitter:image:src" content="<%= ApplicationConfig["MAIN_SOCIAL_IMAGE"] %>">
  <meta name="twitter:card" content="summary_large_image">
  <%= auto_discovery_link_tag(:rss, "https://dev.to/feed", title: "#{ApplicationConfig['COMMUNITY_NAME']} RSS Feed") %>
<% end %>
<%= javascript_pack_tag "homePage", defer: true %>

<% cache("main-stories-index-#{params}-#{user_signed_in?}", expires_in: 3.minutes) do %>
  <div class="home" id="index-container"
      data-params="<%= params.to_json(only: %i[tag username q]) %>" data-which="<%= @list_of %>"
      data-algolia-tag=""
      data-feed="<%= params[:timeframe] || "base-feed" %>"
      data-articles-since="<%= Timeframer.new(params[:timeframe]).datetime.to_i %>">

    <%= render "articles/sidebar" %>

    <div class="articles-list" id="articles-list">
      <div class="on-page-nav-controls" id="on-page-nav-controls">
        <div class="on-page-nav-label">
          <div class="wide-nav-links">
            <a class="nav-chronofiter-link <%= "selected" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>" href="<%= list_path %>/">
              FEED
            </a>
            <span class="separator"></span>
            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("week") %>" href="<%= list_path %>/top/week">
              WEEK
            </a>
            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("month") %>" href="<%= list_path %>/top/month">
              MONTH
            </a>
            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("year") %>" href="<%= list_path %>/top/year">
              YEAR
            </a>
            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("infinity") %>" href="<%= list_path %>/top/infinity">
              INFINITY
            </a>
            <span class="separator"></span>
            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("latest") %>" href="<%= list_path %>/latest">
              LATEST
            </a>
          </div>
          <div class="narrow-nav-select" aria-label="feed-filter-select">
            <% if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %>
              <button type="button" id="narrow-feed-butt">&lt;MY <%= ApplicationConfig["COMMUNITY_NAME"] %> FEED&gt;</button>
            <% elsif timeframe_check('week') %>
              <button type="button" id="narrow-feed-butt">&lt;PAST WEEK&gt;</button>
            <% elsif timeframe_check('month') %>
              <button type="button" id="narrow-feed-butt">&lt;PAST MONTH&gt;</button>
            <% elsif timeframe_check('year') %>
              <button type="button" id="narrow-feed-butt">&lt;PAST YEAR&gt;</button>
            <% elsif timeframe_check('infinity') %>
              <button type="button" id="narrow-feed-butt">&lt;INFINITY&gt;</button>
            <% elsif timeframe_check('latest') %>
              <button type="button" id="narrow-feed-butt">&lt;LATEST&gt;</button>
            <% end %>
          </div>
        </div>
        <button type="button" class="on-page-nav-butt on-page-nav-butt-left" id="on-page-nav-butt-left" aria-label="nav-button-left">
          <img src="<%= asset_path "stack.svg" %>" alt="left-sidebar-nav">
        </button>
        <button type="button" class="on-page-nav-butt on-page-nav-butt-right" id="on-page-nav-butt-right" aria-label="nav-button-right">
          <img src="<%= asset_path "lightning.svg" %>" alt="right-sidebar-nav">
        </button>
      </div>

      <% if @home_page %>
        <% @featured_story ||= @stories.where.not(main_image: nil).first&.decorate || Article.new %>
        <% @stories = @stories.decorate %>
      <% end %>

      <% if @featured_story.id %>
        <div id="featured-story-marker" data-featured-article="articles-<%= @featured_story.id %>"></div>
        <img src="<%= cloud_cover_url(@featured_story.main_image) %>" style="display:none" alt="<%= @featured_story.title %>" />
        <a href="<%= @featured_story.path %>" id="article-link-<%= @featured_story.id %>" class="index-article-link" aria-label="Main Story" data-featured-article="articles-<%= @featured_story.id %>">
          <div class="single-article big-article" data-content-user-id="<%= @featured_story.user_id %>">
            <div class="picture image-final" style="background-color:<%= @featured_story.main_image_background_hex_color %>;background-image:url(<%= cloud_cover_url(@featured_story.main_image) %>)"></div>
            <div class="content-wrapper">
              <h3>
                <%= @featured_story.title %>
              </h3>
            </div>
            <a href="/<%= @featured_story.cached_user.username %>" class="featured-profile-button">
              <img class="featured-profile-pic" src="<%= ProfileImage.new(@featured_story.cached_user).get(90) %>" alt="<%= @featured_story.title %>" />
            </a>
            <div class="featured-user-name">
              <a href="/<%= @featured_story.cached_user.username %>">
                <%= @featured_story.cached_user.name %><%= render "shared/pro_checkmark" if @featured_story.cached_user.pro %>・<time datetime="<%= @featured_story.published_timestamp %>"><%= @featured_story.readable_publish_date %></time>
                <span class="time-ago-indicator-initial-placeholder" data-seconds="<%= @featured_story.published_at_int %>"></span>
              </a>
            </div>
            <div class="featured-tags tags">
              <% @featured_story.cached_tag_list_array.each do |tag| %>
                <a href="/t/<%= tag %>"><span class="tag">#<%= tag %></span></a>
              <% end %>
            </div>
            <% if @featured_story.comments_count > 0 %>
              <div class="article-engagement-count comments-count featured-engagement-count">
                <a href="<%= @featured_story.path %>#comments"><img src="<%= asset_path("comments-bubble.png") %>" alt="chat" />
                  <span class="engagement-count-number"><%= @featured_story.comments_count %></span>
                </a>
              </div>
            <% end %>
            <% if @featured_story.positive_reactions_count > 0 %>
              <div class="article-engagement-count reactions-count featured-engagement-count" data-reaction-count data-reactable-id="<%= @featured_story.id %>">
                <a href="<%= @featured_story.path %>"><img src="<%= asset_path("reactions-stack.png") %>" alt="heart" /><span id="engagement-count-number-<%= @featured_story.id %>" class="engagement-count-number">
                    <%= @featured_story.positive_reactions_count %>
                  </span>
                </a>
              </div>
            <% end %>
            <a
              href="<%= @featured_story.path %>"
              class="article-reading-time">
              <%= @featured_story.reading_time < 1 ? 1 : @featured_story.reading_time %> min read
            </a>
            <button
              type="button"
              class="article-engagement-count engage-button bookmark-button featured-engagement-count"
              data-reactable-id="<%= @featured_story.id %>"
              aria-label="Save to reading list"
              title="Save to reading list">
              <span class="bm-initial">SAVE</span>
              <span class="bm-success">SAVED</span>
            </button>
          </div>
        </a>
      <% end %>

      <div id="article-index-podcast-div"></div>

      <div class="substories" id="substories">
        <% if @stories.any? %>
          <%= render "stories/main_stories_feed" %>
        <% end %>
      </div>

      <div class="loading-articles" id="loading-articles">
        loading...
      </div>
    </div>

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

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