Feature /docusaurus kbar

site/docs/api/UseAPIConfig.mdx

@@ -0,0 +1,16 @@
+---
+custom_edit_url: null
+---
+
+<div>
+
+</div>
+
+**Type**: object
+
+|PROPERTY|TYPE|DESCRIPTION|
+|:---:|:---:|:---:|
+|serviceName|string|Name of the feathers service|
+|params|object|Params to find to service.find()|
+|onError|function|Callback for when an error occurs|
+

site/docs/api/UseAPIResponse.mdx

@@ -0,0 +1,16 @@
+---
+custom_edit_url: null
+---
+
+<div>
+
+</div>
+
+**Type**: object
+
+|PROPERTY|TYPE|DESCRIPTION|
+|:---:|:---:|:---:|
+|response|object|Feathers response|
+|loading|boolean|Loading state|
+|error|error|Feathers service error|
+

site/docs/api/useApi.mdx

@@ -0,0 +1,21 @@
+---
+custom_edit_url: null
+---
+
+```ts
+function useApi(config: [UseAPIConfig](UseAPIConfig), ready: boolean = true)
+```
+
+<div>
+
+</div>
+
+Access the Feathers API directly, via a specific service
+
+**Returns**: 
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|config|[UseAPIConfig](UseAPIConfig)||||
+|ready|boolean|✔️|true||
+

site/docs/api/useDebounce.mdx

@@ -0,0 +1,22 @@
+---
+custom_edit_url: null
+---
+
+```ts
+function useDebounce(value: any, delay: number)
+```
+
+<div>
+
+</div>
+
+Debounce a value. Useful during auto-complete typing, to avoid pinging your API too much.
+
+**Returns**: 
+- value from executed function
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|value|any|||value to debounce|
+|delay|number|||MS to delay|
+

site/docusaurus.config.js

@@ -53,9 +53,27 @@ const config = {
     ],
   ],
 
+    // https://github.com/facebook/docusaurus/discussions/4104#discussioncomment-4405148
+  // themes: ['@docusaurus/theme-search-algolia'],
+
+// ddsad asfa
+
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      // https://github.com/facebook/docusaurus/discussions/4104#discussioncomment-4405148
+      algolia: {
+        pluginId: 'test',
+        appId: 'foo',
+        apiKey: 'bar',
+        indexName: 'baz',
+        footer: {
+          logo: {
+            src: 'img/meta_oss_logo.png',
+          }
+        }
+      },
+
       navbar: {
         title: 'My Site',
         logo: {

site/jsdoc-mdx-conf.json

@@ -0,0 +1,11 @@
+{
+  "tags": {
+    "allowUnknownTags" : true,
+    "dictionaries": ["jsdoc", "closure"]
+  },
+  "source": {
+    "include": ["../packages/react-feathers/src/hooks/"],
+    "includePattern": ".+\\.(j|t)s(doc|x)?$",
+    "excludePattern": "(^|\\/|\\\\)_"
+  }
+}

site/jsdoc-mdx.json

@@ -0,0 +1,5 @@
+{
+  "sidebar": "./",
+  "outDir": "./docs/api",
+  "jsdoc": "./jsdoc-mdx-conf.json"
+}

site/package.json

@@ -14,13 +14,15 @@
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
     "api-generate": "jsdoc2md --files ../packages/react-feathers/src/hooks/*.js --configure jsdoc-conf.js > docs/API.md",
+    "api-generate-2": "npx jsdoc-to-mdx -c jsdoc-mdx.json",
     "typecheck": "tsc"
   },
   "dependencies": {
     "@docusaurus/core": "2.2.0",
     "@docusaurus/preset-classic": "2.2.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
+    "kbar": "^0.1.0-beta.39",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

site/src/theme/SearchBar.js

@@ -0,0 +1,90 @@
+import React from 'react';
+
+// app.tsx
+import {
+  KBarProvider,
+  KBarPortal,
+  KBarPositioner,
+  KBarAnimator,
+  KBarSearch,
+  useMatches,
+  KBarResults,
+  NO_GROUP,
+} from "kbar";
+
+
+const searchStyle = {
+  padding: "12px 16px",
+  fontSize: "16px",
+  width: "100%",
+  boxSizing: "border-box",
+  outline: "none",
+  border: "none",
+  background: "var(--background)",
+  color: "var(--foreground)",
+};
+
+const animatorStyle = {
+  maxWidth: "600px",
+  width: "100%",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  borderRadius: "8px",
+  overflow: "hidden",
+  boxShadow: "var(--shadow)",
+};
+
+  const actions = [
+    {
+      id: "blog",
+      name: "Blog",
+      shortcut: ["b"],
+      keywords: "writing words",
+      perform: () => (window.location.pathname = "blog"),
+    },
+    {
+      id: "contact",
+      name: "Contact",
+      shortcut: ["c"],
+      keywords: "email",
+      perform: () => (window.location.pathname = "contact"),
+    },
+  ];
+
+export default function SearchBar(){
+  return (
+    <KBarProvider actions={actions}>
+      <KBarPortal>
+        <KBarPositioner>
+          <KBarAnimator>
+            <KBarSearch style={searchStyle} />
+            <RenderResults style={animatorStyle} />
+          </KBarAnimator>
+        </KBarPositioner>
+      </KBarPortal>
+    </KBarProvider>
+  );
+}
+
+function RenderResults() {
+  const { results } = useMatches();
+
+  return (
+    <KBarResults
+      items={results}
+      onRender={({ item, active }) =>
+        typeof item === "string" ? (
+          <div>{item}</div>
+        ) : (
+          <div
+            style={{
+              background: active ? "#eee" : "transparent",
+            }}
+          >
+            {item.name}
+          </div>
+        )
+      }
+    />
+  );
+}