FEATURE: embed topic with detailed metadata (#8062)

app/assets/stylesheets/embed.scss

@@ -186,6 +186,7 @@ div.lightbox-wrapper {
       border-bottom: 1px solid $primary-low;
       padding: 0.5rem;
       width: 100%;
+      display: inline-block;
 
       a {
         color: $primary;
@@ -195,5 +196,37 @@ div.lightbox-wrapper {
         color: $primary-medium;
       }
     }
+
+    .topic-title-link {
+      float: left;
+    }
+
+    .topic-featured-image {
+      float: right;
+
+      img {
+        max-width: 200px;
+        max-height: 100px;
+      }
+    }
+
+    .topic-last-posted-at, .topic-author-avatar-timestamp, .topic-stats {
+      clear: left;
+      float: left;
+      padding-top: 5px;
+    }
+
+    .topic-author-avatar-timestamp img {
+      max-height: 20px;
+    }
+
+    .topic-created-at {
+      padding-left: 5px;
+      vertical-align: middle;
+    }
+
+    .topic-last-posted-at, .topic-created-at, .topic-stats {
+      color: $primary-medium;
+    }
   }
 }

app/controllers/embed_controller.rb

@@ -36,6 +36,12 @@ class EmbedController < ApplicationController
       raise Discourse::InvalidParameters.new(:embed_id) unless @embed_id =~ /^de\-[a-zA-Z0-9]+$/
     end
 
+    if params.has_key?(:template)
+      @template = params[:template]
+    else
+      @template = "basic"
+    end
+
     list_options = build_topic_list_options
     list_options[:per_page] = params[:per_page].to_i if params.has_key?(:per_page)
     topic_query = TopicQuery.new(current_user, list_options)

app/views/embed/topics.html.erb

@@ -2,9 +2,45 @@
   <div class='topics-list' data-embed-state='loaded' <%- if @embed_id %>data-embed-id="<%= @embed_id %>"<%- end %>>
     <%- @list.topics.each do |t| %>
       <div class='topic-list-item'>
+        <%- if @template == "complete" %>
+          <div class='main-link'>
+            <div class='topic-title-link'>
+              <a target="_parent" href="<%= t.url %>" class="title raw-link raw-topic-link" data-topic-id="<%= t.id %>"><%= t.title %></a>
+            </div>
+            <%- if t.image_url.present? %>
+              <div class='topic-featured-image'>
+                <img src="<%= t.image_url %>">
+              </div>
+            <%- end %>
+            <%- if t.posts_count > 1 %>
+              <div class="topic-last-posted-at" title="<%= t.last_posted_at.strftime("%B %e, %Y %l:%M%P") %>">
+                <%= "#{I18n.t('embed.last_reply')} #{time_ago_in_words(t.last_posted_at, scope: :'datetime.distance_in_words_verbose')}" %>
+              </div>
+            <%- end %>
+            <div class='topic-author-avatar-timestamp'>
+              <img src="<%= t.user.avatar_template.gsub('{size}', '20') %>">
+              <span class="topic-created-at" title="<%= t.created_at.strftime("%B %e, %Y %l:%M%P") %>">
+                <%= "#{I18n.t('embed.created')} #{time_ago_in_words(t.created_at, scope: :'datetime.distance_in_words_verbose')}" %>
+              </span>
+            </div>
+            <div class='topic-stats'>
+              <%- if t.like_count > 0 %>
+                <div class='topic-like-count'>
+                  <%= I18n.t('embed.likes', count: t.like_count) %>
+                </div>
+              <%- end %>
+              <%- if t.posts_count > 1 %>
+                <div class='topic-post-count'>
+                  <%= I18n.t('embed.replies', count: (t.posts_count - 1)) %>
+                </div>
+              <%- end %>
+            </div>
+          </div>
+        <%- else %>
           <div class='main-link'>
             <a target="_parent" href="<%= t.url %>" class="title raw-link raw-topic-link" data-topic-id="<%= t.id %>"><%= t.title %></a>
           </div>
+        <%- end %>
       </div>
     <%- end %>
   </div>

config/locales/server.en.yml

@@ -283,6 +283,11 @@ en:
     replies:
       one: "%{count} reply"
       other: "%{count} replies"
+    likes:
+      one: "%{count} like"
+      other: "%{count} likes"
+    last_reply: "Last reply"
+    created: "Created"
 
   no_mentions_allowed: "Sorry, you can't mention other users."
   too_many_mentions: