FEATURE: allows to to style published page with themes/plugins (#9570)

FEATURE: allows to to style published page with themes/plugins (#9570)

diff --git a/app/assets/javascripts/discourse/app/templates/topic.hbs b/app/assets/javascripts/discourse/app/templates/topic.hbs
index a306835..6fadf0b 100644
--- a/app/assets/javascripts/discourse/app/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/topic.hbs
@@ -87,7 +87,7 @@
       {{/topic-title}}
 
       {{#if model.publishedPage}}
-        <div class="published-page">
+        <div class="published-page-notice">
           <div class="details">
             {{i18n "topic.publish_page.topic_published"}}
             <div>
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index cd7c7d7..02b267a 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -296,7 +296,7 @@ a.topic-featured-link {
   }
 }
 
-.published-page {
+.published-page-notice {
   display: flex;
   justify-content: space-between;
   padding-bottom: 1em;
diff --git a/app/assets/stylesheets/publish.scss b/app/assets/stylesheets/publish.scss
index b59a480..f06ff98 100644
--- a/app/assets/stylesheets/publish.scss
+++ b/app/assets/stylesheets/publish.scss
@@ -1,32 +1,32 @@
 @import "common";
 
-body {
-  background-color: $secondary;
-  color: $primary;
+.published-page-wrapper {
+  margin: 2em auto;
+  max-width: 800px;
 }
 
 .published-page {
-  margin: 2em auto;
-  max-width: 800px;
+  background-color: $secondary;
+  color: $primary;
+}
 
-  h1 {
-    color: $header_primary;
-  }
+.published-page-title {
+  color: $header_primary;
+}
 
-  .published-page-author {
-    margin-top: 1em;
-    margin-bottom: 2em;
-    display: flex;
+.published-page-author {
+  margin-top: 1em;
+  margin-bottom: 2em;
+  display: flex;
 
-    .avatar {
-      margin-right: 1em;
-    }
-    .topic-created-at {
-      color: $primary-medium;
-    }
+  .avatar {
+    margin-right: 1em;
   }
-
-  .published-page-body {
-    font-size: 1.25em;
+  .topic-created-at {
+    color: $primary-medium;
   }
 }
+
+.published-page-body {
+  font-size: 1.25em;
+}
diff --git a/app/controllers/published_pages_controller.rb b/app/controllers/published_pages_controller.rb
index a133732..67d3fb8 100644
--- a/app/controllers/published_pages_controller.rb
+++ b/app/controllers/published_pages_controller.rb
@@ -15,6 +15,18 @@ class PublishedPagesController < ApplicationController
     guardian.ensure_can_see!(pp.topic)
     @topic = pp.topic
     @canonical_url = @topic.url
+
+    @body_classes = Set.new([
+      'published-page',
+      params[:slug],
+      "topic-#{@topic.id}",
+      @topic.tags.pluck(:name)
+    ].flatten.compact)
+
+    if @topic.category
+      @body_classes << @topic.category.slug
+    end
+
     render layout: 'publish'
   end
 
diff --git a/app/views/common/_discourse_publish_stylesheet.html.erb b/app/views/common/_discourse_publish_stylesheet.html.erb
new file mode 100644
index 0000000..458aaff
--- /dev/null
+++ b/app/views/common/_discourse_publish_stylesheet.html.erb
@@ -0,0 +1,9 @@
+<%= discourse_stylesheet_link_tag 'publish', theme_ids: nil %>
+
+<%- Discourse.find_plugin_css_assets(include_official: allow_plugins?, include_unofficial: allow_third_party_plugins?, mobile_view: mobile_view?, desktop_view: !mobile_view?, request: request).each do |file| %>
+  <%= discourse_stylesheet_link_tag(file) %>
+<%- end %>
+
+<%- if theme_ids.present? %>
+  <%= discourse_stylesheet_link_tag(mobile_view? ? :mobile_theme : :desktop_theme) %>
+<%- end %>
diff --git a/app/views/layouts/publish.html.erb b/app/views/layouts/publish.html.erb
index 2b3d727..5bb0f95 100644
--- a/app/views/layouts/publish.html.erb
+++ b/app/views/layouts/publish.html.erb
@@ -3,13 +3,14 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover">
-    <%= discourse_stylesheet_link_tag 'publish', theme_ids: nil %>
+
+    <%= render partial: "common/discourse_publish_stylesheet" %>
 
     <%- if @canonical_url -%>
       <link rel="canonical" href="<%= @canonical_url %>" />
     <%- end -%>
   </head>
-  <body>
+  <body class="<%= @body_classes.to_a.join(' ') %>">
     <%= yield %>
   </body>
 </html>
diff --git a/app/views/published_pages/show.html.erb b/app/views/published_pages/show.html.erb
index 43b11f6..4f51c09 100644
--- a/app/views/published_pages/show.html.erb
+++ b/app/views/published_pages/show.html.erb
@@ -1,4 +1,4 @@
-<div class="published-page">
+<div class="published-page-wrapper">
   <div class="published-page-header">
     <h1 class="published-page-title"><%= @topic.title %></h1>
 
diff --git a/spec/requests/published_pages_controller_spec.rb b/spec/requests/published_pages_controller_spec.rb
index ed50ed8..6793761 100644
--- a/spec/requests/published_pages_controller_spec.rb
+++ b/spec/requests/published_pages_controller_spec.rb
@@ -76,9 +76,21 @@ RSpec.describe PublishedPagesController do
         expect(response.status).to eq(404)
       end
 
-      it "returns 200 for a valid article" do
-        get published_page.path
-        expect(response.status).to eq(200)
+      context "the article is valid" do
+        before do
+          SiteSetting.tagging_enabled = true
+          published_page.topic.tags = [Fabricate(:tag, name: "recipes")]
+        end
+
+        it "returns 200" do
+          get published_page.path
+          expect(response.status).to eq(200)
+        end
+
+        it "defines correct css classes on body" do
+          get published_page.path
+          expect(response.body).to include("<body class=\"published-page published-page-test topic-#{published_page.topic_id} recipes uncategorized\">")
+        end
       end
     end
 

GitHub sha: a6f986b5

This commit appears in #9570 which was approved by eviltrout and eviltrout. It was merged by jjaffeux.