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

Compare commits

base: tanner:125c1c5225ddaf3e03a4a0d405e7e44cef399216
Branches Tags
tanner:master
...
compare: tanner:master
Branches Tags
tanner:master

18 Commits
125c1c5225 ... master

Author SHA1 Message Date
Tanner Collin
82478c469d Add "similar" link for searching host name 2025-12-13 22:37:47 +00:00
Tanner Collin
77b429a742 Don't move backward dot tooltip 2025-12-08 23:54:41 +00:00
Tanner Collin
0c1c56b54a Fix: Prevent false positive single dollar math detection in text nodes 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-08 23:52:36 +00:00
Tanner Collin
73a139ef9a fix: Fix browser navigation tooltip alignment 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-08 23:42:39 +00:00
Tanner Collin
5796bc56b5 fix: Adjust default tooltip horizontal position 2025-12-08 23:42:36 +00:00
Tanner Collin
7c1910c919 fix: Improve nav dot tooltip visibility and positioning 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-08 23:37:10 +00:00
Tanner Collin
60a4df2efc feat: Add tooltips to browser navigation dots 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-08 23:33:52 +00:00
Tanner Collin
a712ca12da Bring single dollar sign math back, check for whitespace 2025-12-07 22:59:09 +00:00
Tanner Collin
8700bda104 Adjust checkbox styles 2025-12-07 22:53:12 +00:00
Tanner Collin
3160e02d41 Fix: Split border shorthand for dark mode color override 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-07 22:53:12 +00:00
Tanner Collin
cfa61c2066 fix: Improve dark mode checkbox checkmark visibility 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-07 22:53:12 +00:00
Tanner Collin
27faea1823 style: Refine checked checkbox border color in dark theme 2025-12-07 22:53:12 +00:00
Tanner Collin
df76e34c71 fix: Prevent price false positives in single dollar math detection 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-07 22:53:12 +00:00
Tanner Collin
5d014f50df fix: Remove single dollar sign math rendering due to false positives 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-05 17:24:40 +00:00
Tanner Collin
bcfdff1067 Fix dt dd tags margin 2025-12-05 00:59:02 +00:00
Tanner Collin
a888e38ae8 fix: Adjust comment metadata indentation in comments 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-05 00:49:13 +00:00
Tanner Collin
2bd51bb1cb fix: Refactor comments with DL/DD for text browser compatibility 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
 2025-12-05 00:45:00 +00:00
Tanner Collin
655346a7eb chore: Remove unused nojs div 2025-12-05 00:44:58 +00:00
7 changed files with 88 additions and 21 deletions
Expand all files Collapse all files

16
webclient/public/index.html
View File

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

8
webclient/src/Article.js
View File

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

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

@@ -69,7 +69,7 @@
} }
.black .checkbox:checked + label::after { .black .checkbox:checked + label::after {
border-color: #ddd; border-color: #eee;
} }
.black .copy-button { .black .copy-button {

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

@@ -65,7 +65,7 @@
} }
.dark .checkbox:checked + label::after { .dark .checkbox:checked + label::after {
border-color: #ddd; border-color: #eee;
} }
.dark .copy-button { .dark .copy-button {

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

@@ -189,6 +189,13 @@ span.source {
.comments { .comments {
margin-left: -1.25rem; margin-left: -1.25rem;
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
.comments dl, .comments dd {
margin: 0;
} }
.comment { .comment {
@@ -348,7 +355,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;
}

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

@@ -87,7 +87,7 @@
} }
.red .checkbox:checked + label::after { .red .checkbox:checked + label::after {
border-color: #aa0000; border-color: #dd0000;
} }
.red .copy-button { .red .copy-button {

33
webclient/src/utils.js
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { useState } from 'react';
import moment from 'moment'; import moment from 'moment';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@@ -9,6 +9,13 @@ export const sourceLink = (story) => {
return (<a className='source' href={url}>{host}</a>); return (<a className='source' href={url}>{host}</a>);
}; };
export const similarLink = (story) => {
const url = story.url || story.link;
const urlObj = new URL(url);
const host = urlObj.hostname.replace(/^www\./, '');
return (<Link to={'/search?q="'+host+'"'} className='similar'>similar</Link>);
};
export const infoLine = (story) => export const infoLine = (story) =>
<div className='info'> <div className='info'>
{story.score} points {story.score} points
@@ -32,6 +39,8 @@ export const ToggleDot = ({ id, article }) => (
); );
export const BackwardDot = () => { export const BackwardDot = () => {
const [showTooltip, setShowTooltip] = useState(false);
const goBackward = () => { const goBackward = () => {
localStorage.setItem('scrollLock', 'True'); localStorage.setItem('scrollLock', 'True');
window.history.back(); window.history.back();
@@ -42,15 +51,25 @@ export const BackwardDot = () => {
if (!document.fullscreenElement) return null; if (!document.fullscreenElement) return null;
return ( return (
<div className='dot backwardDot' onClick={goBackward}> <div
className={'dot backwardDot tooltip' + (showTooltip ? ' show-tooltip' : '')}
onClick={goBackward}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
onTouchStart={() => setShowTooltip(true)}
onTouchEnd={() => setShowTooltip(false)}
>
<div className='button'> <div className='button'>
</div> </div>
<span className="tooltiptext">Browser Back</span>
</div> </div>
); );
}; };
export const ForwardDot = () => { export const ForwardDot = () => {
const [showTooltip, setShowTooltip] = useState(false);
const goForward = () => { const goForward = () => {
localStorage.setItem('scrollLock', 'True'); localStorage.setItem('scrollLock', 'True');
window.history.forward(); window.history.forward();
@@ -60,10 +79,18 @@ export const ForwardDot = () => {
if (!isMobile) return null; if (!isMobile) return null;
return ( return (
<div className='dot forwardDot' onClick={goForward}> <div
className={'dot forwardDot tooltip' + (showTooltip ? ' show-tooltip' : '')}
onClick={goForward}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
onTouchStart={() => setShowTooltip(true)}
onTouchEnd={() => setShowTooltip(false)}
>
<div className='button'> <div className='button'>
</div> </div>
<span className="tooltiptext">Browser Forward</span>
</div> </div>
); );
}; };