FEATURE: embed topic with detailed metadata (#8062)

FEATURE: embed topic with detailed metadata (#8062)

diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss
index ed76e3c..746709e 100644
--- a/app/assets/stylesheets/embed.scss
+++ b/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;
+    }
   }
 }
diff --git a/app/controllers/embed_controller.rb b/app/controllers/embed_controller.rb
index 3c3fe25..49be221 100644
--- a/app/controllers/embed_controller.rb
+++ b/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)
diff --git a/app/views/embed/topics.html.erb b/app/views/embed/topics.html.erb
index 629577d..d13e98a 100644
--- a/app/views/embed/topics.html.erb
+++ b/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'>
-        <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>
+        <%- 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>
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index e1d5a55..57c10a8 100644
--- a/config/locales/server.en.yml
+++ b/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:

GitHub sha: 111ae95c

@eviltrout can you review this commit please? Thanks!

This feature can be seen on meta here: https://meta.discourse.org/embed/topics?template=complete

1 Like

I would prefer if we used flexbox rather than float. It’s much simpler and less error prone.

2 Likes

For security reasons down the road, I think we should validate this value. If the param is not one of the templates we support it should not be set.

2 Likes

@techAPJ I’ve requested a couple changes above.

1 Like

Thanks for the review! Here are the follow-up commits:

1 Like