Modify search to work with article contents

Ignore data.ms.old/
feat: Add "Search in article" filter checkbox to results page
2026-06-13 11:54:52 -06:00 · 2026-06-13 11:54:35 -06:00 · 2025-12-16 17:06:53 -07:00 · 2025-12-12 16:14:36 -07:00 · 2025-12-12 13:34:48 -07:00 · 2025-12-12 13:34:43 -07:00
21 changed files with 271 additions and 668 deletions
@@ -1,6 +1,6 @@
 The MIT License (MIT)
-Copyright (c) 2019 Tanner Collin
+Copyright (c) 2019 Tanner (tanner.vc)
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -20,7 +20,7 @@ $ sudo apt install yarn
 Clone this repo:
 ```text
-$ git clone https://gogs.tannercollin.com/tanner/qotnews.git
+$ git clone https://git.tanner.vc/tanner/qotnews.git
 $ cd qotnews
 ```
@@ -16,7 +16,7 @@ from utils import clean
 # cache the topic groups to prevent redirects
 group_lookup = {}
-USER_AGENT = 'qotnews scraper (github:tannercollin)'
+USER_AGENT = 'qotnews scraper (github:tanner37)'
 API_TOPSTORIES = lambda : 'https://tildes.net'
 API_ITEM = lambda x : 'https://tildes.net/shortener/{}'.format(x)
@@ -0,0 +1,67 @@
 import logging
 logging.basicConfig(
        format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
        level=logging.INFO)
 import database
 from sqlalchemy import select
 import search
 import sys
 import time
 import json
 import requests
 from bs4 import BeautifulSoup
 database.init()
 search.init()
 BATCH_SIZE = 1000
 def put_stories(stories):
    return search.meili_api(requests.post, 'indexes/qotnews/documents', stories)
 def get_update(update_id):
    return search.meili_api(requests.get, 'tasks/{}'.format(update_id))
 if __name__ == '__main__':
    num_stories = database.count_stories()
    print('Reindex {} stories?'.format(num_stories))
    print('Press ENTER to continue, ctrl-c to cancel')
    input()
    story_list = database.get_story_list()
    count = 1
    while len(story_list):
        stories = []
        for _ in range(BATCH_SIZE):
            try:
                sid = story_list.pop()
            except IndexError:
                break
            story = database.get_story(sid)
            print('Indexing {}/{} id: {} title: {}'.format(count, num_stories, sid[0], story.title))
            story_obj = json.loads(story.full_json)
            story_obj.pop('comments', False)
            if 'text' in story_obj and story_obj['text']:
                soup = BeautifulSoup(story_obj['text'], 'html.parser')
                story_obj['text'] = soup.get_text()
            stories.append(story_obj)
            count += 1
        res = put_stories(stories)
        update_id = res['taskUid']
        print('Waiting for processing', end='')
        while get_update(update_id)['status'] != 'succeeded':
            time.sleep(0.5)
            print('.', end='', flush=True)
        print()
    print('Done.')
@@ -11,6 +11,7 @@ import sys
 import time
 import json
 import requests
 from bs4 import BeautifulSoup
 database.init()
 search.init()
@@ -45,6 +46,9 @@ if __name__ == '__main__':
            story = database.get_story(sid)
            print('Indexing {}/{} id: {} title: {}'.format(count, num_stories, sid[0], story.title))
            story_obj = json.loads(story.meta_json)
            if 'text' in story_obj and story_obj['text']:
                soup = BeautifulSoup(story_obj['text'], 'html.parser')
                story_obj['text'] = soup.get_text()
            stories.append(story_obj)
            count += 1
@@ -10,7 +10,8 @@ SEARCH_ENABLED = bool(settings.MEILI_URL)
 def meili_api(method, route, json=None, params=None, parse_json=True):
    try:
-        r = method(settings.MEILI_URL + route, json=json, params=params, timeout=4)
+        headers = {'Authorization': 'Bearer ' + settings.MEILI_API_KEY}
        r = method(settings.MEILI_URL + route, json=json, params=params, headers=headers, timeout=4)
        if r.status_code > 299:
            raise Exception('Bad response code ' + str(r.status_code))
        if parse_json:
@@ -24,42 +25,40 @@ def meili_api(method, route, json=None, params=None, parse_json=True):
        logging.error('Problem with MeiliSearch api route: %s: %s', route, str(e))
        return False
