add light theme
This commit is contained in:
fenwick67
parent
4ef12a4253
commit
21abbc8281
4 changed files with 136 additions and 28 deletions
14
index.js
14
index.js
|
|
@ -14,11 +14,17 @@ app.get('/api/feed',function(req,res){
|
|||
res.status(400);
|
||||
res.send('You need to specify a feed URL');
|
||||
}
|
||||
|
||||
|
||||
var opts = {};
|
||||
|
||||
if (req.query.size){
|
||||
opts.size = req.query.size;
|
||||
}
|
||||
if (req.query.theme){
|
||||
opts.theme = req.query.theme;
|
||||
}
|
||||
|
||||
var req = request.get(feedUrl);
|
||||
convert(req,{},function(er,data){
|
||||
convert(req,opts,function(er,data){
|
||||
if (er){
|
||||
res.status(500);
|
||||
res.send('error fetching or parsing feed');
|
||||
|
|
@ -26,7 +32,7 @@ app.get('/api/feed',function(req,res){
|
|||
res.status(200);
|
||||
res.send(data);
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
app.listen(process.env.PORT || 8000,function(){
|
||||
|
|
|
|||
|
|
@ -10,16 +10,16 @@ module.exports = function(stream,opts,callback){
|
|||
var callback = callback;
|
||||
var opts = opts;
|
||||
if (typeof opts == 'function'){
|
||||
callback = opts;
|
||||
opts = {};
|
||||
callback = opts;
|
||||
opts = {};
|
||||
}
|
||||
|
||||
|
||||
// convert s from atom feed to a full html page for rendering
|
||||
breakDown(stream,function(er,data){
|
||||
if (er) {
|
||||
return callback(er);
|
||||
}
|
||||
callback(null,buildUp(data));
|
||||
callback(null,buildUp(data,opts));
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@ function breakDown(stream,callback){
|
|||
feedparser.on('error', cbOnce);
|
||||
stream.pipe(feedparser)
|
||||
|
||||
|
||||
|
||||
feedparser.items = [];
|
||||
feedparser.on('readable', function () {
|
||||
// This is where the action is!
|
||||
|
|
@ -54,64 +54,67 @@ function breakDown(stream,callback){
|
|||
|
||||
|
||||
});
|
||||
|
||||
|
||||
feedparser.on('end',function(er){cbOnce(null,feedparser)});
|
||||
|
||||
}
|
||||
|
||||
// hydrate the json to html
|
||||
function buildUp(jsonObj){
|
||||
|
||||
function buildUp(jsonObj,opts){
|
||||
|
||||
// assign opts to the obj
|
||||
jsonObj.opts = opts||{};
|
||||
|
||||
// add some links to the item for avatar et cetera
|
||||
jsonObj.items.forEach(function(item){
|
||||
|
||||
|
||||
// get date
|
||||
item.stringDate = isoDateToEnglish(item.date);
|
||||
|
||||
|
||||
item.content = getH(item,'atom:content');
|
||||
|
||||
|
||||
// get enclosures
|
||||
item.enclosures = [];
|
||||
|
||||
|
||||
if (item["activity:object"] && item["activity:object"].link){
|
||||
item["activity:object"].link.forEach(function(link){
|
||||
if (!link['@']){return;} // avoid keyerror
|
||||
var rel = link['@'].rel;
|
||||
var href = link['@'].href;
|
||||
var href = link['@'].href;
|
||||
if (rel == 'enclosure'){
|
||||
item.enclosures.push(href);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// get author info
|
||||
|
||||
|
||||
item.author = {};
|
||||
var _author = item.meta['atom:author'];
|
||||
if ( item['activity:object'] && item['activity:object'].author){
|
||||
_author = item['activity:object'].author;
|
||||
}
|
||||
|
||||
|
||||
// item.author.name = _author.name.# or empty string
|
||||
item.author.name = getH(_author,'name');
|
||||
item.author.uri = getH(_author,'uri');
|
||||
item.author.fullName = getH(_author,'email');
|
||||
item.author.displayName = getH(_author,'poco:displayname');
|
||||
|
||||
|
||||
var authorLinks = _author.link || [];
|
||||
authorLinks.forEach(function(link){
|
||||
if (!link['@']){return;} // avoid keyerror
|
||||
var rel = link['@'].rel;
|
||||
var href = link['@'].href;
|
||||
var href = link['@'].href;
|
||||
if (rel == 'avatar'){
|
||||
item.author.avatar = href;
|
||||
}else if(rel == 'alternate'){
|
||||
item.author.alternate = href;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
return template(jsonObj);
|
||||
}
|
||||
|
||||
|
|
@ -127,10 +130,10 @@ function isoDateToEnglish(d){
|
|||
if (typeof d == 'object'){
|
||||
d = d.toISOString();
|
||||
}
|
||||
|
||||
|
||||
var dt = d.split(/[t\-]/ig);
|
||||
var months = [ "January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December" ];
|
||||
|
||||
|
||||
return months[Number(dt[1])-1] +' '+dt[2]+ ', '+dt[0];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,20 @@
|
|||
<head>
|
||||
<meta charset="UTF-8"></meta>
|
||||
<style type="text/css"></style>
|
||||
|
||||
<% if (opts.theme && opts.theme.toLowerCase() == 'light'){ %>
|
||||
<link rel="stylesheet" href="/light.css"></link>
|
||||
<% } else { %>
|
||||
<link rel="stylesheet" href="/dark.css"></link>
|
||||
<% } %>
|
||||
|
||||
<% if (opts.size){ %>
|
||||
<style type="text/css">
|
||||
html,body{
|
||||
font-size: <%= opts.size.toString().slice(0,4) %>%;
|
||||
}
|
||||
</style>
|
||||
<% } %>
|
||||
</head>
|
||||
<body>
|
||||
<div class="meta">
|
||||
|
|
|
|||
86
static/light.css
Normal file
86
static/light.css
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
html,
|
||||
body {
|
||||
background-color: #fff;
|
||||
font-family: Roboto, sans-serif;
|
||||
color: #000;
|
||||
font-weight: light;
|
||||
overflow-x: hidden;
|
||||
font-size: 100%;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a,
|
||||
a * {
|
||||
color: #09c;
|
||||
}
|
||||
.meta {
|
||||
padding: 1rem;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.meta * {
|
||||
line-height: 2rem;
|
||||
}
|
||||
.item {
|
||||
padding: 1rem;
|
||||
border-top: solid 2px #d6d6d6;
|
||||
}
|
||||
.item-content,
|
||||
.description,
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.item-content {
|
||||
max-width: 750px;
|
||||
}
|
||||
.item-content p {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.item-title,
|
||||
.date,
|
||||
.author-fullname,
|
||||
.description {
|
||||
color: #808080;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.author {
|
||||
display: flex;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.author-info {
|
||||
margin: 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.author-info .author-displayname {
|
||||
font-size: 1.2rem;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.avatar {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: none;
|
||||
border-radius: 10%;
|
||||
}
|
||||
.enclosures {
|
||||
padding: 0.5em 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-height: 12rem;
|
||||
max-width: 42rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.enclosure,
|
||||
.enclosure > img {
|
||||
flex: 0 1 1;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
cursor: zoom-in;
|
||||
max-height: 12rem;
|
||||
max-width: 42rem;
|
||||
}
|
||||
Reference in a new issue