Add "similar" link for searching host name

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

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

@@ -14,6 +14,9 @@ import json
 import threading
 import traceback
 import time
+import datetime
+import humanize
+import urllib.request
 from urllib.parse import urlparse, parse_qs
 
 import settings
@@ -26,6 +29,25 @@ 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()
 
@@ -39,15 +61,54 @@ def new_id():
         nid = gen_rand_id()
     return nid
 
+
+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)
-    stories = database.get_stories(limit, skip)
+
+    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'
@@ -156,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)
@@ -171,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']
@@ -182,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',
@@ -190,6 +258,8 @@ def static_story(sid):
         url=url,
         description=description,
         robots='noindex',
+        story=story,
+        show_comments=request.path.endswith('/c'),
     )
 
 http_server = WSGIServer(('', 33842), flask_app)

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!
-				<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>
+		<div id="root">
+			<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 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/Article.js

@@ -1,8 +1,20 @@
-import React, { useState, useEffect, useMemo } 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';
+
+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();
@@ -58,17 +70,129 @@ function Article({ cache }) {
 	};
 
 	const isCodeBlock = (v) => {
-		return v.localName === 'pre' || v.localName === 'code' || (v.children?.length === 1 && v.children[0].localName === 'code');
+		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 nodes = useMemo(() => {
-		if (story && story.text) {
+	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 = story.text;
+			div.innerHTML = s.text;
 			return div.childNodes;
 		}
 		return null;
-	}, [story]);
+	};
+
+	const storyNodes = nodes(story);
 
 	return (
 		<div className='article-container'>
@@ -89,30 +213,14 @@ function Article({ cache }) {
 					<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) ?
-									<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} />
-											{isCodeBlock(v) && <button onClick={() => pConvert(k)}>Convert Code to Paragraph</button>}
-										</React.Fragment>
-									)
-							)}
+							{renderNodes(storyNodes)}
 						</div>
 					:
 						<p>Problem getting article :(</p>

webclient/src/Feed.js

@@ -8,9 +8,19 @@ 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');
+
+	const handleFilterChange = e => {
+		const isChecked = e.target.checked;
+		setStories(false);
+		setFilterSmallweb(isChecked);
+		localStorage.setItem('filterSmallweb', isChecked);
+	};
 
 	useEffect(() => {
-		fetch('/api')
+		const controller = new AbortController();
+
+		fetch(filterSmallweb ? '/api?smallweb=true' : '/api', { signal: controller.signal })
 			.then(res => {
 				if (!res.ok) {
 					throw new Error(`Server responded with ${res.status} ${res.statusText}`);
@@ -26,21 +36,19 @@ function Feed({ updateCache }) {
 
 					if (!updated) return;
 
-					if (!stories || !stories.length) {
-						setStories(newApiStories);
-						localStorage.setItem('stories', JSON.stringify(newApiStories));
-					}
-
 					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 controller = new AbortController();
-							const timeoutId = setTimeout(() => controller.abort(), 10000); // 10-second timeout
-							const storyRes = await fetch('/api/' + newStory.id, { signal: controller.signal });
+							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) {
@@ -89,11 +97,17 @@ function Feed({ updateCache }) {
 					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]);
 
 	return (
 		<div className='container'>
@@ -101,7 +115,12 @@ function Feed({ updateCache }) {
 				<title>QotNews</title>
 				<meta name="robots" content="index" />
 			</Helmet>
-			{loadingStatus && <p>Preloading stories {loadingStatus.current} / {loadingStatus.total}...</p>}
+
+			<div style={{marginBottom: '1rem'}}>
+				<input type="checkbox" id="filter-smallweb" className="checkbox" checked={filterSmallweb} onChange={handleFilterChange} />
+				<label htmlFor="filter-smallweb">Only Smallweb</label>
+			</div>
+
 			{error &&
 				<details style={{marginBottom: '1rem'}}>
 					<summary>Connection error? Click to expand.</summary>
@@ -109,6 +128,7 @@ function Feed({ updateCache }) {
 					{stories && <p>Loaded feed from cache.</p>}
 				</details>
 			}
+
 			{stories ?
 				<div>
 					{stories.map(x =>
@@ -130,6 +150,8 @@ function Feed({ updateCache }) {
 			:
 				<p>Loading...</p>
 			}
+
+			{loadingStatus && <p>Preloading stories {loadingStatus.current} / {loadingStatus.total}...</p>}
 		</div>
 	);
 }

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,11 @@
 .black .comment.lined {
 	border-left: 1px solid #444444;
 }
+
+.black .checkbox:checked + label::after {
+	border-color: #eee;
+}
+
+.black .copy-button {
+	color: #828282;
+}

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,11 @@
 .dark .comment.lined {
 	border-left: 1px solid #444444;
 }
+
+.dark .checkbox:checked + label::after {
+	border-color: #eee;
+}
+
+.dark .copy-button {
+	color: #828282;
+}

webclient/src/Style-light.css

@@ -48,9 +48,12 @@ input {
 	padding: 0.25rem;
 }
 
-
 pre {
 	overflow: auto;
+}
+
+.comments pre {
+	overflow: auto;
 	white-space: pre-wrap;
 	overflow-wrap: break-word;
 }
@@ -186,6 +189,13 @@ span.source {
 
 .comments {
 	margin-left: -1.25rem;
+	margin-top: 0;
+	margin-bottom: 0;
+	padding: 0;
+}
+
+.comments dl, .comments dd {
+	margin: 0;
 }
 
 .comment {
@@ -302,8 +312,81 @@ button.comment {
 
 .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,15 @@
 .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;
+}

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

webclient/yarn.lock

@@ -3169,6 +3169,11 @@ 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"
@@ -6856,6 +6861,13 @@ 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"
@@ -9119,6 +9131,13 @@ 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"