Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-06-29 12:46:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update GuideContent.tsx

Browse Source
This commit is contained in:
MacRimi 2025-02-15 11:56:54 +01:00 committed by GitHub
parent 4aaad48b24
commit f1582aefc5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
web/app/guides/[slug]/GuideContent.tsx
View File

@ -1,44 +1,42 @@
"use client" "use client"
import type React from "react"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import CopyableCode from "@/components/CopyableCode" import CopyableCode from "@/components/CopyableCode"
function processContent(content: string) { function processContent(content: string): React.ReactNode[] {
const codeBlockRegex = /<pre><code>([\s\S]*?)<\/code><\/pre>/g const parts = content.split(/(```[\s\S]*?```)/g)
return content.replace(codeBlockRegex, (match, code) => { return parts.map((part, index) => {
return `<CopyableCodePlaceholder code="${encodeURIComponent(code)}" />` if (part.startsWith("```") && part.endsWith("```")) {
const code = part.slice(3, -3).trim()
return <CopyableCode key={index} code={code} />
}
return <div key={index} dangerouslySetInnerHTML={{ __html: part }} />
}) })
} }
export default function GuideContent({ content }: { content: string }) { export default function GuideContent({ content }: { content: string }) {
const [processedContent, setProcessedContent] = useState<string>("") const [processedContent, setProcessedContent] = useState<React.ReactNode[]>([])
useEffect(() => { useEffect(() => {
setProcessedContent(processContent(content)) setProcessedContent(processContent(content))
}, [content]) }, [content])
useEffect(() => {
const placeholders = document.querySelectorAll("CopyableCodePlaceholder")
placeholders.forEach((placeholder, index) => {
const code = decodeURIComponent(placeholder.getAttribute("code") || "")
const codeElement = <CopyableCode key={index} code={code} />
placeholder.replaceWith(codeElement)
})
}, []) // Removed unnecessary dependency: processedContent
return ( return (
<div <div
className="prose prose-gray max-w-none className="prose prose-gray max-w-none
[&>h1]:text-3xl [&>h1]:sm:text-4xl [&>h1]:font-bold [&>h1]:mb-6 [&>h1]:text-3xl [&>h1]:sm:text-4xl [&>h1]:font-bold [&>h1]:mb-6
[&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:mt-8 [&>h2]:mb-4 [&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:mt-8 [&>h2]:mb-4
[&>h3]:text-xl [&>h3]:font-medium [&>h3]:mt-6 [&>h3]:mb-3 [&>h3]:text-xl [&>h3]:font-medium [&>h3]:mt-6 [&>h3]:mb-3
[&>p]:mb-4 [&>p]:text-gray-600 [&>p]:mb-4 [&>p]:text-gray-600
[&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-4 [&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-4
[&>ul>li]:text-gray-600 [&>ul>li]:mb-2 [&>ul>li]:text-gray-600 [&>ul>li]:mb-2
[&>ol]:list-decimal [&>ol]:pl-5 [&>ol]:mb-4 [&>ol]:list-decimal [&>ol]:pl-5 [&>ol]:mb-4
[&>ol>li]:text-gray-600 [&>ol>li]:mb-2 [&>ol>li]:text-gray-600 [&>ol>li]:mb-2
[&>a]:text-blue-600 [&>a:hover]:underline" [&>a]:text-blue-600 [&>a:hover]:underline"
dangerouslySetInnerHTML={{ __html: processedContent }} >
/> {processedContent}
</div>
) )
} }