raresj/mypage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📄 a couple updates

Browse Source
This commit is contained in:
RJ
2025-12-02 17:57:31 +02:00
committed by Rares J
parent a1fbd5e374
commit 072320ed73
17 changed files with 335 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
components/blog/markdown-renderer.tsx
View File

@@ -18,17 +18,50 @@ export default function MarkdownRenderer({ content, className = '' }: MarkdownRe
<div className={`prose prose-invert prose-zinc max-w-none ${className}`}>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw, [rehypeSanitize, {
tagNames: ['p', 'a', 'img', 'code', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
'ul', 'ol', 'li', 'blockquote', 'table', 'thead', 'tbody', 'tr', 'th', 'td',
'strong', 'em', 'del', 'br', 'hr', 'div', 'span'],
attributes: {
a: ['href', 'rel', 'target'],
img: ['src', 'alt', 'title', 'width', 'height'],
code: ['className'],
'*': ['className', 'id']
}
}]]}
rehypePlugins={[
rehypeRaw,
[
rehypeSanitize,
{
tagNames: [
'p',
'a',
'img',
'code',
'pre',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'ul',
'ol',
'li',
'blockquote',
'table',
'thead',
'tbody',
'tr',
'th',
'td',
'strong',
'em',
'del',
'br',
'hr',
'div',
'span',
],
attributes: {
a: ['href', 'rel', 'target'],
img: ['src', 'alt', 'title', 'width', 'height'],
code: ['className'],
'*': ['className', 'id'],
},
},
],
]}
components={{
img: ({ node, src, alt, title, ...props }) => {
if (!src || typeof src !== 'string') return null
@@ -55,19 +88,19 @@ export default function MarkdownRenderer({ content, className = '' }: MarkdownRe
: [alt, undefined]
const url = new URL(absoluteSrc, 'http://localhost')
const width = url.searchParams.get('w') ? parseInt(url.searchParams.get('w')!) : 800
const height = url.searchParams.get('h') ? parseInt(url.searchParams.get('h')!) : 600
const width = url.searchParams.get('w') ? parseInt(url.searchParams.get('w')!) : null
const height = url.searchParams.get('h') ? parseInt(url.searchParams.get('h')!) : null
const cleanSrc = absoluteSrc.split('?')[0]
return (
<OptimizedImage
src={cleanSrc}
alt={altText || alt || ''}
caption={caption}
width={width}
height={height}
/>
)
const imageProps = {
src: cleanSrc,
alt: altText || alt || '',
caption: caption,
...(width && { width }),
...(height && { height }),
}
return <OptimizedImage {...imageProps} />
},
code: ({ node, className, children, ...props }) => {
const inline = !className && typeof children === 'string' && !children.includes('\n')