Add search to website (#8624)

.changeset/wide-wasps-wait.md

@@ -0,0 +1,5 @@
+---
+"website": patch
+---
+
+feat:Add search to website

js/_website/generate_jsons/src/docs/__init__.py

@@ -210,6 +210,17 @@ def organize_pages():
 
     pages = organize_pages()
 
+    # content_json = {}
+    # def generate_content_json(pages): 
+    #     for library in pages: 
+    #         for category in pages[library]: 
+    #             for page in category["pages"]: 
+    #                 page_path = os.path.join(TEMPLATES_DIR, page["path"] + ".svx")
+    #                 with open(page_path) as f:
+    #                     content = f.read()
+    #                 content_json["content"] = content
+
+
     organized["gradio"]["events_matrix"] = component_events
     organized["gradio"]["events"] = events
 

js/_website/package.json

@@ -18,7 +18,8 @@
 		"@tailwindcss/typography": "^0.5.4",
 		"@types/prismjs": "^1.26.0",
 		"prismjs": "1.29.0",
-		"tailwindcss": "^3.1.6"
+		"tailwindcss": "^3.1.6",
+		"flexsearch": "^0.7.43"
 	},
 	"type": "module",
 	"dependencies": {

js/_website/src/lib/assets/style.css

@@ -196,10 +196,7 @@ code.language-bash {
 }
 
 [type="search"]::-webkit-search-cancel-button {
-	@apply appearance-none h-5 w-5;
-	-webkit-appearance: none;
-	background-image: url("/src/lib/assets/img/esc.svg");
-	background-size: 20px 20px;
+	display: none;
 }
 
 .view-code {

js/_website/src/lib/components/DocsNav.svelte

@@ -6,40 +6,9 @@
 	export let current_nav_link = "";
 
 	let show_nav = false;
-	let searchTerm = "";
-	let searchBar: HTMLInputElement;
-
-	const search = () => {
-		let links = document.querySelectorAll(
-			".navigation a"
-		) as NodeListOf<HTMLAnchorElement>;
-		links.forEach((link) => {
-			let linkText = link.innerText.toLowerCase();
-			if (linkText.includes(searchTerm.toLowerCase())) {
-				link.style.display = "block";
-			} else {
-				link.style.display = "none";
-			}
-		});
-	};
-
-	function onKeyDown(e: KeyboardEvent) {
-		if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
-			e.preventDefault();
-			searchBar.focus();
-		}
-		if (e.key == "Escape") {
-			searchTerm = "";
-			searchBar.blur();
-			search();
-		}
-	}
-
 	import DropDown from "$lib/components/VersionDropdown.svelte";
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
-
 <section
 	class="top-0 left-0 fixed flex items-center p-4 rounded-br-lg backdrop-blur-lg z-50 bg-gray-200/50 lg:hidden"
 	id="menu-bar"
@@ -88,16 +57,6 @@
 	<div
 		class="w-full sticky top-0 bg-gradient-to-r from-white to-gray-50 z-10 hidden lg:block my-4 ml-4"
 	>
-		<input
-			bind:value={searchTerm}
-			on:input={search}
-			bind:this={searchBar}
-			id="search"
-			type="search"
-			class="w-4/5 rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0"
-			placeholder="Search ⌘-k / ctrl-k"
-			autocomplete="off"
-		/>
 		<DropDown></DropDown>
 	</div>
 

js/_website/src/lib/components/Header.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { store } from "../../routes/+layout.svelte";
 
-	import { gradio_logo, github_black } from "../assets";
+	import { gradio_logo } from "../assets";
+	import Search from "./search";
 
 	let click_nav = false;
 	let show_help_menu = false;
@@ -103,16 +104,17 @@
 							class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
 							href="/brand">Brand</a
 						>
+						<a
+							class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
+							href="https://github.com/gradio-app/gradio"
+						>
+							Github
+						</a>
 					</div>
 				{/if}
 			</div>
 
-			<a
-				class="thin-link flex items-center gap-3"
-				href="https://github.com/gradio-app/gradio"
-			>
-				<img src={github_black} class="w-6" alt="Github logo" />
-			</a>
+			<Search />
 		</nav>
 	</div>
 </div>

js/_website/src/lib/components/JSDocsNav.svelte

@@ -9,40 +9,10 @@
 	let docs_type = "js";
 
 	let show_nav = false;
-	let searchTerm = "";
-	let searchBar: HTMLInputElement;
-
-	const search = () => {
-		let links = document.querySelectorAll(
-			".navigation a"
-		) as NodeListOf<HTMLAnchorElement>;
-		links.forEach((link) => {
-			let linkText = link.innerText.toLowerCase();
-			if (linkText.includes(searchTerm.toLowerCase())) {
-				link.style.display = "block";
-			} else {
-				link.style.display = "none";
-			}
-		});
-	};
-
-	function onKeyDown(e: KeyboardEvent) {
-		if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
-			e.preventDefault();
-			searchBar.focus();
-		}
-		if (e.key == "Escape") {
-			searchTerm = "";
-			searchBar.blur();
-			search();
-		}
-	}
 
 	import DropDown from "$lib/components/VersionDropdown.svelte";
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
-
 <section
 	class="top-0 fixed -ml-4 flex items-center p-4 rounded-br-lg backdrop-blur-lg z-50 bg-gray-200/50 lg:hidden"
 	id="menu-bar"
@@ -91,16 +61,6 @@
 	<div
 		class="w-full sticky top-0 bg-gradient-to-r from-white to-gray-50 z-10 hidden lg:block my-4 ml-4"
 	>
-		<input
-			bind:value={searchTerm}
-			on:input={search}
-			bind:this={searchBar}
-			id="search"
-			type="search"
-			class="w-4/5 rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0"
-			placeholder="Search ⌘-k / ctrl-k"
-			autocomplete="off"
-		/>
 		{#if version_dropdown}
 			<DropDown docs_type="js"></DropDown>
 		{/if}

js/_website/src/lib/components/search/SearchIcon.svelte

@@ -0,0 +1,15 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="20"
+	height="20"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<title>Search</title>
+	<circle cx="11" cy="11" r="8" />
+	<path d="m21 21-4.3-4.3" />
+</svg>

js/_website/src/lib/components/search/index.ts

@@ -0,0 +1 @@
+export { default } from "./search.svelte";

js/_website/src/lib/components/search/search-worker.ts

@@ -0,0 +1,17 @@
+import { create_pages_index, search_pages_index } from "./search";
+
+addEventListener("message", async (e) => {
+	const { type, payload } = e.data;
+
+	if (type === "load") {
+		const posts = await fetch("/search-api").then((res) => res.json());
+		create_pages_index(posts);
+		postMessage({ type: "ready" });
+	}
+
+	if (type === "search") {
+		const search_term = payload.search_term;
+		const results = search_pages_index(search_term);
+		postMessage({ type: "results", payload: { results, search_term } });
+	}
+});