search integration

Author: ShukantPal

packages/webdoc-cli/README.md

@@ -65,3 +65,44 @@ The `docs` object has options to configure the generation of the document tree.
   * `"scope"`: Order by scope as follows: static, instance, inner.
   * `"access"`: Order by access as follows: public, protected, private.
   * `"name"`: Order alphabetically by the simple-name.
+
+### opts
+
+The `opts` object has additional CLI options.
+
+```json
+{
+  "opts": {
+    "destination": "docs",
+    "export": "api.json",
+    "template": "@webdoc/default-template"
+  }
+}
+```
+
+* `opts.destination`: (optional) The destination path for the generated documentation files.
+* `opts.export`: (optional) The file where the API schema is exported.
+* `opts.template`: (optional) The template package to use. This defaults to "@webdoc/default-template".
+
+#### template
+
+The `template` object is used by the site template.
+
+```json
+{
+  "repository": "http://github.com/webdoc-labs/webdoc",
+  "integrations": {
+    "search": {
+      "provider": "algolia",
+      "apiKey": "kadlfj232983lkqwem",
+      "indexName": "webdoc-example",
+      "appId": "349o39841;akdsfu"
+    }
+  }
+}
+```
+
+* `template.repository`: (optional) This can be used to link documents to their location in the source code. The only supported repository is GitHub.
+* `template.integrations`: (optional) Integrations with 3rd party solutions in your template. This object is dependent on which template you're using. For @webdoc/default-template, the following integrations are available:
+  * `search`: This is used as the backend for the global site search. You'll need to create an Algolia account yourself and provide
+    the `apiKey`, `appId`, `indexName`. (The only supported provider is "algolia" right now)

packages/webdoc-cli/src/config.js

@@ -43,7 +43,8 @@ type ConfigSchema = {
       mode?: string
     },
     repository?: string,
-    outputSourceFiles?: boolean
+    outputSourceFiles?: boolean,
+    integrations: any,
   },
   version: {
     number?: 1
@@ -85,6 +86,7 @@ const defaultConfig: ConfigSchema = {
     },
     repository: undefined, // ex. GitHub repo holding source files to link source files
     // should contain branch - https://github.com/webdoc-js/webdoc/blob/master/
+    integrations: {},
   },
   version: {
     number: 1,

packages/webdoc-default-template/publish.js

@@ -224,7 +224,6 @@ function outReference(
     }
 
     page = linker.processInternalURI(page, {outputRelative: true});
-
     let doc;
 
     try {

packages/webdoc-default-template/src/app/components/Explorer/ExplorerItem.js

@@ -32,10 +32,6 @@ export default function ExplorerItem(props) {
   const nodeId = props.data.$nodeId;
   const primary = props.data.page && isSamePage(props.data);
 
-  if (primary) {
-    console.log(props.data);
-  }
-
   const toggle = React.useCallback(
     () => props.toggle(nodeId),
     [nodeId],

packages/webdoc-default-template/src/app/components/Header/Header.js

@@ -1,4 +1,6 @@
 import {ExplorerHeader} from "../Explorer";
+import Search from "./Search";
+import {appData} from "../../resource";
 import {connect} from "react-redux";
 import store from "../../store";
 
@@ -19,6 +21,7 @@ export default connect(({explorerOpen}) => ({
       <div className="header__contents">
         <a className="header__link header__link__current">API Reference</a>
         <a className="header__link">Guides</a>
+        {appData.integrations.search && <Search integration={appData.integrations.search} />}
       </div>
     </div>
   );

packages/webdoc-default-template/src/app/components/Header/Search.js

@@ -0,0 +1,70 @@
+import React from "react";
+import {getResourceURI} from "../../resource";
+
+export default function Search({
+  integration,
+}) {
+  const ref = React.useRef(null);
+  const enabled = React.useRef(false);
+
+  React.useEffect(
+    () => {
+      if (!ref.current || enabled.current) {
+        return;
+      }
+      if (integration.provider === "algolia") {
+        if (!window.docsearch) {
+          throw new Error("docsearch should be in global scope");
+        }
+
+        window.docsearch({
+          apiKey: integration.apiKey,
+          appId: integration.appId,
+          indexName: integration.indexName,
+          inputSelector: "#search",
+          debug: false,
+        });
+
+        enabled.current = true;
+      }
+    },
+    [ref.current],
+  );
+
+  return (
+    <div
+      ref={ref}
+      className="search-container"
+      style={{
+        display: "grid",
+      }}
+    >
+      <input
+        id="search"
+        placeholder="Search"
+        style={{
+          backgroundColor: "#FBFBFB",
+          border: "1px solid rgba(0, 0, 0, .04)",
+          borderRadius: 4,
+          color: "rgba(0, 0, 0, 0.34)",
+          display: "flex",
+          fontSize: "12px",
+          height: "32px",
+          paddingLeft: "18px",
+          width: "240px",
+        }}
+      />
+      <img
+        src={getResourceURI("/icons/search.svg")}
+        style={{
+          alignSelf: "center",
+          justifySelf: "end",
+          marginTop: 2,
+          marginRight: 9,
+          pointerEvents: "none",
+          zIndex: 1,
+        }}
+      />
+    </div>
+  );
+}

packages/webdoc-default-template/src/app/resource.js

@@ -0,0 +1,11 @@
+export const appData = window.appData;
+
+export function getResourceURI(path) {
+  const root = window.appData.siteRoot;
+
+  if (!path.startsWith("/")) {
+    path = `/${path}`;
+  }
+
+  return root + path;
+}

packages/webdoc-default-template/src/styles/header.scss

@@ -22,6 +22,7 @@
   height: $header-height;
   top: 0;
   width: 100%;
+  z-index: 1;
 
   &__container {
     align-items: center;
@@ -40,7 +41,7 @@
     justify-content: flex-end;
     height: 100%;
 
-    * {
+    > * {
       margin-right: 42px;
     }
   }

packages/webdoc-default-template/src/styles/index.scss

@@ -13,3 +13,13 @@
 @import "footer";
 
 // @import "pages/api-index";
+
+.search-container > * {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+#search:focus {
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  outline: none;
+}