-def create_index():
+def update_settings():
-    json = dict(uid='qotnews', primaryKey='id')
+    json = {
-    return meili_api(requests.post, 'indexes', json=json)
+        'rankingRules': ['words', 'typo', 'proximity', 'attribute', 'date:desc', 'exactness'],
-
+        'searchableAttributes': ['title', 'url', 'author', 'text'],
-def update_rankings():
+        'displayedAttributes': ['id', 'ref', 'source', 'author', 'author_link', 'score', 'date', 'title', 'link', 'url', 'num_comments', 'text'],
-    json = ['typo', 'words', 'proximity', 'date:desc', 'exactness']
+        'stopWords': ['a', 'an', 'the', 'and', 'or', 'but', 'if', 'in', 'on', 'at', 'by', 'for', 'with', 'to', 'from', 'of', 'is', 'it', 'that', 'this'],
-    return meili_api(requests.post, 'indexes/qotnews/settings/ranking-rules', json=json)
+    }
-
+    return meili_api(requests.patch, 'indexes/qotnews/settings', json=json)
 def update_attributes():
    json = ['title', 'url', 'author']
    r = meili_api(requests.post, 'indexes/qotnews/settings/searchable-attributes', json=json)
    json = ['id', 'ref', 'source', 'author', 'author_link', 'score', 'date', 'title', 'link', 'url', 'num_comments']
    r = meili_api(requests.post, 'indexes/qotnews/settings/displayed-attributes', json=json)
    return r
 def init():
    if not SEARCH_ENABLED:
        logging.info('Search is not enabled, skipping init.')
        return
-    print(create_index())
+    update_settings()
    update_rankings()
    update_attributes()
 def put_story(story):
    if not SEARCH_ENABLED: return
    return meili_api(requests.post, 'indexes/qotnews/documents', [story])
-def search(q):
+def search(q, in_article=False):
    if not SEARCH_ENABLED: return []
-    params = dict(q=q, limit=settings.FEED_LENGTH)
+
-    r = meili_api(requests.get, 'indexes/qotnews/search', params=params, parse_json=False)
+    json = dict(q=q, limit=settings.FEED_LENGTH)
    if True:
        json['attributesToSearchOn'] = ['text']
        json['attributesToCrop'] = ['text']
        json['attributesToRetrieve'] = ['id', 'ref', 'source', 'author', 'author_link', 'score', 'date', 'title', 'link', 'url', 'num_comments']
        json['cropLength'] = 80
    r = meili_api(requests.post, 'indexes/qotnews/search', json=json, parse_json=False)
    return r
 if __name__ == '__main__':
    init()
    print(update_rankings())
    print(search('facebook'))
@@ -76,12 +76,8 @@ 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 not is_smallweb_filter and not sources_filter:
+    if request.args.get('smallweb') == 'true' and smallweb_set:
        stories = database.get_stories(limit, skip)
    else:
        limit = int(limit)
        skip = int(skip)
        filtered_stories = []
@@ -94,19 +90,13 @@ def api():
            for story_str in stories_batch:
                story = json.loads(story_str)
                if is_smallweb_filter:
                story_url = story.get('url') or story.get('link') or ''
                if not story_url:
                    continue
                hostname = urlparse(story_url).hostname
-                    if not hostname or hostname.replace('www.', '') not in smallweb_set:
+                if hostname:
-                        continue
+                    hostname = hostname.replace('www.', '')
-                
+                    if hostname in smallweb_set:
                if sources_filter:
                    if story.get('source') not in sources_filter:
                        continue
                        filtered_stories.append(story_str)
                        if len(filtered_stories) == limit:
                            break
@@ -116,6 +106,8 @@ def api():
            current_skip += limit
        stories = filtered_stories
    else:
        stories = database.get_stories(limit, skip)
    # hacky nested json
    res = Response('{"stories":[' + ','.join(stories) + ']}')
@@ -139,8 +131,9 @@ def apistats():
@flask_app.route('/api/search', strict_slashes=False)
 def apisearch():
    q = request.args.get('q', '')
    in_article = request.args.get('article', False)
    if len(q) >= 3:
-        results = search.search(q)
+        results = search.search(q, in_article)
    else:
        results = '[]'
    res = Response(results)
@@ -270,7 +263,7 @@ def static_story(sid):
        show_comments=request.path.endswith('/c'),
    )
