-
)}
+
+ {/* Highlight sources */}
+ {showHighlightSources && parsedContent.highlightSources.length > 0 && (
+ Images in this article:
-
- {parsedContent.media.map((media, index) => (
-
- )}
+ )}
- {/* Links summary with OpenGraph previews */}
- {parsedContent.links.length > 0 && (
-
-
+
+
+
+
+ {/* Media thumbnails */}
+ {parsedContent.media.length > 0 && (
+
-
+
- ))}
- Images in this article:
+
+ {parsedContent.media.map((media, index) => (
+
+
+ ))}
+
-
- )}
+ {/* Links summary with OpenGraph previews */}
+ {parsedContent.links.length > 0 && (
+ Links in this article:
-
- {parsedContent.links.map((link, index) => (
-
-
+
+ )}
- {/* Nostr links summary */}
- {parsedContent.nostrLinks.length > 0 && (
- Links in this article:
+
+ {parsedContent.links.map((link, index) => (
+
+
-
)
diff --git a/src/components/UniversalContent/HighlightSourcePreview.tsx b/src/components/UniversalContent/HighlightSourcePreview.tsx
new file mode 100644
index 0000000..8195dcf
--- /dev/null
+++ b/src/components/UniversalContent/HighlightSourcePreview.tsx
@@ -0,0 +1,85 @@
+/**
+ * Component to display highlight sources (e/a tags or URLs) as embedded events or OpenGraph previews
+ */
+
+import { useMemo } from 'react'
+import { nip19 } from 'nostr-tools'
+import WebPreview from '../WebPreview'
+import { EmbeddedNote } from '../Embedded/EmbeddedNote'
+import { ExternalLink } from 'lucide-react'
+
+interface HighlightSourcePreviewProps {
+ source: {
+ type: 'event' | 'addressable' | 'url'
+ value: string
+ bech32: string
+ }
+ className?: string
+}
+
+export default function HighlightSourcePreview({ source, className }: HighlightSourcePreviewProps) {
+ const alexandriaUrl = useMemo(() => {
+ if (source.type === 'url') {
+ return source.value
+ }
+ return `https://next-alexandria.gitcitadel.eu/events?id=${source.bech32}`
+ }, [source])
+
+ if (source.type === 'event') {
+ // For events, try to decode and show as embedded note
+ try {
+ const decoded = nip19.decode(source.bech32)
+ if (decoded.type === 'nevent' || decoded.type === 'note') {
+ return (
+ Nostr references:
-
- {parsedContent.nostrLinks.map((link, index) => (
-
+ )}
+
+ {/* Highlight sources */}
+ {parsedContent.highlightSources.length > 0 && (
+
- {link.type}:{' '}
- {link.id}
+ {/* Nostr links summary */}
+ {parsedContent.nostrLinks.length > 0 && (
+
-
+
- ))}
- Nostr references:
+
+ {parsedContent.nostrLinks.map((link, index) => (
+
+ {link.type}:{' '}
+ {link.id}
+
+ ))}
+
+
+ )}
+
+
)}
Highlight sources:
+
+ {parsedContent.highlightSources.map((source, index) => (
+
+
+
+ )
+ }
+ } catch (error) {
+ console.warn('Failed to decode nostr event:', error)
+ }
+ }
+
+ if (source.type === 'addressable') {
+ // For addressable events, try to decode and show as embedded note
+ try {
+ const decoded = nip19.decode(source.bech32)
+ if (decoded.type === 'naddr') {
+ return (
+
+
+ )
+ }
+ } catch (error) {
+ console.warn('Failed to decode nostr addressable event:', error)
+ }
+ }
+
+ // Fallback: show as Alexandria link or WebPreview for URLs
+ if (source.type === 'url') {
+ return (
+
+
+ )
+ }
+
+ // For nostr events that couldn't be embedded, show as Alexandria link
+ return (
+
+ )
+}
diff --git a/src/components/UniversalContent/ParsedContent.tsx b/src/components/UniversalContent/ParsedContent.tsx
index 27d56ce..b9e6951 100644
--- a/src/components/UniversalContent/ParsedContent.tsx
+++ b/src/components/UniversalContent/ParsedContent.tsx
@@ -5,18 +5,9 @@
import { useEventFieldParser } from '@/hooks/useContentParser'
import { Event } from 'nostr-tools'
-import { useMemo } from 'react'
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import remarkMath from 'remark-math'
-import rehypeKatex from 'rehype-katex'
-import { Components } from '../Note/LongFormArticle/types'
-import NostrNode from '../Note/LongFormArticle/NostrNode'
import ImageWithLightbox from '../ImageWithLightbox'
-import ImageGallery from '../ImageGallery'
-import { ExternalLink } from 'lucide-react'
import WebPreview from '../WebPreview'
-import 'katex/dist/katex.min.css'
+import HighlightSourcePreview from './HighlightSourcePreview'
interface ParsedContentProps {
event: Event
@@ -28,7 +19,7 @@ interface ParsedContentProps {
showLinks?: boolean
showHashtags?: boolean
showNostrLinks?: boolean
- maxImageWidth?: string
+ showHighlightSources?: boolean
}
export default function ParsedContent({
@@ -41,55 +32,13 @@ export default function ParsedContent({
showLinks = false,
showHashtags = false,
showNostrLinks = false,
- maxImageWidth = '400px'
+ showHighlightSources = false,
}: ParsedContentProps) {
const { parsedContent, isLoading, error } = useEventFieldParser(event, field, {
enableMath,
enableSyntaxHighlighting
})
- const components = useMemo(
- () =>
- ({
- nostr: ({ rawText, bech32Id }) =>
- {/* Render content based on markup type */}
- {parsedContent.markupType === 'asciidoc' ? (
- // AsciiDoc content (already processed to HTML)
-
- ) : (
- // Markdown content (let react-markdown handle it)
- {
- if (url.startsWith('nostr:')) {
- return url.slice(6) // Remove 'nostr:' prefix for rendering
- }
- return url
- }}
- components={components}
- >
- {field === 'content' ? event.content : event.tags?.find(tag => tag[0] === field)?.[1] || ''}
-
- )}
+ {/* Render AsciiDoc content (everything is now processed as AsciiDoc) */}
+
{/* Media thumbnails */}
{showMedia && parsedContent.media.length > 0 && (
@@ -204,6 +135,22 @@ export default function ParsedContent({
+
+ )}
)
}
diff --git a/src/components/UniversalContent/TableOfContents.tsx b/src/components/UniversalContent/TableOfContents.tsx
new file mode 100644
index 0000000..a3d4ef9
--- /dev/null
+++ b/src/components/UniversalContent/TableOfContents.tsx
@@ -0,0 +1,132 @@
+/**
+ * Compact Table of Contents component for articles
+ */
+
+import { useEffect, useState } from 'react'
+import { ChevronDown, ChevronRight, Hash } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+
+interface TocItem {
+ id: string
+ text: string
+ level: number
+}
+
+interface TableOfContentsProps {
+ content: string
+ className?: string
+}
+
+export default function TableOfContents({ content, className }: TableOfContentsProps) {
+ const [isOpen, setIsOpen] = useState(false)
+ const [tocItems, setTocItems] = useStateHighlight sources:
+
+ {parsedContent.highlightSources.map((source, index) => (
+
+
+
+
+ {tocItems.map((item) => (
+
+ ))}
+
+
+
+
+
+ $1
') - processed = processed.replace(/^## (.*$)/gim, '$1
') - processed = processed.replace(/^# (.*$)/gim, '$1
') + // Convert blockquotes + asciidoc = asciidoc.replace(/^>\s+(.+)$/gm, '____\n$1\n____') - // Bold and italic - processed = processed.replace(/\*\*(.*?)\*\*/g, '$1') - processed = processed.replace(/\*(.*?)\*/g, '$1') - processed = processed.replace(/_(.*?)_/g, '$1') - processed = processed.replace(/~(.*?)~/g, '$1') + // Convert tables (basic support) + asciidoc = asciidoc.replace(/^\|(.+)\|$/gm, '|$1|') - // Line breaks - processed = processed.replace(/\n\n/g, '
') - processed = `
${processed}
` + // Convert horizontal rules + asciidoc = asciidoc.replace(/^---$/gm, '\'\'\'') - return processed + return asciidoc } /** - * Parse plain text content + * Process wikilinks in content (both standard and bookstr macro) */ - private parsePlainText(content: string): string { - // Convert line breaks to HTML - return content - .replace(/\n\n/g, '')
- .replace(/\n/g, '
')
- .replace(/^/, '
') - .replace(/$/, '
') - } + private processWikilinks(content: string): string { + let processed = content - /** - * Preprocess advanced Markdown content - */ - private preprocessAdvancedMarkdown(content: string): string { - // Handle wikilinks: [[NIP-54]] -> [NIP-54](https://next-alexandria.gitcitadel.eu/publication?d=nip-54) - content = content.replace(/\[\[([^\]]+)\]\]/g, (_match, text) => { - const slug = text.toLowerCase().replace(/\s+/g, '-') - return `[${text}](https://next-alexandria.gitcitadel.eu/publication?d=${slug})` + // Process bookstr macro wikilinks: [[book:...]] where ... can be any book type and reference + processed = processed.replace(/\[\[book:([^\]]+)\]\]/g, (_match, bookContent) => { + const cleanContent = bookContent.trim() + const dTag = this.normalizeDtag(cleanContent) + + return `wikilink:${dTag}[${cleanContent}]` }) - // Handle hashtags: #hashtag -> [#hashtag](/hashtag/hashtag) - content = content.replace(/#([a-zA-Z0-9_]+)/g, (_match, tag) => { - return `[#${tag}](/hashtag/${tag})` + // Process standard wikilinks: [[Target Page]] or [[target page|see this]] + processed = processed.replace(/\[\[([^|\]]+)(?:\|([^\]]+))?\]\]/g, (_match, target, displayText) => { + const cleanTarget = target.trim() + const cleanDisplay = displayText ? displayText.trim() : cleanTarget + const dTag = this.normalizeDtag(cleanTarget) + + return `wikilink:${dTag}[${cleanDisplay}]` }) - return content + return processed } /** - * Preprocess basic Markdown content + * Normalize text to d-tag format (lowercase, non-letters to dashes) */ - private preprocessBasicMarkdown(content: string): string { - // Handle hashtags - content = content.replace(/#([a-zA-Z0-9_]+)/g, (_match, tag) => { - return `[#${tag}](/hashtag/${tag})` - }) - - // Handle emoji shortcodes - content = content.replace(/:([a-zA-Z0-9_]+):/g, (_match, _emoji) => { - // This would need an emoji mapping - for now just return as-is - return _match - }) - - return content + private normalizeDtag(text: string): string { + return text + .toLowerCase() + .replace(/[^a-z0-9]+/g, '-') + .replace(/^-+|-+$/g, '') } /** - * Process markdown links + * Process wikilinks in HTML output */ - private processLinks(content: string): string { - return content.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => { - // Check if it's already an HTML link - if (content.includes(`href="${url}"`)) { - return match - } - - // Handle nostr: prefixes - if (url.startsWith('nostr:')) { - return `${text}` - } - - return `${text} ` + private processWikilinksInHtml(html: string): string { + // Convert wikilink:dtag[display] format to HTML with data attributes + return html.replace(/wikilink:([^[]+)\[([^\]]+)\]/g, (_match, dTag, displayText) => { + return `${displayText}` }) } /** - * Process markdown images + * Convert plain text to AsciiDoc format */ - private processImages(content: string): string { - return content.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, url) => { - const altText = alt || '' - return `- $1
- $1
')
+ .replace(/\n/g, '
')
+ .replace(/^/, '
') + .replace(/$/, '
') } + + /** * Clean up leftover markdown syntax after AsciiDoc processing */ @@ -562,6 +558,77 @@ class ContentParserService { return url.startsWith('nostr:') || this.getNostrType(url) !== null } + /** + * Extract highlight sources from event tags + */ + private extractHighlightSources(event: Event): Array<{ type: 'event' | 'addressable' | 'url'; value: string; bech32: string }> { + const sources: Array<{ type: 'event' | 'addressable' | 'url'; value: string; bech32: string }> = [] + + // Check for 'source' marker first (highest priority) + let sourceTag: string[] | undefined + for (const tag of event.tags) { + if (tag[2] === 'source' || tag[3] === 'source') { + sourceTag = tag + break + } + } + + // If no 'source' marker found, process tags in priority order: e > a > r + if (!sourceTag) { + for (const tag of event.tags) { + // Give 'e' tags highest priority + if (tag[0] === 'e') { + sourceTag = tag + continue + } + + // Give 'a' tags second priority (but don't override 'e' tags) + if (tag[0] === 'a' && (!sourceTag || sourceTag[0] !== 'e')) { + sourceTag = tag + continue + } + + // Give 'r' tags lowest priority + if (tag[0] === 'r' && (!sourceTag || sourceTag[0] === 'r')) { + sourceTag = tag + continue + } + } + } + + // Process the selected source tag + if (sourceTag) { + if (sourceTag[0] === 'e') { + sources.push({ + type: 'event', + value: sourceTag[1], + bech32: nip19.noteEncode(sourceTag[1]) + }) + } else if (sourceTag[0] === 'a') { + const [kind, pubkey, identifier] = sourceTag[1].split(':') + const relay = sourceTag[2] + sources.push({ + type: 'addressable', + value: sourceTag[1], + bech32: nip19.naddrEncode({ + kind: parseInt(kind), + pubkey, + identifier: identifier || '', + relays: relay ? [relay] : [] + }) + }) + } else if (sourceTag[0] === 'r') { + sources.push({ + type: 'url', + value: sourceTag[1], + bech32: sourceTag[1] + }) + } + } + + return sources + } + /** * Get Nostr identifier type */ @@ -605,7 +672,8 @@ class ContentParserService { media: [], links: [], hashtags: [], - nostrLinks: [] + nostrLinks: [], + highlightSources: [] } }