Apply filter removal and fix to 2.0

src/components/PageHeader/RootPage.astro

@@ -1,14 +1,7 @@
 ---
 const { title, subtitle } = Astro.props;
 
-// The page header and filter by keyword are separated in the hierarchy but
-// are intended to visually blend together. A bottom border should be added
-// to the header only when the filter by keyword is not present.
-const routesWithFilter = ["/reference"];
-const isFilterRoute = routesWithFilter.some((route) =>
-  Astro.url.pathname.includes(route)
-);
-const borderStyle = isFilterRoute ? "" : "border-b border-sidebar-type-color";
+const borderStyle = "border-b border-sidebar-type-color";
 ---
 
 <div

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -1,7 +1,4 @@
 import type { ReferenceDocContentItem } from "@/src/content/types";
-import { useMemo, useRef, useState } from "preact/hooks";
-import { type JSX } from "preact";
-import { Icon } from "../Icon";
 import flask from "@src/content/ui/images/icons/flask.svg?raw";
 import warning from "@src/content/ui/images/icons/warning.svg?raw";
 
@@ -13,15 +10,7 @@ type ReferenceDirectoryEntry = ReferenceDocContentItem & {
   };
 };
 
-type FilteredCategoryData = {
-  name: string;
-  subcats: {
-    name: string;
-    entries: ReferenceDirectoryEntry[];
-  }[];
-};
-
-type ReferenceDirectoryWithFilterProps = {
+type ReferenceDirectoryProps = {
   categoryData: {
     name: string;
     subcats: {
@@ -30,7 +19,6 @@ type ReferenceDirectoryWithFilterProps = {
       entries: ReferenceDirectoryEntry[];
     }[];
   }[];
-  uiTranslations: { [key: string]: string };
 };
 
 /**
@@ -62,46 +50,7 @@ const getOneLineDescription = (description: string): string => {
 
 export const ReferenceDirectoryWithFilter = ({
   categoryData,
-  uiTranslations,
-}: ReferenceDirectoryWithFilterProps) => {
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const filteredEntries = useMemo(() => {
-    if (!searchKeyword) return categoryData;
-
-    return categoryData.reduce((acc: FilteredCategoryData[], category) => {
-      const filteredSubcats = category.subcats.reduce(
-        (subAcc: typeof category.subcats, subcat) => {
-          const filteredEntries = subcat.entries.filter((entry) =>
-            entry.data.title
-              .toLowerCase()
-              .includes(searchKeyword.toLowerCase()),
-          );
-          if (
-            subcat.entry &&
-            subcat.entry.data.title
-              .toLowerCase()
-              .includes(searchKeyword.toLowerCase())
-          ) {
-            filteredEntries.push(subcat.entry);
-          }
-
-          if (filteredEntries.length > 0) {
-            subAcc.push({ ...subcat, entries: filteredEntries });
-          }
-          return subAcc;
-        },
-        [],
-      );
-
-      if (filteredSubcats.length > 0) {
-        acc.push({ ...category, subcats: filteredSubcats });
-      }
-      return acc;
-    }, []);
-  }, [categoryData, searchKeyword]);
-
+}: ReferenceDirectoryProps) => {
   const renderEntries = (entries: ReferenceDirectoryEntry[]) =>
     entries.length === 0 ? null : (
       <div class="content-grid">
@@ -172,10 +121,7 @@ export const ReferenceDirectoryWithFilter = ({
   };
 
   const renderCategoryData = () => {
-    if (filteredEntries.length === 0) {
-      return <div class="mt-lg">{uiTranslations["No Results"]}</div>;
-    }
-    return filteredEntries.map((category) => (
+    return categoryData.map((category) => (
       <section key={category.name}>
         <h2
           class={
@@ -197,45 +143,9 @@ export const ReferenceDirectoryWithFilter = ({
     ));
   };
 
-  const clearInput = () => {
-    if (inputRef.current) {
-      inputRef.current.value = "";
-      setSearchKeyword("");
-    }
-  };
-
   return (
-    <div>
-      <div class="h-0 overflow-visible">
-        <div class="content-grid-simple absolute -left-0 -right-0 -top-[60px] h-[75px] border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg ">
-          <div class="text-body col-span-2 flex w-full max-w-[750px] border-b border-accent-type-color text-accent-type-color">
-            <input
-              type="text"
-              id="search"
-              ref={inputRef}
-              class="w-full bg-transparent py-xs text-accent-type-color placeholder:text-accent-type-color focus:outline-0"
-              placeholder={uiTranslations["Filter by keyword"]}
-              onKeyUp={(e: JSX.TargetedKeyboardEvent<HTMLInputElement>) => {
-                const target = e.target as HTMLInputElement;
-                setSearchKeyword(target?.value);
-              }}
-            />
-            {searchKeyword.length > 0 && (
-              <button
-                type="reset"
-                class=""
-                onClick={clearInput}
-                aria-label="Clear search input"
-              >
-                <Icon kind="close" className="h-4 w-4" />
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-      <div class="-top-[75px] mx-5 min-h-[50vh] md:mx-lg">
-        {renderCategoryData()}
-      </div>
+    <div class="-top-[75px] mx-5 min-h-[50vh] md:mx-lg">
+      {renderCategoryData()}
     </div>
   );
 };

src/content/ui/en.yaml

@@ -11,7 +11,6 @@ Donate: Donate
 Download: Download
 Accessibility: Accessibility
 Search: Search
-Filter by keyword: Filter by keyword
 Jump To: Jump to
 Resources: Resources
 Information: Information

src/content/ui/es.yaml

@@ -10,7 +10,6 @@ Donate: Donar
 Download: Descargar
 Accessibility: Accesibilidad
 Search: Buscar
-Filter by keyword: Filtrar por palabra clave
 Jump To: Saltar a
 Resources: Recursos
 Information: Información

src/content/ui/hi.yaml

@@ -10,7 +10,6 @@ Donate: दान
 Download: डाउनलोड
 Accessibility: अभिगम्यता
 Search: खोजें
-Filter by keyword: कीवर्ड द्वारा फ़िल्टर करें
 Jump To: इस पर जाएं
 Resources: संसाधन
 Information: जानकारी

src/content/ui/ko.yaml

@@ -10,7 +10,6 @@ Donate: 기부
 Download: 다운로드
 Accessibility: 접근성
 Search: 검색
-Filter by keyword: 키워드로 필터링
 Jump To: 이동
 Resources: 자료
 Information: 정보
@@ -37,6 +36,8 @@ Related Examples: 관련 예제
 Show Code: 코드 보기
 Donate to p5.js: p5.js에 기부하기
 Download p5.js: p5.js 다운로드
+No Results: 검색 결과가 없습니다.
+No alt text: 대체 텍스트 없음
 briefPageDescriptions:
   Reference: p5.js 코드의 각 부분에 대한 쉬운 설명을 찾아보세요.
   Examples: 간단한 예제로 p5.js의 가능성을 탐험해보세요.

src/content/ui/zh-Hans.yaml

@@ -11,7 +11,6 @@ Donate: 捐赠
 Download: 下载
 Accessibility: 无障碍
 Search: 搜索
-Filter by keyword: 按关键字筛选
 Jump To: 跳转到
 Resources: 资源
 Information: 信息

src/layouts/ReferenceLayout.astro

@@ -15,7 +15,6 @@ import {
 } from "../globals/state";
 import {
   getCurrentLocale,
-  getUiTranslationWithFallback,
   getUiTranslator,
 } from "../i18n/utils";
 
@@ -37,7 +36,6 @@ function strCompare(a: string, b: string) {
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
-const uiTranslations = await getUiTranslationWithFallback(currentLocale);
 
 const { entries } = Astro.props;
 
@@ -158,8 +156,6 @@ setJumpToState(pageJumpToState);
 
 <BaseLayout title={Astro.props.title} mainContentParentClass="mx-0">
   <ReferenceDirectoryWithFilter
-    client:load
     categoryData={categoryData as any}
-    uiTranslations={uiTranslations}
   />
 </BaseLayout>