-http_server = WSGIServer(('', 33842), flask_app)
+http_server = WSGIServer(('0.0.0.0', 33842), flask_app)
 def feed_thread():
    global news_index, ref_list, current_item
@@ -12,7 +12,7 @@ def alert_tanner(message):
    try:
        logging.info('Alerting Tanner: ' + message)
        params = dict(qotnews=message)
-        requests.get('https://tbot.tannercollin.com/message', params=params, timeout=4)
+        requests.get('https://tbot.tanner.vc/message', params=params, timeout=4)
    except BaseException as e:
        logging.error('Problem alerting Tanner: ' + str(e))
@@ -4,3 +4,4 @@
 meilisearch-linux-amd64
 data.ms/
 data.ms.old/
@@ -30,11 +30,7 @@
 		-->
 		<title>{{ title }}</title>
 		<script>document.documentElement.className = 'js-enabled';</script>
 		<style>
 			.js-enabled .static-content {
 				display: none;
 			}
 			html {
 				overflow-y: scroll;
 			}
@@ -45,27 +41,7 @@
 	</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="static-content">
 				{% if False %}
 				<noscript>
 					<meta http-equiv="refresh" content="0;url=?/no.script">
 				</noscript>
 				{% endif %}
 			<div class="container menu">
 				<p>
 					<a href="/">QotNews</a>
@@ -158,7 +134,6 @@
 				</div>
 			{% endif %}
 		</div>
 		</div>
 		<!--
 			This HTML file is a template.
 			If you open it directly in the browser, you will see an empty page.
