add light theme

This commit is contained in:
fenwick67 2017-04-30 14:44:32 -05:00
parent 4ef12a4253
commit 21abbc8281
4 changed files with 136 additions and 28 deletions

View File

@ -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(){

View File

@ -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];
}
}

View File

@ -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
View 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;
}