1
0
mirror of https://github.com/Llewellynvdm/conky.git synced 2024-12-25 12:10:03 +00:00

Add fuzzy search to web docs.

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

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>
)

View File

@ -8,9 +8,12 @@ type HeaderProps = {
name: string
darkMode: boolean
setDarkMode: (state: boolean) => void
searchIndex: SearchIndex
}
import * as React from 'react'
import Search from './Search'
import { SearchIndex } from '../utils/search'
interface NavLinkProps {
href: string
@ -33,7 +36,12 @@ const NavLink: React.FunctionComponent<NavLinkProps> = (props) => {
)
}
export default function Header({ name, darkMode, setDarkMode }: HeaderProps) {
export default function Header({
name,
darkMode,
setDarkMode,
searchIndex,
}: HeaderProps) {
const router = useRouter()
return (
<div className="border-b-1 backdrop-blur-lg bg-white dark:bg-black bg-opacity-20 dark:bg-opacity-20 transition">
@ -52,7 +60,8 @@ export default function Header({ name, darkMode, setDarkMode }: HeaderProps) {
<NavLink href="/lua" name="Lua" />
</div>
)}
<LineChart width={400} height={40} darkMode={darkMode} />
<LineChart width={300} height={40} darkMode={darkMode} />
<Search index={searchIndex} />
<div className="flex">
<div className="border-r mx-1 px-1 border-slate-700">
<a href="https://github.com/brndnmtthws/conky">

View File

@ -1,4 +1,5 @@
import { useEffect, useState } from 'react'
import { SearchIndex } from '../utils/search'
import Header from './Header'
function darkModeDefault() {
@ -15,9 +16,10 @@ function darkModeDefault() {
interface LayoutProps {
children: React.ReactNode
searchIndex: SearchIndex
}
export default function Layout({ children }: LayoutProps) {
export default function Layout({ children, searchIndex }: LayoutProps) {
const [darkMode, setDarkMode] = useState(darkModeDefault())
useEffect(() => {
@ -45,7 +47,12 @@ export default function Layout({ children }: LayoutProps) {
return (
<div>
<div className="sticky top-0 z-10 h-16">
<Header name="Conky" darkMode={darkMode} setDarkMode={setDarkMode} />
<Header
searchIndex={searchIndex}
name="Conky"
darkMode={darkMode}
setDarkMode={setDarkMode}
/>
</div>
<div className="relative pb-24">
<div className="flex flex-col items-center max-w-3xl w-full mx-auto">

182
web/components/Search.tsx Normal file
View File

@ -0,0 +1,182 @@
import Fuse from 'fuse.js'
import React, { Fragment, useState } from 'react'
import { Search as SearchIcon } from 'react-feather'
import { SearchIndex, SearchItem } from '../utils/search'
import { Dialog, Transition, Combobox } from '@headlessui/react'
import { useRouter } from 'next/router'
export interface SearchProps {
index: SearchIndex
}
interface SearchResultProps {
result: Fuse.FuseResult<SearchItem>
selected: boolean
active: boolean
}
const SearchResult: React.FunctionComponent<SearchResultProps> = (props) => {
const excerpt = (s: string) => {
if (s.length < 100) {
return <>{s}</>
} else {
return <>{s.substring(0, 100)}&hellip;</>
}
}
const bg_for = (s: string) => {
const bg = 'p-1 rounded bg-opacity-20 '
if (s === 'var') {
return bg + 'bg-blue-500'
}
if (s === 'config') {
return bg + 'bg-green-500'
}
if (s === 'lua') {
return bg + 'bg-red-500'
}
return bg
}
const selection = props.active ? 'bg-slate-300 dark:bg-slate-700' : ''
return (
<div className={`m-1 rounded flex flex-col p-2 ${selection}`}>
<div className="flex justify-between">
<div>
<code className="text-lg p-1 mx-1 bg-fuchsia-200 dark:bg-fuchsia-900 font-bold">
{props.result.item.name}
</code>
</div>
<div className={bg_for(props.result.item.kind)}>
{props.result.item.kind}
</div>
</div>
<div>
<p>{excerpt(props.result.item.desc)}</p>
</div>
</div>
)
}
const Search: React.FunctionComponent<SearchProps> = (props) => {
const router = useRouter()
const [searchText, setSearchText] = useState('')
const [selected, setSelected] = useState<
Fuse.FuseResult<SearchItem> | undefined
>(undefined)
const [searchResults, setSearchResults] = useState<
Fuse.FuseResult<SearchItem>[]
>([])
const [fuse, setFuse] = useState(() => {
const options: Fuse.IFuseOptions<SearchItem> = {}
return new Fuse(
props.index.list,
options,
Fuse.parseIndex(props.index.index)
)
})
let [isOpen, setIsOpen] = useState(false)
const setSearch = (value: string) => {
setSearchText(value)
const searchResult = fuse.search(value)
setSearchResults(searchResult)
}
const onChange = (value: Fuse.FuseResult<SearchItem>) => {
if (value.item.kind === 'var') {
router.push(`/variables#${value.item.name}`, undefined, { scroll: false })
}
if (value.item.kind === 'config') {
router.push(`/config_settings#${value.item.name}`, undefined, {
scroll: false,
})
}
if (value.item.kind === 'lua') {
router.push(`/lua#${value.item.name}`, undefined, { scroll: false })
}
setIsOpen(false)
}
const closeModal = () => {
setIsOpen(false)
}
const openModal = () => {
setIsOpen(true)
}
return (
<>
<div className="flex items-center ml-2">
<button onClick={openModal}>
<SearchIcon size={32} />
</button>
</div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm" />
</Transition.Child>
<div className="fixed inset-0">
<div className="flex h-screen w-screen items-center justify-center p-16 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="flex flex-col max-h-full w-full max-w-2xl p-1 bg-gray-200 dark:bg-gray-800 transform rounded-xl text-left align-middle shadow transition-all border border-gray-800 dark:border-white border-opacity-10 dark:border-opacity-10">
<Combobox value={selected} nullable onChange={onChange}>
<div className="flex">
<Combobox.Label className="flex items-center ml-2">
<SearchIcon size={32} />
</Combobox.Label>
<Combobox.Input
placeholder="Search docs"
className="mx-1 p-2 w-full bg-gray-200 dark:bg-gray-800 outline-none"
onChange={(e) => setSearch(e.target.value)}
/>
</div>
<Combobox.Options className="flex flex-col h-full overflow-auto">
{searchResults.length === 0 && searchText !== '' ? (
<div className="relative cursor-default select-none py-2 px-4 text-gray-500">
No results.
</div>
) : (
searchResults.map((r) => (
<Combobox.Option key={r.refIndex} value={r}>
{({ selected, active }) => (
<SearchResult
result={r}
selected={selected}
active={active}
/>
)}
</Combobox.Option>
))
)}
</Combobox.Options>
</Combobox>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</>
)
}
export default Search

View File

@ -22,12 +22,14 @@
"@fontsource/fira-code": "^4.5.11",
"@fontsource/inter": "^4.5.12",
"@fontsource/source-serif-pro": "^4.5.9",
"@headlessui/react": "^1.7.3",
"@mapbox/rehype-prism": "^0.8.0",
"@netlify/plugin-nextjs": "4.23",
"@tailwindcss/typography": "^0.5.0",
"classnames": "^2.3.1",
"colord": "^2.9.3",
"d3": "^7.6.1",
"fuse.js": "^6.6.2",
"gray-matter": "^4.0.2",
"inter-ui": "^3.19.3",
"next": "^12.3.1",

View File

@ -2,14 +2,16 @@ import Layout from '../components/Layout'
import SEO from '../components/SEO'
import { getConfigSettings, Documentation } from '../utils/doc-utils'
import Docs from '../components/Docs'
import { getSearchIndex, SearchIndex } from '../utils/search'
export interface ConfigSettingsProps {
config_settings: Documentation
searchIndex: SearchIndex
}
export default function ConfigSettings(props: ConfigSettingsProps) {
return (
<Layout>
<Layout searchIndex={props.searchIndex}>
<SEO
title="Conky Config settings"
description="Conky configuration settings"
@ -26,6 +28,7 @@ export default function ConfigSettings(props: ConfigSettingsProps) {
export async function getStaticProps() {
const config_settings = getConfigSettings()
const searchIndex = getSearchIndex()
return { props: { config_settings } }
return { props: { config_settings, searchIndex } }
}

View File

@ -11,6 +11,7 @@ import CustomLink from '../../components/CustomLink'
import Layout from '../../components/Layout'
import SEO from '../../components/SEO'
import { GetStaticProps } from 'next'
import { getSearchIndex, SearchIndex } from '../../utils/search'
// Custom components/renderers to pass to MDX.
// Since the MDX files aren't loaded by webpack, they have no knowledge of how
@ -32,14 +33,16 @@ interface FrontMatter {
interface DocumentPageProps {
source: MDXRemoteProps
frontMatter: FrontMatter
searchIndex: SearchIndex
}
export default function DocumentPage({
source,
frontMatter,
searchIndex,
}: DocumentPageProps) {
return (
<Layout>
<Layout searchIndex={searchIndex}>
<SEO
title={`${frontMatter.title}`}
description={frontMatter.description}
@ -68,9 +71,11 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
const { mdxSource, data } = await getDocumentBySlug(params.slug as string)
const prevDocument = getPreviousDocumentBySlug(params.slug as string)
const nextDocument = getNextDocumentBySlug(params.slug as string)
const searchIndex = getSearchIndex()
return {
props: {
searchIndex,
source: mdxSource,
frontMatter: data,
prevDocument,

View File

@ -3,6 +3,7 @@ import { getDocuments, Document } from '../utils/mdx-utils'
import Layout from '../components/Layout'
import ArrowIcon from '../components/ArrowIcon'
import SEO from '../components/SEO'
import { getSearchIndex, SearchIndex } from '../utils/search'
const pages = [
{
@ -24,10 +25,12 @@ const pages = [
interface IndexProps {
documents: Document[]
searchIndex: SearchIndex
}
export default function Index({ documents }: IndexProps) {
export default function Index({ documents, searchIndex }: IndexProps) {
return (
<Layout>
<Layout searchIndex={searchIndex}>
<SEO title="Conky" description="Conky documentation" />
<main className="w-full">
<div className="w-full">
@ -76,6 +79,7 @@ export default function Index({ documents }: IndexProps) {
export function getStaticProps() {
const documents = getDocuments()
const searchIndex = getSearchIndex()
return { props: { documents } }
return { props: { documents, searchIndex } }
}

View File

@ -2,14 +2,16 @@ import Layout from '../components/Layout'
import SEO from '../components/SEO'
import { getLua, Documentation } from '../utils/doc-utils'
import Docs from '../components/Docs'
import { getSearchIndex, SearchIndex } from '../utils/search'
export interface LuaProps {
lua: Documentation
searchIndex: SearchIndex
}
export default function Lua(props: LuaProps) {
return (
<Layout>
<Layout searchIndex={props.searchIndex}>
<SEO title="Conky Lua API" description="Conky Lua API documentation" />
<main className="w-full">
<div>
@ -23,6 +25,7 @@ export default function Lua(props: LuaProps) {
export async function getStaticProps() {
const lua = getLua()
const searchIndex = getSearchIndex()
return { props: { lua } }
return { props: { lua, searchIndex } }
}

View File

@ -2,14 +2,16 @@ import Layout from '../components/Layout'
import SEO from '../components/SEO'
import { getVariables, Documentation } from '../utils/doc-utils'
import Docs from '../components/Docs'
import { getSearchIndex, SearchIndex } from '../utils/search'
export interface VariablesProps {
variables: Documentation
searchIndex: SearchIndex
}
export default function Variables(props: VariablesProps) {
return (
<Layout>
<Layout searchIndex={props.searchIndex}>
<SEO
title="Conky Variables"
description="Conky object variables documentation"
@ -26,6 +28,7 @@ export default function Variables(props: VariablesProps) {
export async function getStaticProps() {
const variables = getVariables()
const searchIndex = getSearchIndex()
return { props: { variables } }
return { props: { variables, searchIndex } }
}

View File

@ -11,11 +11,13 @@ const DOC_PATH = path.join(process.cwd(), '..', 'doc')
export interface Documentation {
desc: string
desc_md: string
values: DocItem[]
}
export interface DocItem {
name: string
desc: string
desc_md: string
default: string | undefined
args: string[]
}
@ -27,8 +29,12 @@ function getDocumentation(source: string): Documentation {
)
const parsed = yaml.load(configSettingsFile.toString()) as Documentation
const docs = {
desc: processMarkdown(parsed.desc),
values: parsed.values.map((c) => ({ ...c, desc: processMarkdown(c.desc) })),
...parsed,
desc_md: processMarkdown(parsed.desc),
values: parsed.values.map((c) => ({
...c,
desc_md: processMarkdown(c.desc),
})),
}
return docs

38
web/utils/search.ts Normal file
View File

@ -0,0 +1,38 @@
import Fuse from 'fuse.js'
import { getConfigSettings, getLua, getVariables } from './doc-utils'
export interface SearchItem {
kind: string
name: string
desc: string
}
export interface SearchIndex {
index: {
keys: readonly string[]
records: Fuse.FuseIndexRecords
}
list: SearchItem[]
}
export function getSearchIndex() {
const cs: SearchItem[] = getConfigSettings().values.map((v) => ({
kind: 'config',
name: v.name,
desc: v.desc.substring(0, 200),
}))
const vars: SearchItem[] = getVariables().values.map((v) => ({
kind: 'var',
name: v.name,
desc: v.desc.substring(0, 200),
}))
const lua: SearchItem[] = getLua().values.map((v) => ({
kind: 'lua',
name: v.name,
desc: v.desc.substring(0, 200),
}))
const list: SearchItem[] = [...cs, ...vars, ...lua]
return {
list,
index: Fuse.createIndex<SearchItem>(['name', 'desc'], list).toJSON(),
}
}

View File

@ -124,6 +124,11 @@
resolved "https://registry.yarnpkg.com/@fontsource/source-serif-pro/-/source-serif-pro-4.5.9.tgz#fbeacd0bb6d2860df6baa662e9827adfe3da13f4"
integrity sha512-VgDvUvd3An3v9HtKgYk9TJuhB/4ZXw4huv/uqTXO4gES7CUbqGcf6tSb69TwG6o5AZzEVt6jnN7FN18OaO5J9A==
"@headlessui/react@^1.7.3":
version "1.7.3"
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.3.tgz#853c598ff47b37cdd192c5cbee890d9b610c3ec0"
integrity sha512-LGp06SrGv7BMaIQlTs8s2G06moqkI0cb0b8stgq7KZ3xcHdH3qMP+cRyV7qe5x4XEW/IGY48BW4fLesD6NQLng==
"@humanwhocodes/config-array@^0.10.5":
version "0.10.5"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.5.tgz#bb679745224745fff1e9a41961c1d45a49f81c04"
@ -3398,6 +3403,11 @@ functions-have-names@^1.2.2:
resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
fuse.js@^6.6.2:
version "6.6.2"
resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.6.2.tgz#fe463fed4b98c0226ac3da2856a415576dc9a111"
integrity sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==
get-caller-file@^2.0.0, get-caller-file@^2.0.1:
version "2.0.5"
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"