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,32 +39,27 @@ class Article extends React.Component {
 
 		return (
 			<div className='article-container'>
-				{error ?
+				{error && <p>Connection error?</p>}
-					<p>Something went wrong.</p>
+				{story ?
-				:
+					<div className='article'>
-					<div>
+						<h1>{story.title}</h1>
-						{story ?
-							<div className='article'>
-								<h1>{story.title}</h1>
 
-								<div className='info'>
+						<div className='info'>
-									Source: {sourceLink(story)}
+							Source: {sourceLink(story)}
-								</div>
+						</div>
 
-								{infoLine(story)}
+						{infoLine(story)}
 
-								{story.text ?
+						{story.text ?
-									<div className='story-text' dangerouslySetInnerHTML={{ __html: story.text }} />
+							<div className='story-text' dangerouslySetInnerHTML={{ __html: story.text }} />
-								:
-									<p>Problem getting article :(</p>
-								}
-							</div>
 						:
-							<p>loading...</p>
+							<p>Problem getting article :(</p>
 						}
-						<ToggleDot id={id} article={false} />
 					</div>
+				:
+					<p>loading...</p>
 				}
+				<ToggleDot id={id} article={false} />
 			</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,30 +58,25 @@ class Article extends React.Component {
 
 		return (
 			<div className='container'>
-				{error ?
+				{error && <p>Connection error?</p>}
-					<p>Something went wrong.</p>
+				{story ?
-				:
+					<div className='article'>
-					<div>
+						<h1>{story.title}</h1>
-						{story ?
-							<div className='article'>
-								<h1>{story.title}</h1>
 
-								<div className='info'>
+						<div className='info'>
-									<Link to={'/' + story.id + '/a'}>View article</Link>
+							<Link to={'/' + story.id + '/a'}>View article</Link>
-								</div>
+						</div>
 
-								{infoLine(story)}
+						{infoLine(story)}
 
-								<div className='comments'>
+						<div className='comments'>
-									{story.comments.map(c => this.displayComment(story, c, 0))}
+							{story.comments.map(c => this.displayComment(story, c, 0))}
-								</div>
+						</div>
-							</div>
-						:
-							<p>loading...</p>
-						}
-						<ToggleDot id={id} article={true} />
 					</div>
+				:
+					<p>loading...</p>
 				}
+				<ToggleDot id={id} article={true} />
 			</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,34 +45,29 @@ class Feed extends React.Component {
 
 		return (
 			<div className='container'>
-				{error ?
+				{error && <p>Connection error?</p>}
-					<p>Something went wrong.</p>
+				{stories ?
-				:
 					<div>
-						{stories ?
+						{stories.map((x, i) =>
-							<div>
+							<div className='item'>
-								{stories.map((x, i) =>
+								<div className='num'>
-									<div className='item'>
+									{i+1}.
-										<div className='num'>
+								</div>
-											{i+1}.
-										</div>
 
-										<div className='title'>
+								<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'>
+									<span className='source'>
-												&#8203;({sourceLink(x)})
+										&#8203;({sourceLink(x)})
-											</span>
+									</span>
-										</div>
+								</div>
 
-										{infoLine(x)}
+								{infoLine(x)}
-									</div>
-								)}
 							</div>
-						:
+						)}
-							<p>loading...</p>
-						}
 					</div>
+				:
+					<p>loading...</p>
 				}
 			</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