Spaces:
Running
Running
File size: 4,547 Bytes
661bc63 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
import React, { useState, useEffect } from 'react'
import ReactMarkdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import rehypeSanitize from 'rehype-sanitize'
import remarkGfm from 'remark-gfm'
import LoadingSpinner from './LoadingSpinner'
const Docs: React.FC = () => {
const [markdown, setMarkdown] = useState<string>('')
const [loading, setLoading] = useState<boolean>(true)
const [error, setError] = useState<string | null>(null)
useEffect(() => {
const fetchMarkdown = async () => {
try {
setLoading(true)
const response = await fetch(
'https://raw.githubusercontent.com/facebookresearch/omnisealbench/refs/heads/main/README.md'
)
if (!response.ok) {
throw new Error(`Failed to fetch documentation: ${response.status}`)
}
const text = await response.text()
setMarkdown(text)
} catch (err) {
console.error('Error fetching markdown:', err)
setError(err instanceof Error ? err.message : 'Unknown error')
} finally {
setLoading(false)
}
}
fetchMarkdown()
}, [])
if (loading) {
return <LoadingSpinner />
}
if (error) {
return (
<div className="alert alert-error">
<div>
<span>Failed to load documentation: {error}</span>
</div>
</div>
)
}
return (
<div className="container mx-auto px-4 py-6">
<ReactMarkdown
rehypePlugins={[rehypeRaw, rehypeSanitize]}
remarkPlugins={[remarkGfm]}
components={{
h1: ({ node, ...props }) => (
<h1 className="text-3xl font-bold mb-4 mt-6 text-primary" {...props} />
),
h2: ({ node, ...props }) => (
<h2 className="text-2xl font-semibold mb-3 mt-5 text-primary-focus" {...props} />
),
h3: ({ node, ...props }) => (
<h3 className="text-xl font-medium mb-2 mt-4 text-secondary" {...props} />
),
h4: ({ node, ...props }) => (
<h4 className="text-lg font-medium mb-2 mt-3 text-secondary-focus" {...props} />
),
p: ({ node, ...props }) => <p className="my-3 text-base leading-relaxed" {...props} />,
ul: ({ node, ...props }) => <ul className="list-disc pl-6 my-3" {...props} />,
ol: ({ node, ...props }) => <ol className="list-decimal pl-6 my-3" {...props} />,
li: ({ node, ...props }) => <li className="mb-1" {...props} />,
blockquote: ({ node, ...props }) => (
<blockquote className="border-l-4 border-primary pl-4 italic my-4" {...props} />
),
img: ({ node, ...props }) => (
<img
{...props}
className="max-w-full h-auto rounded-lg shadow-md my-4"
alt={props.alt || 'Documentation image'}
/>
),
a: ({ node, ...props }) => (
<a
{...props}
target="_blank"
rel="noopener noreferrer"
className="link link-primary link-hover"
/>
),
code: ({ node, className, children, ...props }: any) => {
const isInline = !className
if (isInline) {
return (
<code
className="px-1 py-0.5 bg-base-200 rounded text-accent font-mono text-sm"
{...props}
>
{children}
</code>
)
}
return (
<div className="my-4 rounded-md bg-base-300 overflow-x-auto">
<pre className="p-4 font-mono text-sm">
<code className={`${className || ''}`} {...props}>
{children}
</code>
</pre>
</div>
)
},
table: ({ node, ...props }) => (
<div className="overflow-x-auto my-4">
<table className="table table-zebra w-full" {...props} />
</div>
),
thead: ({ node, ...props }) => <thead className="bg-base-200" {...props} />,
th: ({ node, ...props }) => <th className="px-4 py-2 text-left" {...props} />,
td: ({ node, ...props }) => (
<td className="px-4 py-2 border-t border-base-300" {...props} />
),
hr: ({ node, ...props }) => <hr className="my-6 border-base-300" {...props} />,
}}
>
{markdown}
</ReactMarkdown>
</div>
)
}
export default Docs
|