Style fixes

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

apiserver/server.py

@@ -76,8 +76,12 @@ cors = CORS(flask_app)
 def api():
     skip = request.args.get('skip', 0)
     limit = request.args.get('limit', settings.FEED_LENGTH)
+    is_smallweb_filter = request.args.get('smallweb') == 'true' and smallweb_set
+    sources_filter = request.args.getlist('source')
 
-    if request.args.get('smallweb') == 'true' and smallweb_set:
+    if not is_smallweb_filter and not sources_filter:
+        stories = database.get_stories(limit, skip)
+    else:
         limit = int(limit)
         skip = int(skip)
         filtered_stories = []
@@ -90,24 +94,28 @@ def api():
 
             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:
+                if is_smallweb_filter:
-                    continue
+                    story_url = story.get('url') or story.get('link') or ''
-                hostname = urlparse(story_url).hostname
+                    if not story_url:
-                if hostname:
+                        continue
-                    hostname = hostname.replace('www.', '')
+                    hostname = urlparse(story_url).hostname
-                    if hostname in smallweb_set:
+                    if not hostname or hostname.replace('www.', '') not in smallweb_set:
-                        filtered_stories.append(story_str)
+                        continue
-                        if len(filtered_stories) == limit:
+                
-                            break
+                if sources_filter:
+                    if story.get('source') not in sources_filter:
+                        continue
+
+                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) + ']}')

webclient/src/App.js

@@ -20,6 +20,21 @@ function App() {
 	const cache = useRef({});
 	const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement);
 	const [waitingWorker, setWaitingWorker] = useState(null);
