From 00eb9ae55bc4d1c2bd48e4c95798cd5a6a098703 Mon Sep 17 00:00:00 2001 From: Gigi Date: Wed, 26 Nov 2025 22:28:27 +0100 Subject: [PATCH 1/5] style: use single column layout on explore --- src/styles/components/cards.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css index a2a35724..7d7ded70 100644 --- a/src/styles/components/cards.css +++ b/src/styles/components/cards.css @@ -272,7 +272,7 @@ .explore-loading { min-height: 0; padding: 0.25rem 0; } .explore-error { color: rgb(239 68 68); /* red-500 */ } .explore-empty { color: var(--color-text-secondary); } -.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; } +.explore-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; } .blog-post-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; } .blog-post-card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15); } .blog-post-card.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #fde047) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #fde047) 25%, transparent); } From 934bee2d62f3f9ef36bec5864ffd30b28e1e8cd3 Mon Sep 17 00:00:00 2001 From: Gigi Date: Wed, 26 Nov 2025 22:32:47 +0100 Subject: [PATCH 2/5] feat: render highlight context and colored highlight text --- src/components/HighlightItem.tsx | 34 +++++++++++++++++++++++++++++++- src/styles/layout/highlights.css | 20 +++++++++++++++++++ 2 files changed, 53 insertions(+), 1 deletion(-) diff --git a/src/components/HighlightItem.tsx b/src/components/HighlightItem.tsx index 6a18f0cb..affa64ab 100644 --- a/src/components/HighlightItem.tsx +++ b/src/components/HighlightItem.tsx @@ -509,6 +509,38 @@ export const HighlightItem: React.FC = ({ } } + 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} + {content} + {after} + + ) + } + + // Fallback: show context and the core highlight separately + return ( + <> + {context} +
+ {content} + + ) + } + + return {content} + } + return ( <>
= ({ style={{ cursor: 'pointer' }} title="Go to quote in article" > - {highlight.content} + {renderHighlightText()} {showCitation && ( diff --git a/src/styles/layout/highlights.css b/src/styles/layout/highlights.css index 03f2961e..e5905f5d 100644 --- a/src/styles/layout/highlights.css +++ b/src/styles/layout/highlights.css @@ -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; } From 785be6aa9e16cbb6e07c4344f2b52d8ba285ff38 Mon Sep 17 00:00:00 2001 From: Gigi Date: Wed, 26 Nov 2025 23:12:48 +0100 Subject: [PATCH 3/5] style: make highlight text wrapping more aggressive --- src/styles/layout/highlights.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/styles/layout/highlights.css b/src/styles/layout/highlights.css index e5905f5d..4bb2f515 100644 --- a/src/styles/layout/highlights.css +++ b/src/styles/layout/highlights.css @@ -149,7 +149,20 @@ .highlight-item.level-nostrverse .highlight-quote-icon { color: var(--highlight-color-nostrverse, #9333ea); } .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-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; + /* Aggressive wrapping for long words/URLs inside highlights */ + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + hyphens: auto; +} .highlight-core { background: color-mix(in srgb, var(--highlight-color, #fde047) 35%, transparent); padding: 0 0.1em; From d50276adca46aae0fb25b0c75fbab28406dadecf Mon Sep 17 00:00:00 2001 From: Gigi Date: Wed, 26 Nov 2025 23:15:45 +0100 Subject: [PATCH 4/5] style: align explore width with reader --- src/styles/components/cards.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css index 7d7ded70..de251e2f 100644 --- a/src/styles/components/cards.css +++ b/src/styles/components/cards.css @@ -263,7 +263,12 @@ .large-read-button:hover { background: var(--color-primary-hover); } /* Blog cards (Explore) */ -.explore-container { padding: 2rem; max-width: 1400px; margin: 0 auto; min-height: 100vh; } +.explore-container { + padding: 2rem; + max-width: var(--main-max-width); + margin: 0 auto; + min-height: 100vh; +} .explore-header { text-align: center; margin-bottom: 3rem; } .explore-header h1 { font-size: 2.5rem; margin: 0 0 1rem 0; color: var(--color-primary); display: flex; align-items: center; justify-content: center; gap: 1rem; } .explore-subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; } From bf81cd51b7e6b196023e49ea429143f36965dbc8 Mon Sep 17 00:00:00 2001 From: Gigi Date: Wed, 26 Nov 2025 23:35:44 +0100 Subject: [PATCH 5/5] style: use multi-column layout for explore writings --- src/components/Explore.tsx | 4 ++-- src/styles/components/cards.css | 10 +++++++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/Explore.tsx b/src/components/Explore.tsx index 5c4a4701..ac2a43e5 100644 --- a/src/components/Explore.tsx +++ b/src/components/Explore.tsx @@ -595,7 +595,7 @@ const Explore: React.FC = ({ relayPool, eventStore, settings, acti case 'highlights': if (showSkeletons) { return ( -
+
{Array.from({ length: 8 }).map((_, i) => ( ))} @@ -607,7 +607,7 @@ const Explore: React.FC = ({ relayPool, eventStore, settings, acti No highlights to show for the selected scope.
) : ( -
+
{classifiedHighlights.map((highlight) => (