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
+18
View File
@@ -30,7 +30,11 @@
--> -->
<title>{{ title }}</title> <title>{{ title }}</title>
<script>document.documentElement.className = 'js-enabled';</script>
<style> <style>
.js-enabled .static-content {
display: none;
}
html { html {
overflow-y: scroll; overflow-y: scroll;
} }
@@ -41,7 +45,20 @@
</head> </head>
<body> <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 id="root">
<div class="static-content">
<div class="container menu"> <div class="container menu">
<p> <p>
<a href="/">QotNews</a> <a href="/">QotNews</a>
@@ -134,6 +151,7 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
webclient/src/App.js
+22
View File
@@ -19,6 +19,7 @@ function App() {
const [theme, setTheme] = useState(localStorage.getItem('theme') || ''); const [theme, setTheme] = useState(localStorage.getItem('theme') || '');
const cache = useRef({}); const cache = useRef({});
const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement); const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement);
const [waitingWorker, setWaitingWorker] = useState(null);
const updateCache = useCallback((key, value) => { const updateCache = useCallback((key, value) => {
cache.current[key] = value; cache.current[key] = value;
@@ -44,6 +45,14 @@ function App() {
localStorage.setItem('theme', 'red'); localStorage.setItem('theme', 'red');
}; };
useEffect(() => {
const onSWUpdate = e => {
setWaitingWorker(e.detail.waiting);
};
window.addEventListener('swUpdate', onSWUpdate);
return () => window.removeEventListener('swUpdate', onSWUpdate);
}, []);
useEffect(() => { useEffect(() => {
if (Object.keys(cache.current).length === 0) { if (Object.keys(cache.current).length === 0) {
localForage.iterate((value, key) => { localForage.iterate((value, key) => {
@@ -90,6 +99,19 @@ function App() {
return ( return (
<div className={theme}> <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> <Router>
<div className='container menu'> <div className='container menu'>
<p> <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 { 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';
@@ -12,6 +12,7 @@ const DANGEROUS_TAGS = ['svg', 'math'];
const latexDelimiters = [ const latexDelimiters = [
{ left: '$$', right: '$$', display: true }, { left: '$$', right: '$$', display: true },
{ left: '\\[', right: '\\]', display: true }, { left: '\\[', right: '\\]', display: true },
{ left: '$', right: '$', display: false },
{ left: '\\(', right: '\\)', display: false } { left: '\\(', right: '\\)', display: false }
]; ];
@@ -105,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('$$')) { 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>;
} }
@@ -137,7 +138,8 @@ function Article({ cache }) {
const textContent = v.textContent.trim(); const textContent = v.textContent.trim();
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('$') && !/\s/.test(textContent.charAt(textContent.length - 2)));
const props = { key: key }; const props = { key: key };
if (v.hasAttributes()) { if (v.hasAttributes()) {
@@ -157,6 +159,13 @@ function Article({ cache }) {
const firstParen = mathContent.indexOf('\\('); const firstParen = mathContent.indexOf('\\(');
const lastParen = mathContent.lastIndexOf('\\)'); const lastParen = mathContent.lastIndexOf('\\)');
mathContent = mathContent.substring(0, firstParen) + '\\[' + mathContent.substring(firstParen + 2, lastParen) + '\\]' + mathContent.substring(lastParen + 2); 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>; 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> <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)}
webclient/src/Feed.js
+10 -1
View File
@@ -20,6 +20,15 @@ function Feed({ updateCache }) {
useEffect(() => { useEffect(() => {
const controller = new AbortController(); 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 }) fetch(filterSmallweb ? '/api?smallweb=true' : '/api', { signal: controller.signal })
.then(res => { .then(res => {
if (!res.ok) { if (!res.ok) {
@@ -118,7 +127,7 @@ function Feed({ updateCache }) {
<div style={{marginBottom: '1rem'}}> <div style={{marginBottom: '1rem'}}>
<input type="checkbox" id="filter-smallweb" className="checkbox" checked={filterSmallweb} onChange={handleFilterChange} /> <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> </div>
{error && {error &&
webclient/src/Style-black.css
+12 -1
View File
@@ -69,9 +69,20 @@
} }
.black .checkbox:checked + label::after { .black .checkbox:checked + label::after {
border-color: #ddd; border-color: #eee;
} }
.black .copy-button { .black .copy-button {
color: #828282; 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 { .dark .checkbox:checked + label::after {
border-color: #ddd; border-color: #eee;
} }
.dark .copy-button { .dark .copy-button {
color: #828282; 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; 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 { .fullscreen {
margin: 0.25rem; margin: 0.25rem;
padding: 0.25rem; padding: 0.25rem;
@@ -355,7 +370,38 @@ button.comment {
top: 0.2em; top: 0.2em;
width: 0.3rem; width: 0.3rem;
height: 0.6rem; height: 0.6rem;
border: solid #000; border-style: solid;
border-color: #000;
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
transform: rotate(45deg); 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 { .red .checkbox:checked + label::after {
border-color: #aa0000; border-color: #dd0000;
} }
.red .copy-button { .red .copy-button {
color: #690000; 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 App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
// version 4
ReactDOM.render(<App />, document.getElementById('root')); ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change // If you want your app to work offline and load faster, you can change
// // unregister() to register() below. Note this comes with some pitfalls. // // unregister() to register() below. Note this comes with some pitfalls.
// // Learn more about service workers: https://bit.ly/CRA-PWA // // 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 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>
); );
}; };