Skip to content

Commit

Permalink
feat(docs): add search to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@brankoconjic
brankoconjic committed Dec 20, 2023
1 parent 797df8b commit 053b8d8
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 75 deletions.
4 changes: 2 additions & 2 deletions apps/docs/src/components/Providers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
"use client";

import { createContext, useCallback, useContext, useEffect, useState } from "react";
import React, { createContext, useCallback, useContext, useEffect, useState } from "react";

type SidebarProps = {
isSidebarOpen: boolean;
isSearchOpen: boolean;
toggleSidebar: () => void;
toggleSearch: () => void;
toggleSearch: React.MouseEventHandler<HTMLButtonElement>;
};

const SidebarContext = createContext<SidebarProps>({
Expand Down
109 changes: 36 additions & 73 deletions apps/docs/src/components/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,32 @@
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-call */
// @ts-nocheck

"use client";

import { useEffect, useState } from "react";
import { forwardRef, useEffect, useState, type HTMLAttributes } from "react";
import Link from "next/link";
import Router from "next/router";
import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react";
import { SearchIcon } from "@iconicicons/react";
import { Button, Kbd } from "@lemonsqueezy/wedges";
import { Button, Kbd, type KbdKey } from "@lemonsqueezy/wedges";
import { createPortal } from "react-dom";

import { cn } from "@/lib/utils";

import { useSidebar } from "./Providers";

const docSearchConfig = {
appId: process.env.NEXT_PUBLIC_DOCSEARCH_APP_ID,
apiKey: process.env.NEXT_PUBLIC_DOCSEARCH_API_KEY,
indexName: process.env.NEXT_PUBLIC_DOCSEARCH_INDEX_NAME,
appId: process.env.NEXT_PUBLIC_DOCSEARCH_APP_ID!,
apiKey: process.env.NEXT_PUBLIC_DOCSEARCH_API_KEY!,
indexName: process.env.NEXT_PUBLIC_DOCSEARCH_INDEX_NAME!,
};

const suffixTitle = (title: string) => {
if (!title) {
return title;
}

return `${title} - Wedges Docs`;
};

function Hit({ hit, children }) {
Expand All @@ -42,19 +50,10 @@ function Hit({ hit, children }) {
);
}

export function Search({ className, ...otherProps }: { className?: string; otherProps?: any }) {
const Search = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
const { className, ...otherProps } = props;
const { isSearchOpen, toggleSearch } = useSidebar();
const [modifierKey, setModifierKey] = useState("command");

const suffixTitle = (title) => {
if (!title) {
return title;
}

const section = "Wedges Docs";

return `${title} - ${section}`;
};
const [modifierKey, setModifierKey] = useState<KbdKey>("command");

useDocSearchKeyboardEvents({ isOpen: isSearchOpen, onOpen: toggleSearch, onClose: toggleSearch });

Expand All @@ -63,7 +62,7 @@ export function Search({ className, ...otherProps }: { className?: string; other
}, []);

return (
<>
<div ref={ref} className={cn(className)}>
<Button
asChild
className={cn(
Expand Down Expand Up @@ -92,70 +91,33 @@ export function Search({ className, ...otherProps }: { className?: string; other
{isSearchOpen &&
createPortal(
<DocSearchModal
{...docSearchConfig}
hitComponent={Hit}
onClose={toggleSearch}
initialScrollY={window.scrollY}
navigator={{
navigate({ itemUrl }) {
Router.push(itemUrl);
},
}}
{...docSearchConfig}
{...otherProps}
transformItems={(items) => {
return items.map((item, index) => {
// We transform the absolute URL into a relative URL to
// leverage Next's preloading.
// We transform the absolute URL into a relative URL to leverage Next's preloading.
const a = document.createElement("a");

a.href = item.url;
const hash = a.hash;

const hash = a.hash === "#content-wrapper" || a.hash === "#header" ? "" : a.hash;

if (item.hierarchy?.lvl0) {
item.hierarchy.lvl0 = item.hierarchy.lvl0.replace(/&amp;/g, "&");
item.hierarchy.lvl0 = item.hierarchy.lvl0.replace("Documentation ", "");
if (item?.content) {
item.content = suffixTitle(item.content);
}

if (item._highlightResult?.hierarchy?.lvl0?.value) {
item._highlightResult.hierarchy.lvl0.value =
item._highlightResult.hierarchy.lvl0.value.replace(/&amp;/g, "&");

item._highlightResult.hierarchy.lvl0.value =
item._highlightResult.hierarchy.lvl0.value.replace("Documentation ", "");
}

if (item.content) {
item.content = suffixTitle(item.content, item);
}

if (item._snippetResult?.content?.value) {
if (item?._snippetResult?.content?.value) {
item._snippetResult.content.value = suffixTitle(
item._snippetResult.content.value,
item
item._snippetResult.content.value
);
}
if (item._highlightResult?.content?.value) {

if (item?._highlightResult?.content?.value) {
item._highlightResult.content.value = suffixTitle(
item._highlightResult.content.value,
item
);
}
if (
item._snippetResult?.hierarchy?.[item.type]?.value &&
item._snippetResult?.hierarchy?.[item.type]?.value !== null
) {
item._snippetResult.hierarchy[item.type].value = suffixTitle(
item._snippetResult?.hierarchy?.lvl2?.value,
item
item._highlightResult.content.value
);
}
if (item._highlightResult?.hierarchy_camel[0]?.[item.type]?.value) {
item._highlightResult.hierarchy_camel[0][item.type].value = suffixTitle(
item._highlightResult.hierarchy_camel[0][item.type].value,
item
);
}

item.hierarchy[item.type] = suffixTitle(item.hierarchy[item.type], item);

return {
...item,
Expand All @@ -165,22 +127,21 @@ export function Search({ className, ...otherProps }: { className?: string; other
__is_child: () =>
item.type !== "lvl1" &&
items.length > 1 &&
items[0].type === "lvl1" &&
items[0]?.type === "lvl1" &&
index !== 0,
__is_first: () => index === 1,
__is_last: () => index === items.length - 1 && index !== 0,
};
});
}}
onClose={toggleSearch}
/>,
document.body
)}
</>
</div>
);
}
});

export function SearchButton() {
function SearchButton() {
const { toggleSearch } = useSidebar();

return (
Expand All @@ -195,3 +156,5 @@ export function SearchButton() {
</Button>
);
}

export { Search, SearchButton };

0 comments on commit 053b8d8

Please sign in to comment.