diff --git a/webclient/public/logos/hackernews.png b/webclient/public/logos/hackernews.png new file mode 100644 index 0000000..39f2f35 Binary files /dev/null and b/webclient/public/logos/hackernews.png differ diff --git a/webclient/public/logos/reddit.png b/webclient/public/logos/reddit.png new file mode 100644 index 0000000..049ab52 Binary files /dev/null and b/webclient/public/logos/reddit.png differ diff --git a/webclient/public/logos/tildes.png b/webclient/public/logos/tildes.png new file mode 100644 index 0000000..100d2e4 Binary files /dev/null and b/webclient/public/logos/tildes.png differ diff --git a/webclient/src/Article.js b/webclient/src/Article.js index ec48385..c706545 100644 --- a/webclient/src/Article.js +++ b/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 (
- {error ? -

Something went wrong.

- : -
- {story ? -
-

{story.title}

+ {error &&

Connection error?

} + {story ? +
+

{story.title}

-
- Source: {sourceLink(story)} -
+
+ Source: {sourceLink(story)} +
- {infoLine(story)} + {infoLine(story)} - {story.text ? -
- : -

Problem getting article :(

- } -
+ {story.text ? +
: -

loading...

+

Problem getting article :(

} -
+ : +

loading...

} +
); } diff --git a/webclient/src/Comments.js b/webclient/src/Comments.js index f54ceb6..2bd3635 100644 --- a/webclient/src/Comments.js +++ b/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 (
- {error ? -

Something went wrong.

- : -
- {story ? -
-

{story.title}

+ {error &&

Connection error?

} + {story ? +
+

{story.title}

-
- View article -
+
+ View article +
- {infoLine(story)} + {infoLine(story)} -
- {story.comments.map(c => this.displayComment(story, c, 0))} -
-
- : -

loading...

- } - +
+ {story.comments.map(c => this.displayComment(story, c, 0))} +
+ : +

loading...

} +
); } diff --git a/webclient/src/Feed.js b/webclient/src/Feed.js index 43846a7..3374889 100644 --- a/webclient/src/Feed.js +++ b/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) { @@ -14,7 +14,7 @@ class Feed extends React.Component { error: false, }; } - + componentDidMount() { fetch(apiUrl) .then(res => res.json()) @@ -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 (
- {error ? -

Something went wrong.

- : + {error &&

Connection error?

} + {stories ?
- {stories ? -
- {stories.map((x, i) => -
-
- {i+1}. -
+ {stories.map((x, i) => +
+
+ {i+1}. +
-
- {x.title} +
+ {siteLogo[x.source]} {x.title} - - ​({sourceLink(x)}) - -
+ + ​({sourceLink(x)}) + +
- {infoLine(x)} -
- )} + {infoLine(x)}
- : -

loading...

- } + )}
+ : +

loading...

}
); diff --git a/webclient/src/Style-dark.css b/webclient/src/Style-dark.css index 6dc3901..5b8b8db 100644 --- a/webclient/src/Style-dark.css +++ b/webclient/src/Style-dark.css @@ -10,6 +10,10 @@ color: #828282; } +.dark .item .source-logo { + filter: grayscale(1); +} + .dark .item a { color: #828282; } diff --git a/webclient/src/Style-light.css b/webclient/src/Style-light.css index 402e3e9..3305d49 100644 --- a/webclient/src/Style-light.css +++ b/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; } diff --git a/webclient/src/utils.js b/webclient/src/utils.js index 8bab265..4fc39ed 100644 --- a/webclient/src/utils.js +++ b/webclient/src/utils.js @@ -11,6 +11,12 @@ export const sourceLink = (story) => { return ({host}); }; +export const siteLogo = { + hackernews: , + tildes: , + reddit: , +}; + export const infoLine = (story) =>
{story.score} points