@@ -19,22 +19,6 @@ function App() {
 	const [theme, setTheme] = useState(localStorage.getItem('theme') || '');
 	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;
@@ -60,51 +44,6 @@ 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);
 		};
 		window.addEventListener('swUpdate', onSWUpdate);
 		return () => window.removeEventListener('swUpdate', onSWUpdate);
 	}, []);
 	useEffect(() => {
 		if (Object.keys(cache.current).length === 0) {
 			localForage.iterate((value, key) => {
@@ -144,32 +83,6 @@ 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 ||
@@ -177,125 +90,27 @@ 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:{' '}
 					<button onClick={() => {
 						waitingWorker.postMessage({ type: 'SKIP_WAITING' });
 						navigator.serviceWorker.addEventListener('controllerchange', () => {
 							window.location.reload();
 						});
 					}}>
 						Refresh
 					</button>
 				</div>
 			}
 			<Router>
 				<div className='container menu'>
 					<p>
 						<Link to='/'>QotNews</Link>
-						<button className="settings-button" onClick={() => setSettingsOpen(true)}>Settings</button>
+						<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>
 						<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} filterSmallweb={filterSmallweb} feedSources={feedSources} />} />
+				<Route path='/' exact render={(props) => <Feed {...props} updateCache={updateCache} />} />
 				<Switch>
 					<Route path='/search' component={Results} />
 					<Route path='/:id' exact render={(props) => <Article {...props} cache={cache.current} />} />
@@ -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, similarLink, infoLine, ToggleDot } from './utils.js';
+import { sourceLink, infoLine, ToggleDot } from './utils.js';
 import Latex from 'react-latex-next';
 import 'katex/dist/katex.min.css';
@@ -12,7 +12,6 @@ const DANGEROUS_TAGS = ['svg', 'math'];
 const latexDelimiters = [
    { left: '$$', right: '$$', display: true },
    { left: '\\[', right: '\\]', display: true },
    { left: '$', right: '$', display: false },
    { left: '\\(', right: '\\)', display: false }
 ];
@@ -106,7 +105,7 @@ function Article({ cache }) {
 			if (v.nodeName === '#text') {
 				const text = v.data;
-				if (text.includes('\\[') || text.includes('\\(') || text.includes('$$') || /\$(?:[^$]*[^\s$])\$/.test(text)) {
+				if (text.includes('\\[') || text.includes('\\(') || text.includes('$$')) {
 					return <Latex key={key} delimiters={latexDelimiters}>{text}</Latex>;
 				}
@@ -138,8 +137,7 @@ 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()) {
@@ -159,13 +157,6 @@ 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>;
@@ -213,7 +204,7 @@ function Article({ cache }) {
 					<h1>{story.title} <button className='copy-button' onClick={copyLink}>{copyButtonText}</button></h1>
 					<div className='info'>
-						Source: {sourceLink(story)} | {similarLink(story)}
+						Source: {sourceLink(story)}
 					</div>
 					{infoLine(story)}
@@ -1,49 +1,26 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } 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, filterSmallweb, feedSources }) {
+function Feed({ updateCache }) {
 	const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false);
 	const [error, setError] = useState('');
 	const [loadingStatus, setLoadingStatus] = useState(null);
-	const isInitialMount = useRef(true);
+	const [filterSmallweb, setFilterSmallweb] = useState(() => localStorage.getItem('filterSmallweb') === 'true');
-	useEffect(() => {
+	const handleFilterChange = e => {
-		if (isInitialMount.current) {
+		const isChecked = e.target.checked;
 			isInitialMount.current = false;
 		} else {
 		setStories(false);
-		}
+		setFilterSmallweb(isChecked);
-	}, [filterSmallweb, feedSources]);
+		localStorage.setItem('filterSmallweb', isChecked);
 	};
 	useEffect(() => {
 		const controller = new AbortController();
-		if ('serviceWorker' in navigator) {
+		fetch(filterSmallweb ? '/api?smallweb=true' : '/api', { signal: controller.signal })
 			navigator.serviceWorker.getRegistration().then(reg => {
 				if (reg) {
 					console.log('Checking for client update...');
 					reg.update();
 				}
 			});
 		}
 		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}`);
@@ -54,7 +31,7 @@ function Feed({ updateCache, filterSmallweb, feedSources }) {
 				async (result) => {
 					const newApiStories = result.stories;
-					const updated = !stories || stories.map(s => s.id).join() !== newApiStories.map(s => s.id).join();
+					const updated = !stories || !stories.length || stories[0].id !== newApiStories[0].id;
 					console.log('New stories available:', updated);
 					if (!updated) return;
@@ -130,7 +107,7 @@ function Feed({ updateCache, filterSmallweb, feedSources }) {
 			);
 		return () => controller.abort();
-	}, [updateCache, filterSmallweb, feedSources]);
+	}, [updateCache, filterSmallweb]);
 	return (
 		<div className='container'>
@@ -139,6 +116,11 @@ function Feed({ updateCache, filterSmallweb, feedSources }) {
 				<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">Only Smallweb</label>
 			</div>
 			{error &&
 				<details style={{marginBottom: '1rem'}}>
 					<summary>Connection error? Click to expand.</summary>
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useHistory } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import queryString from 'query-string';
 import { sourceLink, infoLine, logos } from './utils.js';
 import AbortController from 'abort-controller';
@@ -8,6 +9,19 @@ function Results() {
 	const [stories, setStories] = useState(false);
 	const [error, setError] = useState(false);
 	const location = useLocation();
 	const history = useHistory();
 	const handleFilterChange = e => {
 		const isChecked = e.target.checked;
 		const currentQuery = queryString.parse(location.search);
 		if (isChecked) {
 			currentQuery.article = 'true';
 		} else {
 			delete currentQuery.article;
 		}
 		history.push('/search?' + queryString.stringify(currentQuery));
 	};
 	useEffect(() => {
 		const controller = new AbortController();
@@ -32,11 +46,19 @@ function Results() {
 		};
 	}, [location.search]);
 	const searchInArticle = queryString.parse(location.search).article === 'true';
 	return (
 		<div className='container'>
 			<Helmet>
 				<title>Search Results | QotNews</title>
 			</Helmet>
 			<div style={{marginBottom: '1rem'}}>
 				<input type="checkbox" id="search-in-article" className="checkbox" checked={searchInArticle} onChange={handleFilterChange} />
 				<label htmlFor="search-in-article">Search in article</label>
 			</div>
 			{error && <p>Connection error?</p>}
 			{stories ?
 				<>
@@ -56,6 +78,10 @@ function Results() {
 									</div>
 									{infoLine(x)}
 									{!!x?._formatted &&
 										<p>{x._formatted.text.replace(/\n/g, ' ')}</p>
 									}
 								</div>
 							)
 						:
@@ -15,7 +15,9 @@ function Search() {
 		const newSearch = event.target.value;
 		setSearch(newSearch);
 		if (newSearch.length >= 3) {
-			const searchQuery = queryString.stringify({ 'q': newSearch });
+			const currentQuery = queryString.parse(location.search);
 			currentQuery.q = newSearch;
 			const searchQuery = queryString.stringify(currentQuery);
 			history.replace('/search?' + searchQuery);
 		} else {
 			history.replace('/');
@@ -24,7 +26,9 @@ function Search() {
 	const searchAgain = (event) => {
 		event.preventDefault();
-		const searchString = queryString.stringify({ 'q': event.target[0].value });
+		const currentQuery = queryString.parse(location.search);
 		currentQuery.q = event.target[0].value;
 		const searchString = queryString.stringify(currentQuery);
 		history.push('/search?' + searchString);
 		inputRef.current.blur();
 	}
@@ -13,7 +13,7 @@
 .black .menu button,
 .black .story-text button {
-	background-color: #222222;
+	background-color: #444444;
 	border-color: #bbb;
 	color: #ddd;
 }
@@ -69,35 +69,9 @@
 }
 .black .checkbox:checked + label::after {
-	border-color: #eee;
+	border-color: #ddd;
 }
 .black .copy-button {
 	color: #828282;
 }
 .black .update-banner {
 	background-color: #333;
 	color: #ddd;
 }
 .black .update-banner button {
 	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;
 }
@@ -13,7 +13,7 @@
 .dark .menu button,
 .dark .story-text button {
-	background-color: #222222;
+	background-color: #444444;
 	border-color: #bbb;
 	color: #ddd;
 }
@@ -65,35 +65,9 @@
 }
 .dark .checkbox:checked + label::after {
-	border-color: #eee;
+	border-color: #ddd;
 }
 .dark .copy-button {
 	color: #828282;
 }
 .dark .update-banner {
 	background-color: #333;
 	color: #ddd;
 }
 .dark .update-banner button {
 	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;
 }
@@ -1,7 +1,6 @@
 body {
 	text-rendering: optimizeLegibility;
-	font-size: 1rem;
+	font: 1rem/1.3 sans-serif;
 	line-height: 1.3;
 	color: #000000;
 	word-break: break-word;
 	font-kerning: normal;
@@ -44,21 +43,6 @@ 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;
@@ -86,7 +70,6 @@ pre {
 .slogan {
 	color: #828282;
 	margin-bottom: 0.5rem;
 }
 .theme {
@@ -200,8 +183,7 @@ span.source {
 }
 .story-text {
-	font-size: 1.2rem;
+	font: 1.2rem/1.5 'Apparatus SIL', sans-serif;
 	line-height: 1.5;
 	margin-top: 1em;
 }
@@ -373,132 +355,7 @@ button.comment {
 	top: 0.2em;
 	width: 0.3rem;
 	height: 0.6rem;
-	border-style: solid;
+	border: solid #000;
 	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;
 }
 .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;
 }
@@ -22,7 +22,7 @@
 .red .menu button,
 .red .story-text button {
-	background-color: #220000;
+	background-color: #440000;
 	border-color: #b00;
 	color: #b00;
 }
@@ -87,35 +87,9 @@
 }
 .red .checkbox:checked + label::after {
-	border-color: #dd0000;
+	border-color: #aa0000;
 }
 .red .copy-button {
 	color: #690000;
 }
 .red .update-banner {
 	background-color: #300;
 	color: #d00;
 }
 .red .update-banner button {
 	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;
 }
@@ -3,15 +3,9 @@ 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.register({
+serviceWorker.unregister();
  onUpdate: registration => {
    window.dispatchEvent(new CustomEvent('swUpdate', { detail: registration }));
  }
 });
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
@@ -9,13 +9,6 @@ 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
@@ -39,8 +32,6 @@ export const ToggleDot = ({ id, article }) => (
 );
 export const BackwardDot = () => {
 	const [showTooltip, setShowTooltip] = useState(false);
 	const goBackward = () => {
 		localStorage.setItem('scrollLock', 'True');
 		window.history.back();
@@ -51,25 +42,15 @@ export const BackwardDot = () => {
 	if (!document.fullscreenElement) return null;
 	return (
-		<div
+		<div className='dot backwardDot' onClick={goBackward}>
 			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();
@@ -79,18 +60,10 @@ export const ForwardDot = () => {
 	if (!isMobile) return null;
 	return (
-		<div
+		<div className='dot forwardDot' onClick={goForward}>
 			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>
 	);
 };