Compare commits
21 Commits
ff1297e507
...
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 |
@@ -41,9 +41,6 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="nojs">
|
||||
<noscript></noscript>
|
||||
</div>
|
||||
<div id="root">
|
||||
<div class="container menu">
|
||||
<p>
|
||||
@@ -81,21 +78,26 @@
|
||||
<div class="story-text">{{ story.text | safe }}</div>
|
||||
{% elif show_comments %}
|
||||
{% 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">
|
||||
<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>
|
||||
</p>
|
||||
</div>
|
||||
<div class="text">{{ (comment.text | safe) if comment.text else '<p>[Empty / deleted comment]</p>' }}</div>
|
||||
{% for reply in comment.comments %}
|
||||
{{ render_comment(reply, level + 1) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if comment.comments %}
|
||||
<dl>
|
||||
{% for reply in comment.comments %}
|
||||
{{ render_comment(reply, level + 1) }}
|
||||
{% endfor %}
|
||||
</dl>
|
||||
{% endif %}
|
||||
</dd>
|
||||
{% endmacro %}
|
||||
<div class="comments">
|
||||
<dl class="comments">
|
||||
{% for comment in story.comments %}{{ render_comment(comment, 0) }}{% endfor %}
|
||||
</div>
|
||||
</dl>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class='dot toggleDot'>
|
||||
|
||||
@@ -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, 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';
|
||||
|
||||
@@ -106,7 +106,7 @@ function Article({ cache }) {
|
||||
|
||||
if (v.nodeName === '#text') {
|
||||
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>;
|
||||
}
|
||||
|
||||
@@ -139,7 +139,7 @@ function Article({ cache }) {
|
||||
const isMath = (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 };
|
||||
if (v.hasAttributes()) {
|
||||
@@ -213,7 +213,7 @@ function Article({ cache }) {
|
||||
<h1>{story.title} <button className='copy-button' onClick={copyLink}>{copyButtonText}</button></h1>
|
||||
|
||||
<div className='info'>
|
||||
Source: {sourceLink(story)}
|
||||
Source: {sourceLink(story)} | {similarLink(story)}
|
||||
</div>
|
||||
|
||||
{infoLine(story)}
|
||||
|
||||
@@ -12,9 +12,9 @@ function Feed({ updateCache }) {
|
||||
|
||||
const handleFilterChange = e => {
|
||||
const isChecked = e.target.checked;
|
||||
setStories(false);
|
||||
setFilterSmallweb(isChecked);
|
||||
localStorage.setItem('filterSmallweb', isChecked);
|
||||
setStories(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -36,11 +36,6 @@ function Feed({ updateCache }) {
|
||||
|
||||
if (!updated) return;
|
||||
|
||||
if (!stories || !stories.length) {
|
||||
setStories(newApiStories);
|
||||
localStorage.setItem('stories', JSON.stringify(newApiStories));
|
||||
}
|
||||
|
||||
setLoadingStatus({ current: 0, total: newApiStories.length });
|
||||
|
||||
let currentStories = Array.isArray(stories) ? [...stories] : [];
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
border: 1px solid #828282;
|
||||
}
|
||||
|
||||
.black button {
|
||||
.black .menu button,
|
||||
.black .story-text button {
|
||||
background-color: #444444;
|
||||
border-color: #bbb;
|
||||
color: #ddd;
|
||||
@@ -68,5 +69,9 @@
|
||||
}
|
||||
|
||||
.black .checkbox:checked + label::after {
|
||||
border-color: #ddd;
|
||||
border-color: #eee;
|
||||
}
|
||||
|
||||
.black .copy-button {
|
||||
color: #828282;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
border: 1px solid #828282;
|
||||
}
|
||||
|
||||
.dark button {
|
||||
.dark .menu button,
|
||||
.dark .story-text button {
|
||||
background-color: #444444;
|
||||
border-color: #bbb;
|
||||
color: #ddd;
|
||||
@@ -64,5 +65,9 @@
|
||||
}
|
||||
|
||||
.dark .checkbox:checked + label::after {
|
||||
border-color: #ddd;
|
||||
border-color: #eee;
|
||||
}
|
||||
|
||||
.dark .copy-button {
|
||||
color: #828282;
|
||||
}
|
||||
|
||||
@@ -189,6 +189,13 @@ span.source {
|
||||
|
||||
.comments {
|
||||
margin-left: -1.25rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.comments dl, .comments dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.comment {
|
||||
@@ -305,6 +312,7 @@ button.comment {
|
||||
|
||||
.copy-button {
|
||||
font: 1.5rem/1 'icomoon2';
|
||||
color: #828282;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -347,7 +355,38 @@ button.comment {
|
||||
top: 0.2em;
|
||||
width: 0.3rem;
|
||||
height: 0.6rem;
|
||||
border: solid #000;
|
||||
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;
|
||||
}
|
||||
|
||||
.red button {
|
||||
.red .menu button,
|
||||
.red .story-text button {
|
||||
background-color: #440000;
|
||||
border-color: #b00;
|
||||
color: #b00;
|
||||
@@ -86,5 +87,9 @@
|
||||
}
|
||||
|
||||
.red .checkbox:checked + label::after {
|
||||
border-color: #aa0000;
|
||||
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 { Link } from 'react-router-dom';
|
||||
|
||||
@@ -9,6 +9,13 @@ 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
|
||||
@@ -32,6 +39,8 @@ export const ToggleDot = ({ id, article }) => (
|
||||
);
|
||||
|
||||
export const BackwardDot = () => {
|
||||
const [showTooltip, setShowTooltip] = useState(false);
|
||||
|
||||
const goBackward = () => {
|
||||
localStorage.setItem('scrollLock', 'True');
|
||||
window.history.back();
|
||||
@@ -42,15 +51,25 @@ export const BackwardDot = () => {
|
||||
if (!document.fullscreenElement) return null;
|
||||
|
||||
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>
|
||||
<span className="tooltiptext">Browser Back</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ForwardDot = () => {
|
||||
const [showTooltip, setShowTooltip] = useState(false);
|
||||
|
||||
const goForward = () => {
|
||||
localStorage.setItem('scrollLock', 'True');
|
||||
window.history.forward();
|
||||
@@ -60,10 +79,18 @@ export const ForwardDot = () => {
|
||||
if (!isMobile) return null;
|
||||
|
||||
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>
|
||||
<span className="tooltiptext">Browser Forward</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user