fedifeed/lib/template.ejs

159 lines
6.5 KiB
Text

<html>
<head>
<meta charset="UTF-8"></meta>
<style type="text/css"></style>
<base target="_top" /><!-- this element is amazing-->
<% if (opts.theme && opts.theme.toLowerCase() == 'masto-light'){ %>
<link rel="stylesheet" href="/css/masto-light.css"></link>
<% } else if (opts.theme && opts.theme.toLowerCase() == 'auto'){ %>
<link rel="stylesheet" href="/css/masto-auto.css"></link>
<% } else if (opts.theme && opts.theme.toLowerCase() == 'misskey-dark'){ %>
<link rel="stylesheet" href="/css/misskey-dark.css"></link>
<% } else if (opts.theme && opts.theme.toLowerCase() == 'misskey-light'){ %>
<link rel="stylesheet" href="/css/misskey-light.css"></link>
<% } else if (opts.theme && opts.theme.toLowerCase() == 'misskey-auto'){ %>
<link rel="stylesheet" href="/css/misskey-auto.css"></link>
<% } else if (opts.theme && opts.theme.toLowerCase() == 'pleroma'){ %>
<link rel="stylesheet" href="/css/pleroma.css"></link>
<% } else { %>
<link rel="stylesheet" href="/css/masto-dark.css"></link>
<% } %>
<% if (opts.size){ %>
<style type="text/css">
html,body{
font-size: <%= opts.size.toString().slice(0,4) %>%;
}
</style>
<% } %>
</head>
<body>
<% if (opts.header !== false){ %>
<div class="meta">
<div class="header" style="<%= meta.headerImage?`background-image:url(${meta.headerImage})`:'' %>">
<a class="header-left" target="_top" href="<%= meta.link %>">
<% if (meta.avatar){ %>
<img class="avatar circular" src="<%= meta.avatar %>"></img>
<% } %>
</a>
<div class="description header-right">
<a class="header-title" target="_top" href="<%= meta.link %>">
<%= meta.title %>
</a>
<br><br>
<%- meta.description %>
</div>
</div>
</div>
<% } %>
<div class="container">
<% let filtered = items.filter(function(item){return !((item.isBoost && !opts.boosts) || (item.isReply && !opts.replies)) })%>
<% filtered.forEach(function(item){ %>
<div class="item">
<% if (item.isBoost) { %>
<div class="item-title"> <%- item.title %> </div>
<% } %>
<div class="author">
<a target="_top" class="avatar" href="<%- item.author.uri %>">
<img class="avatar" src="<%- item.author.avatar %>"/>
</a>
<div class="author-info">
<a target="_top" class="author-displayname" href="<%- item.author.uri %>"> <%= item.author.displayName %> </a>
<div class="author-fullname"> <%= item.author.fullName %> </div>
</div>
</div>
<% if (item.hasCw){ %>
<% let cwId = (item.cw+item.atomHref).replace(/\W+/g,'') %>
<span class="cw"><%- item.cw %></span>
<input type="checkbox" class="showmore" id="<%- cwId %>">
<label class="button" for="<%- cwId %>">Show</label>
<% } %>
<!--
Ok so this is so fucked but basically, this matches a status with the regex expression (to capture text between two colons) and
needs to take the matched text and search the instances emoji pack for the value and replace it in item content.
I tested this and it _does not_ alter posts without emojis.
-->
<% let regexp = /s*(?<=:).+?(?=:)s*/;
let postWithEmoji = item.content;
let emoteName = postWithEmoji.match(regexp);
<!--If a post with matching regex for :whatever: is found replace with img tag for the instance's emoji packs-->
item.content = postWithEmoji.replace(regexp, `<img src=https://freecumextremist.com/emoji/emojos/${emoteName}.jpg width='30' height='30'/>`)
%>
<div class="item-content">
<%- item.content %>
</div>
<% if (item.enclosures.length > 0){ %>
<div class="enclosures">
<% for (let i = 0; i < item.enclosures.length; i ++){ %>
<% let e = item.enclosures[i] %>
<% if (e.type.indexOf('audio') > -1) {%>
<audio class="enclosure" controls loop src="<%= e.url %>"/>
<% }else if (e.type.indexOf('video') > -1){ %>
<video class="enclosure" controls loop src="<%= e.url %>"/>
<% } else { %>
<a target="_top" class="enclosure" href="<%= e.url %>" >
<% if (e.type.indexOf('image') > -1){ %>
<img src="<%= e.url %>" alt="<%= e.name %>" title="<%= e.name %>"/>
<% } else { %>
<%= e.url %>
<% } %>
</a>
<% } %>
<% } %>
</div>
<% } %>
<a class="date" href="<%= item.permalink %>"><%= item.stringDate %></a>
</div>
<% }); %>
<% if (nextPageLink){ %>
<div class="item hidden">
<a class="hacky_link" href="<%- nextPageLink %>">More</a>
</div>
<% } %>
</div> <!-- end item container -->
<% if (nextPageLink){ %>
<div class="pagination">
<a class="button" href="<%- nextPageLink %>">Load More</a>
</div>
<% } %>
<% if ( isIndex ){ %>
<script src="/infinite-scroll.js"></script>
<script type="text/javascript">
let lastPageLoaded = null;
let infScroll = new InfiniteScroll( '.container', {
// options
hideNav:'.pagination',
append: '.item',
history:false,
prefill:true,
path: function(){
// need to query this DOM my damn self
let pageLinks = document.querySelectorAll('.hacky_link');
if (!pageLinks || pageLinks.length == 0){
console.log ('next page link could not be found');
return false;
}else{
let finalLink = pageLinks[pageLinks.length-1].href;
// make sure we don't load the same page twice
if (!finalLink || finalLink == window.location.href || finalLink == lastPageLoaded){
console.log('this was the last page');
return false;
}else{
return finalLink;
}
}
}
});
</script>
<% } %>
</body>
</html>