FIX: Broken hashtags on embed and publish pages

Since we don't have icons or access to the JS that transforms hashtag icon placeholders into their proper icons and colours on embed and publish pages, we need to at least show _something_ and make sure the hashtags are not totally broken on these pages.
discourse · Nov 2, 2023 · 65b83fa · 65b83fa
1 parent 1c395e1
commit 65b83fa
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 0 deletions.
diff --git a/app/assets/javascripts/discourse/scripts/embed-application.js b/app/assets/javascripts/discourse/scripts/embed-application.js
@@ -62,5 +62,12 @@
         names[i].innerHTML = new BreakString(username).break();
       }
     }
+
+    // Use a # for hashtags since we don't have the JS and icons needed here to render the proper icon.
+    let hashtags = document.querySelectorAll(".cooked a.hashtag-cooked");
+    for (i = 0; i < hashtags.length; i++) {
+      hashtags[i].querySelector(".hashtag-icon-placeholder .d-icon").remove();
+      hashtags[i].querySelector(".hashtag-icon-placeholder").innerText = "#";
+    }
   };
 })();
diff --git a/app/assets/javascripts/discourse/scripts/publish.js b/app/assets/javascripts/discourse/scripts/publish.js
@@ -0,0 +1,12 @@
+(function () {
+  window.onload = function () {
+    // Use a # for hashtags since we don't have the JS and icons needed here to render the proper icon.
+    let hashtags = document.querySelectorAll(
+      ".published-page-content-body a.hashtag-cooked"
+    );
+    for (let i = 0; i < hashtags.length; i++) {
+      hashtags[i].querySelector(".hashtag-icon-placeholder .d-icon").remove();
+      hashtags[i].querySelector(".hashtag-icon-placeholder").innerText = "#";
+    }
+  };
+})();
diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss
@@ -3,6 +3,7 @@
 @import "./common/foundation/base";
 @import "./color_definitions";
 @import "./common/components/buttons";
+@import "./common/components/hashtag";
 
 article.post {
   border-bottom: 1px solid var(--primary-low);
@@ -73,6 +74,15 @@ article.post {
     p {
       margin: 0 0 1em 0;
     }
+
+    .hashtag-cooked {
+      padding: 0.2em 0.5em;
+
+      .hashtag-icon-placeholder {
+        font-weight: bold;
+        margin-right: 0;
+      }
+    }
   }
 }
 

diff --git a/app/assets/stylesheets/publish.scss b/app/assets/stylesheets/publish.scss
@@ -81,4 +81,15 @@
     max-width: 100%;
     height: auto;
   }
+
+  .hashtag-cooked {
+    padding: 0.1em 0.5em;
+    font-size: 0.85em;
+
+    .hashtag-icon-placeholder {
+      font-weight: bold;
+      font-size: inherit;
+      margin-right: 0;
+    }
+  }
 }
diff --git a/app/views/layouts/publish.html.erb b/app/views/layouts/publish.html.erb
@@ -7,6 +7,7 @@
     <%= render partial: "common/discourse_publish_stylesheet" %>
     <%= render_google_tag_manager_head_code %>
     <%= render_google_universal_analytics_code %>
+    <%= preload_script 'publish' %>
   </head>
   <body class="<%= @body_classes.to_a.join(' ') %>">
     <%= theme_lookup("header") %>