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

Compare commits

base: tanner:13df4a78312d0af0a06200718618db1f571e6c36
Branches Tags
tanner:master
...
compare: tanner:master
Branches Tags
tanner:master

28 Commits
13df4a7831 ... master

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
9 changed files with 242 additions and 31 deletions
Expand all files Collapse all files

54
apiserver/server.py
View File

@@ -16,6 +16,7 @@ import traceback
import time import time
import datetime import datetime
import humanize import humanize
import urllib.request
from urllib.parse import urlparse, parse_qs from urllib.parse import urlparse, parse_qs
import settings import settings
@@ -28,6 +29,25 @@ from flask import abort, Flask, request, render_template, stream_with_context, R
from werkzeug.exceptions import NotFound from werkzeug.exceptions import NotFound
from flask_cors import CORS 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() database.init()
search.init() search.init()
@@ -56,7 +76,39 @@ cors = CORS(flask_app)
def api(): def api():
skip = request.args.get('skip', 0) skip = request.args.get('skip', 0)
limit = request.args.get('limit', settings.FEED_LENGTH) 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 # hacky nested json
res = Response('{"stories":[' + ','.join(stories) + ']}') res = Response('{"stories":[' + ','.join(stories) + ']}')
res.headers['content-type'] = 'application/json' res.headers['content-type'] = 'application/json'

22
webclient/public/index.html
View File

@@ -41,9 +41,6 @@
</head> </head>
<body> <body>
<div class="nojs">
<noscript></noscript>
</div>
<div id="root"> <div id="root">
<div class="container menu"> <div class="container menu">
<p> <p>
@@ -81,21 +78,26 @@
<div class="story-text">{{ story.text | safe }}</div> <div class="story-text">{{ story.text | safe }}</div>
{% elif show_comments %} {% elif show_comments %}
{% macro render_comment(comment, level) %} {% 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"> <div class="info">
<p> <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> {% 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> </p>
</div> </div>
<div class="text">{{ (comment.text | safe) if comment.text else '<p>[Empty / deleted comment]</p>' }}</div> <div class="text">{{ (comment.text | safe) if comment.text else '<p>[Empty / deleted comment]</p>' }}</div>
{% for reply in comment.comments %} {% if comment.comments %}
{{ render_comment(reply, level + 1) }} <dl>
{% endfor %} {% for reply in comment.comments %}
</div> {{ render_comment(reply, level + 1) }}
{% endfor %}
</dl>
{% endif %}
</dd>
{% endmacro %} {% endmacro %}
<div class="comments"> <dl class="comments">
{% for comment in story.comments %}{{ render_comment(comment, 0) }}{% endfor %} {% for comment in story.comments %}{{ render_comment(comment, 0) }}{% endfor %}
</div> </dl>
{% endif %} {% endif %}
</div> </div>
<div class='dot toggleDot'> <div class='dot toggleDot'>

8
webclient/src/Article.js
View File

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import localForage from 'localforage'; 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 Latex from 'react-latex-next';
import 'katex/dist/katex.min.css'; import 'katex/dist/katex.min.css';
@@ -106,7 +106,7 @@ function Article({ cache }) {
if (v.nodeName === '#text') { if (v.nodeName === '#text') {
const text = v.data; 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>; return <Latex key={key} delimiters={latexDelimiters}>{text}</Latex>;
} }
@@ -139,7 +139,7 @@ function Article({ cache }) {
const isMath = (textContent.startsWith('\\(') && textContent.endsWith('\\)')) || const isMath = (textContent.startsWith('\\(') && textContent.endsWith('\\)')) ||
(textContent.startsWith('\\[') && textContent.endsWith('\\]')) || (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 }; const props = { key: key };
if (v.hasAttributes()) { if (v.hasAttributes()) {
@@ -213,7 +213,7 @@ function Article({ cache }) {
<h1>{story.title} <button className='copy-button' onClick={copyLink}>{copyButtonText}</button></h1> <h1>{story.title} <button className='copy-button' onClick={copyLink}>{copyButtonText}</button></h1>
<div className='info'> <div className='info'>
Source: {sourceLink(story)} Source: {sourceLink(story)} | {similarLink(story)}
</div> </div>
{infoLine(story)} {infoLine(story)}

39
webclient/src/Feed.js
View File

@@ -8,9 +8,19 @@ function Feed({ updateCache }) {
const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false); const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false);
const [error, setError] = useState(''); const [error, setError] = useState('');
const [loadingStatus, setLoadingStatus] = useState(null); 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(() => { useEffect(() => {
fetch('/api') const controller = new AbortController();
fetch(filterSmallweb ? '/api?smallweb=true' : '/api', { signal: controller.signal })
.then(res => { .then(res => {
if (!res.ok) { if (!res.ok) {
throw new Error(`Server responded with ${res.status} ${res.statusText}`); throw new Error(`Server responded with ${res.status} ${res.statusText}`);
@@ -26,21 +36,19 @@ function Feed({ updateCache }) {
if (!updated) return; if (!updated) return;
if (!stories || !stories.length) {
setStories(newApiStories);
localStorage.setItem('stories', JSON.stringify(newApiStories));
}
setLoadingStatus({ current: 0, total: newApiStories.length }); setLoadingStatus({ current: 0, total: newApiStories.length });
let currentStories = Array.isArray(stories) ? [...stories] : []; let currentStories = Array.isArray(stories) ? [...stories] : [];
let preloadedCount = 0; let preloadedCount = 0;
for (const [index, newStory] of newApiStories.entries()) { for (const [index, newStory] of newApiStories.entries()) {
if (controller.signal.aborted) {
break;
}
try { try {
const controller = new AbortController(); const storyFetchController = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10-second timeout const timeoutId = setTimeout(() => storyFetchController.abort(), 10000); // 10-second timeout
const storyRes = await fetch('/api/' + newStory.id, { signal: controller.signal }); const storyRes = await fetch('/api/' + newStory.id, { signal: storyFetchController.signal });
clearTimeout(timeoutId); clearTimeout(timeoutId);
if (!storyRes.ok) { if (!storyRes.ok) {
@@ -89,11 +97,17 @@ function Feed({ updateCache }) {
setLoadingStatus(null); setLoadingStatus(null);
}, },
(error) => { (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()}.`; 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); setError(errorMessage);
} }
); );
}, [updateCache]);
return () => controller.abort();
}, [updateCache, filterSmallweb]);
return ( return (
<div className='container'> <div className='container'>
@@ -102,6 +116,11 @@ function Feed({ updateCache }) {
<meta name="robots" content="index" /> <meta name="robots" content="index" />
</Helmet> </Helmet>
<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 && {error &&
<details style={{marginBottom: '1rem'}}> <details style={{marginBottom: '1rem'}}>
<summary>Connection error? Click to expand.</summary> <summary>Connection error? Click to expand.</summary>

11
webclient/src/Style-black.css
View File

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

11
webclient/src/Style-dark.css
View File

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

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

@@ -189,6 +189,13 @@ span.source {
.comments { .comments {
margin-left: -1.25rem; margin-left: -1.25rem;
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
.comments dl, .comments dd {
margin: 0;
} }
.comment { .comment {
@@ -305,8 +312,81 @@ button.comment {
.copy-button { .copy-button {
font: 1.5rem/1 'icomoon2'; font: 1.5rem/1 'icomoon2';
color: #828282;
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
vertical-align: middle; 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;
}

15
webclient/src/Style-red.css
View File

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

33
webclient/src/utils.js
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { useState } from 'react';
import moment from 'moment'; import moment from 'moment';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@@ -9,6 +9,13 @@ export const sourceLink = (story) => {
return (<a className='source' href={url}>{host}</a>); 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) => export const infoLine = (story) =>
<div className='info'> <div className='info'>
{story.score} points {story.score} points
@@ -32,6 +39,8 @@ export const ToggleDot = ({ id, article }) => (
); );
export const BackwardDot = () => { export const BackwardDot = () => {
const [showTooltip, setShowTooltip] = useState(false);
const goBackward = () => { const goBackward = () => {
localStorage.setItem('scrollLock', 'True'); localStorage.setItem('scrollLock', 'True');
window.history.back(); window.history.back();
@@ -42,15 +51,25 @@ export const BackwardDot = () => {
if (!document.fullscreenElement) return null; if (!document.fullscreenElement) return null;
return ( 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 className='button'>
</div> </div>
<span className="tooltiptext">Browser Back</span>
</div> </div>
); );
}; };
export const ForwardDot = () => { export const ForwardDot = () => {
const [showTooltip, setShowTooltip] = useState(false);
const goForward = () => { const goForward = () => {
localStorage.setItem('scrollLock', 'True'); localStorage.setItem('scrollLock', 'True');
window.history.forward(); window.history.forward();
@@ -60,10 +79,18 @@ export const ForwardDot = () => {
if (!isMobile) return null; if (!isMobile) return null;
return ( 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 className='button'>
</div> </div>
<span className="tooltiptext">Browser Forward</span>
</div> </div>
); );
}; };