feat: introduce content tags

style.css

@@ -5082,3 +5082,39 @@ html[dir="rtl"] .notification-left-aligned {
 .dropdown-chevron-icon {
   vertical-align: middle;
 }
+
+.content-tags > p {
+  color: #68737D;
+  margin-top: 32px;
+  margin-bottom: 4px;
+}
+
+.content-tags-add-hint {
+  color: #68737D;
+  font-size: 14px;
+}
+
+.content-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  word-break: break-word;
+}
+
+.content-tag-list li {
+  border-right: 1px solid #C2C8CC;
+  margin-bottom: 4px;
+}
+
+[dir="ltr"] .content-tag-list li {
+  padding-right: 8px;
+  margin-right: 8px;
+}
+
+[dir="rtl"] .content-tag-list li {
+  padding-left: 8px;
+  margin-left: 8px;
+}
+
+.content-tag-list li:last-child {
+  border: none;
+}

styles/_content-tags.scss

@@ -0,0 +1,36 @@
+.content-tags {
+  > p {
+    color: #68737D;
+    margin-top: 32px;
+    margin-bottom: 4px;
+  }
+
+  &-add-hint {
+    color: #68737D;
+    font-size: 14px;
+  }
+}
+
+.content-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  word-break: break-word;
+
+  li {
+    border-right: 1px solid #C2C8CC;
+    margin-bottom: 4px;
+
+    [dir="ltr"] & {
+      padding-right: 8px;
+      margin-right: 8px;
+    }
+    [dir="rtl"] & {
+      padding-left: 8px;
+      margin-left: 8px;
+    }
+
+    &:last-child {
+      border: none;
+    }
+  }
+}

styles/index.scss

@@ -40,3 +40,4 @@
 @import "search_results";
 @import "notifications";
 @import "dropdowns";
+@import "content-tags";

templates/article_page.hbs

@@ -91,6 +91,22 @@
       <section class="article-info">
         <div class="article-content">
           <div class="article-body">{{article.body}}</div>
+
+          {{#if (compare article.content_tags.length ">" 0)}}
+            <section class="content-tags">
+              <p>{{t 'content_tags_label'}}</p>
+              <ul class="content-tag-list">
+                {{#each article.content_tags}}
+                  <li class="content-tag-item" data-content-tag-id="{{id}}">
+                    {{#link "search_result" content_tag_id=id target="_blank"}}
+                      {{name}}
+                    {{/link}}
+                  </li>
+                {{/each}}
+              </ul>
+            </section>
+          {{/if}}
+
           {{#if attachments}}
             <div class="article-attachments">
               <ul class="attachments">

templates/community_post_page.hbs

@@ -123,6 +123,21 @@
             <div class="post-content">
               <div class="post-body">{{post.details}}</div>
             </div>
+
+            {{#if (compare post.content_tags.length ">" 0)}}
+              <section class="content-tags">
+                <p>{{t 'content_tags_label'}}</p>
+                <ul class="content-tag-list">
+                  {{#each post.content_tags}}
+                    <li class="content-tag-item" data-content-tag-id="{{id}}">
+                      {{#link "search_result" content_tag_id=id target="_blank"}}
+                        {{name}}
+                      {{/link}}
+                    </li>
+                  {{/each}}
+                </ul>
+              </section>
+            {{/if}}
           </div>
 
           <div class="post-actions-wrapper">

templates/new_community_post_page.hbs

@@ -67,6 +67,23 @@
         {{/validate}}
       </div>
 
+      <div class="form-field">
+        {{#required 'content_tags'}}
+          {{label 'content_tags'}}
+        {{else}}
+          {{#label 'content_tags'}}
+            {{t 'content_tags_label'}}<span class="optional">({{t 'optional'}})</span>
+          {{/label}}
+        {{/required}}
+        <span class="content-tags-add-hint">{{t 'content_tags_description'}}</span>
+        {{multiselect 'content_tags'}}
+        {{#validate 'content_tags'}}
+          <div class="notification notification-error notification-inline">
+            {{error 'content_tags'}}
+          </div>
+        {{/validate}}
+      </div>
+
       <footer>{{input type='submit'}}</footer>
     {{/form}}
   </div>