Compare commits
38 Commits
e8911dc1d1
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 82478c469d | |||
| 77b429a742 | |||
| 0c1c56b54a | |||
| 73a139ef9a | |||
| 5796bc56b5 | |||
| 7c1910c919 | |||
| 60a4df2efc | |||
| a712ca12da | |||
| 8700bda104 | |||
| 3160e02d41 | |||
| cfa61c2066 | |||
| 27faea1823 | |||
| df76e34c71 | |||
| 5d014f50df | |||
| bcfdff1067 | |||
| a888e38ae8 | |||
| 2bd51bb1cb | |||
| 655346a7eb | |||
| 125c1c5225 | |||
| 5dd2069af5 | |||
| d68fc73af5 | |||
| ff1297e507 | |||
| 1d019f880b | |||
| 23b56b26b1 | |||
| b439199836 | |||
| 5736cde21a | |||
| ed8ad1b6f6 | |||
| 75779722c1 | |||
| 13df4a7831 | |||
| d511453418 | |||
| 5e7240e2d0 | |||
| 96719f9e6f | |||
| 0d4e674f3d | |||
| 7ce94e80dd | |||
| 1729e5b2be | |||
| d04bc2fe05 | |||
| 02d165b2b2 | |||
| 2d10abf9aa |
@@ -16,6 +16,7 @@ import traceback
|
|||||||
import time
|
import time
|
||||||
import datetime
|
import datetime
|
||||||
import humanize
|
import humanize
|
||||||
|
import urllib.request
|
||||||
from urllib.parse import urlparse, parse_qs
|
from urllib.parse import urlparse, parse_qs
|
||||||
|
|
||||||
import settings
|
import settings
|
||||||
@@ -28,6 +29,25 @@ from flask import abort, Flask, request, render_template, stream_with_context, R
|
|||||||
from werkzeug.exceptions import NotFound
|
from werkzeug.exceptions import NotFound
|
||||||
from flask_cors import CORS
|
from flask_cors import CORS
|
||||||
|
|
||||||
|
smallweb_set = set()
|
||||||
|
def load_smallweb_list():
|
||||||
|
EXCLUDED = [
|
||||||
|
'github.com',
|
||||||
|
]
|
||||||
|
|
||||||
|
global smallweb_set
|
||||||
|
try:
|
||||||
|
url = 'https://raw.githubusercontent.com/kagisearch/smallweb/refs/heads/main/smallweb.txt'
|
||||||
|
with urllib.request.urlopen(url, timeout=10) as response:
|
||||||
|
urls = response.read().decode('utf-8').splitlines()
|
||||||
|
hosts = {urlparse(u).hostname for u in urls if u and urlparse(u).hostname}
|
||||||
|
smallweb_set = {h.replace('www.', '') for h in hosts if h not in EXCLUDED}
|
||||||
|
logging.info('Loaded {} smallweb domains.'.format(len(smallweb_set)))
|
||||||
|
except Exception as e:
|
||||||
|
logging.error('Failed to load smallweb list: {}'.format(e))
|
||||||
|
|
||||||
|
load_smallweb_list()
|
||||||
|
|
||||||
database.init()
|
database.init()
|
||||||
search.init()
|
search.init()
|
||||||
|
|
||||||
@@ -56,7 +76,39 @@ cors = CORS(flask_app)
|
|||||||
def api():
|
def api():
|
||||||
skip = request.args.get('skip', 0)
|
skip = request.args.get('skip', 0)
|
||||||
limit = request.args.get('limit', settings.FEED_LENGTH)
|
limit = request.args.get('limit', settings.FEED_LENGTH)
|
||||||
stories = database.get_stories(limit, skip)
|
|
||||||
|
if request.args.get('smallweb') == 'true' and smallweb_set:
|
||||||
|
limit = int(limit)
|
||||||
|
skip = int(skip)
|
||||||
|
filtered_stories = []
|
||||||
|
current_skip = skip
|
||||||
|
|
||||||
|
while len(filtered_stories) < limit:
|
||||||
|
stories_batch = database.get_stories(limit, current_skip)
|
||||||
|
if not stories_batch:
|
||||||
|
break
|
||||||
|
|
||||||
|
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:
|
||||||
|
continue
|
||||||
|
hostname = urlparse(story_url).hostname
|
||||||
|
if hostname:
|
||||||
|
hostname = hostname.replace('www.', '')
|
||||||
|
if hostname in smallweb_set:
|
||||||
|
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
|
# hacky nested json
|
||||||
res = Response('{"stories":[' + ','.join(stories) + ']}')
|
res = Response('{"stories":[' + ','.join(stories) + ']}')
|
||||||
res.headers['content-type'] = 'application/json'
|
res.headers['content-type'] = 'application/json'
|
||||||
|
|||||||
@@ -4,12 +4,14 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"abort-controller": "^3.0.0",
|
"abort-controller": "^3.0.0",
|
||||||
|
"katex": "^0.16.25",
|
||||||
"localforage": "^1.7.3",
|
"localforage": "^1.7.3",
|
||||||
"moment": "^2.24.0",
|
"moment": "^2.24.0",
|
||||||
"query-string": "^6.8.3",
|
"query-string": "^6.8.3",
|
||||||
"react": "^16.9.0",
|
"react": "^16.9.0",
|
||||||
"react-dom": "^16.9.0",
|
"react-dom": "^16.9.0",
|
||||||
"react-helmet": "^5.2.1",
|
"react-helmet": "^5.2.1",
|
||||||
|
"react-latex-next": "^3.0.0",
|
||||||
"react-router-dom": "^5.0.1",
|
"react-router-dom": "^5.0.1",
|
||||||
"react-router-hash-link": "^1.2.2",
|
"react-router-hash-link": "^1.2.2",
|
||||||
"react-scripts": "3.1.1"
|
"react-scripts": "3.1.1"
|
||||||
|
|||||||
@@ -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>
|
||||||
{% for reply in comment.comments %}
|
{% if comment.comments %}
|
||||||
{{ render_comment(reply, level + 1) }}
|
<dl>
|
||||||
{% endfor %}
|
{% for reply in comment.comments %}
|
||||||
</div>
|
{{ render_comment(reply, level + 1) }}
|
||||||
|
{% endfor %}
|
||||||
|
</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'>
|
||||||
|
|||||||
@@ -2,9 +2,19 @@ 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 'katex/dist/katex.min.css';
|
||||||
|
|
||||||
const VOID_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
|
const VOID_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
|
||||||
|
const DANGEROUS_TAGS = ['svg', 'math'];
|
||||||
|
|
||||||
|
const latexDelimiters = [
|
||||||
|
{ left: '$$', right: '$$', display: true },
|
||||||
|
{ left: '\\[', right: '\\]', display: true },
|
||||||
|
{ left: '$', right: '$', display: false },
|
||||||
|
{ left: '\\(', right: '\\)', display: false }
|
||||||
|
];
|
||||||
|
|
||||||
function Article({ cache }) {
|
function Article({ cache }) {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
@@ -95,6 +105,11 @@ function Article({ cache }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (v.nodeName === '#text') {
|
if (v.nodeName === '#text') {
|
||||||
|
const text = v.data;
|
||||||
|
if (text.includes('\\[') || text.includes('\\(') || text.includes('$$') || /\$(?:[^$]*[^\s$])\$/.test(text)) {
|
||||||
|
return <Latex key={key} delimiters={latexDelimiters}>{text}</Latex>;
|
||||||
|
}
|
||||||
|
|
||||||
// Only wrap top-level text nodes in <p>
|
// Only wrap top-level text nodes in <p>
|
||||||
if (keyPrefix === '' && v.data.trim() !== '') {
|
if (keyPrefix === '' && v.data.trim() !== '') {
|
||||||
return <p key={key}>{v.data}</p>;
|
return <p key={key}>{v.data}</p>;
|
||||||
@@ -106,6 +121,10 @@ function Article({ cache }) {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (DANGEROUS_TAGS.includes(v.localName)) {
|
||||||
|
return <span key={key} dangerouslySetInnerHTML={{ __html: v.outerHTML }} />;
|
||||||
|
}
|
||||||
|
|
||||||
const Tag = v.localName;
|
const Tag = v.localName;
|
||||||
if (isCodeBlock(v)) {
|
if (isCodeBlock(v)) {
|
||||||
return (
|
return (
|
||||||
@@ -116,6 +135,12 @@ 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.indexOf('$') !== textContent.lastIndexOf('$') && !/\s/.test(textContent.charAt(textContent.length - 2)));
|
||||||
|
|
||||||
const props = { key: key };
|
const props = { key: key };
|
||||||
if (v.hasAttributes()) {
|
if (v.hasAttributes()) {
|
||||||
for (const attr of v.attributes) {
|
for (const attr of v.attributes) {
|
||||||
@@ -124,6 +149,28 @@ function Article({ cache }) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (isMath) {
|
||||||
|
let mathContent = v.textContent;
|
||||||
|
// align environment requires display math mode
|
||||||
|
if (mathContent.includes('\\begin{align')) {
|
||||||
|
const trimmed = mathContent.trim();
|
||||||
|
if (trimmed.startsWith('\\(')) {
|
||||||
|
// Replace \( and \) with \[ and \] to switch to display mode
|
||||||
|
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>;
|
||||||
|
}
|
||||||
|
|
||||||
if (VOID_ELEMENTS.includes(Tag)) {
|
if (VOID_ELEMENTS.includes(Tag)) {
|
||||||
return <Tag {...props} />;
|
return <Tag {...props} />;
|
||||||
}
|
}
|
||||||
@@ -166,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)}
|
||||||
|
|||||||
@@ -8,9 +8,19 @@ function Feed({ updateCache }) {
|
|||||||
const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false);
|
const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
const [loadingStatus, setLoadingStatus] = useState(null);
|
const [loadingStatus, setLoadingStatus] = useState(null);
|
||||||
|
const [filterSmallweb, setFilterSmallweb] = useState(() => localStorage.getItem('filterSmallweb') === 'true');
|
||||||
|
|
||||||
|
const handleFilterChange = e => {
|
||||||
|
const isChecked = e.target.checked;
|
||||||
|
setStories(false);
|
||||||
|
setFilterSmallweb(isChecked);
|
||||||
|
localStorage.setItem('filterSmallweb', isChecked);
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetch('/api')
|
const controller = new AbortController();
|
||||||
|
|
||||||
|
fetch(filterSmallweb ? '/api?smallweb=true' : '/api', { signal: controller.signal })
|
||||||
.then(res => {
|
.then(res => {
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
throw new Error(`Server responded with ${res.status} ${res.statusText}`);
|
throw new Error(`Server responded with ${res.status} ${res.statusText}`);
|
||||||
@@ -26,21 +36,19 @@ function Feed({ updateCache }) {
|
|||||||
|
|
||||||
if (!updated) return;
|
if (!updated) return;
|
||||||
|
|
||||||
if (!stories || !stories.length) {
|
|
||||||
setStories(newApiStories);
|
|
||||||
localStorage.setItem('stories', JSON.stringify(newApiStories));
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoadingStatus({ current: 0, total: newApiStories.length });
|
setLoadingStatus({ current: 0, total: newApiStories.length });
|
||||||
|
|
||||||
let currentStories = Array.isArray(stories) ? [...stories] : [];
|
let currentStories = Array.isArray(stories) ? [...stories] : [];
|
||||||
let preloadedCount = 0;
|
let preloadedCount = 0;
|
||||||
|
|
||||||
for (const [index, newStory] of newApiStories.entries()) {
|
for (const [index, newStory] of newApiStories.entries()) {
|
||||||
|
if (controller.signal.aborted) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
try {
|
try {
|
||||||
const controller = new AbortController();
|
const storyFetchController = new AbortController();
|
||||||
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10-second timeout
|
const timeoutId = setTimeout(() => storyFetchController.abort(), 10000); // 10-second timeout
|
||||||
const storyRes = await fetch('/api/' + newStory.id, { signal: controller.signal });
|
const storyRes = await fetch('/api/' + newStory.id, { signal: storyFetchController.signal });
|
||||||
clearTimeout(timeoutId);
|
clearTimeout(timeoutId);
|
||||||
|
|
||||||
if (!storyRes.ok) {
|
if (!storyRes.ok) {
|
||||||
@@ -89,11 +97,17 @@ function Feed({ updateCache }) {
|
|||||||
setLoadingStatus(null);
|
setLoadingStatus(null);
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
|
if (error.name === 'AbortError') {
|
||||||
|
console.log('Feed fetch aborted.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
const errorMessage = `Failed to fetch the main story list from the API. Your connection may be down or the server might be experiencing issues. ${error.toString()}.`;
|
const errorMessage = `Failed to fetch the main story list from the API. Your connection may be down or the server might be experiencing issues. ${error.toString()}.`;
|
||||||
setError(errorMessage);
|
setError(errorMessage);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}, [updateCache]);
|
|
||||||
|
return () => controller.abort();
|
||||||
|
}, [updateCache, filterSmallweb]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='container'>
|
<div className='container'>
|
||||||
@@ -101,7 +115,12 @@ function Feed({ updateCache }) {
|
|||||||
<title>QotNews</title>
|
<title>QotNews</title>
|
||||||
<meta name="robots" content="index" />
|
<meta name="robots" content="index" />
|
||||||
</Helmet>
|
</Helmet>
|
||||||
{loadingStatus && <p>Preloading stories {loadingStatus.current} / {loadingStatus.total}...</p>}
|
|
||||||
|
<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 &&
|
{error &&
|
||||||
<details style={{marginBottom: '1rem'}}>
|
<details style={{marginBottom: '1rem'}}>
|
||||||
<summary>Connection error? Click to expand.</summary>
|
<summary>Connection error? Click to expand.</summary>
|
||||||
@@ -109,6 +128,7 @@ function Feed({ updateCache }) {
|
|||||||
{stories && <p>Loaded feed from cache.</p>}
|
{stories && <p>Loaded feed from cache.</p>}
|
||||||
</details>
|
</details>
|
||||||
}
|
}
|
||||||
|
|
||||||
{stories ?
|
{stories ?
|
||||||
<div>
|
<div>
|
||||||
{stories.map(x =>
|
{stories.map(x =>
|
||||||
@@ -130,6 +150,8 @@ function Feed({ updateCache }) {
|
|||||||
:
|
:
|
||||||
<p>Loading...</p>
|
<p>Loading...</p>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
{loadingStatus && <p>Preloading stories {loadingStatus.current} / {loadingStatus.total}...</p>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,7 +11,8 @@
|
|||||||
border: 1px solid #828282;
|
border: 1px solid #828282;
|
||||||
}
|
}
|
||||||
|
|
||||||
.black button {
|
.black .menu button,
|
||||||
|
.black .story-text button {
|
||||||
background-color: #444444;
|
background-color: #444444;
|
||||||
border-color: #bbb;
|
border-color: #bbb;
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
@@ -66,3 +67,11 @@
|
|||||||
.black .comment.lined {
|
.black .comment.lined {
|
||||||
border-left: 1px solid #444444;
|
border-left: 1px solid #444444;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.black .checkbox:checked + label::after {
|
||||||
|
border-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .copy-button {
|
||||||
|
color: #828282;
|
||||||
|
}
|
||||||
|
|||||||
@@ -11,7 +11,8 @@
|
|||||||
border: 1px solid #828282;
|
border: 1px solid #828282;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark button {
|
.dark .menu button,
|
||||||
|
.dark .story-text button {
|
||||||
background-color: #444444;
|
background-color: #444444;
|
||||||
border-color: #bbb;
|
border-color: #bbb;
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
@@ -62,3 +63,11 @@
|
|||||||
.dark .comment.lined {
|
.dark .comment.lined {
|
||||||
border-left: 1px solid #444444;
|
border-left: 1px solid #444444;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dark .checkbox:checked + label::after {
|
||||||
|
border-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .copy-button {
|
||||||
|
color: #828282;
|
||||||
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
@@ -305,8 +312,81 @@ button.comment {
|
|||||||
|
|
||||||
.copy-button {
|
.copy-button {
|
||||||
font: 1.5rem/1 'icomoon2';
|
font: 1.5rem/1 'icomoon2';
|
||||||
|
color: #828282;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox + label {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 1.75rem;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox + label::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0.1em;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
border: 1px solid #828282;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox:checked + label::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0.35rem;
|
||||||
|
top: 0.2em;
|
||||||
|
width: 0.3rem;
|
||||||
|
height: 0.6rem;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -20,7 +20,8 @@
|
|||||||
background-color: #690000;
|
background-color: #690000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.red button {
|
.red .menu button,
|
||||||
|
.red .story-text button {
|
||||||
background-color: #440000;
|
background-color: #440000;
|
||||||
border-color: #b00;
|
border-color: #b00;
|
||||||
color: #b00;
|
color: #b00;
|
||||||
@@ -80,3 +81,15 @@
|
|||||||
.red .dot {
|
.red .dot {
|
||||||
background-color: #440000;
|
background-color: #440000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.red .checkbox + label::before {
|
||||||
|
border: 1px solid #690000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red .checkbox:checked + label::after {
|
||||||
|
border-color: #dd0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red .copy-button {
|
||||||
|
color: #690000;
|
||||||
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -3169,6 +3169,11 @@ commander@^2.11.0, commander@^2.20.0:
|
|||||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
|
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
|
||||||
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
|
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
|
||||||
|
|
||||||
|
commander@^8.3.0:
|
||||||
|
version "8.3.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
|
||||||
|
integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
|
||||||
|
|
||||||
commander@~2.19.0:
|
commander@~2.19.0:
|
||||||
version "2.19.0"
|
version "2.19.0"
|
||||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
|
resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
|
||||||
@@ -6856,6 +6861,13 @@ jsx-ast-utils@^2.1.0, jsx-ast-utils@^2.2.1:
|
|||||||
array-includes "^3.1.1"
|
array-includes "^3.1.1"
|
||||||
object.assign "^4.1.0"
|
object.assign "^4.1.0"
|
||||||
|
|
||||||
|
katex@^0.16.0, katex@^0.16.25:
|
||||||
|
version "0.16.25"
|
||||||
|
resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.25.tgz#61699984277e3bdb3e89e0e446b83cd0a57d87db"
|
||||||
|
integrity sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==
|
||||||
|
dependencies:
|
||||||
|
commander "^8.3.0"
|
||||||
|
|
||||||
killable@^1.0.0:
|
killable@^1.0.0:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
|
resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
|
||||||
@@ -9119,6 +9131,13 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.4:
|
|||||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||||
|
|
||||||
|
react-latex-next@^3.0.0:
|
||||||
|
version "3.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-latex-next/-/react-latex-next-3.0.0.tgz#3e347a13b1e701439b5fa52f75201bc86166854e"
|
||||||
|
integrity sha512-x70f1b1G7TronVigsRgKHKYYVUNfZk/3bciFyYX1lYLQH2y3/TXku3+5Vap8MDbJhtopePSYBsYWS6jhzIdz+g==
|
||||||
|
dependencies:
|
||||||
|
katex "^0.16.0"
|
||||||
|
|
||||||
react-router-dom@^5.0.1:
|
react-router-dom@^5.0.1:
|
||||||
version "5.3.4"
|
version "5.3.4"
|
||||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.4.tgz#2ed62ffd88cae6db134445f4a0c0ae8b91d2e5e6"
|
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.4.tgz#2ed62ffd88cae6db134445f4a0c0ae8b91d2e5e6"
|
||||||
|
|||||||
Reference in New Issue
Block a user