Add "similar" link for searching host name

Don't move backward dot tooltip
Fix: Prevent false positive single dollar math detection in text nodes
2025-12-13 22:37:47 +00:00 · 2025-12-08 23:54:41 +00:00 · 2025-12-08 23:52:36 +00:00 · 2025-12-08 23:42:39 +00:00 · 2025-12-08 23:42:36 +00:00 · 2025-12-08 23:37:10 +00:00
9 changed files with 246 additions and 32 deletions
--- a/apiserver/server.py
+++ b/apiserver/server.py
@@ -16,6 +16,7 @@ import traceback
 import time
 import datetime
 import humanize
+import urllib.request
 from urllib.parse import urlparse, parse_qs

 import settings
@@ -28,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()

@@ -56,7 +76,39 @@ cors = CORS(flask_app)
 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'
--- a/webclient/public/index.html
+++ b/webclient/public/index.html
@@ -41,9 +41,6 @@
 	</head>

 	<body>
-		<div class="nojs">
-			<noscript></noscript>
-		</div>
 		<div id="root">
 			<div class="container menu">
 				<p>
@@ -81,21 +78,26 @@
 							<div class="story-text">{{ story.text | safe }}</div>
 						{% elif show_comments %}
 							{% macro render_comment(comment, level) %}
-								<div class="comment{% if level > 0 %} lined{% endif %}">
+								<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>
-									{% for reply in comment.comments %}
-										{{ render_comment(reply, level + 1) }}
-									{% endfor %}
-								</div>
+									{% if comment.comments %}
+										<dl>
+											{% for reply in comment.comments %}
+												{{ render_comment(reply, level + 1) }}
+											{% endfor %}
+										</dl>
+									{% endif %}
+								</dd>
 							{% endmacro %}
-							<div class="comments">
+							<dl class="comments">
 								{% for comment in story.comments %}{{ render_comment(comment, 0) }}{% endfor %}
-							</div>
+							</dl>
 						{% endif %}
 					</div>
 					<div class='dot toggleDot'>
--- a/webclient/src/Article.js
+++ b/webclient/src/Article.js
@@ -2,7 +2,7 @@ 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';

@@ -106,7 +106,7 @@ function Article({ cache }) {

 			if (v.nodeName === '#text') {
 				const text = v.data;
-				if (text.includes('\\[') || text.includes('\\(') || text.includes('$$') || text.includes('$')) {
+				if (text.includes('\\[') || text.includes('\\(') || text.includes('$$') || /\$(?:[^$]*[^\s$])\$/.test(text)) {
 					return <Latex key={key} delimiters={latexDelimiters}>{text}</Latex>;
 				}

@@ -139,7 +139,7 @@ function Article({ cache }) {
 			const isMath = (textContent.startsWith('\\(') && textContent.endsWith('\\)')) ||
 				(textContent.startsWith('\\[') && textContent.endsWith('\\]')) ||
 				(textContent.startsWith('$$') && textContent.endsWith('$$')) ||
-				(textContent.startsWith('$') && textContent.endsWith('$') && textContent.indexOf('$') !== textContent.lastIndexOf('$'));
+				(textContent.startsWith('$') && textContent.endsWith('$') && textContent.indexOf('$') !== textContent.lastIndexOf('$') && !/\s/.test(textContent.charAt(textContent.length - 2)));

 			const props = { key: key };
 			if (v.hasAttributes()) {
@@ -213,7 +213,7 @@ 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)}
--- a/webclient/src/Feed.js
+++ b/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>
 	);
 }
--- a/webclient/src/Style-black.css
+++ b/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;
+}
--- a/webclient/src/Style-dark.css
+++ b/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;
+}
--- a/webclient/src/Style-light.css
+++ b/webclient/src/Style-light.css
@@ -189,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 {
@@ -305,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;
+}
--- a/webclient/src/Style-red.css
+++ b/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;
+}
--- a/webclient/src/utils.js
+++ b/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>
 	);
 };
Author	SHA1	Message	Date
Tanner Collin	82478c469d	Add "similar" link for searching host name	2025-12-13 22:37:47 +00:00
Tanner Collin	77b429a742	Don't move backward dot tooltip	2025-12-08 23:54:41 +00:00
Tanner Collin	0c1c56b54a	Fix: Prevent false positive single dollar math detection in text nodes Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-08 23:52:36 +00:00
Tanner Collin	73a139ef9a	fix: Fix browser navigation tooltip alignment Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-08 23:42:39 +00:00
Tanner Collin	5796bc56b5	fix: Adjust default tooltip horizontal position	2025-12-08 23:42:36 +00:00
Tanner Collin	7c1910c919	fix: Improve nav dot tooltip visibility and positioning Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-08 23:37:10 +00:00
Tanner Collin	60a4df2efc	feat: Add tooltips to browser navigation dots Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-08 23:33:52 +00:00
Tanner Collin	a712ca12da	Bring single dollar sign math back, check for whitespace	2025-12-07 22:59:09 +00:00
Tanner Collin	8700bda104	Adjust checkbox styles	2025-12-07 22:53:12 +00:00
Tanner Collin	3160e02d41	Fix: Split border shorthand for dark mode color override Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-07 22:53:12 +00:00
Tanner Collin	cfa61c2066	fix: Improve dark mode checkbox checkmark visibility Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-07 22:53:12 +00:00
Tanner Collin	27faea1823	style: Refine checked checkbox border color in dark theme	2025-12-07 22:53:12 +00:00
Tanner Collin	df76e34c71	fix: Prevent price false positives in single dollar math detection Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-07 22:53:12 +00:00
Tanner Collin	5d014f50df	fix: Remove single dollar sign math rendering due to false positives Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-05 17:24:40 +00:00
Tanner Collin	bcfdff1067	Fix dt dd tags margin	2025-12-05 00:59:02 +00:00
Tanner Collin	a888e38ae8	fix: Adjust comment metadata indentation in comments Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-05 00:49:13 +00:00
Tanner Collin	2bd51bb1cb	fix: Refactor comments with DL/DD for text browser compatibility Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-05 00:45:00 +00:00
Tanner Collin	655346a7eb	chore: Remove unused nojs div	2025-12-05 00:44:58 +00:00
Tanner Collin	125c1c5225	Fix buttons in color themes	2025-12-05 00:35:06 +00:00
Tanner Collin	5dd2069af5	Clear stories first on checkbox change	2025-12-04 23:12:30 +00:00
Tanner Collin	d68fc73af5	Don't setStories when existing list is empty	2025-12-04 22:57:26 +00:00
Tanner Collin	ff1297e507	Style checkbox	2025-12-04 22:55:23 +00:00
Tanner Collin	1d019f880b	fix: Implement custom transparent checkbox for dark mode visibility Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-04 22:31:11 +00:00
Tanner Collin	23b56b26b1	style: Apply transparent background to checkboxes	2025-12-04 22:31:07 +00:00
Tanner Collin	b439199836	fix: Cancel pending story fetches on filter change to prevent UI jumps Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-04 22:24:28 +00:00
Tanner Collin	5736cde21a	feat: Fetch smallweb stories iteratively until limit met Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-04 22:18:22 +00:00
Tanner Collin	ed8ad1b6f6	feat: Add domain exclusion to smallweb list loading	2025-12-04 22:18:19 +00:00
Tanner Collin	75779722c1	feat: Add smallweb filter checkbox and server-side filtering Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2025-12-04 22:09:11 +00:00
Tanner Collin	13df4a7831	Put the loading status down below	2025-12-04 21:10:20 +00:00