Add site logos, keep displaying news on error

webclient/src/Article.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { sourceLink, infoLine, ToggleDot } from './utils.js';
 
-const apiUrl = 'http://news-api.dns.t0.vc/';
+const apiUrl = 'https://news-api.t0.vc/';
 
 class Article extends React.Component {
 	constructor(props) {
@@ -39,10 +39,7 @@ class Article extends React.Component {
 
 		return (
 			<div className='article-container'>
-				{error ?
-					<p>Something went wrong.</p>
-				:
-					<div>
+				{error && <p>Connection error?</p>}
 				{story ?
 					<div className='article'>
 						<h1>{story.title}</h1>
@@ -64,8 +61,6 @@ class Article extends React.Component {
 				}
 				<ToggleDot id={id} article={false} />
 			</div>
-				}
-			</div>
 		);
 	}
 }

webclient/src/Comments.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import moment from 'moment';
 import { sourceLink, infoLine, ToggleDot } from './utils.js';
 
-const apiUrl = 'http://news-api.dns.t0.vc/';
+const apiUrl = 'https://news-api.t0.vc/';
 
 class Article extends React.Component {
 	constructor(props) {
@@ -58,10 +58,7 @@ class Article extends React.Component {
 
 		return (
 			<div className='container'>
-				{error ?
-					<p>Something went wrong.</p>
-				:
-					<div>
+				{error && <p>Connection error?</p>}
 				{story ?
 					<div className='article'>
 						<h1>{story.title}</h1>
@@ -81,8 +78,6 @@ class Article extends React.Component {
 				}
 				<ToggleDot id={id} article={true} />
 			</div>
-				}
-			</div>
 		);
 	}
 }

webclient/src/Feed.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { sourceLink, infoLine } from './utils.js';
+import { siteLogo, sourceLink, infoLine } from './utils.js';
 import { clearStorage } from './utils.js';
 
-const apiUrl = 'http://news-api.dns.t0.vc/';
+const apiUrl = 'https://news-api.t0.vc/';
 
 class Feed extends React.Component {
 	constructor(props) {
@@ -23,7 +23,7 @@ class Feed extends React.Component {
                     this.setState({ stories: result.stories });
 					clearStorage();
                     localStorage.setItem('stories', JSON.stringify(result.stories));
-					result.stories.slice(0, 25).forEach(x => {
+					result.stories.filter(x => x.score >= 20).slice(0, 25).forEach(x => {
 						fetch(apiUrl + x.id)
 							.then(res => res.json())
 							.then(result => {
@@ -45,10 +45,7 @@ class Feed extends React.Component {
 
 		return (
 			<div className='container'>
-				{error ?
-					<p>Something went wrong.</p>
-				:
-					<div>
+				{error && <p>Connection error?</p>}
 				{stories ?
 					<div>
 						{stories.map((x, i) =>
@@ -58,7 +55,7 @@ class Feed extends React.Component {
 								</div>
 
 								<div className='title'>
-											<Link className='link' to={'/' + x.id + '/a'}>{x.title}</Link>
+									<Link className='link' to={'/' + x.id + '/a'}>{siteLogo[x.source]} {x.title}</Link>
 
 									<span className='source'>
 										&#8203;({sourceLink(x)})
@@ -73,8 +70,6 @@ class Feed extends React.Component {
 					<p>loading...</p>
 				}
 			</div>
-				}
-			</div>
 		);
 	}
 }

webclient/src/Style-dark.css

@@ -10,6 +10,10 @@
 	color: #828282;
 }
 
+.dark .item .source-logo {
+	filter: grayscale(1);
+}
+
 .dark .item a {
 	color: #828282;
 }

webclient/src/Style-light.css

@@ -34,6 +34,11 @@ a {
 	margin-bottom: 0.6rem;
 }
 
+.item .source-logo {
+	width: 0.9rem;
+	height: 0.9rem;
+}
+
 .item a {
 	color: #828282;
 }

webclient/src/utils.js

@@ -11,6 +11,12 @@ export const sourceLink = (story) => {
 	return (<a className='source' href={url}>{host}</a>);
 };
 
+export const siteLogo = {
+	hackernews: <img className='source-logo' src='logos/hackernews.png' />,
+	tildes: <img className='source-logo' src='logos/tildes.png' />,
+	reddit: <img className='source-logo' src='logos/reddit.png' />,
+};
+
 export const infoLine = (story) =>
 	<div className='info'>
 		{story.score} points