Skip to content

Commit 433c27d

Browse files
ShanugoyankaShanugoyanka
authored
feat(docs): Added gloval search for uagents, network and innovation lab (#1208)
1 parent b1f32c3 commit 433c27d

File tree

3 files changed

+58
-129
lines changed

3 files changed

+58
-129
lines changed

‎theme/fetch-ai-docs/components/instant-algolia-search.tsx

Lines changed: 52 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -12,32 +12,23 @@ import { getComponents } from "../mdx-components";
1212
import { useConfig } from "../contexts";
1313
import { remark } from "remark";
1414
import remarkHTML from "remark-html";
15-
import type { Item as NormalItem } from "nextra/normalize-pages";
1615
import { Input } from "./input";
1716
import Modal from "./search-model";
1817
import { DarkShortcut, Shortcut } from "src/icons/shared-icons";
1918
import { useTheme } from "next-themes";
2019
import { ThemeMode } from "../helpers";
2120

22-
type MyItem = NormalItem & {
23-
tags?: string[];
24-
};
25-
2621
const searchClient = algoliasearch(
27-
`${process.env.NEXT_PUBLIC_ALGOLIA_APP_ID}`,
28-
`${process.env.NEXT_PUBLIC_ALGOLIA_API_KEY}`,
22+
`4MNO2TMYQ5`, //4MNO2TMYQ5
23+
`79f05f43517b76c1b8af1c6c667dbaba`,
2924
);
30-
const indexName = `${process.env.NEXT_PUBLIC_ALGOLIA_INDEX}`;
25+
const indexName = `Fetch ai Docs`;
3126

3227
const markdownToHTML = (markdownString) => {
3328
return remark().use(remarkHTML).processSync(markdownString).toString();
3429
};
3530

36-
export const InstantAlgoliaSearch = ({
37-
directories,
38-
}: {
39-
directories: MyItem[];
40-
}) => {
31+
export const InstantAlgoliaSearch = () => {
4132
const config = useConfig();
4233
const router = useRouter();
4334
const [modalIsOpen, setModalIsOpen] = useState(false);
@@ -69,8 +60,8 @@ export const InstantAlgoliaSearch = ({
6960
}
7061
}
7162

72-
const actualPath = path.split("/docs")[1];
73-
router.push(actualPath);
63+
// const actualPath = path.split("/docs")[1];
64+
router.push(path);
7465
setModalIsOpen(false);
7566
};
7667

@@ -107,121 +98,59 @@ export const InstantAlgoliaSearch = ({
10798
);
10899
};
109100

110-
const directoriesWithTags = directories
111-
.filter((directory) => !!("tags" in directory))
112-
.map(({ route, tags }) => ({ route, tags }));
113-
114101
const CustomHits = connectHits(({ hits }) => {
115102
if (hits.length <= 0) {
116103
return <NoResultsBoundary fallback={"No more information available !"} />;
117104
}
118105

119-
const groupedHits = {};
120-
121-
for (const hit of hits) {
122-
const route = hit.path.split("#")[0];
123-
124-
if (!groupedHits[route]) {
125-
groupedHits[route] = [];
126-
}
127-
128-
groupedHits[route].push(hit);
129-
}
130-
131-
const tagColors = [
132-
"bg-indigo",
133-
"bg-orange",
134-
"bg-light-green",
135-
"bg-blue-150",
136-
"bg-yellow-150",
137-
"bg-red-150",
138-
];
139-
140106
return (
141-
<div className="nextra-scrollbar nx-border nx-border-gray-200 nx-bg-white dark:nx-bg-dark-main dark:nx-border-none nx-absolute nx-top-full nx-z-20 nx-mt-2 nx-overflow-auto nx-overscroll-contain nx-rounded-xl nx-py-2.5 nx-shadow-xl small-screen-height sm:nx-max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:nx-max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] nx-inset-x-0 ltr:md:nx-left-auto rtl:md:nx-right-auto contrast-more:nx-border contrast-more:nx-border-gray-900 contrast-more:dark:nx-border-gray-50 nx-max-w-full">
142-
{Object.entries(groupedHits).map(([route, hitsForRoute]) => (
143-
<div key={route}>
144-
<div className="nx-py-2 nx-bg-grey-200 nx-text-sm nx-text-grey-600 nx-font-semibold nx-tracking-loose nx-uppercase dark:nx-bg-dark-mode-white-2">
145-
<span className="nx-px-4 nx-text-sm nx-flex nx-gap-4 dark:nx-text-white-90">
146-
<div className="nx-my-1">{route.split("/").pop()}</div>
147-
{directoriesWithTags.map((directory) => {
148-
if (route.includes(directory.route)) {
149-
return (
150-
<div key={directory.route}>
151-
<div className="nx-flex nx-flex-wrap nx-gap-2 nx-max-w-50rem">
152-
{directory.tags.slice(0, 3).map((tag, index) => (
153-
<span
154-
key={index}
155-
className={`nx-text-fetch-main nx-text-xs nx-font-normal nx-rounded nx-px-1 nx-py-1 nx-${
156-
tagColors[index % tagColors.length]
157-
}`}
158-
>
159-
{tag}
160-
</span>
161-
))}
162-
</div>
163-
</div>
164-
);
165-
}
166-
return null;
167-
})}
168-
</span>
169-
</div>
170-
171-
<ul role="listbox" aria-labelledby="search-label">
172-
{
173-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
174-
(hitsForRoute as any[]).map((hit) => (
175-
<li
176-
role="option"
177-
aria-selected="false"
178-
className="nx-relative nx-border-grey-200 nx-bg-search-result nx-cursor-pointer"
179-
key={hit.objectId}
180-
>
181-
<div
182-
className="nx-flex nx-justify-between nx-items-center nx-leading-normal nx-py-2 nx-px-6 nx-transition-colors nx-duration-5 nx-ease-out nx-overflow-hidden nx-text-grey-900 nx-bg-transparent dark:nx-bg-dark-main"
183-
onClick={() => onClickSearchResult(hit.path)}
184-
>
185-
<div className="w-full nx-flex nx-flex-col nx-relative">
186-
<div className="nx-text-base nx-font-semibold nx-text-fetch-main dark:nx-text-white-80">
187-
{hit.title.replaceAll("#", "")}
188-
</div>
189-
190-
{hit.content.length > 0 && (
191-
<div className="w-full nx-relative nx-text-sm nx-leading-tight nx-mt-4 nx-xl:mt-2 nx-mb-2">
192-
<MDXProvider
193-
components={getComponents({
194-
isRawLayout: false,
195-
components: config.components,
196-
})}
197-
>
198-
<div
199-
className="nx-flex-grow-1 nx-text-fetch-content nx-font-normal nx-text-fetch-main nx-text-sm dark:nx-text-white-60 dark:nx-bg-dark-main"
200-
dangerouslySetInnerHTML={{
201-
__html: `${markdownToHTML(hit.content).slice(
202-
0,
203-
500,
204-
)}${hit.content.length > 500 ? "..." : ""}`,
205-
}}
206-
/>
207-
</MDXProvider>
208-
</div>
209-
)}
210-
<div className="nx-text-sm nx-text-grey-600 dark:nx-text-indigo-250">
211-
{hit.path
212-
.replace(/^\/docs\//, "")
213-
.split("/")
214-
.join(" > ")}
215-
</div>
216-
</div>
107+
<div className="nextra-scrollbar nx-w-full nx-border nx-border-gray-200 nx-bg-white dark:nx-bg-dark-main dark:nx-border-none nx-absolute nx-top-full nx-z-20 nx-mt-2 nx-overflow-auto nx-overscroll-contain nx-py-2.5 nx-shadow-xl small-screen-height sm:nx-max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:nx-max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] nx-inset-x-0 ltr:md:nx-left-auto rtl:md:nx-right-auto contrast-more:nx-border contrast-more:nx-border-gray-900 contrast-more:dark:nx-border-gray-50 nx-max-w-full">
108+
<ul role="listbox" aria-labelledby="search-label">
109+
{hits.map((hit) => (
110+
<li
111+
role="option"
112+
aria-selected="false"
113+
className="nx-relative nx-border-grey-200 nx-bg-search-result nx-cursor-pointer"
114+
key={hit.objectId}
115+
>
116+
<div
117+
className="nx-flex nx-justify-between nx-items-center nx-leading-normal nx-py-2 nx-px-6 nx-transition-colors nx-duration-5 nx-ease-out nx-overflow-hidden nx-text-grey-900 nx-bg-transparent dark:nx-bg-dark-main"
118+
onClick={() => onClickSearchResult(hit.url)}
119+
>
120+
<div className="w-full nx-flex nx-flex-col nx-relative">
121+
<div className="nx-text-base nx-font-semibold nx-text-fetch-main dark:nx-text-white-80">
122+
{hit.anchor || hit.hierarchy.lvl1 || hit.hierarchy.lvl0}
123+
</div>
124+
125+
{hit.content && hit.content.length > 0 && (
126+
<div className="w-full nx-relative nx-text-sm nx-leading-tight nx-mt-4 nx-xl:mt-2 nx-mb-2">
127+
<MDXProvider
128+
components={getComponents({
129+
isRawLayout: false,
130+
components: config.components,
131+
})}
132+
>
133+
<div
134+
className="nx-flex-grow-1 nx-text-fetch-content nx-font-normal nx-text-fetch-main nx-text-sm dark:nx-text-white-60 dark:nx-bg-dark-main"
135+
dangerouslySetInnerHTML={{
136+
__html: `${markdownToHTML(hit.content).slice(
137+
0,
138+
500,
139+
)}${hit.content.length > 500 ? "..." : ""}`,
140+
}}
141+
/>
142+
</MDXProvider>
217143
</div>
218-
<div className="nx-border-b" />
219-
</li>
220-
))
221-
}
222-
</ul>
223-
</div>
224-
))}
144+
)}
145+
<div className="nx-text-sm nx-text-grey-600 dark:nx-text-indigo-250">
146+
{hit.url}
147+
</div>
148+
</div>
149+
</div>
150+
<div className="nx-border-b" />
151+
</li>
152+
))}
153+
</ul>
225154
</div>
226155
);
227156
});

‎theme/fetch-ai-docs/components/navbar.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -270,11 +270,11 @@ export function Navbar({ items }: NavBarProps): ReactElement {
270270
})}
271271
</div>
272272
<div className="nx-flex nx-items-center">
273-
{/* <div className="nx-hidden nx-m-l-auto nx-search-width search-bar-desktop md:nx-inline-block">
273+
<div className="nx-hidden nx-m-l-auto nx-search-width search-bar-desktop md:nx-inline-block">
274274
{renderComponent(config.search.component, {
275-
directories: flatDirectories,
275+
directories: [],
276276
})}
277-
</div> */}
277+
</div>
278278
{/* <div ref={dropdownRef} className="nx-relative">
279279
<Gear onClickHandler={handleOpenClose}/>
280280
{openOs && (
@@ -306,7 +306,7 @@ export function Navbar({ items }: NavBarProps): ReactElement {
306306
</div>
307307
{/* <div className="search-bar-mobile nx-mt-6 nx-mb-2">
308308
{renderComponent(config.search.component, {
309-
directories: flatDirectories,
309+
directories: [],
310310
// className: "md:nx-hidden nx-mt-6 nx-mb-2",
311311
})}
312312
</div> */}

‎theme/fetch-ai-docs/constants.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -268,8 +268,8 @@ export const DEFAULT_THEME: DocsThemeConfig = {
268268
),
269269
},
270270
search: {
271-
component: function Search({ directories }) {
272-
return <InstantAlgoliaSearch directories={directories} />;
271+
component: function Search() {
272+
return <InstantAlgoliaSearch />;
273273
},
274274
emptyResult: (
275275
<span className="nx-block nx-select-none nx-p-8 nx-text-center nx-text-sm nx-text-gray-400">

0 commit comments

Comments
 (0)