mirror of
https://github.com/dergigi/boris.git
synced 2026-02-18 13:34:38 +01:00
feat: replace ContentWithResolvedProfiles with comprehensive RichContent component
- Create RichContent component to handle ALL nostr URI types - Support npub, nprofile, note, nevent, naddr with profile resolution - Handle both 'nostr:npub1...' and plain 'npub1...' formats - Replace all ContentWithResolvedProfiles usages in CardView, LargeView, and CompactView - Now all bookmark content properly displays resolved nostr mentions
This commit is contained in:
@@ -5,7 +5,7 @@ import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
|
||||
import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
|
||||
import { IndividualBookmark } from '../../types/bookmarks'
|
||||
import { formatDate, renderParsedContent } from '../../utils/bookmarkUtils'
|
||||
import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
|
||||
import RichContent from '../RichContent'
|
||||
import { classifyUrl } from '../../utils/helpers'
|
||||
import { useImageCache } from '../../hooks/useImageCache'
|
||||
import { getPreviewImage, fetchOgImage } from '../../utils/imagePreview'
|
||||
@@ -147,19 +147,15 @@ export const CardView: React.FC<CardViewProps> = ({
|
||||
)}
|
||||
|
||||
{isArticle && articleSummary ? (
|
||||
<div className="bookmark-content article-summary">
|
||||
<ContentWithResolvedProfiles content={articleSummary} />
|
||||
</div>
|
||||
<RichContent content={articleSummary} className="bookmark-content article-summary" />
|
||||
) : bookmark.parsedContent ? (
|
||||
<div className="bookmark-content">
|
||||
{shouldTruncate && bookmark.content
|
||||
? <ContentWithResolvedProfiles content={`${bookmark.content.slice(0, 210).trimEnd()}…`} />
|
||||
? <RichContent content={`${bookmark.content.slice(0, 210).trimEnd()}…`} className="" />
|
||||
: renderParsedContent(bookmark.parsedContent)}
|
||||
</div>
|
||||
) : bookmark.content && (
|
||||
<div className="bookmark-content">
|
||||
<ContentWithResolvedProfiles content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
|
||||
</div>
|
||||
<RichContent content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
|
||||
)}
|
||||
|
||||
{contentLength > 210 && (
|
||||
|
||||
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
|
||||
import { IndividualBookmark } from '../../types/bookmarks'
|
||||
import { formatDateCompact } from '../../utils/bookmarkUtils'
|
||||
import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
|
||||
import RichContent from '../RichContent'
|
||||
|
||||
interface CompactViewProps {
|
||||
bookmark: IndividualBookmark
|
||||
@@ -66,7 +66,7 @@ export const CompactView: React.FC<CompactViewProps> = ({
|
||||
</span>
|
||||
{displayText && (
|
||||
<div className="compact-text">
|
||||
<ContentWithResolvedProfiles content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} />
|
||||
<RichContent content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} className="" />
|
||||
</div>
|
||||
)}
|
||||
<span className="bookmark-date-compact">{formatDateCompact(bookmark.created_at)}</span>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
|
||||
import { IndividualBookmark } from '../../types/bookmarks'
|
||||
import { formatDate } from '../../utils/bookmarkUtils'
|
||||
import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
|
||||
import RichContent from '../RichContent'
|
||||
import { IconGetter } from './shared'
|
||||
import { useImageCache } from '../../hooks/useImageCache'
|
||||
import { getEventUrl } from '../../config/nostrGateways'
|
||||
@@ -95,13 +95,9 @@ export const LargeView: React.FC<LargeViewProps> = ({
|
||||
|
||||
<div className="large-content">
|
||||
{isArticle && articleSummary ? (
|
||||
<div className="large-text article-summary">
|
||||
<ContentWithResolvedProfiles content={articleSummary} />
|
||||
</div>
|
||||
<RichContent content={articleSummary} className="large-text article-summary" />
|
||||
) : bookmark.content && (
|
||||
<div className="large-text">
|
||||
<ContentWithResolvedProfiles content={bookmark.content} />
|
||||
</div>
|
||||
<RichContent content={bookmark.content} className="large-text" />
|
||||
)}
|
||||
|
||||
{/* Reading progress indicator for articles - shown only if there's progress */}
|
||||
|
||||
77
src/components/RichContent.tsx
Normal file
77
src/components/RichContent.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import React from 'react'
|
||||
import NostrMentionLink from './NostrMentionLink'
|
||||
|
||||
interface RichContentProps {
|
||||
content: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Component to render text content with:
|
||||
* - Clickable links
|
||||
* - Resolved nostr mentions (npub, nprofile, note, nevent, naddr)
|
||||
* - Plain text
|
||||
*
|
||||
* Handles both nostr:npub1... and plain npub1... formats
|
||||
*/
|
||||
const RichContent: React.FC<RichContentProps> = ({
|
||||
content,
|
||||
className = 'bookmark-content'
|
||||
}) => {
|
||||
// Pattern to match:
|
||||
// 1. nostr: URIs (nostr:npub1..., nostr:note1..., etc.)
|
||||
// 2. Plain nostr identifiers (npub1..., nprofile1..., note1..., etc.)
|
||||
// 3. http(s) URLs
|
||||
const pattern = /(nostr:[a-z0-9]+|npub1[a-z0-9]+|nprofile1[a-z0-9]+|note1[a-z0-9]+|nevent1[a-z0-9]+|naddr1[a-z0-9]+|https?:\/\/[^\s]+)/gi
|
||||
|
||||
const parts = content.split(pattern)
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{parts.map((part, index) => {
|
||||
// Handle nostr: URIs
|
||||
if (part.startsWith('nostr:')) {
|
||||
return (
|
||||
<NostrMentionLink
|
||||
key={index}
|
||||
nostrUri={part}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// Handle plain nostr identifiers (add nostr: prefix)
|
||||
if (
|
||||
part.match(/^(npub1|nprofile1|note1|nevent1|naddr1)[a-z0-9]+$/i)
|
||||
) {
|
||||
return (
|
||||
<NostrMentionLink
|
||||
key={index}
|
||||
nostrUri={`nostr:${part}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// Handle http(s) URLs
|
||||
if (part.match(/^https?:\/\//)) {
|
||||
return (
|
||||
<a
|
||||
key={index}
|
||||
href={part}
|
||||
className="nostr-link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{part}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
// Plain text
|
||||
return <React.Fragment key={index}>{part}</React.Fragment>
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RichContent
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react'
|
||||
import { formatDistanceToNow, differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays, differenceInMonths, differenceInYears } from 'date-fns'
|
||||
import { ParsedContent, ParsedNode, IndividualBookmark } from '../types/bookmarks'
|
||||
import ResolvedMention from '../components/ResolvedMention'
|
||||
// Note: ContentWithResolvedProfiles is imported by components directly to keep this file component-only for fast refresh
|
||||
// Note: RichContent is imported by components directly to keep this file component-only for fast refresh
|
||||
|
||||
export const formatDate = (timestamp: number) => {
|
||||
const date = new Date(timestamp * 1000)
|
||||
|
||||
Reference in New Issue
Block a user