Test update

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

.gitignore

@@ -0,0 +1 @@
+.aider*

apiserver/feeds/hackernews.py

@@ -146,6 +146,9 @@ def story(ref):
         return False
 
 
+    if not s['title']:
+        return False
+
     if s['score'] < 25 and s['num_comments'] < 10:
         logging.info('Score ({}) or num comments ({}) below threshold.'.format(s['score'], s['num_comments']))
         return False

apiserver/requirements.txt

@@ -8,6 +8,7 @@ Flask==1.1.2
 Flask-Cors==3.0.8
 gevent==20.6.2
 greenlet==0.4.16
+humanize==4.10.0
 idna==2.10
 itsdangerous==1.1.0
 Jinja2==2.11.2

apiserver/server.py

@@ -1,7 +1,8 @@
-import logging
+import os, logging
+DEBUG = os.environ.get('DEBUG')
 logging.basicConfig(
         format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
-        level=logging.INFO)
+        level=logging.DEBUG if DEBUG else logging.INFO)
 
 import gevent
 from gevent import monkey
@@ -13,22 +14,46 @@ import json
 import threading
 import traceback
 import time
+import datetime
+import humanize
+import urllib.request
 from urllib.parse import urlparse, parse_qs
 
 import settings
 import database
 import search
 import feed
-from utils import gen_rand_id
+from utils import gen_rand_id, NUM_ID_CHARS
 
 from flask import abort, Flask, request, render_template, stream_with_context, Response
 from werkzeug.exceptions import NotFound
 from flask_cors import CORS
 
+smallweb_set = set()
+def load_smallweb_list():
+    EXCLUDED = [
+        'github.com',
+    ]
+
+    global smallweb_set
+    try:
+        url = 'https://raw.githubusercontent.com/kagisearch/smallweb/refs/heads/main/smallweb.txt'
+        with urllib.request.urlopen(url, timeout=10) as response:
+            urls = response.read().decode('utf-8').splitlines()
+            hosts = {urlparse(u).hostname for u in urls if u and urlparse(u).hostname}
+            smallweb_set = {h.replace('www.', '') for h in hosts if h not in EXCLUDED}
+            logging.info('Loaded {} smallweb domains.'.format(len(smallweb_set)))
+    except Exception as e:
+        logging.error('Failed to load smallweb list: {}'.format(e))
+
+load_smallweb_list()
+
 database.init()
 search.init()
 
 news_index = 0
+ref_list = []
+current_item = {}
 
 def new_id():
     nid = gen_rand_id()
@@ -36,20 +61,73 @@ def new_id():
         nid = gen_rand_id()
     return nid
 
-build_folder = '../webclient/build'
+
+def fromnow(ts):
+    return humanize.naturaltime(datetime.datetime.fromtimestamp(ts))
+
+
+build_folder = './build'
+
 flask_app = Flask(__name__, template_folder=build_folder, static_folder=build_folder, static_url_path='')
+flask_app.jinja_env.filters['fromnow'] = fromnow
 cors = CORS(flask_app)
 
 @flask_app.route('/api')
 def api():
     skip = request.args.get('skip', 0)
     limit = request.args.get('limit', settings.FEED_LENGTH)
+
+    if request.args.get('smallweb') == 'true' and smallweb_set:
+        limit = int(limit)
+        skip = int(skip)
+        filtered_stories = []
+        current_skip = skip
+
+        while len(filtered_stories) < limit:
+            stories_batch = database.get_stories(limit, current_skip)
+            if not stories_batch:
+                break
+
+            for story_str in stories_batch:
+                story = json.loads(story_str)
+                story_url = story.get('url') or story.get('link') or ''
+                if not story_url:
+                    continue
+                hostname = urlparse(story_url).hostname
+                if hostname:
+                    hostname = hostname.replace('www.', '')
+                    if hostname in smallweb_set:
+                        filtered_stories.append(story_str)
+                        if len(filtered_stories) == limit:
+                            break
+            
+            if len(filtered_stories) == limit:
+                break
+            
+            current_skip += limit
+        stories = filtered_stories
+    else:
         stories = database.get_stories(limit, skip)
+
     # hacky nested json
     res = Response('{"stories":[' + ','.join(stories) + ']}')
     res.headers['content-type'] = 'application/json'
     return res
 
+@flask_app.route('/api/stats', strict_slashes=False)
+def apistats():
+    stats = {
+        'news_index': news_index,
+        'ref_list': ref_list,
+        'len_ref_list': len(ref_list),
+        'current_item': current_item,
+        'total_stories': database.count_stories(),
+        'id_space': 26**NUM_ID_CHARS,
+    }
+
+    return stats
+
+
 @flask_app.route('/api/search', strict_slashes=False)
 def apisearch():
     q = request.args.get('q', '')
@@ -61,10 +139,17 @@ def apisearch():
     res.headers['content-type'] = 'application/json'
     return res
 
+
 @flask_app.route('/api/submit', methods=['POST'], strict_slashes=False)
 def submit():
     try:
         url = request.form['url']
+        for prefix in ['http://', 'https://']:
+            if url.lower().startswith(prefix):
+                break
+        else:  # for
+            url = 'http://' + url
+
         nid = new_id()
 
         logging.info('Manual submission: ' + url)
@@ -89,6 +174,11 @@ def submit():
             ref = url
 
         existing = database.get_story_by_ref(ref)
+
+        if existing and DEBUG:
+            ref = ref + '#' + str(time.time())
+            existing = False
+
         if existing:
             return {'nid': existing.sid}
         else:
@@ -97,14 +187,20 @@ def submit():
             if valid:
                 database.put_story(story)
                 search.put_story(story)
+
+                if DEBUG:
+                    logging.info('Adding manual ref: {}, id: {}, source: {}'.format(ref, nid, source))
+                    database.put_ref(ref, nid, source)
+
                 return {'nid': nid}
             else:
                 raise Exception('Invalid article')
 
-    except BaseException as e:
-        logging.error('Problem with article submission: {} - {}'.format(e.__class__.__name__, str(e)))
+    except Exception as e:
+        msg = 'Problem with article submission: {} - {}'.format(e.__class__.__name__, str(e))
+        logging.error(msg)
         print(traceback.format_exc())
-        abort(400)
+        return {'error': msg.split('\n')[0]}, 400
 
 
 @flask_app.route('/api/<sid>')
@@ -121,11 +217,18 @@ def story(sid):
 @flask_app.route('/')
 @flask_app.route('/search')
 def index():
+    stories_json = database.get_stories(settings.FEED_LENGTH, 0)
+    stories = [json.loads(s) for s in stories_json]
+    for s in stories:
+        url = urlparse(s.get('url') or s.get('link') or '').hostname or ''
+        s['hostname'] = url.replace('www.', '')
+
     return render_template('index.html',
         title='QotNews',
         url='news.t0.vc',
         description='Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode',
         robots='index',
+        stories=stories,
     )
 
 @flask_app.route('/<sid>', strict_slashes=False)
@@ -136,9 +239,9 @@ def static_story(sid):
     except NotFound:
         pass
 
-    story = database.get_story(sid)
-    if not story: return abort(404)
-    story = json.loads(story.full_json)
+    story_obj = database.get_story(sid)
+    if not story_obj: return abort(404)
+    story = json.loads(story_obj.full_json)
 
     score = story['score']
     num_comments = story['num_comments']
@@ -147,7 +250,7 @@ def static_story(sid):
             score, 's' if score != 1 else '',
             num_comments, 's' if num_comments != 1 else '',
             source)
