Add additional fragment caching to home page (#2401)
This commit is contained in:
Ben Halpern
GitHub
parent
0d24dee4f0
commit
8c740b77ac
3 changed files with 120 additions and 117 deletions
|
|
@ -106,7 +106,6 @@ class StoriesController < ApplicationController
|
|||
if %w[week month year infinity].include?(params[:timeframe])
|
||||
@stories = @stories.where("published_at > ?", Timeframer.new(params[:timeframe]).datetime).
|
||||
order("score DESC")
|
||||
@featured_story = @stories.where.not(main_image: nil).first&.decorate || Article.new
|
||||
elsif params[:timeframe] == "latest"
|
||||
@stories = @stories.order("published_at DESC").
|
||||
where("featured_number > ? AND score > ?", 1_449_999_999, -40)
|
||||
|
|
@ -120,9 +119,7 @@ class StoriesController < ApplicationController
|
|||
offset = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 5, 6, 7, 8, 9].sample # random offset, weighted more towards zero
|
||||
@stories = @stories.offset(offset)
|
||||
end
|
||||
@featured_story = @stories.where.not(main_image: nil).first&.decorate || Article.new
|
||||
end
|
||||
@stories = @stories.decorate
|
||||
assign_podcasts
|
||||
@article_index = true
|
||||
set_surrogate_key_header "main_app_home_page"
|
||||
|
|
|
|||
|
|
@ -23,124 +23,130 @@
|
|||
<meta name="twitter:card" content="summary_large_image">
|
||||
<%= auto_discovery_link_tag(:rss, "https://dev.to/feed", title: "#{ApplicationConfig['COMMUNITY_NAME']} RSS Feed") %>
|
||||
<% end %>
|
||||
<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 id="narrow-feed-butt"><MY <%= ApplicationConfig["COMMUNITY_NAME"] %> FEED></button>
|
||||
<% elsif timeframe_check('week') %>
|
||||
<button id="narrow-feed-butt"><PAST WEEK></button>
|
||||
<% elsif timeframe_check('month') %>
|
||||
<button id="narrow-feed-butt"><PAST MONTH></button>
|
||||
<% elsif timeframe_check('year') %>
|
||||
<button id="narrow-feed-butt"><PAST YEAR></button>
|
||||
<% elsif timeframe_check('infinity') %>
|
||||
<button id="narrow-feed-butt"><INFINITY></button>
|
||||
<% elsif timeframe_check('latest') %>
|
||||
<button id="narrow-feed-butt"><LATEST></button>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<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 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 @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">
|
||||
<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>
|
||||
<% params.delete(:i) %>
|
||||
<% cache("main-stories-index-#{params.to_s}", expires_in: 4.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>
|
||||
<a href="<%= @featured_story.user.path %>" class="featured-profile-button">
|
||||
<img class="featured-profile-pic" src="<%= ProfileImage.new(@featured_story.user).get(90) %>" alt="<%= @featured_story.title %>" />
|
||||
</a>
|
||||
<div class="featured-user-name"><a href="<%= @featured_story.user.path %>"><%= @featured_story.user.name %>
|
||||
・<%= @featured_story.readable_publish_date %><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>
|
||||
<div class="narrow-nav-select" aria-label="feed-filter-select">
|
||||
<% if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %>
|
||||
<button id="narrow-feed-butt"><MY <%= ApplicationConfig["COMMUNITY_NAME"] %> FEED></button>
|
||||
<% elsif timeframe_check('week') %>
|
||||
<button id="narrow-feed-butt"><PAST WEEK></button>
|
||||
<% elsif timeframe_check('month') %>
|
||||
<button id="narrow-feed-butt"><PAST MONTH></button>
|
||||
<% elsif timeframe_check('year') %>
|
||||
<button id="narrow-feed-butt"><PAST YEAR></button>
|
||||
<% elsif timeframe_check('infinity') %>
|
||||
<button id="narrow-feed-butt"><INFINITY></button>
|
||||
<% elsif timeframe_check('latest') %>
|
||||
<button id="narrow-feed-butt"><LATEST></button>
|
||||
<% 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
|
||||
class="article-engagement-count bookmark-engage featured-engagement-count"
|
||||
data-reactable-id="<%= @featured_story.id %>"
|
||||
aria-label="Add to reading list"
|
||||
title="Add to reading list">
|
||||
<span class="bm-success">SAVED</span>
|
||||
<span class="bm-initial">SAVE</span>
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
<% end %>
|
||||
<div class="substories" id="substories">
|
||||
<% if @stories.any? %>
|
||||
<%= render "stories/main_stories_feed" %>
|
||||
<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 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">
|
||||
<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.user.path %>" class="featured-profile-button">
|
||||
<img class="featured-profile-pic" src="<%= ProfileImage.new(@featured_story.user).get(90) %>" alt="<%= @featured_story.title %>" />
|
||||
</a>
|
||||
<div class="featured-user-name"><a href="<%= @featured_story.user.path %>"><%= @featured_story.user.name %>
|
||||
・<%= @featured_story.readable_publish_date %><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
|
||||
class="article-engagement-count bookmark-engage featured-engagement-count"
|
||||
data-reactable-id="<%= @featured_story.id %>"
|
||||
aria-label="Add to reading list"
|
||||
title="Add to reading list">
|
||||
<span class="bm-success">SAVED</span>
|
||||
<span class="bm-initial">SAVE</span>
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
<% end %>
|
||||
<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>
|
||||
<div class="loading-articles" id="loading-articles">
|
||||
loading...
|
||||
</div>
|
||||
<%= render "articles/sidebar_additional" %>
|
||||
</div>
|
||||
<%= render "articles/sidebar_additional" %>
|
||||
</div>
|
||||
|
||||
<%= render "stories/narrow_nav_menu" %>
|
||||
<%= render "stories/stories_list_script" %>
|
||||
<%= render "stories/narrow_nav_menu" %>
|
||||
<%= render "stories/stories_list_script" %>
|
||||
<% end %>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<% if @default_home_feed && user_signed_in? %>
|
||||
<% cache("fetched-home-articles-object", expires_in: 3.minutes) do %>
|
||||
<% cache("fetched-home-articles-object", expires_in: 8.minutes) do %>
|
||||
<% @new_stories = Article.published.
|
||||
where("published_at > ? AND score > ?", rand(2..6).hours.ago, -30).
|
||||
includes(:user).
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue