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

Compare commits

base: tanner/qotnews:search-text
Branches Tags
tanner/qotnews:master tanner/qotnews:search-text
...
compare: tanner/qotnews:649b8a0da462642421821cef62b03e7519062b48
Branches Tags
tanner/qotnews:master tanner/qotnews:search-text

23 Commits
search-text ... 649b8a0da4

Author SHA1 Message Date
tanner 649b8a0da4 fix: Prevent React app flash by hiding static content with display: none 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2026-01-02 20:52:07 +00:00
tanner 407c995d9f fix: Prevent content and dark mode background flashes on load 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2026-01-02 20:44:10 +00:00
tanner 7b978cac43 Test update 2025-12-27 18:36:32 +00:00
tanner b5241a2a42 Style update banner correctly 2025-12-27 18:29:23 +00:00
tanner 8bf33e2d45 style: Consolidate update banner styles and add theme support 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-27 18:15:22 +00:00
tanner 987c401dc4 chore: Update client version mismatch message 2025-12-27 18:15:18 +00:00
tanner 6facbd3397 chore: Log service worker update check 2025-12-27 18:13:07 +00:00
tanner a680b4b446 feat: Check for service worker updates on feed load 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-27 18:01:45 +00:00
tanner 2757f701d0 feat: Implement in-app service worker update notification 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-27 17:52:45 +00:00
tanner a1ebcc6d80 Change checkbox label to "Small websites" 2025-12-16 23:41:11 +00:00
tanner 82478c469d Add "similar" link for searching host name 2025-12-13 22:37:47 +00:00
tanner 77b429a742 Don't move backward dot tooltip 2025-12-08 23:54:41 +00:00
tanner 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 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 5796bc56b5 fix: Adjust default tooltip horizontal position 2025-12-08 23:42:36 +00:00
tanner 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 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 a712ca12da Bring single dollar sign math back, check for whitespace 2025-12-07 22:59:09 +00:00
tanner 8700bda104 Adjust checkbox styles 2025-12-07 22:53:12 +00:00
tanner 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 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 27faea1823 style: Refine checked checkbox border color in dark theme 2025-12-07 22:53:12 +00:00
tanner 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
10 changed files with 265 additions and 95 deletions
Expand all files Collapse all files
webclient/public/index.html
+100 -82
View File
@@ -30,7 +30,11 @@
-->
<title>{{ title }}</title>
<script>document.documentElement.className = 'js-enabled';</script>
<style>
.js-enabled .static-content {
display: none;
}
html {
overflow-y: scroll;
}
@@ -41,98 +45,112 @@
</head>
<body>
<script>
(function() {
try {
var theme = localStorage.getItem('theme');
if (theme === 'dark') {
document.body.style.backgroundColor = '#1a1a1a';
} else if (theme === 'black' || theme === 'red') {
document.body.style.backgroundColor = '#000';
}
} catch (e) {}
})();
</script>
<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 class="static-content">
<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>
{% 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'>
{% 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 class="{{ 'hot' if story.num_comments > 99 else '' }}" href="/{{ story.id }}/c">
<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>
{% endfor %}
</div>
{% endif %}
<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>
<!--
This HTML file is a template.
webclient/src/App.js
+22
View File
@@ -19,6 +19,7 @@ function App() {
const [theme, setTheme] = useState(localStorage.getItem('theme') || '');
const cache = useRef({});
const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement);
const [waitingWorker, setWaitingWorker] = useState(null);
const updateCache = useCallback((key, value) => {
cache.current[key] = value;
@@ -44,6 +45,14 @@ function App() {
localStorage.setItem('theme', 'red');
};
useEffect(() => {
const onSWUpdate = e => {
setWaitingWorker(e.detail.waiting);
};
window.addEventListener('swUpdate', onSWUpdate);
return () => window.removeEventListener('swUpdate', onSWUpdate);
}, []);
useEffect(() => {
if (Object.keys(cache.current).length === 0) {
localForage.iterate((value, key) => {
@@ -90,6 +99,19 @@ function App() {
return (
<div className={theme}>
{waitingWorker &&
<div className='update-banner'>
Client version mismatch, please refresh:{' '}
<button onClick={() => {
waitingWorker.postMessage({ type: 'SKIP_WAITING' });
navigator.serviceWorker.addEventListener('controllerchange', () => {
window.location.reload();
});
}}>
Refresh
</button>
</div>
}
<Router>
<div className='container menu'>
<p>
webclient/src/Article.js
+13 -4
View File
@@ -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';
@@ -12,6 +12,7 @@ const DANGEROUS_TAGS = ['svg', 'math'];
const latexDelimiters = [
{ left: '$$', right: '$$', display: true },
{ left: '\\[', right: '\\]', display: true },
{ left: '$', right: '$', display: false },
{ left: '\\(', right: '\\)', display: false }
];
@@ -105,7 +106,7 @@ function Article({ cache }) {
if (v.nodeName === '#text') {
const text = v.data;
if (text.includes('\\[') || text.includes('\\(') || text.includes('$$')) {
if (text.includes('\\[') || text.includes('\\(') || text.includes('$$') || /\$(?:[^$]*[^\s$])\$/.test(text)) {
return <Latex key={key} delimiters={latexDelimiters}>{text}</Latex>;
}
@@ -137,7 +138,8 @@ function Article({ cache }) {
const textContent = v.textContent.trim();
const isMath = (textContent.startsWith('\\(') && textContent.endsWith('\\)')) ||
(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()) {
@@ -157,6 +159,13 @@ function Article({ cache }) {
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>;
@@ -204,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)}
webclient/src/Feed.js
+10 -1
View File
@@ -20,6 +20,15 @@ function Feed({ updateCache }) {
useEffect(() => {
const controller = new AbortController();
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistration().then(reg => {
if (reg) {
console.log('Checking for client update...');
reg.update();
}
});
}
fetch(filterSmallweb ? '/api?smallweb=true' : '/api', { signal: controller.signal })
.then(res => {
if (!res.ok) {
@@ -118,7 +127,7 @@ function Feed({ updateCache }) {
<div style={{marginBottom: '1rem'}}>
<input type="checkbox" id="filter-smallweb" className="checkbox" checked={filterSmallweb} onChange={handleFilterChange} />
<label htmlFor="filter-smallweb">Only Smallweb</label>
<label htmlFor="filter-smallweb">Small websites</label>
</div>
{error &&
webclient/src/Style-black.css
+12 -1
View File
@@ -69,9 +69,20 @@
}
.black .checkbox:checked + label::after {
border-color: #ddd;
border-color: #eee;
}
.black .copy-button {
color: #828282;
}
.black .update-banner {
background-color: #333;
color: #ddd;
}
.black .update-banner button {
background-color: #444444;
border-color: #bbb;
color: #ddd;
}
webclient/src/Style-dark.css
+12 -1
View File
@@ -65,9 +65,20 @@
}
.dark .checkbox:checked + label::after {
border-color: #ddd;
border-color: #eee;
}
.dark .copy-button {
color: #828282;
}
.dark .update-banner {
background-color: #333;
color: #ddd;
}
.dark .update-banner button {
background-color: #444444;
border-color: #bbb;
color: #ddd;
}
webclient/src/Style-light.css
+47 -1
View File
@@ -43,6 +43,21 @@ 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;
@@ -355,7 +370,38 @@ button.comment {
top: 0.2em;
width: 0.3rem;
height: 0.6rem;
border: solid #000;
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
+12 -1
View File
@@ -87,9 +87,20 @@
}
.red .checkbox:checked + label::after {
border-color: #aa0000;
border-color: #dd0000;
}
.red .copy-button {
color: #690000;
}
.red .update-banner {
background-color: #300;
color: #d00;
}
.red .update-banner button {
background-color: #440000;
border-color: #b00;
color: #d00;
}
webclient/src/index.js
+7 -1
View File
@@ -3,9 +3,15 @@ import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
// version 4
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// // unregister() to register() below. Note this comes with some pitfalls.
// // Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
serviceWorker.register({
onUpdate: registration => {
window.dispatchEvent(new CustomEvent('swUpdate', { detail: registration }));
}
});
webclient/src/utils.js
+30 -3
View File
@@ -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>
);
};