-    url = urlparse(story['url']).hostname or urlparse(story['link']).hostname or ''
+    url = urlparse(story.get('url') or story.get('link') or '').hostname or ''
     url = url.replace('www.', '')
 
     return render_template('index.html',
@@ -155,12 +258,14 @@ def static_story(sid):
         url=url,
         description=description,
         robots='noindex',
+        story=story,
+        show_comments=request.path.endswith('/c'),
     )
 
 http_server = WSGIServer(('', 33842), flask_app)
 
 def feed_thread():
-    global news_index
+    global news_index, ref_list, current_item
 
     try:
         while True:
@@ -181,13 +286,13 @@ def feed_thread():
 
             # update current stories
             if news_index < len(ref_list):
-                item = ref_list[news_index]
+                current_item = ref_list[news_index]
 
                 try:
-                    story_json = database.get_story(item['sid']).full_json
+                    story_json = database.get_story(current_item['sid']).full_json
                     story = json.loads(story_json)
                 except AttributeError:
-                    story = dict(id=item['sid'], ref=item['ref'], source=item['source'])
+                    story = dict(id=current_item['sid'], ref=current_item['ref'], source=current_item['source'])
 
                 logging.info('Updating {} story: {}, index: {}'.format(story['source'], story['ref'], news_index))
 
@@ -196,8 +301,8 @@ def feed_thread():
                     database.put_story(story)
                     search.put_story(story)
                 else:
-                    database.del_ref(item['ref'])
-                    logging.info('Removed ref {}'.format(item['ref']))
+                    database.del_ref(current_item['ref'])
+                    logging.info('Removed ref {}'.format(current_item['ref']))
             else:
                 logging.info('Skipping index: ' + str(news_index))
 

apiserver/utils.py

@@ -16,8 +16,9 @@ def alert_tanner(message):
     except BaseException as e:
         logging.error('Problem alerting Tanner: ' + str(e))
 
+NUM_ID_CHARS = 4
 def gen_rand_id():
-    return ''.join(random.choice(string.ascii_uppercase) for _ in range(4))
+    return ''.join(random.choice(string.ascii_uppercase) for _ in range(NUM_ID_CHARS))
 
 def render_md(md):
     if md:

webclient/package.json

@@ -4,12 +4,14 @@
   "private": true,
   "dependencies": {
     "abort-controller": "^3.0.0",
+    "katex": "^0.16.25",
     "localforage": "^1.7.3",
     "moment": "^2.24.0",
     "query-string": "^6.8.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.1",
+    "react-latex-next": "^3.0.0",
     "react-router-dom": "^5.0.1",
     "react-router-hash-link": "^1.2.2",
     "react-scripts": "3.1.1"

webclient/public/index.html

@@ -35,29 +35,105 @@
 				overflow-y: scroll;
 			}
 			body {
-				background: #000;
-			}
-			.nojs {
-				color: white;
-				max-width: 32rem;
+				background: #eeeeee;
 			}
 		</style>
 	</head>
 
 	<body>
-		<div class="nojs">
-			<noscript>
-				You need to enable JavaScript to run this app because it's written in React.
-				I was planning on writing a server-side version, but I've become distracted
-				by other projects -- sorry!
+		<div id="root">
+			<div class="container menu">
+				<p>
+					<a href="/">QotNews</a>
 					<br />
-				I originally wrote this for myself, and of course I whitelist JavaScript on
-				all my own domains.
-				<br/><br/>
-				Alternatively, try activex.news.t0.vc for an ActiveX™ version.
-			</noscript>
+					<span class="slogan">Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
+				</p>
+			</div>
+			{% if story %}
+				<div class="{% if show_comments %}container{% else %}article-container{% endif %}">
+					<div class="article">
+						<h1>{{ story.title }}</h1>
+
+						{% if show_comments %}
+							<div class="info">
+								<a href="/{{ story.id }}">View article</a>
+							</div>
+						{% else %}
+							<div class="info">
+								Source: <a class="source" href="{{ story.url or story.link }}">{{ url }}</a>
+							</div>
+						{% endif %}
+
+						<div class="info">
+							{{ story.score }} points
+							by <a href="{{ story.author_link }}">{{ story.author }}</a>
+							{{ story.date | fromnow }}
+							on <a href="{{ story.link }}">{{ story.source }}</a> |
+							<a href="/{{ story.id }}/c">
+								{{ story.num_comments }} comment{{ 's' if story.num_comments != 1 }}
+							</a>
+						</div>
+
+						{% if not show_comments and story.text %}
+							<div class="story-text">{{ story.text | safe }}</div>
+						{% elif show_comments %}
+							{% macro render_comment(comment, level) %}
+								<dt></dt>
+								<dd class="comment{% if level > 0 %} lined{% endif %}">
+									<div class="info">
+										<p>
+											{% if comment.author == story.author %}[OP] {% endif %}{{ comment.author or '[Deleted]' }} | <a href="#{{ comment.author }}{{ comment.date }}" id="{{ comment.author }}{{ comment.date }}">{{ comment.date | fromnow }}</a>
+										</p>
+									</div>
+									<div class="text">{{ (comment.text | safe) if comment.text else '<p>[Empty / deleted comment]</p>' }}</div>
+									{% if comment.comments %}
+										<dl>
+											{% for reply in comment.comments %}
+												{{ render_comment(reply, level + 1) }}
+											{% endfor %}
+										</dl>
+									{% endif %}
+								</dd>
+							{% endmacro %}
+							<dl class="comments">
+								{% for comment in story.comments %}{{ render_comment(comment, 0) }}{% endfor %}
+							</dl>
+						{% endif %}
+					</div>
+					<div class='dot toggleDot'>
+						<div class='button'>
+							<a href="/{{ story.id }}{{ '/c' if not show_comments else '' }}">
+								{{ '' if not show_comments else '' }}
+							</a>
+						</div>
+					</div>
+				</div>
+			{% elif stories %}
+				<div class="container">
+					{% for story in stories %}
+						<div class='item'>
+							<div class='title'>
+								<a class='link' href='/{{ story.id }}'>
+									<img class='source-logo' src='/logos/{{ story.source }}.png' alt='{{ story.source }}:' /> {{ story.title }}
+								</a>
+								<span class='source'>
+									(<a class='source' href='{{ story.url or story.link }}'>{{ story.hostname }}</a>)
+								</span>
+							</div>
+							<div class='info'>
+								{{ story.score }} points
+								by <a href="{{ story.author_link }}">{{ story.author }}</a>
+								{{ story.date | fromnow }}
+								on <a href="{{ story.link }}">{{ story.source }}</a> |
+								<a class="{{ 'hot' if story.num_comments > 99 else '' }}" href="/{{ story.id }}/c">
+									{{ story.num_comments }} comment{{ 's' if story.num_comments != 1 }}
+								</a>
+							</div>
+						</div>
+					{% endfor %}
+				</div>
+			{% endif %}
 		</div>
-		<div id="root"></div>
 		<!--
 			This HTML file is a template.
 			If you open it directly in the browser, you will see an empty page.

webclient/src/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 import localForage from 'localforage';
 import './Style-light.css';
@@ -15,70 +15,72 @@ import Submit from './Submit.js';
 import Results from './Results.js';
 import ScrollToTop from './ScrollToTop.js';
 