+	const [settingsOpen, setSettingsOpen] = useState(false);
+	const defaultBodyFontSize = 1.0;
+	const [bodyFontSize, setBodyFontSize] = useState(Number(localStorage.getItem('bodyFontSize')) || defaultBodyFontSize);
+	const [bodyFont, setBodyFont] = useState(localStorage.getItem('bodyFont') || 'Sans Serif');
+	const [articleFont, setArticleFont] = useState(localStorage.getItem('articleFont') || 'Apparatus SIL');
+	const [filterSmallweb, setFilterSmallweb] = useState(() => localStorage.getItem('filterSmallweb') === 'true');
+	const [feedSources, setFeedSources] = useState(() => {
+		const saved = localStorage.getItem('feedSources');
+		return saved ? JSON.parse(saved) : {
+			hackernews: true,
+			reddit: true,
+			lobsters: true,
+			tildes: true,
+		};
+	});
 
 	const updateCache = useCallback((key, value) => {
 		cache.current[key] = value;
@@ -45,6 +60,43 @@ function App() {
 		localStorage.setItem('theme', 'red');
 	};
 
+	const handleFilterChange = e => {
+		const isChecked = e.target.checked;
+		setFilterSmallweb(isChecked);
+		localStorage.setItem('filterSmallweb', isChecked);
+	};
+
+	const handleFeedSourceChange = (source) => {
+		setFeedSources(prevSources => {
+			const newSources = { ...prevSources, [source]: !prevSources[source] };
+			localStorage.setItem('feedSources', JSON.stringify(newSources));
+			return newSources;
+		});
+	};
+
+	const changeBodyFont = (font) => {
+		setBodyFont(font);
+		localStorage.setItem('bodyFont', font);
+	};
+
+	const changeArticleFont = (font) => {
+		setArticleFont(font);
+		localStorage.setItem('articleFont', font);
+	};
+
+	const changeBodyFontSize = (amount) => {
+		const newSize = bodyFontSize + amount;
+		setBodyFontSize(parseFloat(newSize.toFixed(2)));
+		localStorage.setItem('bodyFontSize', newSize.toFixed(2));
+	};
+
+	const resetBodyFontSize = () => {
+		setBodyFontSize(defaultBodyFontSize);
+		localStorage.removeItem('bodyFontSize');
+	};
+
+	const bodyFontSettingsChanged = bodyFontSize !== defaultBodyFontSize;
+
 	useEffect(() => {
 		const onSWUpdate = e => {
 			setWaitingWorker(e.detail.waiting);
@@ -92,6 +144,32 @@ function App() {
 		}
 	}, [theme]);
 
+	useEffect(() => {
+		document.documentElement.style.fontSize = `${bodyFontSize}rem`;
+	}, [bodyFontSize]);
+
+	const fontMap = {
+		'Sans Serif': 'sans-serif',
+		'Serif': 'serif',
+		'Apparatus SIL': "'Apparatus SIL', sans-serif"
+	};
+
+	useEffect(() => {
+		document.body.style.fontFamily = fontMap[bodyFont];
+	}, [bodyFont]);
+
+	useEffect(() => {
+		const styleId = 'article-font-family-style';
+		let style = document.getElementById(styleId);
+		if (!style) {
+			style = document.createElement('style');
+			style.id = styleId;
+			document.head.appendChild(style);
+		}
+		style.innerHTML = `.story-text { font-family: ${fontMap[articleFont]} !important; }`;
+	}, [articleFont]);
+
+
 	const fullScreenAvailable = document.fullscreenEnabled ||
 		document.mozFullscreenEnabled ||
 		document.webkitFullscreenEnabled ||
@@ -99,6 +177,98 @@ function App() {
 
 	return (
 		<div className={theme}>
+			{settingsOpen &&
+				<>
+					<div className="modal-overlay" onClick={() => setSettingsOpen(false)}></div>
+
+					<div className="modal-content" onClick={e => e.stopPropagation()}>
+						<button className="close-modal-button" onClick={() => setSettingsOpen(false)}>&times;</button>
+						<h3>Settings</h3>
+
+						<div className="setting-group">
+							<h4>Theme</h4>
+							<button className={theme === '' ? 'active' : ''} onClick={() => { light() }}>Light</button>
+							<button className={theme === 'dark' ? 'active' : ''} onClick={() => { dark() }}>Dark</button>
+							<button className={theme === 'black' ? 'active' : ''} onClick={() => { black() }}>Black</button>
+							<button className={theme === 'red' ? 'active' : ''} onClick={() => { red() }}>Red</button>
+							{fullScreenAvailable &&
+								<div style={{ marginTop: '0.5rem' }}>
+									{!isFullScreen ?
+										<button onClick={() => goFullScreen()}>Enter Fullscreen</button>
+										:
+										<button onClick={() => exitFullScreen()}>Exit Fullscreen</button>
+									}
+								</div>
+							}
+						</div>
+
+						<div className="setting-group">
+							<h4>Feed</h4>
+							<div className="font-option gap">
+								<input className="checkbox" type="checkbox" id="filter-smallweb" checked={filterSmallweb} onChange={handleFilterChange} />
+								<label htmlFor="filter-smallweb">Small websites only</label>
+							</div>
+							<div className="font-option">
+								<input className="checkbox" type="checkbox" id="filter-hackernews" name="feed-source" checked={feedSources.hackernews} onChange={() => handleFeedSourceChange('hackernews')} />
+								<label htmlFor="filter-hackernews">Hacker News</label>
+							</div>
+							<div className="font-option">
+								<input className="checkbox" type="checkbox" id="filter-reddit" name="feed-source" checked={feedSources.reddit} onChange={() => handleFeedSourceChange('reddit')} />
+								<label htmlFor="filter-reddit">Reddit</label>
+							</div>
+							<div className="font-option">
+								<input className="checkbox" type="checkbox" id="filter-lobsters" name="feed-source" checked={feedSources.lobsters} onChange={() => handleFeedSourceChange('lobsters')} />
+								<label htmlFor="filter-lobsters">Lobsters</label>
+							</div>
+							<div className="font-option">
+								<input className="checkbox" type="checkbox" id="filter-tildes" name="feed-source" checked={feedSources.tildes} onChange={() => handleFeedSourceChange('tildes')} />
+								<label htmlFor="filter-tildes">Tildes</label>
+							</div>
+						</div>
+
+						<div className="setting-group">
+							<h4>Font Size</h4>
+							<button onClick={() => changeBodyFontSize(-0.05)}>-</button>
+							<span className="font-size-display">{bodyFontSize.toFixed(2)}</span>
+							<button onClick={() => changeBodyFontSize(0.05)}>+</button>
+							<button onClick={resetBodyFontSize} disabled={!bodyFontSettingsChanged}>Reset</button>
+						</div>
+
+						<div className="setting-group">
+							<h4>Body Font</h4>
+							<div className="font-option">
+								<input className="checkbox" type="radio" id="body-sans-serif" name="body-font" value="Sans Serif" checked={bodyFont === 'Sans Serif'} onChange={() => changeBodyFont('Sans Serif')} />
+								<label htmlFor="body-sans-serif">Sans Serif *</label>
+							</div>
+							<div className="font-option">
+								<input className="checkbox" type="radio" id="body-serif" name="body-font" value="Serif" checked={bodyFont === 'Serif'} onChange={() => changeBodyFont('Serif')} />
+								<label htmlFor="body-serif">Serif</label>
+							</div>
+							<div className="font-option">
+								<input className="checkbox" type="radio" id="body-apparatus" name="body-font" value="Apparatus SIL" checked={bodyFont === 'Apparatus SIL'} onChange={() => changeBodyFont('Apparatus SIL')} />
+								<label htmlFor="body-apparatus">Apparatus SIL</label>
+							</div>
+						</div>
+
+						<div className="setting-group">
+							<h4>Article Font</h4>
+							<div className="font-option">
+								<input className="checkbox" type="radio" id="article-sans-serif" name="article-font" value="Sans Serif" checked={articleFont === 'Sans Serif'} onChange={() => changeArticleFont('Sans Serif')} />
+								<label htmlFor="article-sans-serif">Sans Serif</label>
+							</div>
+							<div className="font-option">
+								<input className="checkbox" type="radio" id="article-serif" name="article-font" value="Serif" checked={articleFont === 'Serif'} onChange={() => changeArticleFont('Serif')} />
+								<label htmlFor="article-serif">Serif</label>
+							</div>
+							<div className="font-option">
+								<input className="checkbox" type="radio" id="article-apparatus" name="article-font" value="Apparatus SIL" checked={articleFont === 'Apparatus SIL'} onChange={() => changeArticleFont('Apparatus SIL')} />
+								<label htmlFor="article-apparatus">Apparatus SIL *</label>
+							</div>
+						</div>
+					</div>
+				</>
+			}
+
 			{waitingWorker &&
 				<div className='update-banner'>
 					Client version mismatch, please refresh:{' '}
@@ -117,22 +287,15 @@ function App() {
 					<p>
 						<Link to='/'>QotNews</Link>
 
-						<span className='theme'><a href='#' onClick={() => light()}>Light</a> - <a href='#' onClick={() => dark()}>Dark</a> - <a href='#' onClick={() => black()}>Black</a> - <a href='#' onClick={() => red()}>Red</a></span>
+						<button className="settings-button" onClick={() => setSettingsOpen(true)}>Settings</button>
 						<br />
 						<span className='slogan'>Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
 					</p>
-					{fullScreenAvailable &&
-						<Route path='/(|search)' render={() => !isFullScreen ?
-							<button className='fullscreen' onClick={() => goFullScreen()}>Enter Fullscreen</button>
-						:
-							<button className='fullscreen' onClick={() => exitFullScreen()}>Exit Fullscreen</button>
-						} />
-					}
 					<Route path='/(|search)' component={Search} />
 					<Route path='/(|search)' component={Submit} />
 				</div>
 
-				<Route path='/' exact render={(props) => <Feed {...props} updateCache={updateCache} />} />
+				<Route path='/' exact render={(props) => <Feed {...props} updateCache={updateCache} filterSmallweb={filterSmallweb} feedSources={feedSources} />} />
 				<Switch>
 					<Route path='/search' component={Results} />
 					<Route path='/:id' exact render={(props) => <Article {...props} cache={cache.current} />} />

webclient/src/Feed.js

@@ -1,21 +1,22 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import localForage from 'localforage';
 import { sourceLink, infoLine, logos } from './utils.js';
 
-function Feed({ updateCache }) {
+function Feed({ updateCache, filterSmallweb, feedSources }) {
 	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 isInitialMount = useRef(true);
 
-	const handleFilterChange = e => {
+	useEffect(() => {
-		const isChecked = e.target.checked;
+		if (isInitialMount.current) {
-		setStories(false);
+			isInitialMount.current = false;
-		setFilterSmallweb(isChecked);
+		} else {
-		localStorage.setItem('filterSmallweb', isChecked);
+			setStories(false);
-	};
+		}
+	}, [filterSmallweb, feedSources]);
 
 	useEffect(() => {
 		const controller = new AbortController();
@@ -29,7 +30,20 @@ function Feed({ updateCache }) {
 			});
 		}
 
-		fetch(filterSmallweb ? '/api?smallweb=true' : '/api', { signal: controller.signal })
+		const params = new URLSearchParams();
+		if (filterSmallweb) {
+			params.append('smallweb', 'true');
+		}
+
+		const allSources = Object.keys(feedSources);
+		const enabledSources = allSources.filter(key => feedSources[key]);
+
+		if (enabledSources.length > 0 && enabledSources.length < allSources.length) {
+			enabledSources.forEach(source => params.append('source', source));
+		}
+		const apiUrl = `/api?${params.toString()}`;
+
+		fetch(apiUrl, { signal: controller.signal })
 			.then(res => {
 				if (!res.ok) {
 					throw new Error(`Server responded with ${res.status} ${res.statusText}`);
@@ -40,7 +54,7 @@ function Feed({ updateCache }) {
 				async (result) => {
 					const newApiStories = result.stories;
 
-					const updated = !stories || !stories.length || stories[0].id !== newApiStories[0].id;
+					const updated = !stories || stories.map(s => s.id).join() !== newApiStories.map(s => s.id).join();
 					console.log('New stories available:', updated);
 
 					if (!updated) return;
@@ -116,7 +130,7 @@ function Feed({ updateCache }) {
 			);
 
 		return () => controller.abort();
-	}, [updateCache, filterSmallweb]);
+	}, [updateCache, filterSmallweb, feedSources]);
 
 	return (
 		<div className='container'>
@@ -125,11 +139,6 @@ function Feed({ updateCache }) {
 				<meta name="robots" content="index" />
 			</Helmet>
 
-			<div style={{marginBottom: '1rem'}}>
-				<input type="checkbox" id="filter-smallweb" className="checkbox" checked={filterSmallweb} onChange={handleFilterChange} />
-				<label htmlFor="filter-smallweb">Small websites</label>
-			</div>
-
 			{error &&
 				<details style={{marginBottom: '1rem'}}>
 					<summary>Connection error? Click to expand.</summary>

webclient/src/Style-black.css

@@ -13,7 +13,7 @@
 
 .black .menu button,
 .black .story-text button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
@@ -82,7 +82,22 @@
 }
 
 .black .update-banner button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
+
+.black .modal-content {
+	background: #222;
+	border-color: #828282;
+	color: #ddd;
+}
+
+.black .modal-content button {
+	background-color: #222222;
+	border-color: #bbb;
+}
+
+.black .modal-content button.active {
+	background-color: #555;
+}

webclient/src/Style-dark.css

@@ -13,7 +13,7 @@
 
 .dark .menu button,
 .dark .story-text button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
@@ -78,7 +78,22 @@
 }
 
 .dark .update-banner button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
+
+.dark .modal-content {
+	background: #222;
+	border-color: #828282;
+	color: #ddd;
+}
+
+.dark .modal-content button {
+	background-color: #222222;
+	border-color: #bbb;
+}
+
+.dark .modal-content button.active {
+	background-color: #555;
+}

webclient/src/Style-light.css

@@ -1,6 +1,7 @@
 body {
 	text-rendering: optimizeLegibility;
-	font: 1rem/1.3 sans-serif;
+	font-size: 1rem;
+	line-height: 1.3;
 	color: #000000;
 	word-break: break-word;
 	font-kerning: normal;
@@ -85,6 +86,7 @@ pre {
 
 .slogan {
 	color: #828282;
+	margin-bottom: 0.5rem;
 }
 
 .theme {
@@ -198,7 +200,8 @@ span.source {
 }
 
 .story-text {
-	font: 1.2rem/1.5 'Apparatus SIL', sans-serif;
+	font-size: 1.2rem;
+	line-height: 1.5;
 	margin-top: 1em;
 }
 
@@ -405,3 +408,97 @@ button.comment {
 	visibility: visible;
 	opacity: 1;
 }
+
+.settings-button {
+	float: right;
+	background: none;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	color: inherit;
+	font: inherit;
+}
+
+.modal-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0,0,0,0.5);
+	z-index: 100;
+}
+
+.modal-content {
+	position: absolute;
+	top: 1rem;
+	right: 1rem;
+	background: #eee;
+	color: #000;
+	padding: 1rem;
+	border-radius: 4px;
+	z-index: 101;
+	min-width: 250px;
+	border: 1px solid #828282;
+}
+
+.modal-content h3, .modal-content h4 {
+	margin-top: 0;
+	margin-bottom: 0.5rem;
+}
+
+.modal-content .setting-group {
+	margin-bottom: 1rem;
+}
+
+.modal-content button {
+	margin-right: 0.5rem;
+	padding: 0.25rem 0.75rem;
+	border: 1px solid #828282;
+	border-radius: 4px;
+	background-color: transparent;
+	cursor: pointer;
+	font: inherit;
+	color: inherit;
+}
+
+.modal-content button:last-child {
+	margin-right: 0;
+}
+
+.modal-content button.active {
+	background-color: #ccc;
+}
+
+.modal-content button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.modal-content .font-size-display {
+	display: inline-block;
+	width: 50px;
+	text-align: center;
+	margin: 0 0.25rem;
+}
+
+.modal-content .font-option {
+	margin-bottom: 0.25rem;
+}
+
+.modal-content .gap {
+	margin-bottom: 0.75rem;
+}
+
+.close-modal-button {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.75rem;
+	background: transparent;
+	border: none;
+	font-size: 1.5rem;
+	line-height: 1;
+	padding: 0;
+	cursor: pointer;
+	color: inherit;
+}

webclient/src/Style-red.css

@@ -22,7 +22,7 @@
 
 .red .menu button,
 .red .story-text button {
-	background-color: #440000;
+	background-color: #220000;
 	border-color: #b00;
 	color: #b00;
 }
@@ -100,7 +100,22 @@
 }
 
 .red .update-banner button {
-	background-color: #440000;
+	background-color: #220000;
 	border-color: #b00;
 	color: #d00;
 }
+
+.red .modal-content {
+	background: #100;
+	border-color: #690000;
+	color: #b00;
+}
+
+.red .modal-content button {
+	background-color: #220000;
+	border-color: #b00;
+}
+
+.red .modal-content button.active {
+	background-color: #550000;
+}