feat(plugins/sponsors): add new sponsors plugin (#548)

This commit is contained in:
Simon Lecoq
2021-09-29 20:17:38 -04:00
committed by GitHub
parent 357cf06d40
commit 96ae8d1dfc
10 changed files with 250 additions and 3 deletions

View File

@@ -32,5 +32,6 @@
"stock",
"achievements",
"screenshot",
"code"
"code",
"sponsors"
]

View File

@@ -0,0 +1,60 @@
<% if (plugins.sponsors) { %>
<section>
<h2 class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z"></path></svg>
Sponsor me!
</h2>
<% if (plugins.sponsors.error) { %>
<div class="row fill-width">
<section>
<div class="field error">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>
<%= plugins.sponsors.error.message %>
</div>
</section>
</div>
<% } else { %>
<% for (const section of plugins.sponsors.sections) { %>
<% if ((section === "goal")&&(plugins.sponsors.goal)) { %>
<div class="fill-width">
<section class="sponsors goal">
<div class="markdown">
<%= plugins.sponsors.goal.description %>
</div>
<% { const width = 440 * (1 + large) %>
<div class="center horizontal-wrap ">
<svg class="bar" xmlns="http://www.w3.org/2000/svg" width="<%= width %>" height="8">
<mask id="project-bar">
<rect x="0" y="0" width="<%= width %>" height="8" fill="white" rx="5"/>
</mask>
<rect mask="url(#project-bar)" x="0" y="0" width="<%= (plugins.sponsors.goal.progress/100)*width %>" height="8" fill="#ec6cb9"/>
<rect mask="url(#project-bar)" x="<%= (plugins.sponsors.goal.progress/100)*width %>" y="0" width="<%= ((100-plugins.sponsors.goal.progress)/100)*width %>" height="8" fill="#d1d5da"/>
</svg>
</div>
<% } %>
<div class="goal-text">
<span>
<% if (plugins.sponsors.count) { %>
<%= plugins.sponsors.count %> sponsor<%= plugins.sponsors.count !== 1 ? "s are" : " is" %> funding <%= user.login %>'s work
<% } %>
</span>
<span><%= plugins.sponsors.goal.title %></span>
</div>
<div class="row">
<% for (const user of plugins.sponsors.list) { %><img class="avatar" src="<%= user.avatar %>" width="24" height="24" alt="" /><% } %>
</div>
</section>
</div>
<% } else if (section === "about") { %>
<div class="row fill-width">
<section class="sponsors">
<div class="markdown">
<%- plugins.sponsors.about %>
</div>
</section>
</div>
<% } %>
<% } %>
<% } %>
</section>
<% } %>

View File

@@ -931,11 +931,26 @@
margin-right: 0;
}
/* Introduction */
.introduction {
/* Introduction and sponsors */
.introduction, .sponsors {
white-space: normal;
margin: 0 13px 2px;
}
.sponsors.goal {
padding: 6px 8px;
border-radius: 5px;
background-color: #7777771F;
}
.sponsors .goal-text {
display: flex;
justify-content: space-between;
font-style: italic;
font-size: 10px;
margin-bottom: 4px;
}
.sponsors .avatar {
margin: 2px;
}
/* Stackoverflow */
.stackoverflow {
@@ -1137,6 +1152,22 @@
display: inline-block;
width: 97%;
}
.markdown p {
margin: 8px 0;
}
.markdown ul {
padding-left: 24px;
}
.markdown a {
color: #58a6ff;
text-decoration: none;
}
.markdown blockquote {
border-left: 4px solid #7777771F;
color: #777777;
margin: 0;
padding-left: 16px;
}
code {
background-color: #7777771F;
display: inline-block;