-class App extends React.Component {
-	constructor(props) {
-		super(props);
+function App() {
+	const [theme, setTheme] = useState(localStorage.getItem('theme') || '');
+	const cache = useRef({});
+	const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement);
+	const [waitingWorker, setWaitingWorker] = useState(null);
 
-		this.state = {
-			theme: localStorage.getItem('theme') || '',
+	const updateCache = useCallback((key, value) => {
+		cache.current[key] = value;
+	}, []);
+
+	const light = () => {
+		setTheme('');
+		localStorage.setItem('theme', '');
 	};
 
-		this.cache = {};
-	}
-
-	updateCache = (key, value) => {
-		this.cache[key] = value;
-	}
-
-	light() {
-		this.setState({ theme: '' });
-		localStorage.setItem('theme', '');
-	}
-
-	dark() {
-		this.setState({ theme: 'dark' });
+	const dark = () => {
+		setTheme('dark');
 		localStorage.setItem('theme', 'dark');
-	}
+	};
 
-	black() {
-		this.setState({ theme: 'black' });
+	const black = () => {
+		setTheme('black');
 		localStorage.setItem('theme', 'black');
-	}
+	};
 
-	red() {
-		this.setState({ theme: 'red' });
+	const red = () => {
+		setTheme('red');
 		localStorage.setItem('theme', 'red');
-	}
+	};
 
-	componentDidMount() {
-		if (!this.cache.length) {
+	useEffect(() => {
+		const onSWUpdate = e => {
+			setWaitingWorker(e.detail.waiting);
+		};
+		window.addEventListener('swUpdate', onSWUpdate);
+		return () => window.removeEventListener('swUpdate', onSWUpdate);
+	}, []);
+
+	useEffect(() => {
+		if (Object.keys(cache.current).length === 0) {
 			localForage.iterate((value, key) => {
-				this.updateCache(key, value);
-			});
+				updateCache(key, value);
+			}).then(() => {
 				console.log('loaded cache from localforage');
+			});
 		}
-	}
+	}, [updateCache]);
 
-	goFullScreen() {
+	const goFullScreen = () => {
 		if ('wakeLock' in navigator) {
 			navigator.wakeLock.request('screen');
 		}
-
-		document.body.requestFullscreen({ navigationUI: 'hide' }).then(() => {
-			window.addEventListener('resize', () => this.forceUpdate());
-			this.forceUpdate();
-		});
+		document.body.requestFullscreen({ navigationUI: 'hide' });
 	};
 
-	exitFullScreen() {
-		document.exitFullscreen().then(() => {
-			this.forceUpdate();
-		});
+	const exitFullScreen = () => {
+		document.exitFullscreen();
 	};
 
-	render() {
-		const theme = this.state.theme;
+	useEffect(() => {
+		const onFullScreenChange = () => setIsFullScreen(!!document.fullscreenElement);
+		document.addEventListener('fullscreenchange', onFullScreenChange);
+		return () => document.removeEventListener('fullscreenchange', onFullScreenChange);
+	}, []);
 
+	useEffect(() => {
 		if (theme === 'dark') {
 			document.body.style.backgroundColor = '#1a1a1a';
 		} else if (theme === 'black') {
@@ -88,6 +90,7 @@ class App extends React.Component {
 		} else {
 			document.body.style.backgroundColor = '#eeeeee';
 		}
+	}, [theme]);
 
 	const fullScreenAvailable = document.fullscreenEnabled ||
 		document.mozFullscreenEnabled ||
@@ -96,32 +99,45 @@ class App extends React.Component {
 
 	return (
 		<div className={theme}>
+			{waitingWorker &&
+				<div className='update-banner'>
+					Client version mismatch, please refresh:{' '}
+					<button onClick={() => {
+						waitingWorker.postMessage({ type: 'SKIP_WAITING' });
+						navigator.serviceWorker.addEventListener('controllerchange', () => {
+							window.location.reload();
+						});
+					}}>
+						Refresh
+					</button>
+				</div>
+			}
 			<Router>
 				<div className='container menu'>
 					<p>
 						<Link to='/'>QotNews</Link>
 
-							<span className='theme'><a href='#' onClick={() => this.light()}>Light</a> - <a href='#' onClick={() => this.dark()}>Dark</a> - <a href='#' onClick={() => this.black()}>Black</a> - <a href='#' onClick={() => this.red()}>Red</a></span>
+						<span className='theme'><a href='#' onClick={() => light()}>Light</a> - <a href='#' onClick={() => dark()}>Dark</a> - <a href='#' onClick={() => black()}>Black</a> - <a href='#' onClick={() => red()}>Red</a></span>
 						<br />
 						<span className='slogan'>Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
 					</p>
-						<Route path='/(|search)' component={Search} />
-						<Route path='/(|search)' component={Submit} />
 					{fullScreenAvailable &&
-							<Route path='/(|search)' render={() => !document.fullscreenElement ?
-								<button className='fullscreen' onClick={() => this.goFullScreen()}>Enter Fullscreen</button>
+						<Route path='/(|search)' render={() => !isFullScreen ?
+							<button className='fullscreen' onClick={() => goFullScreen()}>Enter Fullscreen</button>
 						:
-								<button className='fullscreen' onClick={() => this.exitFullScreen()}>Exit Fullscreen</button>
+							<button className='fullscreen' onClick={() => exitFullScreen()}>Exit Fullscreen</button>
 						} />
 					}
+					<Route path='/(|search)' component={Search} />
+					<Route path='/(|search)' component={Submit} />
 				</div>
 
-					<Route path='/' exact render={(props) => <Feed {...props} updateCache={this.updateCache} />} />
+				<Route path='/' exact render={(props) => <Feed {...props} updateCache={updateCache} />} />
 				<Switch>
 					<Route path='/search' component={Results} />
-						<Route path='/:id' exact render={(props) => <Article {...props} cache={this.cache} />} />
+					<Route path='/:id' exact render={(props) => <Article {...props} cache={cache.current} />} />
 				</Switch>
-					<Route path='/:id/c' exact render={(props) => <Comments {...props} cache={this.cache} />} />
+				<Route path='/:id/c' exact render={(props) => <Comments {...props} cache={cache.current} />} />
 
 				<BackwardDot />
 				<ForwardDot />
@@ -131,6 +147,5 @@ class App extends React.Component {
 		</div>
 	);
 }
-}
 
 export default App;

webclient/src/Article.js

@@ -1,69 +1,208 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import localForage from 'localforage';
-import { sourceLink, infoLine, ToggleDot } from './utils.js';
+import { sourceLink, similarLink, infoLine, ToggleDot } from './utils.js';
+import Latex from 'react-latex-next';
+import 'katex/dist/katex.min.css';
 
-class Article extends React.Component {
-	constructor(props) {
-		super(props);
+const VOID_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+const DANGEROUS_TAGS = ['svg', 'math'];
 
-		const id = this.props.match ? this.props.match.params.id : 'CLOL';
-		const cache = this.props.cache;
+const latexDelimiters = [
+    { left: '$$', right: '$$', display: true },
+    { left: '\\[', right: '\\]', display: true },
+    { left: '$', right: '$', display: false },
+    { left: '\\(', right: '\\)', display: false }
+];
+
+function Article({ cache }) {
+	const { id } = useParams();
 
 	if (id in cache) console.log('cache hit');
 
-		this.state = {
-			story: cache[id] || false,
-			error: false,
-			pConv: [],
-		};
-	}
-	
-	componentDidMount() {
-		const id = this.props.match ? this.props.match.params.id : 'CLOL';
+	const [story, setStory] = useState(cache[id] || false);
+	const [error, setError] = useState('');
+	const [pConv, setPConv] = useState([]);
+	const [copyButtonText, setCopyButtonText] = useState('\ue92c');
 
+	useEffect(() => {
 		localForage.getItem(id)
 			.then(
 				(value) => {
 					if (value) {
-						this.setState({ story: value });
+						setStory(value);
 					}
 				}
 			);
 
 		fetch('/api/' + id)
-			.then(res => res.json())
+			.then(res => {
+				if (!res.ok) {
+					throw new Error(`Server responded with ${res.status} ${res.statusText}`);
+				}
+				return res.json();
+			})
 			.then(
 				(result) => {
-					this.setState({ story: result.story });
+					setStory(result.story);
 					localForage.setItem(id, result.story);
 				},
 				(error) => {
-					this.setState({ error: true });
+					const errorMessage = `Failed to fetch new article content (ID: ${id}). Your connection may be down or the server might be experiencing issues. ${error.toString()}.`;
+					setError(errorMessage);
 				}
 			);
+	}, [id]);
+
+	const copyLink = () => {
+		navigator.clipboard.writeText(`${story.title}:\n${window.location.href}`).then(() => {
+			setCopyButtonText('\uea10');
+			setTimeout(() => setCopyButtonText('\ue92c'), 2000);
+		}, () => {
+			setCopyButtonText('\uea0f');
+			setTimeout(() => setCopyButtonText('\ue92c'), 2000);
+		});
+	};
+
+	const pConvert = (n) => {
+		setPConv(prevPConv => [...prevPConv, n]);
+	};
+
+	const isCodeBlock = (v) => {
+		if (v.localName === 'pre') {
+			return true;
+		}
+
+		if (v.localName === 'code') {
+			if (v.closest('p')) {
+				return false;
+			}
+			const parent = v.parentElement;
+			if (parent) {
+				const nonWhitespaceChildren = Array.from(parent.childNodes).filter(n => {
+					return n.nodeType !== Node.TEXT_NODE || n.textContent.trim() !== '';
+				});
+				if (nonWhitespaceChildren.length === 1 && nonWhitespaceChildren[0] === v) {
+					return true;
+				}
+			}
+		}
+		return false;
+	};
+
+	const renderNodes = (nodes, keyPrefix = '') => {
+		return Array.from(nodes).map((v, k) => {
+			const key = `${keyPrefix}${k}`;
+			if (pConv.includes(key)) {
+				return (
+					<React.Fragment key={key}>
+						{v.textContent.split('\n\n').map((x, i) =>
+							<p key={i}>{x}</p>
+						)}
+					</React.Fragment>
+				);
 			}
 
-	pConvert = (n) => {
-		this.setState({ pConv: [...this.state.pConv, n]});
+			if (v.nodeName === '#text') {
+				const text = v.data;
+				if (text.includes('\\[') || text.includes('\\(') || text.includes('$$') || /\$(?:[^$]*[^\s$])\$/.test(text)) {
+					return <Latex key={key} delimiters={latexDelimiters}>{text}</Latex>;
 				}
 
-	render() {
-		const id = this.props.match ? this.props.match.params.id : 'CLOL';
-		const story = this.state.story;
-		const error = this.state.error;
-		const pConv = this.state.pConv;
-		let nodes = null;
+				// Only wrap top-level text nodes in <p>
+				if (keyPrefix === '' && v.data.trim() !== '') {
+					return <p key={key}>{v.data}</p>;
+				}
+				return v.data;
+			}
 
-		if (story.text) {
-			let div = document.createElement('div');
-			div.innerHTML = story.text;
-			nodes = div.childNodes;
+			if (v.nodeType !== Node.ELEMENT_NODE) {
+				return null;
+			}
+
+			if (DANGEROUS_TAGS.includes(v.localName)) {
+				return <span key={key} dangerouslySetInnerHTML={{ __html: v.outerHTML }} />;
+			}
+
+			const Tag = v.localName;
+			if (isCodeBlock(v)) {
+				return (
+					<React.Fragment key={key}>
+						<Tag dangerouslySetInnerHTML={{ __html: v.innerHTML }} />
+						<button onClick={() => pConvert(key)}>Convert Code to Paragraph</button>
+					</React.Fragment>
+				);
+			}
+
+			const textContent = v.textContent.trim();
+			const isMath = (textContent.startsWith('\\(') && textContent.endsWith('\\)')) ||
+				(textContent.startsWith('\\[') && textContent.endsWith('\\]')) ||
+				(textContent.startsWith('$$') && textContent.endsWith('$$')) ||
+				(textContent.startsWith('$') && textContent.endsWith('$') && textContent.indexOf('$') !== textContent.lastIndexOf('$') && !/\s/.test(textContent.charAt(textContent.length - 2)));
+
+			const props = { key: key };
+			if (v.hasAttributes()) {
+				for (const attr of v.attributes) {
+					const name = attr.name === 'class' ? 'className' : attr.name;
+					props[name] = attr.value;
+				}
+			}
+
+			if (isMath) {
+				let mathContent = v.textContent;
+				// align environment requires display math mode
+				if (mathContent.includes('\\begin{align')) {
+					const trimmed = mathContent.trim();
+					if (trimmed.startsWith('\\(')) {
+						// Replace \( and \) with \[ and \] to switch to display mode
+						const firstParen = mathContent.indexOf('\\(');
+						const lastParen = mathContent.lastIndexOf('\\)');
+						mathContent = mathContent.substring(0, firstParen) + '\\[' + mathContent.substring(firstParen + 2, lastParen) + '\\]' + mathContent.substring(lastParen + 2);
+					} else if (trimmed.startsWith('$') && !trimmed.startsWith('$$')) {
+						// Replace $ with $$
+						const firstDollar = mathContent.indexOf('$');
+						const lastDollar = mathContent.lastIndexOf('$');
+						if (firstDollar !== lastDollar) {
+							mathContent = mathContent.substring(0, firstDollar) + '$$' + mathContent.substring(firstDollar + 1, lastDollar) + '$$' + mathContent.substring(lastDollar + 1);
+						}
+					}
+				}
+				return <Tag {...props}><Latex delimiters={latexDelimiters}>{mathContent}</Latex></Tag>;
+			}
+
+			if (VOID_ELEMENTS.includes(Tag)) {
+				return <Tag {...props} />;
 			}
 
+			return (
+				<Tag {...props}>
+					{renderNodes(v.childNodes, `${key}-`)}
+				</Tag>
+			);
+		});
+	};
+
+	const nodes = (s) => {
+		if (s && s.text) {
+			let div = document.createElement('div');
+			div.innerHTML = s.text;
+			return div.childNodes;
+		}
+		return null;
+	};
+
+	const storyNodes = nodes(story);
+
 	return (
 		<div className='article-container'>
-				{error && <p>Connection error?</p>}
+			{error &&
+				<details style={{marginBottom: '1rem'}}>
+					<summary>Connection error? Click to expand.</summary>
+					<p>{error}</p>
+					{story && <p>Loaded article from cache.</p>}
+				</details>
+			}
 			{story ?
 				<div className='article'>
 					<Helmet>
@@ -71,43 +210,28 @@ class Article extends React.Component {
 						<meta name="robots" content="noindex" />
 					</Helmet>
 
-						<h1>{story.title}</h1>
+					<h1>{story.title} <button className='copy-button' onClick={copyLink}>{copyButtonText}</button></h1>
 
 					<div className='info'>
-							Source: {sourceLink(story)}
+						Source: {sourceLink(story)} | {similarLink(story)}
 					</div>
 
 					{infoLine(story)}
 
-						{nodes ?
+					{storyNodes ?
 						<div className='story-text'>
-								{Object.entries(nodes).map(([k, v]) =>
-									pConv.includes(k) ?
-										v.innerHTML.split('\n\n').map(x =>
-											<p dangerouslySetInnerHTML={{ __html: x }} />
-										)
-									:
-										(v.nodeName === '#text' ?
-											<p>{v.data}</p>
-										:
-											<>
-												<v.localName dangerouslySetInnerHTML={v.innerHTML ? { __html: v.innerHTML } : null} />
-												{v.localName == 'pre' && <button onClick={() => this.pConvert(k)}>Convert Code to Paragraph</button>}
-											</>
-										)
-								)}
+							{renderNodes(storyNodes)}
 						</div>
 					:
 						<p>Problem getting article :(</p>
 					}
 				</div>
 			:
-					<p>loading...</p>
+				<p>Loading...</p>
 			}
 			<ToggleDot id={id} article={false} />
 		</div>
 	);
 }
-}
 
 export default Article;

webclient/src/Comments.js

@@ -1,83 +1,80 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { Link, useParams } from 'react-router-dom';
 import { HashLink } from 'react-router-hash-link';
 import { Helmet } from 'react-helmet';
 import moment from 'moment';
 import localForage from 'localforage';
 import { infoLine, ToggleDot } from './utils.js';
 
-class Article extends React.Component {
-	constructor(props) {
-		super(props);
+function countComments(c) {
+	return c.comments.reduce((sum, x) => sum + countComments(x), 1);
+}
 
-		const id = this.props.match.params.id;
-		const cache = this.props.cache;
+function Comments({ cache }) {
+	const { id } = useParams();
 
 	if (id in cache) console.log('cache hit');
 
-		this.state = {
-			story: cache[id] || false,
-			error: false,
-			collapsed: [],
-			expanded: [],
-		};
-	}
-
-	componentDidMount() {
-		const id = this.props.match.params.id;
+	const [story, setStory] = useState(cache[id] || false);
+	const [error, setError] = useState('');
+	const [collapsed, setCollapsed] = useState([]);
+	const [expanded, setExpanded] = useState([]);
 
+	useEffect(() => {
 		localForage.getItem(id)
 			.then(
 				(value) => {
-					this.setState({ story: value });
+					if (value) {
+						setStory(value);
+					}
 				}
 			);
 
 		fetch('/api/' + id)
-			.then(res => res.json())
+			.then(res => {
+				if (!res.ok) {
+					throw new Error(`Server responded with ${res.status} ${res.statusText}`);
+				}
+				return res.json();
+			})
 			.then(
 				(result) => {
-					this.setState({ story: result.story }, () => {
+					setStory(result.story);
+					localForage.setItem(id, result.story);
 					const hash = window.location.hash.substring(1);
 					if (hash) {
-							document.getElementById(hash).scrollIntoView();
+						setTimeout(() => {
+							const element = document.getElementById(hash);
+							if (element) {
+								element.scrollIntoView();
+							}
+						}, 0);
 					}
-					});
-					localForage.setItem(id, result.story);
 				},
 				(error) => {
-					this.setState({ error: true });
+					const errorMessage = `Failed to fetch comments (ID: ${id}). Your connection may be down or the server might be experiencing issues. ${error.toString()}.`;
+					setError(errorMessage);
 				}
 			);
-	}
+	}, [id]);
 
-	collapseComment(cid) {
-		this.setState(prevState => ({
-			...prevState,
-			collapsed: [...prevState.collapsed, cid],
-			expanded: prevState.expanded.filter(x => x !== cid),
-		}));
-	}
+	const collapseComment = (cid) => {
+		setCollapsed(prev => [...prev, cid]);
+		setExpanded(prev => prev.filter(x => x !== cid));
+	};
 
-	expandComment(cid) {
-		this.setState(prevState => ({
-			...prevState,
-			collapsed: prevState.collapsed.filter(x => x !== cid),
-			expanded: [...prevState.expanded, cid],
-		}));
-	}
+	const expandComment = (cid) => {
+		setCollapsed(prev => prev.filter(x => x !== cid));
+		setExpanded(prev => [...prev, cid]);
+	};
 
-	countComments(c) {
-		return c.comments.reduce((sum, x) => sum + this.countComments(x), 1);
-	}
-
-	displayComment(story, c, level) {
+	const displayComment = (story, c, level) => {
 		const cid = c.author+c.date;
 
-		const collapsed = this.state.collapsed.includes(cid);
-		const expanded = this.state.expanded.includes(cid);
+		const isCollapsed = collapsed.includes(cid);
+		const isExpanded = expanded.includes(cid);
 
-		const hidden = collapsed || (level == 4 && !expanded);
+		const hidden = isCollapsed || (level == 4 && !isExpanded);
 		const hasChildren = c.comments.length !== 0;
 
 		return (
@@ -88,30 +85,31 @@ class Article extends React.Component {
 						{' '} | <HashLink to={'#'+cid} id={cid}>{moment.unix(c.date).fromNow()}</HashLink>
 
 						{hidden || hasChildren &&
-							<span className='collapser pointer' onClick={() => this.collapseComment(cid)}>–</span>
+							<button className='collapser pointer' onClick={() => collapseComment(cid)}>–</button>
 						}
 					</p>
 				</div>
 
-				<div className={collapsed ? 'text hidden' : 'text'}  dangerouslySetInnerHTML={{ __html: c.text }} />
+				<div className={isCollapsed ? 'text hidden' : 'text'}  dangerouslySetInnerHTML={{ __html: c.text || '<p>[Empty / deleted comment]</p>'}} />
 
 				{hidden && hasChildren ?
-					<div className='comment lined info pointer' onClick={() => this.expandComment(cid)}>[show {this.countComments(c)-1} more]</div>
+					<button className='comment lined info pointer' onClick={() => expandComment(cid)}>[show {countComments(c)-1} more]</button>
 				:
-					c.comments.map(i => this.displayComment(story, i, level + 1))
+					c.comments.map(i => displayComment(story, i, level + 1))
 				}
 			</div>
 		);
-	}
-
-	render() {
-		const id = this.props.match.params.id;
-		const story = this.state.story;
-		const error = this.state.error;
+	};
 
 	return (
 		<div className='container'>
-				{error && <p>Connection error?</p>}
+			{error &&
+				<details style={{marginBottom: '1rem'}}>
+					<summary>Connection error? Click to expand.</summary>
+					<p>{error}</p>
+					{story && <p>Loaded comments from cache.</p>}
+				</details>
+			}
 			{story ?
 				<div className='article'>
 					<Helmet>
@@ -128,7 +126,7 @@ class Article extends React.Component {
 					{infoLine(story)}
 
 					<div className='comments'>
-							{story.comments.map(c => this.displayComment(story, c, 0))}
+						{story.comments.map(c => displayComment(story, c, 0))}
 					</div>
 				</div>
 			:
@@ -138,6 +136,5 @@ class Article extends React.Component {
 		</div>
 	);
 }
-}
 
-export default Article;
+export default Comments;

webclient/src/Feed.js

@@ -1,53 +1,122 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import localForage from 'localforage';
 import { sourceLink, infoLine, logos } from './utils.js';
 
-class Feed extends React.Component {
-	constructor(props) {
-		super(props);
+function Feed({ updateCache }) {
+	const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false);
+	const [error, setError] = useState('');
+	const [loadingStatus, setLoadingStatus] = useState(null);
+	const [filterSmallweb, setFilterSmallweb] = useState(() => localStorage.getItem('filterSmallweb') === 'true');
 
-		this.state = {
-			stories: JSON.parse(localStorage.getItem('stories')) || false,
-			error: false,
+	const handleFilterChange = e => {
+		const isChecked = e.target.checked;
+		setStories(false);
+		setFilterSmallweb(isChecked);
+		localStorage.setItem('filterSmallweb', isChecked);
 	};
+
+	useEffect(() => {
+		const controller = new AbortController();
+
+		if ('serviceWorker' in navigator) {
+			navigator.serviceWorker.getRegistration().then(reg => {
+				if (reg) {
+					console.log('Checking for client update...');
+					reg.update();
 				}
-
-	componentDidMount() {
-		fetch('/api')
-			.then(res => res.json())
-			.then(
-				(result) => {
-					const updated = !this.state.stories || this.state.stories[0].id !== result.stories[0].id;
-					console.log('updated:', updated);
-
-					this.setState({ stories: result.stories });
-					localStorage.setItem('stories', JSON.stringify(result.stories));
-
-					if (updated) {
-						localForage.clear();
-						result.stories.forEach((x, i) => {
-							fetch('/api/' + x.id)
-								.then(res => res.json())
-								.then(result => {
-									localForage.setItem(x.id, result.story)
-										.then(console.log('preloaded', x.id, x.title));
-									this.props.updateCache(x.id, result.story);
-								}, error => {}
-							);
 			});
 		}
-				},
-				(error) => {
-					this.setState({ error: true });
+
+		fetch(filterSmallweb ? '/api?smallweb=true' : '/api', { signal: controller.signal })
+			.then(res => {
+				if (!res.ok) {
+					throw new Error(`Server responded with ${res.status} ${res.statusText}`);
+				}
+				return res.json();
+			})
+			.then(
+				async (result) => {
+					const newApiStories = result.stories;
+
+					const updated = !stories || !stories.length || stories[0].id !== newApiStories[0].id;
+					console.log('New stories available:', updated);
+
+					if (!updated) return;
+
+					setLoadingStatus({ current: 0, total: newApiStories.length });
+
+					let currentStories = Array.isArray(stories) ? [...stories] : [];
+					let preloadedCount = 0;
+
+					for (const [index, newStory] of newApiStories.entries()) {
+						if (controller.signal.aborted) {
+							break;
+						}
+						try {
+							const storyFetchController = new AbortController();
+							const timeoutId = setTimeout(() => storyFetchController.abort(), 10000); // 10-second timeout
+							const storyRes = await fetch('/api/' + newStory.id, { signal: storyFetchController.signal });
+							clearTimeout(timeoutId);
+
+							if (!storyRes.ok) {
+								throw new Error(`Server responded with ${storyRes.status} ${storyRes.statusText}`);
+							}
+							const storyResult = await storyRes.json();
+							const fullStory = storyResult.story;
+
+							await localForage.setItem(fullStory.id, fullStory);
+							console.log('Preloaded story:', fullStory.id, fullStory.title);
+							updateCache(fullStory.id, fullStory);
+							preloadedCount++;
+							setLoadingStatus({ current: preloadedCount, total: newApiStories.length });
+
+							const existingStoryIndex = currentStories.findIndex(s => s.id === newStory.id);
+							if (existingStoryIndex > -1) {
+								currentStories.splice(existingStoryIndex, 1);
+							}
+							currentStories.splice(index, 0, newStory);
+
+							localStorage.setItem('stories', JSON.stringify(currentStories));
+							setStories(currentStories);
+						} catch (error) {
+							let errorMessage;
+							if (error.name === 'AbortError') {
+								errorMessage = `The request to fetch story '${newStory.title}' (${newStory.id}) timed out after 10 seconds. Your connection may be unstable. (${preloadedCount} / ${newApiStories.length} stories preloaded)`;
+								console.log('Fetch timed out for story:', newStory.id);
+							} else {
+								errorMessage = `An error occurred while fetching story '${newStory.title}' (ID: ${newStory.id}): ${error.toString()}. (${preloadedCount} / ${newApiStories.length} stories preloaded)`;
+								console.log('Fetch failed for story:', newStory.id, error);
+							}
+							setError(errorMessage);
+							break;
 						}
-			);
 					}
 
-	render() {
-		const stories = this.state.stories;
-		const error = this.state.error;
+					const finalStories = currentStories.slice(0, newApiStories.length);
+					const removedStories = currentStories.slice(newApiStories.length);
+					for (const story of removedStories) {
+						console.log('Removed story:', story.id, story.title);
+						localForage.removeItem(story.id);
+					}
+
+					localStorage.setItem('stories', JSON.stringify(finalStories));
+					setStories(finalStories);
+					setLoadingStatus(null);
+				},
+				(error) => {
+					if (error.name === 'AbortError') {
+						console.log('Feed fetch aborted.');
+						return;
+					}
+					const errorMessage = `Failed to fetch the main story list from the API. Your connection may be down or the server might be experiencing issues. ${error.toString()}.`;
+					setError(errorMessage);
+				}
+			);
+
+		return () => controller.abort();
+	}, [updateCache, filterSmallweb]);
 
 	return (
 		<div className='container'>
@@ -55,7 +124,20 @@ class Feed extends React.Component {
 				<title>QotNews</title>
 				<meta name="robots" content="index" />
 			</Helmet>
-				{error && <p>Connection error?</p>}
+
+			<div style={{marginBottom: '1rem'}}>
+				<input type="checkbox" id="filter-smallweb" className="checkbox" checked={filterSmallweb} onChange={handleFilterChange} />
+				<label htmlFor="filter-smallweb">Small websites</label>
+			</div>
+
+			{error &&
+				<details style={{marginBottom: '1rem'}}>
+					<summary>Connection error? Click to expand.</summary>
+					<p>{error}</p>
+					{stories && <p>Loaded feed from cache.</p>}
+				</details>
+			}
+
 			{stories ?
 				<div>
 					{stories.map(x =>
@@ -75,11 +157,12 @@ class Feed extends React.Component {
 					)}
 				</div>
 			:
-					<p>loading...</p>
+				<p>Loading...</p>
 			}
+
+			{loadingStatus && <p>Preloading stories {loadingStatus.current} / {loadingStatus.total}...</p>}
 		</div>
 	);
 }
-}
 
 export default Feed;

webclient/src/Results.js

@@ -1,57 +1,36 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { sourceLink, infoLine, logos } from './utils.js';
 import AbortController from 'abort-controller';
 
-class Results extends React.Component {
-	constructor(props) {
-		super(props);
+function Results() {
+	const [stories, setStories] = useState(false);
+	const [error, setError] = useState(false);
+	const location = useLocation();
 
-		this.state = {
-			stories: false,
-			error: false,
-		};
+	useEffect(() => {
+		const controller = new AbortController();
+		const signal = controller.signal;
 
-		this.controller = null;
-	}
-
-	performSearch = () => {
-		if (this.controller) {
-			this.controller.abort();
-		}
-
-		this.controller = new AbortController();
-		const signal = this.controller.signal;
-
-		const search = this.props.location.search;
+		const search = location.search;
 		fetch('/api/search' + search, { method: 'get', signal: signal })
 			.then(res => res.json())
 			.then(
 				(result) => {
-					this.setState({ stories: result.hits });
+					setStories(result.hits);
 				},
 				(error) => {
 					if (error.message !== 'The operation was aborted. ') {
-						this.setState({ error: true });
+						setError(true);
 					}
 				}
 			);
-	}
 
-	componentDidMount() {
-		this.performSearch();
-	}
-
-	componentDidUpdate(prevProps) {
-		if (this.props.location.search !== prevProps.location.search) {
-			this.performSearch();
-		}
-	}
-
-	render() {
-		const stories = this.state.stories;
-		const error = this.state.error;
+		return () => {
+			controller.abort();
+		};
+	}, [location.search]);
 
 	return (
 		<div className='container'>
@@ -90,6 +69,5 @@ class Results extends React.Component {
 		</div>
 	);
 }
-}
 
 export default Results;

webclient/src/Search.js

@@ -1,51 +1,46 @@
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
+import React, { useState, useRef } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 import queryString from 'query-string';
 
-const getSearch = props => queryString.parse(props.location.search).q;
+const getSearch = location => queryString.parse(location.search).q || '';
 
-class Search extends Component {
-	constructor(props) {
-		super(props);
+function Search() {
+	const history = useHistory();
+	const location = useLocation();
 
-		this.state = {search: getSearch(this.props)};
-		this.inputRef = React.createRef();
-	}
+	const [search, setSearch] = useState(getSearch(location));
+	const inputRef = useRef(null);
 
-	searchArticles = (event) => {
-		const search = event.target.value;
-		this.setState({search: search});
-		if (search.length >= 3) {
-			const searchQuery = queryString.stringify({ 'q': search });
-			this.props.history.replace('/search?' + searchQuery);
+	const searchArticles = (event) => {
+		const newSearch = event.target.value;
+		setSearch(newSearch);
+		if (newSearch.length >= 3) {
+			const searchQuery = queryString.stringify({ 'q': newSearch });
+			history.replace('/search?' + searchQuery);
 		} else {
-			this.props.history.replace('/');
+			history.replace('/');
 		}
 	}
 
-	searchAgain = (event) => {
+	const searchAgain = (event) => {
 		event.preventDefault();
 		const searchString = queryString.stringify({ 'q': event.target[0].value });
-		this.props.history.push('/search?' + searchString);
-		this.inputRef.current.blur();
+		history.push('/search?' + searchString);
+		inputRef.current.blur();
 	}
 
-	render() {
-		const search = this.state.search;
-
 	return (
 		<span className='search'>
-				<form onSubmit={this.searchAgain}>
+			<form onSubmit={searchAgain}>
 				<input
 					placeholder='Search...'
 					value={search}
-						onChange={this.searchArticles}
-						ref={this.inputRef}
+					onChange={searchArticles}
+					ref={inputRef}
 				/>
 			</form>
 		</span>
 	);
 }
-}
 
-export default withRouter(Search);
+export default Search;

webclient/src/Style-black.css

@@ -11,7 +11,8 @@
 	border: 1px solid #828282;
 }
 
-.black button {
+.black .menu button,
+.black .story-text button {
 	background-color: #444444;
 	border-color: #bbb;
 	color: #ddd;
@@ -66,3 +67,22 @@
 .black .comment.lined {
 	border-left: 1px solid #444444;
 }
+
+.black .checkbox:checked + label::after {
+	border-color: #eee;
+}
+
+.black .copy-button {
+	color: #828282;
+}
+
+.black .update-banner {
+	background-color: #333;
+	color: #ddd;
+}
+
+.black .update-banner button {
+	background-color: #444444;
+	border-color: #bbb;
+	color: #ddd;
+}

webclient/src/Style-dark.css

@@ -11,7 +11,8 @@
 	border: 1px solid #828282;
 }
 
-.dark button {
+.dark .menu button,
+.dark .story-text button {
 	background-color: #444444;
 	border-color: #bbb;
 	color: #ddd;
@@ -62,3 +63,22 @@
 .dark .comment.lined {
 	border-left: 1px solid #444444;
 }
+
+.dark .checkbox:checked + label::after {
+	border-color: #eee;
+}
+
+.dark .copy-button {
+	color: #828282;
+}
+
+.dark .update-banner {
+	background-color: #333;
+	color: #ddd;
+}
+
+.dark .update-banner button {
+	background-color: #444444;
+	border-color: #bbb;
+	color: #ddd;
+}

webclient/src/Style-light.css

@@ -43,16 +43,36 @@ input {
 	border-radius: 4px;
 }
 
+.update-banner {
+	background-color: #ddd;
+	padding: 0.75rem;
+	text-align: center;
+}
+
+.update-banner button {
+	margin-left: 1rem;
+	padding: 0.25rem 0.75rem;
+	border: 1px solid #828282;
+	border-radius: 4px;
+	background-color: transparent;
+	cursor: pointer;
+}
+
 .fullscreen {
 	margin: 0.25rem;
 	padding: 0.25rem;
 }
 
-
 pre {
 	overflow: auto;
 }
 
+.comments pre {
+	overflow: auto;
+	white-space: pre-wrap;
+	overflow-wrap: break-word;
+}
+
 .container {
 	margin: 1rem auto;
 	max-width: 64rem;
@@ -121,6 +141,13 @@ span.source {
 	border-bottom: 1px solid #222222;
 }
 
+.article-title {
+	display: flex;
+	align-items: center;
+	margin-top: 0.67em;
+	margin-bottom: 0.67em;
+}
+
 .article h1 {
 	font-size: 1.6rem;
 }
@@ -177,6 +204,13 @@ span.source {
 
 .comments {
 	margin-left: -1.25rem;
+	margin-top: 0;
+	margin-bottom: 0;
+	padding: 0;
+}
+
+.comments dl, .comments dd {
+	margin: 0;
 }
 
 .comment {
@@ -189,6 +223,11 @@ span.source {
 
 .comment .text {
 	margin-top: -0.5rem;
+	margin-bottom: 1rem;
+}
+
+.comment .text > * {
+	margin-bottom: 0;
 }
 
 .comment .text.hidden > p {
@@ -208,6 +247,31 @@ span.source {
 	padding-right: 1.5rem;
 }
 
+button.collapser {
+	background: transparent;
+	border: none;
+	margin: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+	font: inherit;
+	color: inherit;
+}
+
+button.comment {
+	background: transparent;
+	border-top: none;
+	border-right: none;
+	border-bottom: none;
+	margin: 0;
+	padding-top: 0;
+	padding-right: 0;
+	padding-bottom: 0;
+	font: inherit;
+	color: inherit;
+	text-align: left;
+	width: 100%;
+}
+
 .comment .pointer {
 	cursor: pointer;
 }
@@ -260,3 +324,84 @@ span.source {
 .search form {
 	display: inline;
 }
+
+.copy-button {
+	font: 1.5rem/1 'icomoon2';
+	color: #828282;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	vertical-align: middle;
+}
+
+.checkbox {
+	-webkit-appearance: none;
+	appearance: none;
+	position: absolute;
+	opacity: 0;
+	cursor: pointer;
+	height: 0;
+	width: 0;
+}
+
+.checkbox + label {
+	position: relative;
+	cursor: pointer;
+	padding-left: 1.75rem;
+	user-select: none;
+}
+
+.checkbox + label::before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 0.1em;
+	width: 1rem;
+	height: 1rem;
+	border: 1px solid #828282;
+	background-color: transparent;
+	border-radius: 3px;
+}
+
+.checkbox:checked + label::after {
+	content: "";
+	position: absolute;
+	left: 0.35rem;
+	top: 0.2em;
+	width: 0.3rem;
+	height: 0.6rem;
+	border-style: solid;
+	border-color: #000;
+	border-width: 0 2px 2px 0;
+	transform: rotate(45deg);
+}
+
+.tooltip .tooltiptext {
+	visibility: hidden;
+	width: 140px;
+	background-color: #555;
+	color: #fff;
+	text-align: center;
+	border-radius: 6px;
+	padding: 5px 0;
+	position: absolute;
+	z-index: 1;
+	bottom: 110%;
+	left: 50%;
+	margin-left: -70px;
+	opacity: 0;
+	transition: opacity 0.2s;
+	font-size: 0.9rem;
+	line-height: 1.3;
+}
+
+.forwardDot .tooltiptext {
+	left: auto;
+	right: 0;
+	margin-left: 0;
+}
+
+.tooltip.show-tooltip .tooltiptext {
+	visibility: visible;
+	opacity: 1;
+}

webclient/src/Style-red.css

@@ -20,7 +20,8 @@
 	background-color: #690000;
 }
 
-.red button {
+.red .menu button,
+.red .story-text button {
 	background-color: #440000;
 	border-color: #b00;
 	color: #b00;
@@ -80,3 +81,26 @@
 .red .dot {
 	background-color: #440000;
 }
+
+.red .checkbox + label::before {
+	border: 1px solid #690000;
+}
+
+.red .checkbox:checked + label::after {
+	border-color: #dd0000;
+}
+
+.red .copy-button {
+	color: #690000;
+}
+
+.red .update-banner {
+	background-color: #300;
+	color: #d00;
+}
+
+.red .update-banner button {
+	background-color: #440000;
+	border-color: #b00;
+	color: #d00;
+}

webclient/src/Submit.js

@@ -1,54 +1,53 @@
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
+import React, { useState, useRef } from 'react';
+import { useHistory } from 'react-router-dom';
 
-class Submit extends Component {
-	constructor(props) {
-		super(props);
+function Submit() {
+	const [progress, setProgress] = useState(null);
+	const inputRef = useRef(null);
+	const history = useHistory();
 
-		this.state = {
-			progress: null,
-		};
-
-		this.inputRef = React.createRef();
-	}
-
-	submitArticle = (event) => {
+	const submitArticle = async (event) => {
 		event.preventDefault();
 		const url = event.target[0].value;
-		this.inputRef.current.blur();
+		inputRef.current.blur();
 
-		this.setState({ progress: 'Submitting...' });
+		setProgress('Submitting...');
 
 		let data = new FormData();
 		data.append('url', url);
 
-		fetch('/api/submit', { method: 'POST', body: data })
-			.then(res => res.json())
-			.then(
-				(result) => {
-					this.props.history.replace('/' + result.nid);
-				},
-				(error) => {
-					this.setState({ progress: 'Error' });
-				}
-			);
-	}
+		try {
+			const res = await fetch('/api/submit', { method: 'POST', body: data });
 
-	render() {
-		const progress = this.state.progress;
+			if (res.ok) {
+				const result = await res.json();
+				history.replace('/' + result.nid);
+			} else {
+				let errorData;
+				try {
+					errorData = await res.json();
+				} catch (jsonError) {
+					// Not a JSON error from our API, so it's a server issue
+					throw new Error(`Server responded with ${res.status} ${res.statusText}`);
+				}
+				setProgress(errorData.error || 'An unknown error occurred.');
+			}
+		} catch (error) {
+			setProgress(`Error: ${error.toString()}`);
+		}
+	}
 
 	return (
 		<span className='search'>
-				<form onSubmit={this.submitArticle}>
+			<form onSubmit={submitArticle}>
 				<input
 					placeholder='Submit URL'
-						ref={this.inputRef}
+					ref={inputRef}
 				/>
 			</form>
-				{progress ? progress : ''}
+			{progress && <p>{progress}</p>}
 		</span>
 	);
 }
-}
 
-export default withRouter(Submit);
+export default Submit;

webclient/src/fonts/Fonts.css

@@ -26,3 +26,8 @@
     font-family: 'Icomoon';
     src: url('icomoon.ttf') format('truetype');
 }
+
+@font-face {
+    font-family: 'Icomoon2';
+    src: url('icomoon2.ttf') format('truetype');
+}

webclient/src/index.js

@@ -3,9 +3,15 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
+// version 4
+
 ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // // unregister() to register() below. Note this comes with some pitfalls.
 // // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.register();
+serviceWorker.register({
+  onUpdate: registration => {
+    window.dispatchEvent(new CustomEvent('swUpdate', { detail: registration }));
+  }
+});

webclient/src/utils.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
 
@@ -9,6 +9,13 @@ export const sourceLink = (story) => {
 	return (<a className='source' href={url}>{host}</a>);
 };
 
+export const similarLink = (story) => {
+	const url = story.url || story.link;
+	const urlObj = new URL(url);
+	const host = urlObj.hostname.replace(/^www\./, '');
+	return (<Link to={'/search?q="'+host+'"'} className='similar'>similar</Link>);
+};
+
 export const infoLine = (story) =>
 	<div className='info'>
 		{story.score} points
@@ -21,12 +28,7 @@ export const infoLine = (story) =>
 	</div>
 ;
 
-export class ToggleDot extends React.Component {
-	render() {
-		const id = this.props.id;
-		const article = this.props.article;
-
-		return (
+export const ToggleDot = ({ id, article }) => (
 	<div className='dot toggleDot'>
 		<div className='button'>
 			<Link to={'/' + id + (article ? '' : '/c')}>
@@ -35,49 +37,63 @@ export class ToggleDot extends React.Component {
 		</div>
 	</div>
 );
-	}
-}
 
-export class BackwardDot extends React.Component {
-	goBackward() {
+export const BackwardDot = () => {
+	const [showTooltip, setShowTooltip] = useState(false);
+
+	const goBackward = () => {
 		localStorage.setItem('scrollLock', 'True');
 		window.history.back();
-	}
+	};
 
-	render() {
 	const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
 	if (!isMobile) return null;
 	if (!document.fullscreenElement) return null;
 
 	return (
-			<div className='dot backwardDot' onClick={this.goBackward}>
+		<div
+			className={'dot backwardDot tooltip' + (showTooltip ? ' show-tooltip' : '')}
+			onClick={goBackward}
+			onMouseEnter={() => setShowTooltip(true)}
+			onMouseLeave={() => setShowTooltip(false)}
+			onTouchStart={() => setShowTooltip(true)}
+			onTouchEnd={() => setShowTooltip(false)}
+		>
 			<div className='button'>
 				
 			</div>
+			<span className="tooltiptext">Browser Back</span>
 		</div>
 	);
-	}
-}
+};
 
-export class ForwardDot extends React.Component {
-	goForward() {
+export const ForwardDot = () => {
+	const [showTooltip, setShowTooltip] = useState(false);
+
+	const goForward = () => {
 		localStorage.setItem('scrollLock', 'True');
 		window.history.forward();
-	}
+	};
 
-	render() {
 	const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
 	if (!isMobile) return null;
 
 	return (
-			<div className='dot forwardDot' onClick={this.goForward}>
+		<div
+			className={'dot forwardDot tooltip' + (showTooltip ? ' show-tooltip' : '')}
+			onClick={goForward}
+			onMouseEnter={() => setShowTooltip(true)}
+			onMouseLeave={() => setShowTooltip(false)}
+			onTouchStart={() => setShowTooltip(true)}
+			onTouchEnd={() => setShowTooltip(false)}
+		>
 			<div className='button'>
 				
 			</div>
+			<span className="tooltiptext">Browser Forward</span>
 		</div>
 	);
-	}
-}
+};
 
 export const logos = {
 	hackernews: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4wgeBhwhciGZUAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGCSURBVFjD7Za/S0JRFMc/+oSgLWjLH/2AIKEhC2opIp1amqw/INCo9lbHghCnKDdpN5OoIGhISSLwx2RCEYSjUWhWpO+9hicopCHh8w29Mx3u/XLv95z7Pedcg+y1VQEBbUw0ang5gGBEY9MJ6ARMbaH6HdBnBlmC+5PfsVYX9PTCSx4KyQ4RsI6DxwcYIGSFxF5znHkOtvZBECDoa4tAe0+QDMFDVvFd7ta4pU0QTAo2GeqwBqIHIEkwMAQzaz/3LfNgn1Qw0aAKIswdQzZVy8Jyk+g3lNTfpSEXUakKjgJQrYB5GKY9DRpZALsDxCqEAyqWYT4G6etaFlYaol8HowCZBOSvVO4DR374+gTLCEytgs0JYxPKWtivUh9otOcM3FzC7CI43fBWVKK/vYBCqkudMLIN7yUYHFXe/qMMkZ0utuLyE8ROwWBU6j5+BqXHLs+C+GHdP9/VYBhJ1bpfedXHsU5A5Q9JKxEWa+KT5T8fY5C9NlnXgE7g3xMQNbxf/AZyEGqvyYs/dQAAAABJRU5ErkJggg==',