Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/llms-txt-hub / apps/web/components/website/website-content-section.tsx |
| Date | Not specified in source |
| Repository | Janady13/llms-txt-hub |
| Revision | e0f4bf978d4df168369c7601d9c5f5ea89e84377 |
| Branch | main |
| Path or archive member | apps/web/components/website/website-content-section.tsx |
| Original SHA-256 | 7d7db4c2ac5b32214d518cb1481a85e0979c64aa6b440a9e213f2c3f4feb36df |
| Git blob SHA | ba98ea4c15c6ef221aec5bf3d3212ed2ce96007f |
| Reading-copy SHA-256 | 7d7db4c2ac5b32214d518cb1481a85e0979c64aa6b440a9e213f2c3f4feb36df |
Recovered source transcript
Download complete source text ↓99 lines · 3.4 KB
import { Info } from 'lucide-react'
import { MDXRemote } from 'next-mdx-remote/rsc'
import remarkGfm from 'remark-gfm'
import { components } from '@/components/mdx'
import type { WebsiteMetadata } from '@/lib/content-loader'
import { stripHtmlTags } from '@/lib/utils'
interface WebsiteContentSectionProps {
website: WebsiteMetadata
}
/**
* Content section for website detail pages
* Displays MDX content if available, otherwise shows fallback information
*
* @param props - Component props
* @param props.website - Website metadata with optional content
* @returns Content section with MDX or fallback information
*/
export function WebsiteContentSection({ website }: WebsiteContentSectionProps) {
if (website.content) {
return (
<section className="animate-fade-in-up opacity-0 stagger-4">
<div className="prose dark:prose-invert max-w-none prose-headings:scroll-mt-20">
<MDXRemote
source={website.content}
components={components}
options={{
mdxOptions: {
remarkPlugins: [remarkGfm]
}
}}
/>
</div>
</section>
)
}
return (
<section
className="animate-fade-in-up opacity-0 stagger-4 space-y-8"
aria-labelledby="about-heading"
>
{/* About Section */}
<div className="rounded-2xl border border-border/50 bg-card/50 backdrop-blur-sm p-6 md:p-8">
<div className="flex items-center gap-3 mb-4">
<div className="flex items-center justify-center size-10 rounded-xl bg-primary/10">
<Info className="size-5 text-primary" aria-hidden />
</div>
<div>
<h2 className="text-xl font-bold text-pretty scroll-mt-20" id="about-heading">
About {website.name}
</h2>
<p className="text-sm text-muted-foreground mt-0.5">Summary and key details</p>
</div>
</div>
<p className="text-muted-foreground leading-relaxed text-pretty">
{stripHtmlTags(website.description)} This platform provides AI-ready documentation through
the llms.txt standard, making it easy for AI assistants to understand and interact with
their services.
</p>
</div>
{/* Key Information Grid */}
<div className="grid sm:grid-cols-2 gap-4">
{[
{
label: 'Category',
value: website.category ? website.category.replace(/-/g, ' ') : 'General',
className: 'capitalize'
},
{ label: 'Type', value: 'Website' },
{ label: 'Documentation', value: 'llms.txt compatible' },
{
label: 'Added',
value: website.publishedAt
? new Date(website.publishedAt).toLocaleDateString('en-US', {
month: 'long',
day: 'numeric',
year: 'numeric'
})
: 'Recently'
}
].map(({ label, value, className = '' }) => (
<div
key={label}
className="rounded-2xl border border-border/50 bg-card/50 backdrop-blur-sm p-5 space-y-1 transition-colors hover:border-border"
>
<span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
{label}
</span>
<p className={`text-base font-semibold ${className}`}>{value}</p>
</div>
))}
</div>
</section>
)
}