Make error pages prettier

index.js

@@ -6,6 +6,7 @@ var convertv2 = require('./lib/convertv2');
 var serveStatic = require('serve-static');
 var request = require('request');
 var cors = require('cors');
+var errorPage = require('./lib/errorPage');
 var log = console.log;
 
 var app = Express();
@@ -42,7 +43,7 @@ app.get('/api/feed',cors(),function(req,res){
 	var feedUrl = req.query.url;
 	if (!feedUrl){
 		res.status(400);
-		res.send('You need to specify a feed URL');
+		res.send(errorPage(400,'You need to specify a feed URL'));
 		return;
 	}
 
@@ -69,7 +70,7 @@ app.get('/apiv2/feed',cors(),function(req,res){
 	var userUrl = req.query.userurl;
 	if (!userUrl){
 		res.status(400);
-		res.send('You need to specify a user URL');
+		res.send(errorPage(400,'You need to specify a user URL'));
 		return;
 	}
 
@@ -117,7 +118,7 @@ app.get('/apiv2/feed',cors(),function(req,res){
 		res.send(data);
 	}).catch((er)=>{
 		res.status(500);
-		res.send('Error fetching or parsing your feed.');
+		res.send(errorPage(500));
 		// TODO log the error
 		console.error(er,er.stack);
 	})

lib/convertv2.js

@@ -102,7 +102,7 @@ function metaForUser(user) {
     return {
         avatar: user.icon && user.icon.url?user.icon.url:null,
         headerImage:user.image && user.image.url?user.image.url:null,
-        title: user.preferredUsername||null,
+        title: user.name||user.preferredUsername||null,
         description: user.summary||null
     }
 }

lib/errorPage.js

@@ -0,0 +1,33 @@
+var ejs = require('ejs');
+var fs = require('fs');
+var template = ejs.compile(fs.readFileSync('./lib/template.ejs', 'utf8'));
+
+
+module.exports = function(code,message){
+
+
+    var msg;
+
+    if (code == 500 && !message){
+        msg = '<p>Sorry, we are having trouble fetching posts for this user. Please try again later.</p><br><p>If the issue persists, <a href="https://github.com/fenwick67/mastofeed/issues">please open an issue on GitHub</a> or message fenwick67@octodon.social</p>'
+    }else{
+        msg = message;
+    }
+
+
+    var options = {
+        opts:{
+            header:true
+        },
+        meta:{
+            title:code.toString(),
+            description:msg,
+            link:'#'
+        },
+        items:[],
+        nextPageLink:null,
+        isIndex:true
+    }
+
+    return template(options);
+}

lib/template.ejs

@@ -28,10 +28,10 @@
             <% } %>
           </a>
           <div class="description header-right">
-            <a target="_top" href="<%= meta.link %>">
+            <a class="header-title" target="_top" href="<%= meta.link %>">
               <%= meta.title %>
             </a>
-            <br>
+            <br><br>
             <%- meta.description %>
           </div>
         </div>

static/dark.css

@@ -41,6 +41,8 @@ a * {
     font-size: 0.9rem;
     padding: 0.9rem;
     background: rgba(40, 44, 55, 0.85); }
+  .header .header-title {
+    font-size: 1.3rem; }
 
 .item {
   padding: 1rem;

static/light.css

@@ -41,6 +41,8 @@ a * {
     font-size: 0.9rem;
     padding: 0.9rem;
     background: rgba(255, 255, 255, 0.85); }
+  .header .header-title {
+    font-size: 1.3rem; }
 
 .item {
   padding: 1rem;

stylesrc/base.scss

@@ -57,6 +57,9 @@ a * {
     padding:0.9rem;
     background:transparentize($bg,0.15);
   }
+  .header-title{
+    font-size:1.3rem;
+  }
 }
 
 .item {