Add fuzzy search to web docs.

web/components/Docs.tsx

@@ -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) => (
+        {docs.values.map((doc) => {
-          <div
+          const target = router.asPath.endsWith(`#${doc.name}`)
-            id={doc.name}
+          return (
-            key={doc.name}
+            <div
-            className="scroll-mt-16 target:bg-rose-300 target:dark:bg-rose-900 hover:bg-slate-100 dark:hover:bg-slate-800 my-4"
+              id={doc.name}
-          >
+              key={doc.name}
-            <div className="flex">
+              className={
-              <div className="px-2 py-3">
+                target
-                <a href={`#${doc.name}`}>
+                  ? 'scroll-mt-16 bg-rose-300 dark:bg-rose-900 hover:bg-slate-100 dark:hover:bg-slate-800 my-4'
-                  <Link size={20} />
+                  : 'scroll-mt-16 target:bg-rose-300 target:dark:bg-rose-900 hover:bg-slate-100 dark:hover:bg-slate-800 my-4'
-                </a>
+              }
-              </div>
+            >
-              <div className="flex-col p-1">
+              <div className="flex">
-                <div>
+                <div className="px-2 py-3">
-                  {braces && <code>$&#123;</code>}
+                  <Link href={`#${doc.name}`}>
-                  <code className="text-lg p-1 mx-1 bg-fuchsia-200 dark:bg-fuchsia-900 font-bold">
+                    <a>
-                    {doc.name}
+                      <LinkIcon size={20} />
-                  </code>
+                    </a>
-                  {typeof doc.args != 'undefined' && doc.args.length > 0 && (
+                  </Link>
-                    <>
-                      {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
+                <div className="flex-col p-1">
-                  className="py-2"
-                  dangerouslySetInnerHTML={{ __html: doc.desc }}
-                />
-                {typeof doc.default != 'undefined' && (
                   <div>
-                    Default:{' '}
+                    {braces && <code>$&#123;</code>}
-                    <code className="px-1 mx-1 bg-slate-200 dark:bg-slate-800">
+                    <code className="text-lg p-1 mx-1 bg-fuchsia-200 dark:bg-fuchsia-900 font-bold">
-                      {doc.default}
+                      {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>
   )

web/components/Header.tsx

@@ -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">

web/components/Layout.tsx

@@ -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">

web/components/Search.tsx

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

web/package.json

@@ -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",

web/pages/config_settings.tsx

@@ -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 } }
 }

web/pages/documents/[slug].tsx

@@ -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,

web/pages/index.tsx

@@ -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 } }
 }

web/pages/lua.tsx

@@ -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 } }
 }

web/pages/variables.tsx

@@ -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 } }
 }

web/utils/doc-utils.ts

@@ -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),
+    ...parsed,
-    values: parsed.values.map((c) => ({ ...c, desc: processMarkdown(c.desc) })),
+    desc_md: processMarkdown(parsed.desc),
+    values: parsed.values.map((c) => ({
+      ...c,
+      desc_md: processMarkdown(c.desc),
+    })),
   }
 
   return docs

web/utils/search.ts

@@ -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(),
+  }
+}

web/yarn.lock

@@ -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"