Add listings to home page (#2912)

app/assets/stylesheets/articles.scss

@@ -1200,6 +1200,20 @@
             cursor: default;
           }
         }
+        .widget-listing-live-count {
+          @include themeable(background, theme-secondary-color, $green);
+          @include themeable(color, theme-opposite-color, white);
+          border-radius: 3px;
+          display: inline-block;
+          font-size: 0.8em;
+          padding: 1px 5px 0px;
+          line-height: 1.4em;
+        }
+        &.widget-header-listings {
+          @include themeable(background, theme-container-accent-background, $light-gray);
+          padding: 10px 12px;
+          margin: -10px -12px;
+        }
       }
       .widget-body {
         margin-top: 9px;
@@ -1212,6 +1226,11 @@
           max-height: 390px;
           overflow-y: scroll;
         }
+        &.widget-body-listings {
+          .cta-button {
+            margin-top: 15px;
+          }
+        }
         &.signup-cta-widget-body {
           ul {
             li {
@@ -1285,6 +1304,37 @@
             opacity: 0.86;
           }
         }
+        .widget-listing-link {
+          display: block;
+          padding: 6px 12px 4px;
+          font-size: 0.92em;
+          width: 100%;
+          margin-left: -12px;
+          @include themeable(color, theme-color, $black);
+          @include themeable(border-bottom, theme-subtle-border, 1px solid $light-medium-gray);
+          &:first-child {
+            @include themeable(border-top, theme-subtle-border, 1px solid $light-medium-gray);
+          }
+          .widget-listing-link-title {
+            display: block;
+            font-weight: 600;
+          }
+          .widget-listing-link-category {
+            display: inline-block;
+            @include themeable(border, theme-container-border, 1px solid darken($light-medium-gray, 10%));
+            @include themeable(color, theme-secondary-color, lighten($medium-gray, 5%));
+
+            padding: 0px 5px;
+            font-size: 0.77em;
+            border-radius: 3px;
+            margin-bottom: 3px;
+            line-height: 1.3em;
+          }
+          &:hover {
+            background: $lightest-gray;
+            @include themeable(background, theme-container-background-hover, $lightest-gray);
+          }
+        }
         .widget-accent {
           background: $purple;
           color: $bold-blue;
@@ -1305,7 +1355,7 @@
           }
         }
         .widget-events-single-link {
-          color: #000000;
+          color: $black;
           font-weight: 500;
         }
         .widget-user-pic {

app/controllers/classified_listings_controller.rb

@@ -5,7 +5,7 @@ class ClassifiedListingsController < ApplicationController
   before_action :authenticate_user!, only: %i[edit update new]
 
   def index
-    @displayed_classified_listing = ClassifiedListing.find_by!(category: params[:category], slug: params[:slug]) if params[:slug]
+    @displayed_classified_listing = ClassifiedListing.find_by!(slug: params[:slug]) if params[:slug]
     mod_page if params[:view] == "moderate"
     @classified_listings = if params[:category].blank?
                              ClassifiedListing.where(published: true).order("bumped_at DESC").limit(12)

app/controllers/stories_controller.rb

@@ -121,6 +121,7 @@ class StoriesController < ApplicationController
       end
     end
     assign_podcasts
+    assign_classified_listings
     @article_index = true
     set_surrogate_key_header "main_app_home_page"
     response.headers["Surrogate-Control"] = "max-age=600, stale-while-revalidate=30, stale-if-error=86400"
@@ -251,6 +252,10 @@ class StoriesController < ApplicationController
       select(:slug, :title, :podcast_id)
   end
 
+  def assign_classified_listings
+    @classified_listings = ClassifiedListing.where(published: true).select(:title, :category, :slug, :bumped_at)
+  end
+
   def article_finder(num_articles)
     tag = params[:tag]
     articles = Article.published.limited_column_select.page(@page).per(num_articles)

app/models/article.rb

@@ -78,7 +78,7 @@ class Article < ApplicationRecord
                         published.
                           cached_tagged_with("help").
                           order("created_at DESC").
-                          where("published_at > ? AND comments_count < ?", 12.hours.ago, 6)
+                          where("published_at > ? AND comments_count < ? AND score > ?", 12.hours.ago, 6, -4)
                       }
 
   scope :limited_column_select, lambda {

app/models/classified_listing.rb

@@ -75,6 +75,10 @@ class ClassifiedListing < ApplicationRecord
     }
   end
 
