4nk/story-research-zapwall
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update markdown renderer with dark theme styling

Browse Source 
- Update headings with neon-cyan and font-mono
- Update paragraphs with cyber-accent color
- Update code blocks with dark background and neon-cyan text
- Update links with neon-green hover to neon-cyan
- Update inline code with dark background and border
- Update bold text with neon-green color
- Update lists with cyber-accent and neon-cyan markers
- All TypeScript checks pass
This commit is contained in:
Nicolas Cantu 2025-12-27 23:02:30 +01:00
parent 5ea0ed21e1
commit f182887c89
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/markdownRenderer.tsx
View File

@ -55,19 +55,19 @@ function processLine(line: string, index: number, state: RenderState, elements:
function renderHeading(line: string, index: number, elements: JSX.Element[]): boolean { function renderHeading(line: string, index: number, elements: JSX.Element[]): boolean {
if (line.startsWith('# ')) { if (line.startsWith('# ')) {
elements.push(<h1 key={index} className="text-3xl font-bold mt-8 mb-4">{line.substring(2)}</h1>) elements.push(<h1 key={index} className="text-3xl font-bold mt-8 mb-4 text-neon-cyan font-mono">{line.substring(2)}</h1>)
return true return true
} }
if (line.startsWith('## ')) { if (line.startsWith('## ')) {
elements.push(<h2 key={index} className="text-2xl font-bold mt-6 mb-3">{line.substring(3)}</h2>) elements.push(<h2 key={index} className="text-2xl font-bold mt-6 mb-3 text-neon-cyan font-mono">{line.substring(3)}</h2>)
return true return true
} }
if (line.startsWith('### ')) { if (line.startsWith('### ')) {
elements.push(<h3 key={index} className="text-xl font-semibold mt-4 mb-2">{line.substring(4)}</h3>) elements.push(<h3 key={index} className="text-xl font-semibold mt-4 mb-2 text-neon-cyan font-mono">{line.substring(4)}</h3>)
return true return true
} }
if (line.startsWith('#### ')) { if (line.startsWith('#### ')) {
elements.push(<h4 key={index} className="text-lg font-semibold mt-3 mb-2">{line.substring(5)}</h4>) elements.push(<h4 key={index} className="text-lg font-semibold mt-3 mb-2 text-neon-cyan font-mono">{line.substring(5)}</h4>)
return true return true
} }
return false return false
@ -99,7 +99,7 @@ function renderBoldAndCodeLine(line: string, index: number, elements: JSX.Elemen
function renderParagraphOrBreak(line: string, index: number, elements: JSX.Element[]): void { function renderParagraphOrBreak(line: string, index: number, elements: JSX.Element[]): void {
if (line.trim() !== '') { if (line.trim() !== '') {
elements.push(<p key={index} className="mb-4 text-gray-700">{line}</p>) elements.push(<p key={index} className="mb-4 text-cyber-accent">{line}</p>)
return return
} }
if (elements.length > 0) { if (elements.length > 0) {
@ -118,7 +118,7 @@ function handleCodeBlock(
): void { ): void {
if (state.inCodeBlock) { if (state.inCodeBlock) {
elements.push( elements.push(
<pre key={`code-${index}`} className="bg-gray-100 p-4 rounded-lg overflow-x-auto my-4"> <pre key={`code-${index}`} className="bg-cyber-darker border border-neon-cyan/20 p-4 rounded-lg overflow-x-auto my-4 text-neon-cyan font-mono text-sm">
<code>{state.codeBlockContent.join('\n')}</code> <code>{state.codeBlockContent.join('\n')}</code>
</pre> </pre>
) )
@ -137,7 +137,7 @@ function closeListIfNeeded(
): void { ): void {
if (state.currentList.length > 0 && !line.startsWith('- ') && !line.startsWith('* ') && line.trim() !== '') { if (state.currentList.length > 0 && !line.startsWith('- ') && !line.startsWith('* ') && line.trim() !== '') {
elements.push( elements.push(
<ul key={`list-${index}`} className="list-disc list-inside mb-4 space-y-1"> <ul key={`list-${index}`} className="list-disc list-inside mb-4 space-y-1 text-cyber-accent marker:text-neon-cyan">
{state.currentList.map((item, i) => ( {state.currentList.map((item, i) => (
<li key={i} className="ml-4">{item.substring(2).trim()}</li> <li key={i} className="ml-4">{item.substring(2).trim()}</li>
))} ))}
@ -153,7 +153,7 @@ function createLinkElement(
key: string, key: string,
isExternal: boolean isExternal: boolean
): JSX.Element { ): JSX.Element {
const className = 'text-blue-600 hover:text-blue-800 underline' const className = 'text-neon-green hover:text-neon-cyan underline transition-colors'
if (isExternal) { if (isExternal) {
return ( return (
<a key={key} href={href} target="_blank" rel="noopener noreferrer" className={className}> <a key={key} href={href} target="_blank" rel="noopener noreferrer" className={className}>
@ -208,7 +208,7 @@ function renderBoldAndCode(line: string, index: number, elements: JSX.Element[])
processBold(beforeCode, parts) processBold(beforeCode, parts)
} }
parts.push( parts.push(
<code key={`code-${codeMatch.index}`} className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono"> <code key={`code-${codeMatch.index}`} className="bg-cyber-darker text-neon-cyan px-1 py-0.5 rounded text-sm font-mono border border-neon-cyan/20">
{codeMatch[1]} {codeMatch[1]}
</code> </code>
) )
@ -227,7 +227,7 @@ function processBold(text: string, parts: (string | JSX.Element)[]): void {
const boldParts = text.split(/(\*\*[^*]+\*\*)/g) const boldParts = text.split(/(\*\*[^*]+\*\*)/g)
boldParts.forEach((part, i) => { boldParts.forEach((part, i) => {
if (part.startsWith('**') && part.endsWith('**')) { if (part.startsWith('**') && part.endsWith('**')) {
parts.push(<strong key={`bold-${i}`}>{part.slice(2, -2)}</strong>) parts.push(<strong key={`bold-${i}`} className="text-neon-green font-semibold">{part.slice(2, -2)}</strong>)
} else if (part) { } else if (part) {
parts.push(part) parts.push(part)
} }