Create tag liquid tag (#1417)

* Create tag liquid tag

* Add tag embed to editor guide

app/assets/stylesheets/ltags/LiquidTags.scss

@@ -6,6 +6,7 @@
 @import 'LinkTag';
 @import 'PodcastTag';
 @import 'UserTag';
+@import 'TagTag';
 @import 'InstagramTag';
 @import 'GistTag';
 @import 'GithubReadmeTag';

app/assets/stylesheets/ltags/TagTag.scss

@@ -0,0 +1,57 @@
+@import 'variables';
+
+.ltag__tag {
+  border: 1px solid $black;
+  font-family: $helvetica;
+  border:1px solid $light-medium-gray;
+  box-shadow: $bold-shadow;
+  box-shadow: var(--theme-container-box-shadow, $bold-shadow);
+  border-radius:3px;
+  display: block;
+  margin: 0.95em 0 1.2em;
+  position:relative;
+  overflow:hidden;
+  @media screen and (min-width: 760px) {
+    margin: 0.95em auto;
+    width:620px;
+  }
+  .ltag__tag__content {
+    a {
+      color: $black !important;
+    }
+    width: 90%;
+    width: calc(100% - 36px);
+    padding: calc(0.5vw + 6px) 0px;
+    padding-left: 24px;
+    h2 {
+      margin: 0;
+      padding: 0;
+      font-weight: 500;
+      .follow-action-button {
+        visibility: hidden;
+        min-height: 25px;
+        display: inline-block;
+        color: white;
+        background: $green;
+        border-radius: 5px;
+        font-size: 0.6em;
+        vertical-align: 0.1em;
+        padding: 2px 20px;
+        border: 1px solid $green;
+        cursor: pointer;
+        &.following-butt {
+          background: $green;
+          color: white;
+        }
+        &.showing {
+          visibility: visible;
+        }
+      }
+    }
+    .ltag__tag__summary {
+      padding-top: calc(0.5vw + 6px);
+      font-size:0.77em;
+      line-height: 1.1em;
+    }
+  }
+}

app/liquid_tags/tag_tag.rb

@@ -0,0 +1,47 @@
+class TagTag < LiquidTagBase
+  include ApplicationHelper
+  include ActionView::Helpers::TagHelper
+
+  def initialize(_tag_name, tag, _tokens)
+    @tag = parse_tag_name_to_tag(tag)
+  end
+
+  def render(_context)
+    # looks like link liquid tag
+    <<-HTML
+    <div class="ltag__tag ltag__tag__id__#{@tag.id}" style="border-color:#{dark_color};box-shadow: 3px 3px 0px #{dark_color}">
+      <style>
+        .ltag__tag__id__#{@tag.id} .follow-action-button{
+          background-color: #{@tag.bg_color_hex} !important;
+          color: #{@tag.text_color_hex} !important;
+          border-color: #{@tag.bg_color_hex.to_s.casecmp('#ffffff').zero? ? @tag.text_color_hex : @tag.bg_color_hex} !important;
+        }
+      </style>
+        <div class="ltag__tag__content">
+          <h2>#<a href="/t/#{@tag.name}" class="ltag__tag__link">#{@tag.name}</a> #{follow_button(@tag)}</h2>
+          <div class="ltag__tag__summary">
+          #{@tag.short_summary}
+          </div>
+        </div>
+    </div>
+    HTML
+  end
+
+  private
+
+  def dark_color
+    HexComparer.new([@tag.bg_color_hex || "#0000000", @tag.text_color_hex || "#ffffff"]).brightness(0.88)
+  end
+
+  def parse_tag_name_to_tag(input)
+    input_no_space = input.delete(" ")
+    tag = Tag.find_by_name(input_no_space)
+    if tag.nil?
+      raise StandardError, "invalid tag name"
+    else
+      tag
+    end
+  end
+end
+
+Liquid::Template.register_tag("tag", TagTag)

app/views/pages/_editor_guide_text.html.erb

@@ -49,6 +49,10 @@
     <p>All you need is the DEV username:</p>
     <code>{% user jess %}</code>
 
+    <h3><strong>dev.to Tag Embed</strong></h3>
+    <p>All you need is the tag name:</p>
+    <code>{% tag git %}</code>
+
     <h3><strong>dev.to Comment Embed</strong></h3>
     <p>All you need is the <code>ID</code> at the end of a comment URL. To get the comment link, click the top right arrow on a comment and then click "Permalink". Here's an example:</p>
     <code>{% devcomment 2d1a %}</code>

spec/liquid_tags/tag_tag_spec.rb

@@ -0,0 +1,29 @@
+require "rails_helper"
+
+RSpec.describe TagTag, type: :liquid_template do
+  let(:tag) { create(:tag) }
+
+  setup { Liquid::Template.register_tag("tag", TagTag) }
+
+  def generate_tag_tag(id_code)
+    Liquid::Template.parse("{% tag #{id_code} %}")
+  end
+
+  context "when given valid id_code" do
+    it "renders the proper tag name" do
+      liquid = generate_tag_tag(tag.name)
+      expect(liquid.render).to include(tag.name)
+    end
+
+    it "renders tag short summary" do
+      liquid = generate_tag_tag(tag.name)
+      expect(liquid.render).to include(tag.short_summary.to_s)
+    end
+  end
+
+  it "rejects invalid id_code" do
+    expect do
+      generate_tag_tag("this should fail")
+    end.to raise_error(StandardError)
+  end
+end