+  def path
+    "/listings/#{category}/#{slug}"
+  end
+
   private
 
   def evaluate_markdown

app/views/articles/_sidebar_additional.html.erb

@@ -27,6 +27,22 @@
           </div>
         </div>
       <% end %>
+      <% if params[:timeframe].blank? && @classified_listings.any? %>
+        <div class="widget">
+          <header class="widget-header-listings">
+            <a href="/listings"><h4>newest listings <span class="widget-listing-live-count"><%= @classified_listings.size %> active</span></h4></a>
+          </header>
+          <div class="widget-body widget-body-listings">
+            <% @classified_listings.order("bumped_at DESC").limit(8).each do |listing| %>
+              <a class="widget-listing-link" href="<%= listing.path %>">
+                <span class="widget-listing-link-category"><%= listing.category %></span>
+                <span class="widget-listing-link-title"><%= listing.title %></span>
+              </a>
+            <% end %>
+            <a class="cta cta-button" href="/listings/new">CREATE A LISTING</a>
+          </div>
+        </div>
+      <% end %>
       <% if Article.active_help.any? %>
         <div class="widget">
           <header>

app/views/layouts/_user_config.html.erb

@@ -7,6 +7,7 @@
               :root {\
         --theme-background: #0d1219;\
         --theme-color: #fff;\
+        --theme-opposite-color: #0d1219;\
         --theme-logo-background: #0a0a0a;\
         --theme-logo-color: #fff;\
         --theme-reaction-background: #202c3d;\
@@ -21,17 +22,19 @@
         --theme-top-bar-write-color: #fff;\
         --theme-container-background: #141f2d;\
         --theme-container-accent-background: #202c3d;\
-        --theme-container-background-hover: #37475c;\
+        --theme-container-background-hover: #1c2c3f;\
         --theme-gradient-background: linear-gradient(to right, #293d56 8%, #282833 18%, #293d56 33%);\
         --theme-container-color: #fff;\
         --theme-container-box-shadow: none;\
         --theme-container-border: 1px solid #22303f;\
+        --theme-subtle-border: 1px solid #1f2c3a;\
         --theme-social-icon-invert: invert(100)</style>'
     } else if (bodyClass.includes('pink-theme')) {
       document.getElementById('body-styles').innerHTML = '<style>\
       :root {\
       --theme-background: #FFF7F9;\
-      --theme-color: #333;\
+      --theme-color: #0a0a0a;\
+      --theme-opposite-color: #fff7f9;\
       --theme-logo-background: #fff7f9;\
       --theme-logo-color: #ff4983;\
       --theme-reaction-background: #eff0f2;\
@@ -51,6 +54,7 @@
       --theme-container-color: #333;\
       --theme-container-box-shadow: none;\
       --theme-container-border: 1px solid #ff4983;\
+      --theme-subtle-border: 1px solid #ffa8c3;\
       --theme-social-icon-invert: invert(0);\
       --theme-prime-option-border-color: rgba(255, 255, 255, 0.55)</style>'
     }

spec/requests/stories_index_spec.rb

@@ -45,6 +45,13 @@ RSpec.describe "StoriesIndex", type: :request do
       get "/"
       expect(response.body).not_to include(org.sponsorship_tagline)
     end
+
+    it "shows listings" do
+      user = create(:user)
+      listing = create(:classified_listing, user_id: user.id)
+      get "/"
+      expect(response.body).to include(listing.title)
+    end
   end
 
   describe "GET query page" do