Add hashnode support for posts plugin and additional options (#165)

This commit is contained in:
Simon Lecoq
2021-03-02 10:17:00 +01:00
committed by GitHub
parent 4452fa36b5
commit df6638fc9e
8 changed files with 122 additions and 19 deletions

View File

@@ -17,12 +17,22 @@
From <%= plugins.posts.source %>
</div>
<% if (plugins.posts.list.length) { %>
<% for (const {title, date} of plugins.posts.list) { %>
<% for (const {title, description, image, date} of plugins.posts.list) { %>
<div class="field post">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"></path></svg>
<div class="infos">
<div class="date"><%= date %></div>
<div class="title"><%= title %></div>
<div class="left">
<div class="date"><%= f.date(new Date(date), {dateStyle:"short"}) %></div>
<% if (plugins.posts.covers) { %>
<div class="cover" style="background-image: url(<%= image %>);"></div>
<% } %>
</div>
<div class="right">
<div class="title"><%= title %></div>
<% if (plugins.posts.descriptions) { %>
<div class="description"><%= description %></div>
<% } %>
</div>
</div>
</div>
<% } %>

View File

@@ -287,20 +287,43 @@
display: flex;
margin-bottom: 4px;
}
.post .infos .title {
font-size: 14px;
width: 380px;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
max-height: 40px;;
}
.post .infos .date {
.post .infos .left {
flex-shrink: 0;
font-size: 12px;
color: #666666;
width: 60px;
width: 72px;
padding-top: 1px;
text-align: center;
}
.post .infos .cover {
width: 100%;
height: 56px;
background-position: center;
background-size: cover;
border-radius: 6px;
overflow: hidden;
}
.post .infos .right {
width: 376px;
padding-left: 4px;
}
.post .infos .title, .post .infos .description {
font-size: 14px;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
max-height: 38px;
/* May not work in all browsers */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.post .infos .description {
margin-top: 3px;
font-size: 12px;
max-height: 48px;
color: #666666;
-webkit-line-clamp: 3;
}
/* Topics */