Finalize Medium liquid tag and add video to video article liquid tags (#2832)
* Finalize Medium liquid tag and add video to video article liquid tags * Add Medium section to editor guide
This commit is contained in:
Ben Halpern
GitHub
parent
486275cbbb
commit
d9e11da157
7 changed files with 70 additions and 8 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -1,4 +1,11 @@
|
|||
<div class='ltag__link'>
|
||||
<% if article.video && article.cloudinary_video_url %>
|
||||
<a href='<%= article.path %>' class="video-image" style="background-image: url(<%= article.cloudinary_video_url %>)">
|
||||
<span class="video-timestamp">
|
||||
<img src="<%= asset_path("video-camera.svg") %>" alt="video camera">
|
||||
<%= article.video_duration_in_minutes %></span>
|
||||
</a>
|
||||
<% end %>
|
||||
<a href='<%= article.user.path %>' class='ltag__link__link'>
|
||||
<div class='ltag__link__pic'>
|
||||
<img src='<%= ProfileImage.new(article.user).get(150) %>' alt='<%= article.user.username + " " + "image"%>'/>
|
||||
|
|
@ -7,7 +14,7 @@
|
|||
<a href='<%= article.path %>' class='ltag__link__link'>
|
||||
<div class='ltag__link__content'>
|
||||
<h2><%= title %></h2>
|
||||
<h3><%= article.user.name %></h3>
|
||||
<h3><%= article.user.name %> ・ <%= article.reading_time %> min read</h3>
|
||||
<div class='ltag__link__taglist'>
|
||||
<% article.tag_list.each do |t| %>
|
||||
<span class='ltag__link__tag'>#<%= t %></span>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,11 @@
|
|||
<a href='<%= response[:url] %>' class='ltag__link__link'>
|
||||
<div class='ltag__link__content'>
|
||||
<h2><%= response[:title] %></h2>
|
||||
<h3><%= response[:author] %></h3>
|
||||
<%= inline_svg('medium_icon.svg', size: '27px*27px', aria: true, title: 'medium logo') %> Medium
|
||||
<div class='ltag__link__taglist'><%= response[:reading_time] %></div>
|
||||
<h3><%= response[:author] %> ・ <%= response[:reading_time] %></h3>
|
||||
<div class="ltag__link__servicename">
|
||||
<img src="<%= asset_path("medium_icon.svg") %>" alt="Medium Logo" aria-label="Medium Logo" />
|
||||
<%= ApplicationController.helpers.get_host_without_www response[:url] %>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -141,6 +141,10 @@
|
|||
<li><strong>Vimeo:</strong> <code>{% vimeo 193110695 %}</code></li>
|
||||
</ul>
|
||||
|
||||
<h3><strong>Medium Embed</strong></h3>
|
||||
<p>Just enter the full URL of the Medium article you are trying to embed.</p>
|
||||
<code>{% 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 %}</code>
|
||||
|
||||
<h3><strong>SlideShare Embed</strong></h3>
|
||||
<p>All you need is the SlideShare <code>key</code></p>
|
||||
<code>{% slideshare rdOzN9kr1yK5eE %}</code>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ RSpec.describe LinkTag, type: :liquid_template do
|
|||
<a href='#{article.path}' class='ltag__link__link'>
|
||||
<div class='ltag__link__content'>
|
||||
<h2>#{ActionController::Base.helpers.strip_tags(article.title)}</h2>
|
||||
<h3>#{article.user.name}</h3>
|
||||
<h3>#{article.user.name} ・ #{article.reading_time} min read</h3>
|
||||
<div class='ltag__link__taglist'>
|
||||
#{tags}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue