Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-07-03 14:26:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
MacRimi 2025-02-15 12:14:13 +01:00
parent cf91529575
commit 6f035055c1
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,13 +5,19 @@ import { useState, useEffect } from "react"
import CopyableCode from "@/components/CopyableCode" import CopyableCode from "@/components/CopyableCode"
function processContent(content: string): React.ReactNode[] { function processContent(content: string): React.ReactNode[] {
const parts = content.split(/(```[\s\S]*?```)/g) const parts = content.split(/(```[\s\S]*?```|`[^`\n]+`)/g)
return parts.map((part, index) => { return parts.map((part, index) => {
if (part.startsWith("```") && part.endsWith("```")) { if (part.startsWith("```") && part.endsWith("```")) {
const code = part.slice(3, -3).trim() const code = part.slice(3, -3).trim()
return <CopyableCode key={index} code={code} /> return <CopyableCode key={index} code={code} />
} else if (part.startsWith("`") && part.endsWith("`")) {
return (
<code key={index} className="bg-gray-100 text-gray-800 px-1 rounded">
{part.slice(1, -1)}
</code>
)
} }
return <div key={index} dangerouslySetInnerHTML={{ __html: part }} /> return <span key={index} dangerouslySetInnerHTML={{ __html: part }} />
}) })
} }
@ -25,15 +31,16 @@ export default function GuideContent({ content }: { content: string }) {
return ( return (
<div <div
className="prose prose-gray max-w-none bg-white text-gray-900 className="prose prose-gray max-w-none bg-white text-gray-900
[&>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 [&>h1]:text-gray-900
[&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:mt-8 [&>h2]:mb-4 [&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:mt-8 [&>h2]:mb-4 [&>h2]:text-gray-800
[&>h3]:text-xl [&>h3]:font-medium [&>h3]:mt-6 [&>h3]:mb-3 [&>h3]:text-xl [&>h3]:font-medium [&>h3]:mt-6 [&>h3]:mb-3 [&>h3]:text-gray-700
[&>p]:mb-4 [&>p]:text-gray-700 [&>p]:mb-4 [&>p]:text-gray-700
[&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-4 [&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-4
[&>ul>li]:text-gray-700 [&>ul>li]:mb-2 [&>ul>li]:text-gray-700 [&>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-700 [&>ol>li]:mb-2 [&>ol>li]:text-gray-700 [&>ol>li]:mb-2
[&>a]:text-blue-600 [&>a:hover]:underline" [&>a]:text-blue-600 [&>a:hover]:underline
[&>strong]:font-bold [&>strong]:text-gray-900"
> >
{processedContent} {processedContent}
</div> </div>

9
web/components/CopyableCode.tsx
View File

@ -22,13 +22,13 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
} }
return ( return (
<div className="relative"> <div className="relative my-4">
<pre className="bg-gray-100 p-4 rounded-md overflow-x-auto"> <pre className="bg-gray-100 text-gray-800 p-4 rounded-md overflow-x-auto">
<code>{code}</code> <code className="text-sm">{code}</code>
</pre> </pre>
<button <button
onClick={copyToClipboard} onClick={copyToClipboard}
className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors" className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-200 transition-colors"
aria-label="Copy to clipboard" aria-label="Copy to clipboard"
> >
{isCopied ? <Check className="h-5 w-5 text-green-500" /> : <Copy className="h-5 w-5 text-gray-500" />} {isCopied ? <Check className="h-5 w-5 text-green-500" /> : <Copy className="h-5 w-5 text-gray-500" />}
@ -39,3 +39,4 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
export default CopyableCode export default CopyableCode