maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add new article billboard locations (#20878)

Browse source 
* Initial work

* Add new billboard locations

* Clean up formatting
This commit is contained in:
Ben Halpern 2024-04-22 13:58:39 -04:00 • committed by GitHub
parent 0675272d48
commit f4c48fc83b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 84 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/stylesheets/billboards.scss
View file

@ -88,6 +88,17 @@
display: none;
}
.body-billboard {
@media (max-width: $breakpoint-s) {
margin: 0 -4px 0;
padding: 7px 6px !important;
}
@media (min-width: $breakpoint-m) {
margin: 0 -14px 0;
}
}
.hero-billboard {
margin: var(--su-2) 0 0;
h1,

2
app/javascript/packs/admin/billboards.jsx
View file

@ -143,7 +143,9 @@ document.ready.then(() => {
const articleSpecificPlacement = ['post_comments', 'post_sidebar', 'post_fixed_bottom'];
const targetedTagPlacements = [
'post_fixed_bottom',
'post_body_bottom',
'post_comments',
'post_comments_mid',
'post_sidebar',
'sidebar_right',
'sidebar_right_second',

4
app/models/billboard.rb
View file

@ -17,8 +17,10 @@ class Billboard < ApplicationRecord
home_hero
page_fixed_bottom
post_fixed_bottom
post_body_bottom
post_sidebar
post_comments
post_comments_mid
digest_first
digest_second].freeze
ALLOWED_PLACEMENT_AREAS_HUMAN_READABLE = ["Sidebar Left (First Position)",
@ -32,8 +34,10 @@ class Billboard < ApplicationRecord
"Home Hero",
"Fixed Bottom (Page)",
"Fixed Bottom (Individual Post)",
"Below the post body",
"Sidebar Right (Individual Post)",
"Below the comment section",
"Midway through the comment section",
"Digest Email First",
"Digest Email Second"].freeze

1
app/views/articles/_full_comment_area.html.erb
View file

@ -59,6 +59,7 @@
<div class="comments" id="comment-trees-container">
<% if @article.comments_count > 0 %>
<% @current_comment_index = 0 %>
<%= render partial: "articles/comment_tree",
collection: article_comment_tree(@article, @comments_to_show_count, @comments_order),
as: :comment_node,

3
app/views/articles/show.html.erb
View file

@ -195,6 +195,9 @@
collection: @collection,
articles: @collection_articles %>
<% end %>
<% if @article.long_markdown? %>
<div class="js-billboard-container body-billboard-container" data-async-url="<%= article_billboard_path(username: @article.username, slug: @article.slug, placement_area: :post_body_bottom) %>"></div>
<% end %>
</div>
<%= render "articles/full_comment_area" %>

5
app/views/comments/_comment.html.erb
View file

@ -1,4 +1,8 @@
<% if comment && comment.user %>
<% if @current_comment_index.to_i > 6 && !@shown_billboard && comment.depth.zero? %>
<div class="js-billboard-container mid-comments-billboard-container pb-6" data-async-url="<%= article_billboard_path(username: @article.username, slug: @article.slug, placement_area: :post_comments_mid) %>"></div>
<% @shown_billboard = true %>
<% end %>
<% if comment.depth < 3 %>
<details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-<%= comment.depth %>
<%= comment_class(comment, is_view_root: is_view_root) %>
@ -36,4 +40,5 @@
<% if comment.depth < 3 %>
</details>
<% end %>
<% @current_comment_index += 1 if @current_comment_index.present? %>
<% end %>

14
app/views/shared/_billboard.html.erb
View file

@ -82,6 +82,20 @@
<%= billboard.processed_html.html_safe %>
</div>
</div>
<% elsif billboard.placement_area == "post_body_bottom" %>
<div class="crayons-card crayons-card--secondary crayons-sponsorship billboard js-billboard body-billboard mb-2 mt-6"
data-display-unit data-id="<%= billboard.id %>"
data-category-click="<%= BillboardEvent::CATEGORY_CLICK %>"
data-category-impression="<%= BillboardEvent::CATEGORY_IMPRESSION %>"
data-context-type="<%= data_context_type %>"
data-special="<%= billboard.special_behavior %>"
data-article-id="<%= @article&.id %>"
data-type-of="<%= billboard.type_of %>">
<%= render partial: "shared/billboard_header", locals: { billboard: billboard } %>
<div class="p-1 pt-3 text-styles text-styles--billboard">
<%= billboard.processed_html.html_safe %>
</div>
</div>
<% else %>
<div class="crayons-card crayons-card--secondary crayons-sponsorship billboard js-billboard"
data-display-unit data-id="<%= billboard.id %>"

44
spec/requests/articles/articles_show_spec.rb
View file

@ -257,6 +257,50 @@ RSpec.describe "ArticlesShow" do
expect(response.body).not_to include("Child comment")
end
end
context "when below post billboard exists" do
it "does not render when it is below long article threshold" do
article.update_column(:body_markdown, "a" * 888)
get article.path
expect(response.body).not_to include("body-billboard-container")
end
it "renders when it is above long article threshold" do
article.update_column(:body_markdown, "a" * 901)
get article.path
expect(response.body).to include("body-billboard-container")
end
end
context "when a mid-comments billboard exists" do
it "does not render the billboard if there are fewer than 6 root comments" do
create_list(:comment, 6, commentable: article)
get article.path
expect(response.body).not_to include("mid-comments-billboard-container")
end
it "renders the billboard if there are 6 or more root comments" do
create_list(:comment, 7, commentable: article)
get article.path
expect(response.body).to include("mid-comments-billboard-container")
end
it "does not render the billboard when the first comment has too few children" do
create(:comment, commentable: article, score: 100)
create_list(:comment, 4, commentable: article, parent: Comment.last)
create(:comment, commentable: article, score: 2)
get article.path
expect(response.body).not_to include("mid-comments-billboard-container")
end
it "renders the billboard when the first comment has enough children" do
create(:comment, commentable: article, score: 100)
create_list(:comment, 5, commentable: article, parent: Comment.last)
create(:comment, commentable: article, score: 2)
get article.path
expect(response.body).to include("mid-comments-billboard-container")
end
end
end
context "when user not signed in but internal nav triggered" do