diff --git a/app/assets/stylesheets/ltags/LinkTag.scss b/app/assets/stylesheets/ltags/LinkTag.scss index e94325bd9..1e11e2e4e 100644 --- a/app/assets/stylesheets/ltags/LinkTag.scss +++ b/app/assets/stylesheets/ltags/LinkTag.scss @@ -18,6 +18,38 @@ margin: 0.95em auto; width:620px; } + .video-image { + position: relative; + padding-top: 56%; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + background: $black no-repeat center center; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + display: block; + } + .video-timestamp { + position: absolute; + font-size: 12px; + bottom: 6px; + right: 5px; + background-color: rgba(0,0,0,0.8); + color: $white; + padding: 0px 5px 0px; + font-weight: 500; + border-radius: 3px; + display: block; + line-height: 20px; + img { + height: 14px; + width: 14px; + display: inline-block; + vertical-align: -2px; + padding-left: 5px; + } + } .ltag__link__pic{ display:inline-block; padding: calc(0.4vw + 8px) calc(0.8vw + 8px); @@ -39,15 +71,16 @@ margin:0; padding:0; font-weight: 500; + font-size: 1.5em; } h3{ margin: 0.1vw 0; padding:0; - font-size:0.8em; + font-size:0.7em; margin-bottom:0; font-weight:bold; color: $medium-gray; - color: var(--theme-secondary-color, $black); + color: var(--theme-secondary-color, $medium-gray); a{ color: $medium-gray; color: var(--theme-secondary-color, $black); @@ -57,12 +90,26 @@ margin:0; padding:0; line-height:1; + font-size: 0.88em; + margin-bottom: 5px; } .ltag__link__tag{ margin-right:calc(0.4vw + 4px); font-size:0.8em; margin-left:1px; } + .ltag__link__servicename { + color: $medium-gray; + color: var(--theme-secondary-color, $medium-gray); + font-size: 0.7em; + img { + vertical-align: -5px; + height: 1.5em; + width: 1.5em; + display: inline-block; + margin-left: 2px; + } + } } } diff --git a/app/labor/markdown_parser.rb b/app/labor/markdown_parser.rb index c375f65d6..9a806f133 100644 --- a/app/labor/markdown_parser.rb +++ b/app/labor/markdown_parser.rb @@ -127,7 +127,7 @@ class MarkdownParser def allowed_image_host?(src) # GitHub camo image won't parse but should be safe to host direct - src.start_with?("https://camo.githubusercontent.com/", "https://cdn-images-1.medium.com") + src.start_with?("https://camo.githubusercontent.com/") end def giphy_img?(source) diff --git a/app/liquid_tags/medium_tag.rb b/app/liquid_tags/medium_tag.rb index 0fcb27f0a..a02275b1c 100644 --- a/app/liquid_tags/medium_tag.rb +++ b/app/liquid_tags/medium_tag.rb @@ -32,3 +32,5 @@ class MediumTag < LiquidTagBase raise StandardError, "Invalid link URL or link URL does not exist" end end + +Liquid::Template.register_tag("medium", MediumTag) \ No newline at end of file diff --git a/app/views/articles/_liquid.html.erb b/app/views/articles/_liquid.html.erb index 65a478b21..fe106cb15 100644 --- a/app/views/articles/_liquid.html.erb +++ b/app/views/articles/_liquid.html.erb @@ -1,4 +1,11 @@
{% vimeo 193110695 %}Just enter the full URL of the Medium article you are trying to embed.
+{% medium https://medium.com/s/story/boba-science-how-can-i-drink-a-bubble-tea-to-ensure-that-i-dont-finish-the-tea-before-the-bobas-7fc5fd0e442d %}
+
All you need is the SlideShare key
{% slideshare rdOzN9kr1yK5eE %}
diff --git a/spec/liquid_tags/link_tag_spec.rb b/spec/liquid_tags/link_tag_spec.rb
index b888ee17d..e751bb167 100644
--- a/spec/liquid_tags/link_tag_spec.rb
+++ b/spec/liquid_tags/link_tag_spec.rb
@@ -29,7 +29,7 @@ RSpec.describe LinkTag, type: :liquid_template do