tanner/qotnews
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Set title on article and comment pages, add comment anchors

Browse Source
This commit is contained in:
Tanner Collin
2019-10-10 21:52:28 +00:00
parent 5fd4fdb21c
commit 25a671f58e
9 changed files with 78 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
webclient/src/App.js
View File

@@ -36,15 +36,15 @@ class App extends React.Component {
<Router>
<div className='container menu'>
<p>
<Link to='/'>QNN - Home</Link>
<Link to='/'>QotNews - Feed</Link>
<span className='theme'>Theme: <a href='#' onClick={() => this.light()}>Light</a> - <a href='#' onClick={() => this.dark()}>Dark</a></span>
<br />
<span className='slogan'>Reddit, Hacker News, and Tildes combined, then pre-rendered in reader mode.</span>
</p>
</div>
<Route path='/' exact component={Feed} />
<Route path='/:id' exact component={Comments} />
<Route path='/:id/a' exact component={Article} />
<Route path='/:id/c' exact component={Comments} />
<Route path='/:id' exact component={Article} />
<ScrollToTop />
</Router>

9
webclient/src/Article.js
View File

@@ -1,9 +1,8 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import { sourceLink, infoLine, ToggleDot } from './utils.js';
const apiUrl = 'https://news-api.t0.vc/';
class Article extends React.Component {
constructor(props) {
super(props);
@@ -19,7 +18,7 @@ class Article extends React.Component {
componentDidMount() {
const id = this.props.match.params.id;
fetch(apiUrl + id)
fetch('/api/' + id)
.then(res => res.json())
.then(
(result) => {
@@ -42,6 +41,10 @@ class Article extends React.Component {
{error && <p>Connection error?</p>}
{story ?
<div className='article'>
<Helmet>
<title>{story.title} - QotNews</title>
</Helmet>
<h1>{story.title}</h1>
<div className='info'>

24
webclient/src/Comments.js
View File

@@ -1,10 +1,10 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { HashLink } from 'react-router-hash-link';
import { Helmet } from 'react-helmet';
import moment from 'moment';
import { sourceLink, infoLine, ToggleDot } from './utils.js';
const apiUrl = 'https://news-api.t0.vc/';
class Article extends React.Component {
constructor(props) {
super(props);
@@ -20,12 +20,17 @@ class Article extends React.Component {
componentDidMount() {
const id = this.props.match.params.id;
fetch(apiUrl + id)
fetch('/api/' + id)
.then(res => res.json())
.then(
(result) => {
this.setState({ story: result.story });
localStorage.setItem(id, JSON.stringify(result.story));
this.setState({ story: result.story }, () => {
const hash = window.location.hash.substring(1);
if (hash) {
document.getElementById(hash).scrollIntoView();
}
});
},
(error) => {
this.setState({ error: true });
@@ -37,7 +42,10 @@ class Article extends React.Component {
return (
<div className={level ? 'comment lined' : 'comment'}>
<div className='info'>
<p>{c.author === story.author ? '[OP]' : ''} {c.author || '[Deleted]'} | {moment.unix(c.date).fromNow()}</p>
<p>
{c.author === story.author ? '[OP]' : ''} {c.author || '[Deleted]'}
&#8203; | <HashLink to={'#'+c.author+c.date} id={c.author+c.date}>{moment.unix(c.date).fromNow()}</HashLink>
</p>
</div>
<div className='text' dangerouslySetInnerHTML={{ __html: c.text }} />
@@ -61,10 +69,14 @@ class Article extends React.Component {
{error && <p>Connection error?</p>}
{story ?
<div className='article'>
<Helmet>
<title>{story.title} - QotNews Comments</title>
</Helmet>
<h1>{story.title}</h1>
<div className='info'>
<Link to={'/' + story.id + '/a'}>View article</Link>
<Link to={'/' + story.id}>View article</Link>
</div>
{infoLine(story)}

13
webclient/src/Feed.js
View File

@@ -1,10 +1,9 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import { siteLogo, sourceLink, infoLine } from './utils.js';
import { clearStorage } from './utils.js';
const apiUrl = 'https://news-api.t0.vc/';
class Feed extends React.Component {
constructor(props) {
super(props);
@@ -16,7 +15,7 @@ class Feed extends React.Component {
}
componentDidMount() {
fetch(apiUrl)
fetch('/api')
.then(res => res.json())
.then(
(result) => {
@@ -24,7 +23,7 @@ class Feed extends React.Component {
clearStorage();
localStorage.setItem('stories', JSON.stringify(result.stories));
result.stories.filter(x => x.score >= 20).slice(0, 25).forEach(x => {
fetch(apiUrl + x.id)
fetch('/api/' + x.id)
.then(res => res.json())
.then(result => {
localStorage.setItem(x.id, JSON.stringify(result.story));
@@ -45,6 +44,10 @@ class Feed extends React.Component {
return (
<div className='container'>
<Helmet>
<title>Feed - QotNews</title>
<meta name="description" content="Reddit, Hacker News, and Tildes combined, then pre-rendered in reader mode" />
</Helmet>
{error && <p>Connection error?</p>}
{stories ?
<div>
@@ -55,7 +58,7 @@ class Feed extends React.Component {
</div>
<div className='title'>
<Link className='link' to={'/' + x.id + '/a'}>{siteLogo[x.source]} {x.title}</Link>
<Link className='link' to={'/' + x.id}>{siteLogo[x.source]} {x.title}</Link>
<span className='source'>
&#8203;({sourceLink(x)})

2
webclient/src/Style-light.css
View File

@@ -2,7 +2,7 @@ body {
text-rendering: optimizeLegibility;
font: 1rem/1.3 sans-serif;
color: #000000;
margin-bottom: 50%;
margin-bottom: 100vh;
}
a {

4
webclient/src/utils.js
View File

@@ -23,7 +23,7 @@ export const infoLine = (story) =>
by <a href={story.author_link}>{story.author}</a>
&#8203; {moment.unix(story.date).fromNow()}
&#8203; on <a href={story.link}>{story.source}</a> | &#8203;
<Link className={story.num_comments > 99 ? 'hot' : ''} to={'/' + story.id}>
<Link className={story.num_comments > 99 ? 'hot' : ''} to={'/' + story.id + '/c'}>
{story.num_comments} comment{story.num_comments !== 1 && 's'}
</Link>
</div>
@@ -42,7 +42,7 @@ export class ToggleDot extends React.Component {
return (
<div className='toggleDot'>
<div className='button'>
<Link to={'/' + id + (article ? '/a' : '')}>
<Link to={'/' + id + (article ? '' : '/c')}>
<img src={Switch} />
</Link>
</div>