Misc fixes

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

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019 Tanner (tanner.vc)
+Copyright (c) 2019 Tanner Collin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -20,7 +20,7 @@ $ sudo apt install yarn
 Clone this repo:
 
 ```text
-$ git clone https://git.tanner.vc/tanner/qotnews.git
+$ git clone https://gogs.tannercollin.com/tanner/qotnews.git
 $ cd qotnews
 ```
 

apiserver/.gitignore

@@ -111,4 +111,3 @@ data.db.bak
 data/archive/*
 data/backup/*
 qotnews.sqlite
-praw.ini

apiserver/feeds/tildes.py

@@ -16,7 +16,7 @@ from utils import clean
 # cache the topic groups to prevent redirects
 group_lookup = {}
 
-USER_AGENT = 'qotnews scraper (github:tanner37)'
+USER_AGENT = 'qotnews scraper (github:tannercollin)'
 
 API_TOPSTORIES = lambda : 'https://tildes.net'
 API_ITEM = lambda x : 'https://tildes.net/shortener/{}'.format(x)

apiserver/requirements.txt

@@ -8,7 +8,6 @@ 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/search.py

@@ -10,7 +10,6 @@ SEARCH_ENABLED = bool(settings.MEILI_URL)
 
 def meili_api(method, route, json=None, params=None, parse_json=True):
     try:
-        headers = {'Authorization': 'Bearer ' + settings.MEILI_API_KEY}
         r = method(settings.MEILI_URL + route, json=json, params=params, timeout=4)
         if r.status_code > 299:
             raise Exception('Bad response code ' + str(r.status_code))
@@ -29,20 +28,24 @@ def create_index():
     json = dict(uid='qotnews', primaryKey='id')
     return meili_api(requests.post, 'indexes', json=json)
 
-def update_settings():
+def update_rankings():
-    json = {
+    json = ['typo', 'words', 'proximity', 'date:desc', 'exactness']
-        'rankingRules': ['typo', 'words', 'proximity', 'date:desc', 'exactness'],
+    return meili_api(requests.post, 'indexes/qotnews/settings/ranking-rules', json=json)
-        'searchableAttributes': ['title', 'url', 'author'],
+
-        'displayedAttributes': ['id', 'ref', 'source', 'author', 'author_link', 'score', 'date', 'title', 'link', 'url', 'num_comments'],
+def update_attributes():
-    }
+    json = ['title', 'url', 'author']
-    return meili_api(requests.post, 'indexes/qotnews/settings', json=json)
+    r = meili_api(requests.post, 'indexes/qotnews/settings/searchable-attributes', json=json)
+    json = ['id', 'ref', 'source', 'author', 'author_link', 'score', 'date', 'title', 'link', 'url', 'num_comments']
+    r = meili_api(requests.post, 'indexes/qotnews/settings/displayed-attributes', json=json)
+    return r
 
 def init():
     if not SEARCH_ENABLED:
         logging.info('Search is not enabled, skipping init.')
         return
     print(create_index())
-    update_settings()
+    update_rankings()
+    update_attributes()
 
 def put_story(story):
     if not SEARCH_ENABLED: return
@@ -50,11 +53,13 @@ def put_story(story):
 
 def search(q):
     if not SEARCH_ENABLED: return []
-    json = dict(q=q, limit=settings.FEED_LENGTH)
+    params = dict(q=q, limit=settings.FEED_LENGTH)
-    r = meili_api(requests.post, 'indexes/qotnews/search', json=json, parse_json=False)
+    r = meili_api(requests.get, 'indexes/qotnews/search', params=params, parse_json=False)
     return r
     
 if __name__ == '__main__':
     init()
 
+    print(update_rankings())
+
     print(search('facebook'))

apiserver/server.py

@@ -14,9 +14,6 @@ import json
 import threading
 import traceback
 import time
-import datetime
-import humanize
-import urllib.request
 from urllib.parse import urlparse, parse_qs
 
 import settings
@@ -29,25 +26,6 @@ from flask import abort, Flask, request, render_template, stream_with_context, R
 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()
 
@@ -61,62 +39,15 @@ 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)
-    is_smallweb_filter = request.args.get('smallweb') == 'true' and smallweb_set
+    stories = database.get_stories(limit, skip)
-    sources_filter = request.args.getlist('source')
-
-    if not is_smallweb_filter and not sources_filter:
-        stories = database.get_stories(limit, skip)
-    else:
-        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)
-
-                if is_smallweb_filter:
-                    story_url = story.get('url') or story.get('link') or ''
-                    if not story_url:
-                        continue
-                    hostname = urlparse(story_url).hostname
-                    if not hostname or hostname.replace('www.', '') not in smallweb_set:
-                        continue
-                
-                if sources_filter:
-                    if story.get('source') not in sources_filter:
-                        continue
-
-                filtered_stories.append(story_str)
-                if len(filtered_stories) == limit:
-                    break
-            
-            if len(filtered_stories) == limit:
-                break
-            
-            current_skip += limit
-        stories = filtered_stories
-
     # hacky nested json
     res = Response('{"stories":[' + ','.join(stories) + ']}')
     res.headers['content-type'] = 'application/json'
@@ -225,18 +156,11 @@ 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)
@@ -247,9 +171,9 @@ def static_story(sid):
     except NotFound:
         pass
 
-    story_obj = database.get_story(sid)
+    story = database.get_story(sid)
-    if not story_obj: return abort(404)
+    if not story: return abort(404)
-    story = json.loads(story_obj.full_json)
+    story = json.loads(story.full_json)
 
     score = story['score']
     num_comments = story['num_comments']
@@ -258,7 +182,7 @@ def static_story(sid):
             score, 's' if score != 1 else '',
             num_comments, 's' if num_comments != 1 else '',
             source)
-    url = urlparse(story.get('url') or story.get('link') or '').hostname or ''
+    url = urlparse(story['url']).hostname or urlparse(story['link']).hostname or ''
     url = url.replace('www.', '')
 
     return render_template('index.html',
@@ -266,8 +190,6 @@ def static_story(sid):
         url=url,
         description=description,
         robots='noindex',
-        story=story,
-        show_comments=request.path.endswith('/c'),
     )
 
 http_server = WSGIServer(('', 33842), flask_app)

apiserver/utils.py

@@ -12,7 +12,7 @@ def alert_tanner(message):
     try:
         logging.info('Alerting Tanner: ' + message)
         params = dict(qotnews=message)
-        requests.get('https://tbot.tanner.vc/message', params=params, timeout=4)
+        requests.get('https://tbot.tannercollin.com/message', params=params, timeout=4)
     except BaseException as e:
         logging.error('Problem alerting Tanner: ' + str(e))
 

webclient/package.json

@@ -4,14 +4,12 @@
   "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

@@ -30,135 +30,34 @@
 		-->
 		<title>{{ title }}</title>
 
-		<script>document.documentElement.className = 'js-enabled';</script>
 		<style>
-			.js-enabled .static-content {
-				display: none;
-			}
 			html {
 				overflow-y: scroll;
 			}
 			body {
-				background: #eeeeee;
+				background: #000;
+			}
+			.nojs {
+				color: white;
+				max-width: 32rem;
 			}
 		</style>
 	</head>
 
 	<body>
-		<script>
+		<div class="nojs">
-			(function() {
+			<noscript>
-				try {
+				You need to enable JavaScript to run this app because it's written in React.
-					var theme = localStorage.getItem('theme');
+				I was planning on writing a server-side version, but I've become distracted
-					if (theme === 'dark') {
+				by other projects -- sorry!
-						document.body.style.backgroundColor = '#1a1a1a';
+				<br/>
-					} else if (theme === 'black' || theme === 'red') {
+				I originally wrote this for myself, and of course I whitelist JavaScript on
-						document.body.style.backgroundColor = '#000';
+				all my own domains.
-					}
+				<br/><br/>
-				} catch (e) {}
+				Alternatively, try activex.news.t0.vc for an ActiveX™ version.
-			})();
+			</noscript>
-		</script>
-		<div id="root">
-			<div class="static-content">
-
-				{% if False %}
-				<noscript>
-					<meta http-equiv="refresh" content="0;url=?/no.script">
-				</noscript>
-				{% endif %}
-
-				<div class="container menu">
-					<p>
-						<a href="/">QotNews</a>
-						<br />
-						<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>
+		<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, { useState, useLayoutEffect, useEffect, useRef, useCallback } 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';
@@ -14,40 +14,35 @@ import Search from './Search.js';
 import Submit from './Submit.js';
 import Results from './Results.js';
 import ScrollToTop from './ScrollToTop.js';
-import Settings from './Settings.js';
 
 function App() {
 	const [theme, setTheme] = useState(localStorage.getItem('theme') || '');
 	const cache = useRef({});
 	const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement);
-	const [waitingWorker, setWaitingWorker] = useState(null);
-	const [settingsOpen, setSettingsOpen] = useState(false);
-	const defaultBodyFontSize = 1.0;
-	const [bodyFontSize, setBodyFontSize] = useState(Number(localStorage.getItem('bodyFontSize')) || defaultBodyFontSize);
-	const [bodyFont, setBodyFont] = useState(localStorage.getItem('bodyFont') || 'Sans Serif');
-	const [articleFont, setArticleFont] = useState(localStorage.getItem('articleFont') || 'Apparatus SIL');
-	const [filterSmallweb, setFilterSmallweb] = useState(() => localStorage.getItem('filterSmallweb') === 'true');
-	const [feedSources, setFeedSources] = useState(() => {
-		const saved = localStorage.getItem('feedSources');
-		return saved ? JSON.parse(saved) : {
-			hackernews: true,
-			reddit: true,
-			lobsters: true,
-			tildes: true,
-		};
-	});
 
 	const updateCache = useCallback((key, value) => {
 		cache.current[key] = value;
 	}, []);
 
-	useEffect(() => {
+	const light = () => {
-		const onSWUpdate = e => {
+		setTheme('');
-			setWaitingWorker(e.detail.waiting);
+		localStorage.setItem('theme', '');
-		};
+	};
-		window.addEventListener('swUpdate', onSWUpdate);
+
-		return () => window.removeEventListener('swUpdate', onSWUpdate);
+	const dark = () => {
-	}, []);
+		setTheme('dark');
+		localStorage.setItem('theme', 'dark');
+	};
+
+	const black = () => {
+		setTheme('black');
+		localStorage.setItem('theme', 'black');
+	};
+
+	const red = () => {
+		setTheme('red');
+		localStorage.setItem('theme', 'red');
+	};
 
 	useEffect(() => {
 		if (Object.keys(cache.current).length === 0) {
@@ -59,13 +54,24 @@ function App() {
 		}
 	}, [updateCache]);
 
+	const goFullScreen = () => {
+		if ('wakeLock' in navigator) {
+			navigator.wakeLock.request('screen');
+		}
+		document.body.requestFullscreen({ navigationUI: 'hide' });
+	};
+
+	const exitFullScreen = () => {
+		document.exitFullscreen();
+	};
+
 	useEffect(() => {
 		const onFullScreenChange = () => setIsFullScreen(!!document.fullscreenElement);
 		document.addEventListener('fullscreenchange', onFullScreenChange);
 		return () => document.removeEventListener('fullscreenchange', onFullScreenChange);
 	}, []);
 
-	useLayoutEffect(() => {
+	useEffect(() => {
 		if (theme === 'dark') {
 			document.body.style.backgroundColor = '#1a1a1a';
 		} else if (theme === 'black') {
@@ -77,86 +83,34 @@ function App() {
 		}
 	}, [theme]);
 
-	useEffect(() => {
+	const fullScreenAvailable = document.fullscreenEnabled ||
-		document.documentElement.style.fontSize = `${bodyFontSize}rem`;
+		document.mozFullscreenEnabled ||
-	}, [bodyFontSize]);
+		document.webkitFullscreenEnabled ||
-
+		document.msFullscreenEnabled;
-	const fontMap = {
-		'Sans Serif': 'sans-serif',
-		'Serif': 'serif',
-		'Apparatus SIL': "'Apparatus SIL', sans-serif"
-	};
-
-	useEffect(() => {
-		document.body.style.fontFamily = fontMap[bodyFont];
-	}, [bodyFont]);
-
-	useEffect(() => {
-		const styleId = 'article-font-family-style';
-		let style = document.getElementById(styleId);
-		if (!style) {
-			style = document.createElement('style');
-			style.id = styleId;
-			document.head.appendChild(style);
-		}
-		style.innerHTML = `.story-text { font-family: ${fontMap[articleFont]} !important; }`;
-	}, [articleFont]);
-
 
 	return (
 		<div className={theme}>
-			<Settings
-				settingsOpen={settingsOpen}
-				setSettingsOpen={setSettingsOpen}
-				theme={theme}
-				setTheme={setTheme}
-				isFullScreen={isFullScreen}
-				filterSmallweb={filterSmallweb}
-				setFilterSmallweb={setFilterSmallweb}
-				feedSources={feedSources}
-				setFeedSources={setFeedSources}
-				bodyFontSize={bodyFontSize}
-				setBodyFontSize={setBodyFontSize}
-				defaultBodyFontSize={defaultBodyFontSize}
-				bodyFont={bodyFont}
-				setBodyFont={setBodyFont}
-				articleFont={articleFont}
-				setArticleFont={setArticleFont}
-			/>
-
-			{waitingWorker &&
-				<div className='update-banner'>
-					Client version mismatch, please refresh:{' '}
-					<button onClick={() => {
-						waitingWorker.postMessage({ type: 'SKIP_WAITING' });
-						const reload = () => window.location.reload();
-						navigator.serviceWorker.addEventListener('controllerchange', reload, { once: true });
-
-						// Fallback for when the controller has already changed (ie. in another tab)
-						navigator.serviceWorker.getRegistration().then(reg => {
-							if (!reg || !reg.waiting) {
-								reload();
-							}
-						});
-					}}>
-						Refresh
-					</button>
-				</div>
-			}
 			<Router>
 				<div className='container menu'>
 					<p>
 						<Link to='/'>QotNews</Link>
 
-						<button className="settings-button" onClick={() => setSettingsOpen(true)}>Settings</button>
+						<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>
+					{fullScreenAvailable &&
+						<Route path='/(|search)' render={() => !isFullScreen ?
+							<button className='fullscreen' onClick={() => goFullScreen()}>Enter 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={updateCache} filterSmallweb={filterSmallweb} feedSources={feedSources} />} />
+				<Route path='/' exact render={(props) => <Feed {...props} updateCache={updateCache} />} />
 				<Switch>
 					<Route path='/search' component={Results} />
 					<Route path='/:id' exact render={(props) => <Article {...props} cache={cache.current} />} />

webclient/src/Article.js

@@ -1,20 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import localForage from 'localforage';
-import { sourceLink, similarLink, infoLine, ToggleDot } from './utils.js';
+import { sourceLink, infoLine, ToggleDot } from './utils.js';
-import Latex from 'react-latex-next';
-import 'katex/dist/katex.min.css';
-
-const VOID_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
-const DANGEROUS_TAGS = ['svg', 'math'];
-
-const latexDelimiters = [
-    { left: '$$', right: '$$', display: true },
-    { left: '\\[', right: '\\]', display: true },
-    { left: '$', right: '$', display: false },
-    { left: '\\(', right: '\\)', display: false }
-];
 
 function Article({ cache }) {
 	const { id } = useParams();
@@ -24,7 +12,6 @@ function Article({ cache }) {
 	const [story, setStory] = useState(cache[id] || false);
 	const [error, setError] = useState('');
 	const [pConv, setPConv] = useState([]);
-	const [copyButtonText, setCopyButtonText] = useState('\ue92c');
 
 	useEffect(() => {
 		localForage.getItem(id)
@@ -55,144 +42,18 @@ function Article({ cache }) {
 			);
 	}, [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) => {
+	const nodes = useMemo(() => {
-		if (v.localName === 'pre') {
+		if (story && story.text) {
-			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>
-				);
-			}
-
-			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>;
-				}
-
-				// Only wrap top-level text nodes in <p>
-				if (keyPrefix === '' && v.data.trim() !== '') {
-					return <p key={key}>{v.data}</p>;
-				}
-				return v.data;
-			}
-
-			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;
+			div.innerHTML = story.text;
 			return div.childNodes;
 		}
 		return null;
-	};
+	}, [story]);
-
-	const storyNodes = nodes(story);
 
 	return (
 		<div className='article-container'>
@@ -210,17 +71,33 @@ function Article({ cache }) {
 						<meta name="robots" content="noindex" />
 					</Helmet>
 
-					<h1>{story.title} <button className='copy-button' onClick={copyLink}>{copyButtonText}</button></h1>
+					<h1>{story.title}</h1>
 
 					<div className='info'>
-						Source: {sourceLink(story)} | {similarLink(story)}
+						Source: {sourceLink(story)}
 					</div>
 
 					{infoLine(story)}
 
-					{storyNodes ?
+					{nodes ?
 						<div className='story-text'>
-							{renderNodes(storyNodes)}
+							{Object.entries(nodes).map(([k, v]) =>
+								pConv.includes(k) ?
+									<React.Fragment key={k}>
+										{v.innerHTML.split('\n\n').map((x, i) =>
+											<p key={i} dangerouslySetInnerHTML={{ __html: x }} />
+										)}
+									</React.Fragment>
+								:
+									(v.nodeName === '#text' ?
+										<p key={k}>{v.data}</p>
+									:
+										<React.Fragment key={k}>
+											<v.localName dangerouslySetInnerHTML={v.innerHTML ? { __html: v.innerHTML } : null} />
+											{v.localName === 'pre' && <button onClick={() => pConvert(k)}>Convert Code to Paragraph</button>}
+										</React.Fragment>
+									)
+							)}
 						</div>
 					:
 						<p>Problem getting article :(</p>

webclient/src/Comments.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { HashLink } from 'react-router-hash-link';
 import { Helmet } from 'react-helmet';
@@ -58,17 +58,17 @@ function Comments({ cache }) {
 			);
 	}, [id]);
 
-	const collapseComment = (cid) => {
+	const collapseComment = useCallback((cid) => {
 		setCollapsed(prev => [...prev, cid]);
 		setExpanded(prev => prev.filter(x => x !== cid));
-	};
+	}, []);
 
-	const expandComment = (cid) => {
+	const expandComment = useCallback((cid) => {
 		setCollapsed(prev => prev.filter(x => x !== cid));
 		setExpanded(prev => [...prev, cid]);
-	};
+	}, []);
 
-	const displayComment = (story, c, level) => {
+	const displayComment = useCallback((story, c, level) => {
 		const cid = c.author+c.date;
 
 		const isCollapsed = collapsed.includes(cid);
@@ -85,21 +85,21 @@ function Comments({ cache }) {
 						{' '} | <HashLink to={'#'+cid} id={cid}>{moment.unix(c.date).fromNow()}</HashLink>
 
 						{hidden || hasChildren &&
-							<button className='collapser pointer' onClick={() => collapseComment(cid)}>–</button>
+							<span className='collapser pointer' onClick={() => collapseComment(cid)}>–</span>
 						}
 					</p>
 				</div>
 
-				<div className={isCollapsed ? 'text hidden' : 'text'}  dangerouslySetInnerHTML={{ __html: c.text || '<p>[Empty / deleted comment]</p>'}} />
+				<div className={isCollapsed ? 'text hidden' : 'text'}  dangerouslySetInnerHTML={{ __html: c.text }} />
 
 				{hidden && hasChildren ?
-					<button className='comment lined info pointer' onClick={() => expandComment(cid)}>[show {countComments(c)-1} more]</button>
+					<div className='comment lined info pointer' onClick={() => expandComment(cid)}>[show {countComments(c)-1} more]</div>
 				:
 					c.comments.map(i => displayComment(story, i, level + 1))
 				}
 			</div>
 		);
-	};
+	}, [collapsed, expanded, collapseComment, expandComment]);
 
 	return (
 		<div className='container'>

webclient/src/Feed.js

@@ -1,49 +1,15 @@
-import React, { useState, useEffect, useRef } 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';
 
-function Feed({ updateCache, filterSmallweb, feedSources }) {
+function Feed({ updateCache }) {
 	const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false);
 	const [error, setError] = useState('');
-	const [loadingStatus, setLoadingStatus] = useState(null);
-	const isInitialMount = useRef(true);
 
 	useEffect(() => {
-		if (isInitialMount.current) {
+		fetch('/api')
-			isInitialMount.current = false;
-		} else {
-			setStories(false);
-		}
-	}, [filterSmallweb, feedSources]);
-
-	useEffect(() => {
-		const controller = new AbortController();
-
-		if ('serviceWorker' in navigator) {
-			navigator.serviceWorker.getRegistration().then(reg => {
-				if (reg) {
-					console.log('Checking for client update...');
-					reg.update();
-				}
-			});
-		}
-
-		const params = new URLSearchParams();
-		if (filterSmallweb) {
-			params.append('smallweb', 'true');
-		}
-
-		const allSources = Object.keys(feedSources);
-		const enabledSources = allSources.filter(key => feedSources[key]);
-
-		if (enabledSources.length > 0 && enabledSources.length < allSources.length) {
-			enabledSources.forEach(source => params.append('source', source));
-		}
-		const apiUrl = `/api?${params.toString()}`;
-
-		fetch(apiUrl, { signal: controller.signal })
 			.then(res => {
 				if (!res.ok) {
 					throw new Error(`Server responded with ${res.status} ${res.statusText}`);
@@ -54,24 +20,24 @@ function Feed({ updateCache, filterSmallweb, feedSources }) {
 				async (result) => {
 					const newApiStories = result.stories;
 
-					const updated = !stories || stories.map(s => s.id).join() !== newApiStories.map(s => s.id).join();
+					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 });
+					if (!stories || !stories.length) {
+						setStories(newApiStories);
+						localStorage.setItem('stories', JSON.stringify(newApiStories));
+					}
 
 					let currentStories = Array.isArray(stories) ? [...stories] : [];
 					let preloadedCount = 0;
 
-					for (const [index, newStory] of newApiStories.entries()) {
+					for (const newStory of [...newApiStories].reverse()) {
-						if (controller.signal.aborted) {
-							break;
-						}
 						try {
-							const storyFetchController = new AbortController();
+							const controller = new AbortController();
-							const timeoutId = setTimeout(() => storyFetchController.abort(), 10000); // 10-second timeout
+							const timeoutId = setTimeout(() => controller.abort(), 10000); // 10-second timeout
-							const storyRes = await fetch('/api/' + newStory.id, { signal: storyFetchController.signal });
+							const storyRes = await fetch('/api/' + newStory.id, { signal: controller.signal });
 							clearTimeout(timeoutId);
 
 							if (!storyRes.ok) {
@@ -84,13 +50,12 @@ function Feed({ updateCache, filterSmallweb, feedSources }) {
 							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);
+							currentStories.unshift(newStory);
 
 							localStorage.setItem('stories', JSON.stringify(currentStories));
 							setStories(currentStories);
@@ -117,20 +82,13 @@ function Feed({ updateCache, filterSmallweb, feedSources }) {
 
 					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);
 				}
 			);
-
+	}, [updateCache]);
-		return () => controller.abort();
-	}, [updateCache, filterSmallweb, feedSources]);
 
 	return (
 		<div className='container'>
@@ -138,7 +96,6 @@ function Feed({ updateCache, filterSmallweb, feedSources }) {
 				<title>QotNews</title>
 				<meta name="robots" content="index" />
 			</Helmet>
-
 			{error &&
 				<details style={{marginBottom: '1rem'}}>
 					<summary>Connection error? Click to expand.</summary>
@@ -146,7 +103,6 @@ function Feed({ updateCache, filterSmallweb, feedSources }) {
 					{stories && <p>Loaded feed from cache.</p>}
 				</details>
 			}
-
 			{stories ?
 				<div>
 					{stories.map(x =>
@@ -168,8 +124,6 @@ function Feed({ updateCache, filterSmallweb, feedSources }) {
 			:
 				<p>Loading...</p>
 			}
-
-			{loadingStatus && <p>Preloading stories {loadingStatus.current} / {loadingStatus.total}...</p>}
 		</div>
 	);
 }

webclient/src/ScrollToTop.js

@@ -1,14 +1,10 @@
-import React from 'react';
+import { useEffect } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
-class ScrollToTop extends React.Component {
+function ScrollToTop() {
-	componentDidUpdate(prevProps) {
+	const { pathname } = useLocation();
-		//console.log(this.props.location.pathname, prevProps.location.pathname);
-
-		if (this.props.location.pathname === prevProps.location.pathname) {
-			return;
-		}
 
+	useEffect(() => {
 		if (localStorage.getItem('scrollLock') === 'True') {
 			localStorage.setItem('scrollLock', 'False');
 			return;
@@ -16,11 +12,9 @@ class ScrollToTop extends React.Component {
 
 		window.scrollTo(0, 0);
 		document.body.scrollTop = 0;
-	}
+	}, [pathname]);
 
-	render() {
+	return null;
-		return null;
-	}
 }
 
-export default withRouter(ScrollToTop);
+export default ScrollToTop;

webclient/src/Settings.js

@@ -1,191 +0,0 @@
-import React from 'react';
-
-function Settings({
-	settingsOpen,
-	setSettingsOpen,
-	theme,
-	setTheme,
-	isFullScreen,
-	filterSmallweb,
-	setFilterSmallweb,
-	feedSources,
-	setFeedSources,
-	bodyFontSize,
-	setBodyFontSize,
-	defaultBodyFontSize,
-	bodyFont,
-	setBodyFont,
-	articleFont,
-	setArticleFont,
-}) {
-	const light = () => {
-		setTheme('');
-		localStorage.setItem('theme', '');
-	};
-
-	const dark = () => {
-		setTheme('dark');
-		localStorage.setItem('theme', 'dark');
-	};
-
-	const black = () => {
-		setTheme('black');
-		localStorage.setItem('theme', 'black');
-	};
-
-	const red = () => {
-		setTheme('red');
-		localStorage.setItem('theme', 'red');
-	};
-
-	const handleFilterChange = e => {
-		const isChecked = e.target.checked;
-		setFilterSmallweb(isChecked);
-		localStorage.setItem('filterSmallweb', isChecked);
-	};
-
-	const handleFeedSourceChange = (source) => {
-		setFeedSources(prevSources => {
-			const newSources = { ...prevSources, [source]: !prevSources[source] };
-			localStorage.setItem('feedSources', JSON.stringify(newSources));
-			return newSources;
-		});
-	};
-
-	const changeBodyFont = (font) => {
-		setBodyFont(font);
-		localStorage.setItem('bodyFont', font);
-	};
-
-	const changeArticleFont = (font) => {
-		setArticleFont(font);
-		localStorage.setItem('articleFont', font);
-	};
-
-	const changeBodyFontSize = (amount) => {
-		const newSize = bodyFontSize + amount;
-		setBodyFontSize(parseFloat(newSize.toFixed(2)));
-		localStorage.setItem('bodyFontSize', newSize.toFixed(2));
-	};
-
-	const resetBodyFontSize = () => {
-		setBodyFontSize(defaultBodyFontSize);
-		localStorage.removeItem('bodyFontSize');
-	};
-
-	const bodyFontSettingsChanged = bodyFontSize !== defaultBodyFontSize;
-
-	const goFullScreen = () => {
-		if ('wakeLock' in navigator) {
-			navigator.wakeLock.request('screen');
-		}
-		document.body.requestFullscreen({ navigationUI: 'hide' });
-	};
-
-	const exitFullScreen = () => {
-		document.exitFullscreen();
-	};
-
-	const fullScreenAvailable = document.fullscreenEnabled ||
-		document.mozFullscreenEnabled ||
-		document.webkitFullscreenEnabled ||
-		document.msFullscreenEnabled;
-
-	if (!settingsOpen) {
-		return null;
-	}
-
-	return (
-		<>
-			<div className="modal-overlay" onClick={() => setSettingsOpen(false)}></div>
-
-			<div className="modal-content" onClick={e => e.stopPropagation()}>
-				<button className="close-modal-button" onClick={() => setSettingsOpen(false)}>&times;</button>
-				<h3>Settings</h3>
-
-				<div className="setting-group">
-					<h4>Theme</h4>
-					<button className={theme === '' ? 'active' : ''} onClick={() => { light(); setSettingsOpen(false); }}>Light</button>
-					<button className={theme === 'dark' ? 'active' : ''} onClick={() => { dark(); setSettingsOpen(false); }}>Dark</button>
-					<button className={theme === 'black' ? 'active' : ''} onClick={() => { black(); setSettingsOpen(false); }}>Black</button>
-					<button className={theme === 'red' ? 'active' : ''} onClick={() => { red(); setSettingsOpen(false); }}>Red</button>
-					{fullScreenAvailable &&
-						<div style={{ marginTop: '0.5rem' }}>
-							{!isFullScreen ?
-								<button onClick={() => { goFullScreen(); setSettingsOpen(false); }}>Enter Fullscreen</button>
-								:
-								<button onClick={() => { exitFullScreen(); setSettingsOpen(false); }}>Exit Fullscreen</button>
-							}
-						</div>
-					}
-				</div>
-
-				<div className="setting-group">
-					<h4>Feed</h4>
-					<div className="font-option gap">
-						<input className="checkbox" type="checkbox" id="filter-smallweb" checked={filterSmallweb} onChange={handleFilterChange} />
-						<label htmlFor="filter-smallweb">Small websites only</label>
-					</div>
-					<div className="font-option">
-						<input className="checkbox" type="checkbox" id="filter-hackernews" name="feed-source" checked={feedSources.hackernews} onChange={() => handleFeedSourceChange('hackernews')} />
-						<label htmlFor="filter-hackernews">Hacker News</label>
-					</div>
-					<div className="font-option">
-						<input className="checkbox" type="checkbox" id="filter-reddit" name="feed-source" checked={feedSources.reddit} onChange={() => handleFeedSourceChange('reddit')} />
-						<label htmlFor="filter-reddit">Reddit</label>
-					</div>
-					<div className="font-option">
-						<input className="checkbox" type="checkbox" id="filter-lobsters" name="feed-source" checked={feedSources.lobsters} onChange={() => handleFeedSourceChange('lobsters')} />
-						<label htmlFor="filter-lobsters">Lobsters</label>
-					</div>
-					<div className="font-option">
-						<input className="checkbox" type="checkbox" id="filter-tildes" name="feed-source" checked={feedSources.tildes} onChange={() => handleFeedSourceChange('tildes')} />
-						<label htmlFor="filter-tildes">Tildes</label>
-					</div>
-				</div>
-
-				<div className="setting-group">
-					<h4>Font Size</h4>
-					<button onClick={() => changeBodyFontSize(-0.05)}>-</button>
-					<span className="font-size-display">{bodyFontSize.toFixed(2)}</span>
-					<button onClick={() => changeBodyFontSize(0.05)}>+</button>
-					<button onClick={resetBodyFontSize} disabled={!bodyFontSettingsChanged}>Reset</button>
-				</div>
-
-				<div className="setting-group">
-					<h4>Body Font</h4>
-					<div className="font-option">
-						<input className="checkbox" type="radio" id="body-sans-serif" name="body-font" value="Sans Serif" checked={bodyFont === 'Sans Serif'} onChange={() => changeBodyFont('Sans Serif')} />
-						<label htmlFor="body-sans-serif">Sans Serif *</label>
-					</div>
-					<div className="font-option">
-						<input className="checkbox" type="radio" id="body-serif" name="body-font" value="Serif" checked={bodyFont === 'Serif'} onChange={() => changeBodyFont('Serif')} />
-						<label htmlFor="body-serif">Serif</label>
-					</div>
-					<div className="font-option">
-						<input className="checkbox" type="radio" id="body-apparatus" name="body-font" value="Apparatus SIL" checked={bodyFont === 'Apparatus SIL'} onChange={() => changeBodyFont('Apparatus SIL')} />
-						<label htmlFor="body-apparatus">Apparatus SIL</label>
-					</div>
-				</div>
-
-				<div className="setting-group">
-					<h4>Article Font</h4>
-					<div className="font-option">
-						<input className="checkbox" type="radio" id="article-sans-serif" name="article-font" value="Sans Serif" checked={articleFont === 'Sans Serif'} onChange={() => changeArticleFont('Sans Serif')} />
-						<label htmlFor="article-sans-serif">Sans Serif</label>
-					</div>
-					<div className="font-option">
-						<input className="checkbox" type="radio" id="article-serif" name="article-font" value="Serif" checked={articleFont === 'Serif'} onChange={() => changeArticleFont('Serif')} />
-						<label htmlFor="article-serif">Serif</label>
-					</div>
-					<div className="font-option">
-						<input className="checkbox" type="radio" id="article-apparatus" name="article-font" value="Apparatus SIL" checked={articleFont === 'Apparatus SIL'} onChange={() => changeArticleFont('Apparatus SIL')} />
-						<label htmlFor="article-apparatus">Apparatus SIL *</label>
-					</div>
-				</div>
-			</div>
-		</>
-	);
-}
-
-export default Settings;

webclient/src/Style-black.css

@@ -11,9 +11,8 @@
 	border: 1px solid #828282;
 }
 
-.black .menu button,
+.black button {
-.black .story-text button {
+	background-color: #444444;
-	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
@@ -67,37 +66,3 @@
 .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: #222222;
-	border-color: #bbb;
-	color: #ddd;
-}
-
-.black .modal-content {
-	background: #222;
-	border-color: #828282;
-	color: #ddd;
-}
-
-.black .modal-content button {
-	background-color: #222222;
-	border-color: #bbb;
-}
-
-.black .modal-content button.active {
-	background-color: #555;
-}

webclient/src/Style-dark.css

@@ -11,9 +11,8 @@
 	border: 1px solid #828282;
 }
 
-.dark .menu button,
+.dark button {
-.dark .story-text button {
+	background-color: #444444;
-	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
@@ -63,37 +62,3 @@
 .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: #222222;
-	border-color: #bbb;
-	color: #ddd;
-}
-
-.dark .modal-content {
-	background: #222;
-	border-color: #828282;
-	color: #ddd;
-}
-
-.dark .modal-content button {
-	background-color: #222222;
-	border-color: #bbb;
-}
-
-.dark .modal-content button.active {
-	background-color: #555;
-}

webclient/src/Style-light.css

@@ -1,7 +1,6 @@
 body {
 	text-rendering: optimizeLegibility;
-	font-size: 1rem;
+	font: 1rem/1.3 sans-serif;
-	line-height: 1.3;
 	color: #000000;
 	word-break: break-word;
 	font-kerning: normal;
@@ -44,36 +43,16 @@ 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;
@@ -86,7 +65,6 @@ pre {
 
 .slogan {
 	color: #828282;
-	margin-bottom: 0.5rem;
 }
 
 .theme {
@@ -143,13 +121,6 @@ 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;
 }
@@ -200,20 +171,12 @@ span.source {
 }
 
 .story-text {
-	font-size: 1.2rem;
+	font: 1.2rem/1.5 'Apparatus SIL', sans-serif;
-	line-height: 1.5;
 	margin-top: 1em;
 }
 
 .comments {
 	margin-left: -1.25rem;
-	margin-top: 0;
-	margin-bottom: 0;
-	padding: 0;
-}
-
-.comments dl, .comments dd {
-	margin: 0;
 }
 
 .comment {
@@ -226,11 +189,6 @@ span.source {
 
 .comment .text {
 	margin-top: -0.5rem;
-	margin-bottom: 1rem;
-}
-
-.comment .text > * {
-	margin-bottom: 0;
 }
 
 .comment .text.hidden > p {
@@ -250,31 +208,6 @@ 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;
 }
@@ -327,178 +260,3 @@ button.comment {
 .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;
-}
-
-.settings-button {
-	float: right;
-	background: none;
-	border: none;
-	padding: 0;
-	cursor: pointer;
-	color: inherit;
-	font: inherit;
-}
-
-.modal-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0,0,0,0.5);
-	z-index: 100;
-}
-
-.modal-content {
-	position: absolute;
-	top: 1rem;
-	right: 1rem;
-	background: #eee;
-	color: #000;
-	padding: 1rem;
-	border-radius: 4px;
-	z-index: 101;
-	min-width: 250px;
-	border: 1px solid #828282;
-}
-
-.modal-content h3, .modal-content h4 {
-	margin-top: 0;
-	margin-bottom: 0.5rem;
-}
-
-.modal-content .setting-group {
-	margin-bottom: 1rem;
-}
-
-.modal-content button {
-	margin-right: 0.5rem;
-	padding: 0.25rem 0.75rem;
-	border: 1px solid #828282;
-	border-radius: 4px;
-	background-color: transparent;
-	cursor: pointer;
-	font: inherit;
-	color: inherit;
-}
-
-.modal-content button:last-child {
-	margin-right: 0;
-}
-
-.modal-content button.active {
-	background-color: #ccc;
-}
-
-.modal-content button:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
-
-.modal-content .font-size-display {
-	display: inline-block;
-	width: 50px;
-	text-align: center;
-	margin: 0 0.25rem;
-}
-
-.modal-content .font-option {
-	margin-bottom: 0.25rem;
-}
-
-.modal-content .gap {
-	margin-bottom: 0.75rem;
-}
-
-.close-modal-button {
-	position: absolute;
-	top: 0.5rem;
-	right: 0.75rem;
-	background: transparent;
-	border: none;
-	font-size: 1.5rem;
-	line-height: 1;
-	padding: 0;
-	cursor: pointer;
-	color: inherit;
-}

webclient/src/Style-red.css

@@ -20,9 +20,8 @@
 	background-color: #690000;
 }
 
-.red .menu button,
+.red button {
-.red .story-text button {
+	background-color: #440000;
-	background-color: #220000;
 	border-color: #b00;
 	color: #b00;
 }
@@ -81,41 +80,3 @@
 .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: #220000;
-	border-color: #b00;
-	color: #d00;
-}
-
-.red .modal-content {
-	background: #100;
-	border-color: #690000;
-	color: #b00;
-}
-
-.red .modal-content button {
-	background-color: #220000;
-	border-color: #b00;
-}
-
-.red .modal-content button.active {
-	background-color: #550000;
-}

webclient/src/fonts/Fonts.css

@@ -26,8 +26,3 @@
     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,15 +3,9 @@ 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, { useState } from 'react';
+import React from 'react';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
 
@@ -9,13 +9,6 @@ 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
@@ -39,8 +32,6 @@ export const ToggleDot = ({ id, article }) => (
 );
 
 export const BackwardDot = () => {
-	const [showTooltip, setShowTooltip] = useState(false);
-
 	const goBackward = () => {
 		localStorage.setItem('scrollLock', 'True');
 		window.history.back();
@@ -51,25 +42,15 @@ export const BackwardDot = () => {
 	if (!document.fullscreenElement) return null;
 
 	return (
-		<div
+		<div className='dot backwardDot' onClick={goBackward}>
-			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 const ForwardDot = () => {
-	const [showTooltip, setShowTooltip] = useState(false);
-
 	const goForward = () => {
 		localStorage.setItem('scrollLock', 'True');
 		window.history.forward();
@@ -79,18 +60,10 @@ export const ForwardDot = () => {
 	if (!isMobile) return null;
 
 	return (
-		<div
+		<div className='dot forwardDot' onClick={goForward}>
-			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>
 	);
 };

webclient/yarn.lock

@@ -3169,11 +3169,6 @@ commander@^2.11.0, commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^8.3.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
-  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
-
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
@@ -6861,13 +6856,6 @@ jsx-ast-utils@^2.1.0, jsx-ast-utils@^2.2.1:
     array-includes "^3.1.1"
     object.assign "^4.1.0"
 
-katex@^0.16.0, katex@^0.16.25:
-  version "0.16.25"
-  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.25.tgz#61699984277e3bdb3e89e0e446b83cd0a57d87db"
-  integrity sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==
-  dependencies:
-    commander "^8.3.0"
-
 killable@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -9131,13 +9119,6 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-latex-next@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-latex-next/-/react-latex-next-3.0.0.tgz#3e347a13b1e701439b5fa52f75201bc86166854e"
-  integrity sha512-x70f1b1G7TronVigsRgKHKYYVUNfZk/3bciFyYX1lYLQH2y3/TXku3+5Vap8MDbJhtopePSYBsYWS6jhzIdz+g==
-  dependencies:
-    katex "^0.16.0"
-
 react-router-dom@^5.0.1:
   version "5.3.4"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.4.tgz#2ed62ffd88cae6db134445f4a0c0ae8b91d2e5e6"