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

feat: render highlight context and colored highlight text

Browse Source
This commit is contained in:
Gigi
2025-11-26 22:32:47 +01:00
parent 00eb9ae55b
commit 934bee2d62
2 changed files with 53 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/HighlightItem.tsx
View File

@@ -509,6 +509,38 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
}
}
const renderHighlightText = () => {
const { content, context } = highlight
if (context && context.length > 0) {
const index = context.indexOf(content)
if (index >= 0) {
const before = context.slice(0, index)
const after = context.slice(index + content.length)
return (
<>
{before}
<span className="highlight-core">{content}</span>
{after}
</>
)
}
// Fallback: show context and the core highlight separately
return (
<>
<span className="highlight-context-prefix">{context}</span>
<br />
<span className="highlight-core">{content}</span>
</>
)
}
return <span className="highlight-core">{content}</span>
}
return (
<>
<div
@@ -588,7 +620,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
style={{ cursor: 'pointer' }}
title="Go to quote in article"
>
{highlight.content}
{renderHighlightText()}
</blockquote>
{showCitation && (

20
src/styles/layout/highlights.css
View File

@@ -150,6 +150,26 @@
.highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 2.25rem 0.75rem 2.5rem; }
.highlight-text { margin: 0; padding: 0 0 0 1.25rem; font-style: italic; color: var(--color-text); line-height: 1.6; border-left: none; font-size: 0.95rem; }
.highlight-core {
background: color-mix(in srgb, var(--highlight-color, #fde047) 35%, transparent);
padding: 0 0.1em;
border-radius: 3px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.highlight-item.level-mine .highlight-core {
background: color-mix(in srgb, var(--highlight-color-mine, #fde047) 40%, transparent);
}
.highlight-item.level-friends .highlight-core {
background: color-mix(in srgb, var(--highlight-color-friends, #f97316) 35%, transparent);
}
.highlight-item.level-nostrverse .highlight-core {
background: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 35%, transparent);
}
.highlight-context-prefix {
display: block;
margin-bottom: 0.35rem;
}
.highlight-citation { margin-left: 1.25rem; font-size: 0.8rem; color: var(--color-text-secondary); font-style: normal; padding-top: 0.25rem; }
.highlight-comment { margin-top: 0.5rem; padding: 0.75rem; border-radius: 4px; font-size: 0.875rem; color: var(--color-text); line-height: 1.5; display: flex; gap: 0.5rem; align-items: flex-start; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; min-width: 0; }
.highlight-comment-icon { flex-shrink: 0; margin-top: 0.125rem; }