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

update

Browse Source
This commit is contained in:
MacRimi 2025-02-15 12:56:14 +01:00
parent 09c84d4a3e
commit 3695a28b97
3 changed files with 22 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/app/globals.css
View File

@ -56,15 +56,15 @@
body {
@apply bg-background text-foreground;
}
hr {
@apply my-8 border-t border-gray-300;
}
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
/* Custom styles for code blocks */
.prose pre {
background-color: #f3f4f6;
color: #1f2937;
}
.prose code {
color: #1f2937;
}

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

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

53
web/app/guides/[slug]/page.tsx
View File

@ -2,71 +2,32 @@ import fs from "fs"
import path from "path"
import { remark } from "remark"
import html from "remark-html"
import dynamic from "next/dynamic"
const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false })
const guidesDirectory = path.join(process.cwd(), "..", "guides")
async function getGuideContent(slug: string) {
const fullPath = path.join(guidesDirectory, `${slug}.md`)
try {
const fileContents = fs.readFileSync(fullPath, "utf8")
const guidePath = path.join(process.cwd(), "..", "guides", `${slug}.md`)
const fileContents = fs.readFileSync(guidePath, "utf8")
const result = await remark().use(html).process(fileContents)
return result.toString()
} catch (error) {
console.error(`Error reading guide file: ${fullPath}`, error)
return "<p>Guide content not found.</p>"
}
}
export async function generateStaticParams() {
try {
if (fs.existsSync(guidesDirectory)) {
const guideFiles = fs.readdirSync(guidesDirectory)
const guideFiles = fs.readdirSync(path.join(process.cwd(), "..", "guides"))
return guideFiles.map((file) => ({
slug: file.replace(/\.md$/, ""),
}))
} else {
console.warn("Guides directory not found. No static params generated.")
return []
}
} catch (error) {
console.error("Error generating static params for guides:", error)
return []
}
}
function wrapCodeBlocksWithCopyable(content: string) {
const codeBlockRegex = /<pre><code>([\s\S]*?)<\/code><\/pre>/g
return content.replace(codeBlockRegex, (match, code) => {
return `<CopyableCode code={\`${code.replace(/`/g, "\\`")}\`} />`
})
}
export default async function GuidePage({ params }: { params: { slug: string } }) {
let guideContent = await getGuideContent(params.slug)
guideContent = wrapCodeBlocksWithCopyable(guideContent)
const guideContent = await getGuideContent(params.slug)
return (
<div className="min-h-screen bg-white">
<div className="container mx-auto px-4 py-16 max-w-3xl">
<div className="container mx-auto px-4 py-16 max-w-3xl bg-white text-gray-900">
<div
className="prose prose-gray max-w-none
[&>h1]:text-3xl [&>h1]:font-bold [&>h1]:text-gray-900 [&>h1]:mb-6
[&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:text-gray-900 [&>h2]:mt-8 [&>h2]:mb-4
[&>h3]:text-xl [&>h3]:font-semibold [&>h3]:text-gray-900 [&>h3]:mt-6 [&>h3]:mb-3
[&>p]:text-gray-700 [&>p]:mb-4
[&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-4
[&>ul>li]:text-gray-700 [&>ul>li]:mb-2
[&>ol]:list-decimal [&>ol]:pl-5 [&>ol]:mb-4
[&>ol>li]:text-gray-700 [&>ol>li]:mb-2
[&>a]:text-blue-600 [&>a:hover]:underline
[&>strong]:font-bold [&>strong]:text-gray-900"
className="prose prose-lg prose-gray max-w-none prose-pre:bg-gray-100 prose-pre:text-gray-900"
dangerouslySetInnerHTML={{ __html: guideContent }}
/>
</div>
</div>
)
}