colin/mirror-conky
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add fuzzy search to web docs.

Browse Source
This commit is contained in:
Brenden Matthews
2022-10-01 15:32:01 -05:00
committed by Brenden Matthews
parent 7f47b5f94e
commit 6f5a74c903
13 changed files with 347 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
web/components/Docs.tsx
View File

@@ -1,5 +1,7 @@
import { Documentation } from '../utils/doc-utils'
import { Link } from 'react-feather'
import { Link as LinkIcon } from 'react-feather'
import Link from 'next/link'
import { useRouter } from 'next/router'
export interface DocsProps {
docs: Documentation
@@ -8,61 +10,71 @@ export interface DocsProps {
}
export default function Docs({ docs, braces, assign }: DocsProps) {
const router = useRouter()
return (
<div className="prose dark:prose-invert prose-lg lg:prose-xl">
<div dangerouslySetInnerHTML={{ __html: docs.desc }} />
<div dangerouslySetInnerHTML={{ __html: docs.desc_md }} />
<div>
{docs.values.map((doc) => (
<div
id={doc.name}
key={doc.name}
className="scroll-mt-16 target:bg-rose-300 target:dark:bg-rose-900 hover:bg-slate-100 dark:hover:bg-slate-800 my-4"
>
<div className="flex">
<div className="px-2 py-3">
<a href={`#${doc.name}`}>
<Link size={20} />
</a>
</div>
<div className="flex-col p-1">
<div>
{braces && <code>$&#123;</code>}
<code className="text-lg p-1 mx-1 bg-fuchsia-200 dark:bg-fuchsia-900 font-bold">
{doc.name}
</code>
{typeof doc.args != 'undefined' && doc.args.length > 0 && (
<>
{assign && <code>=</code>}
<em>
{doc.args.map((arg) => (
<code
className="text-lg p-1 mx-1 bg-slate-200 dark:bg-slate-800"
key={arg}
>
{arg}
</code>
))}
</em>
</>
)}
{braces && <code>&#125;</code>}
{docs.values.map((doc) => {
const target = router.asPath.endsWith(`#${doc.name}`)
return (
<div
id={doc.name}
key={doc.name}
className={
target
? 'scroll-mt-16 bg-rose-300 dark:bg-rose-900 hover:bg-slate-100 dark:hover:bg-slate-800 my-4'
: 'scroll-mt-16 target:bg-rose-300 target:dark:bg-rose-900 hover:bg-slate-100 dark:hover:bg-slate-800 my-4'
}
>
<div className="flex">
<div className="px-2 py-3">
<Link href={`#${doc.name}`}>
<a>
<LinkIcon size={20} />
</a>
</Link>
</div>
<div
className="py-2"
dangerouslySetInnerHTML={{ __html: doc.desc }}
/>
{typeof doc.default != 'undefined' && (
<div className="flex-col p-1">
<div>
Default:{' '}
<code className="px-1 mx-1 bg-slate-200 dark:bg-slate-800">
{doc.default}
{braces && <code>$&#123;</code>}
<code className="text-lg p-1 mx-1 bg-fuchsia-200 dark:bg-fuchsia-900 font-bold">
{doc.name}
</code>
{typeof doc.args != 'undefined' && doc.args.length > 0 && (
<>
{assign && <code>=</code>}
<em>
{doc.args.map((arg) => (
<code
className="text-lg p-1 mx-1 bg-slate-200 dark:bg-slate-800"
key={arg}
>
{arg}
</code>
))}
</em>
</>
)}
{braces && <code>&#125;</code>}
</div>
)}
<div
className="py-2"
dangerouslySetInnerHTML={{ __html: doc.desc_md }}
/>
{typeof doc.default != 'undefined' && (
<div>
Default:{' '}
<code className="px-1 mx-1 bg-slate-200 dark:bg-slate-800">
{doc.default}
</code>
</div>
)}
</div>
</div>
</div>
</div>
))}
)
})}
</div>
</div>
)