aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-17 06:34:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #44 from dergigi/reader-view-adjustments

Browse Source 
Improve reader view typography and add configurable link colors
This commit is contained in:
Gigi
2025-11-07 22:43:03 +01:00
committed by GitHub
parent 4ab34456d1 85d256b47b
commit 6445445e5d
9 changed files with 90 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ColorPicker.tsx
View File

@@ -4,19 +4,20 @@ import { HIGHLIGHT_COLORS } from '../utils/colorHelpers'
interface ColorPickerProps {
selectedColor: string
onColorChange: (color: string) => void
colors?: typeof HIGHLIGHT_COLORS
}
const ColorPicker: React.FC<ColorPickerProps> = ({ selectedColor, onColorChange }) => {
const ColorPicker: React.FC<ColorPickerProps> = ({ selectedColor, onColorChange, colors = HIGHLIGHT_COLORS }) => {
return (
<div className="color-picker">
{HIGHLIGHT_COLORS.map(color => (
{colors.map(color => (
<button
key={color.value}
onClick={() => onColorChange(color.value)}
className={`color-swatch ${selectedColor === color.value ? 'active' : ''}`}
style={{ backgroundColor: color.value }}
title={color.name}
aria-label={`${color.name} highlight color`}
aria-label={`${color.name} color`}
/>
))}
</div>

2
src/components/Settings.tsx
View File

@@ -51,6 +51,8 @@ const DEFAULT_SETTINGS: UserSettings = {
ttsDetectContentLanguage: true,
ttsLanguageMode: 'content',
ttsDefaultSpeed: 2.1,
linkColorDark: '#38bdf8',
linkColorLight: '#3b82f6',
}
interface SettingsProps {

38
src/components/Settings/ReadingDisplaySettings.tsx
View File

@@ -5,7 +5,7 @@ import IconButton from '../IconButton'
import ColorPicker from '../ColorPicker'
import FontSelector from '../FontSelector'
import { getFontFamily } from '../../utils/fontLoader'
import { hexToRgb } from '../../utils/colorHelpers'
import { hexToRgb, LINK_COLORS_DARK, LINK_COLORS_LIGHT } from '../../utils/colorHelpers'
interface ReadingDisplaySettingsProps {
settings: UserSettings
@@ -14,6 +14,23 @@ interface ReadingDisplaySettingsProps {
const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ settings, onUpdate }) => {
const previewFontFamily = getFontFamily(settings.readingFont || 'source-serif-4')
// Determine current effective theme for color palette selection
const currentTheme = settings.theme ?? 'system'
const isDark = currentTheme === 'dark' ||
(currentTheme === 'system' && (typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)').matches : true))
const linkColors = isDark ? LINK_COLORS_DARK : LINK_COLORS_LIGHT
const currentLinkColor = isDark
? (settings.linkColorDark || '#38bdf8')
: (settings.linkColorLight || '#3b82f6')
const handleLinkColorChange = (color: string) => {
if (isDark) {
onUpdate({ linkColorDark: color })
} else {
onUpdate({ linkColorLight: color })
}
}
return (
<div className="settings-section">
@@ -109,6 +126,17 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
</div>
</div>
<div className="setting-group setting-inline">
<label className="setting-label">Link Color</label>
<div className="setting-control">
<ColorPicker
selectedColor={currentLinkColor}
onColorChange={handleLinkColorChange}
colors={linkColors}
/>
</div>
</div>
<div className="setting-group setting-inline">
<label className="setting-label">Font Size</label>
<div className="setting-control">
@@ -179,14 +207,16 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
fontFamily: previewFontFamily,
fontSize: `${settings.fontSize || 21}px`,
'--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00'),
'--paragraph-alignment': settings.paragraphAlignment || 'justify'
'--paragraph-alignment': settings.paragraphAlignment || 'justify',
'--color-link': isDark
? (settings.linkColorDark || '#38bdf8')
: (settings.linkColorLight || '#3b82f6')
} as React.CSSProperties}
>
<h3>The Quick Brown Fox</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityMine !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-mine` : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityFriends !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-friends` : ""}>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityNostrverse !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-nostrverse` : ""}>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</span> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Totam rem aperiam, eaque ipsa quae ab illo <a href="/a/naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqq8ky6t5vdhkjm3dd9ej6arfd4jszh5rdq">inventore veritatis</a> et quasi architecto beatae vitae dicta sunt explicabo. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityNostrverse !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-nostrverse` : ""}>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</span> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
</div>
</div>
</div>

6
src/hooks/useSettings.ts
View File

@@ -68,6 +68,12 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
root.setProperty('--highlight-color-friends', settings.highlightColorFriends || '#f97316')
root.setProperty('--highlight-color-nostrverse', settings.highlightColorNostrverse || '#9333ea')
// Set link colors for dark and light themes separately
const darkLinkColor = settings.linkColorDark || '#38bdf8'
const lightLinkColor = settings.linkColorLight || '#3b82f6'
root.setProperty('--color-link-dark', darkLinkColor)
root.setProperty('--color-link-light', lightLinkColor)
// Set paragraph alignment
root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')

3
src/services/settingsService.ts
View File

@@ -74,6 +74,9 @@ export interface UserSettings {
ttsLanguageMode?: 'system' | 'content' | string // default: 'content', can also be language code like 'en', 'es', etc.
// Text-to-Speech settings
ttsDefaultSpeed?: number // default: 2.1
// Link color for article content (theme-specific)
linkColorDark?: string // default: #38bdf8 (sky-400)
linkColorLight?: string // default: #3b82f6 (blue-500)
}
/**

4
src/styles/base/variables.css
View File

@@ -57,6 +57,7 @@
--color-text-muted: #71717a; /* zinc-500 */
--color-primary: #6366f1; /* indigo-500 */
--color-primary-hover: #4f46e5; /* indigo-600 */
--color-link: var(--color-link-dark, #38bdf8); /* sky-400 */
}
/* Light theme */
@@ -73,6 +74,7 @@
--color-text-muted: #6b7280; /* gray-500 */
--color-primary: #4f46e5; /* indigo-600 */
--color-primary-hover: #4338ca; /* indigo-700 */
--color-link: var(--color-link-light, #3b82f6); /* blue-500 */
/* Highlight colors for light theme - use same Tailwind colors */
--highlight-color-mine: #fde047; /* yellow-300 */
@@ -97,6 +99,7 @@
--color-text-muted: #71717a;
--color-primary: #6366f1;
--color-primary-hover: #4f46e5;
--color-link: var(--color-link-dark, #38bdf8);
}
}
@@ -112,6 +115,7 @@
--color-text-muted: #6b7280;
--color-primary: #4f46e5;
--color-primary-hover: #4338ca;
--color-link: var(--color-link-light, #3b82f6);
/* Standard highlight colors */
--highlight-color-mine: #fde047;

7
src/styles/components/forms.css
View File

@@ -43,6 +43,13 @@
word-wrap: break-word;
text-align: var(--paragraph-alignment, justify);
}
.preview-content a {
color: var(--color-link);
text-decoration: none;
}
.preview-content a:hover {
text-decoration: underline;
}
.setting-select { width: 100%; padding: 0.5rem 1.75rem 0.5rem 0.5rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 4px; color: var(--color-text); font-size: 1rem; }
.setting-inline .setting-select { width: auto; min-width: 200px; flex: 1; }
.setting-select:focus { outline: none; border-color: var(--color-primary); }

19
src/styles/components/reader.css
View File

@@ -71,7 +71,7 @@
font-size: 2.25rem; /* text-4xl */
font-weight: 700;
line-height: 1.2;
margin-top: 2rem;
margin-top: 5rem;
margin-bottom: 1rem;
color: var(--color-text);
}
@@ -79,7 +79,7 @@
font-size: 1.875rem; /* text-3xl */
font-weight: 600;
line-height: 1.3;
margin-top: 1.75rem;
margin-top: 4.5rem;
margin-bottom: 0.875rem;
color: var(--color-text);
}
@@ -87,7 +87,7 @@
font-size: 1.5rem; /* text-2xl */
font-weight: 600;
line-height: 1.4;
margin-top: 1.5rem;
margin-top: 4rem;
margin-bottom: 0.75rem;
color: var(--color-text);
}
@@ -95,7 +95,7 @@
font-size: 1.25rem; /* text-xl */
font-weight: 600;
line-height: 1.4;
margin-top: 1.25rem;
margin-top: 3.5rem;
margin-bottom: 0.625rem;
color: var(--color-text);
}
@@ -103,7 +103,7 @@
font-size: 1.125rem; /* text-lg */
font-weight: 600;
line-height: 1.4;
margin-top: 1rem;
margin-top: 3rem;
margin-bottom: 0.5rem;
color: var(--color-text);
}
@@ -111,12 +111,13 @@
font-size: 1rem; /* text-base */
font-weight: 600;
line-height: 1.4;
margin-top: 1rem;
margin-top: 3rem;
margin-bottom: 0.5rem;
color: var(--color-text);
}
.reader-markdown p { margin: 0.5rem 0; }
.reader-html p, .reader-html div, .reader-html span, .reader-html li, .reader-html td, .reader-html th { font-size: 1em !important; }
.reader-markdown p { margin: 1.5rem 0; }
.reader-html p { margin: 1.5rem 0; }
.reader-html div, .reader-html span, .reader-html li, .reader-html td, .reader-html th { font-size: 1em !important; }
/* Lists */
.reader-markdown ul, .reader-html ul {
list-style-type: disc;
@@ -159,7 +160,7 @@
opacity: 0.69;
margin: 2.5rem 0;
}
.reader-markdown a { color: var(--color-primary); text-decoration: none; }
.reader-markdown a { color: var(--color-link); text-decoration: none; }
.reader-markdown a:hover { text-decoration: underline; }
.reader-markdown code { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
.reader-markdown pre { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; line-height: 1.5; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }

20
src/utils/colorHelpers.ts
View File

@@ -15,3 +15,23 @@ export const HIGHLIGHT_COLORS = [
{ name: 'Blue', value: '#3b82f6' }, // blue-500
{ name: 'Purple', value: '#9333ea' } // purple-600
]
// Tailwind color palette for link colors - optimized for dark themes
export const LINK_COLORS_DARK = [
{ name: 'Sky Blue', value: '#38bdf8' }, // sky-400
{ name: 'Cyan', value: '#22d3ee' }, // cyan-400
{ name: 'Light Blue', value: '#60a5fa' }, // blue-400
{ name: 'Indigo Light', value: '#818cf8' }, // indigo-400
{ name: 'Blue', value: '#3b82f6' }, // blue-500
{ name: 'Purple', value: '#9333ea' } // purple-600
]
// Tailwind color palette for link colors - optimized for light themes
export const LINK_COLORS_LIGHT = [
{ name: 'Blue', value: '#3b82f6' }, // blue-500
{ name: 'Indigo', value: '#6366f1' }, // indigo-500
{ name: 'Purple', value: '#9333ea' }, // purple-600
{ name: 'Sky Blue', value: '#0ea5e9' }, // sky-500 (darker for light bg)
{ name: 'Cyan', value: '#06b6d4' }, // cyan-500 (darker for light bg)
{ name: 'Teal', value: '#14b8a6' } // teal-500
]