pmvp/src/index.ejs

108 lines
3.6 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<%- include('/head', {head: content.head}) %>
</head>
<body>
<% if (content.header) { %>
<header class="page-header">
<% if (!utilities.isWrappedInParagraphTags(content.header)) { %>
<p>
<% } %> <%- content.header %> <% if (!utilities.isWrappedInParagraphTags(content.header)) {
%>
</p>
<p><% } %></p>
</header>
<% } %>
<section>
<div class="timeline-filter-wrapper">
<header class="timeline-filter">
<ul>
<li>
<input type="checkbox" name="filter-shortcut" id="all" checked />
<label for="all">Все</label>
</li>
<% content.filters.forEach(function(filter){ %>
<li>
<input type="checkbox" name="filter" id="<%= filter %>" checked />
<label for="<%= filter %>"><%- utilities.sentenceCase(filter) %> </label>
</li>
<% }); %>
</ul>
</header>
</div>
<article class="timeline">
<% content.entries.forEach(function(entry){ %>
<div
class="timeline-entry"
data-category="<%= entry.categoriesString %>"
aria-hidden="false"
>
<div class="timeline-icon <%- entry.color || 'grey' %>" title="<%= entry.faicon %>">
<% if (entry.faicon) { %>
<i class="fas fa-<%= entry.faicon %>" aria-hidden="true"></i>
<% } %>
</div>
<div class="timeline-description">
<span class="timestamp"
><time datetime="<%- entry.datetime || entry.date %>"
><%- utilities.humanizeDate(entry.datetime, entry.date) %></time
></span
>
<h2>
<a id="<%= entry.id %>" href="#<%= entry.id %>"><i class="fas fa-link"></i></a><%-
entry.title %>
</h2>
<% if (entry.image) { %>
<div class="captioned-image image-right">
<% if (entry.image.link) { %><a href="<%= entry.image.link %>"
><% } %>
<img src="<%= entry.image.src %>" alt="<%= entry.image.src %>" />
<% if (entry.image.link) { %></a
><% } %> <% if (entry.image.caption) { %>
<span class="caption"><%- entry.image.caption %></span>
<% } %>
</div>
<% } %> <% if (!utilities.isWrappedInParagraphTags(entry.body)) { %>
<p>
<% } %> <%- entry.body %> <% if (!utilities.isWrappedInParagraphTags(entry.body)) { %>
</p>
<% } %> <% if (entry.links) { %>
<ul>
<% entry.links.forEach(function (link) { %>
<li>
<a href="<%= link.href %>" target="_blank"><%- link.linkText %></a><%-
link.extraText %>
</li>
<% }) %>
</ul>
<% } %>
</div>
</div>
<% }); %>
</article>
</section>
<% if (content.footer) { %>
<footer class="page-footer">
<% if (!utilities.isWrappedInParagraphTags(content.footer)) { %>
<p>
<% } %> <%- content.footer %> <% if (!utilities.isWrappedInParagraphTags(content.footer)) {
%>
</p>
<% } %>
<p>
Built with Molly White's
<a href="https://github.com/molly/static-timeline-generator" target="_blank"
>static timeline generator</a
>.
</p>
</footer>
<% } %>
<script src="js/classlist-polyfill.js"></script>
<script src="js/site-js.js"></script>
</body>
</html>