diff --git a/website/src/app/f/[...path]/page.tsx b/website/src/app/f/[...path]/page.tsx index 626244c..eb1eea7 100644 --- a/website/src/app/f/[...path]/page.tsx +++ b/website/src/app/f/[...path]/page.tsx @@ -41,7 +41,7 @@ const Toc = async (props: TocProps) => { }, position: "sticky", top: "3.7rem", - p: 1, + p: 2, order: 3, whiteSpace: "nowrap", }} @@ -55,7 +55,7 @@ const Toc = async (props: TocProps) => { sx={{ justifyContent: "start", textTransform: "none", - color: "text.secondary", + color: "text.primary", py: 0.5, }} > @@ -70,7 +70,7 @@ const Toc = async (props: TocProps) => { sx={{ justifyContent: "start", textTransform: "none", - color: "text.secondary", + color: "text.primary", pl: h.level, py: 0.5, }} diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx index 6831248..b75fbef 100644 --- a/website/src/app/page.tsx +++ b/website/src/app/page.tsx @@ -56,7 +56,7 @@ export default function Home() { > - + diff --git a/website/src/components/Pagefind.tsx b/website/src/components/Pagefind.tsx index 57bfe3c..091ef3b 100644 --- a/website/src/components/Pagefind.tsx +++ b/website/src/components/Pagefind.tsx @@ -38,10 +38,15 @@ type PagefindHooks = { }> | undefined; pagefind: any | undefined; + loading: boolean; + error: undefined | string; }; export const usePagefindSearch = (): PagefindHooks => { const [pagefind, setPagefind] = useState(); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(); + useEffect(() => { const init = async () => { // @ts-ignore @@ -53,13 +58,18 @@ export const usePagefindSearch = (): PagefindHooks => { ); // @ts-ignore window.pagefind = pagefind; + + setError(undefined); } catch (e) { console.log({ e }); + setError("Could not load search wasm module"); } } // @ts-ignore setPagefind(window.pagefind); + setLoading(false); }; + init(); }, []); @@ -69,6 +79,9 @@ export const usePagefindSearch = (): PagefindHooks => { search: pagefind?.search, // @ts-ignore pagefind, + + loading, + error, }; }; diff --git a/website/src/components/PagefindResults.tsx b/website/src/components/PagefindResults.tsx index 5e527cf..ebf6cf9 100644 --- a/website/src/components/PagefindResults.tsx +++ b/website/src/components/PagefindResults.tsx @@ -1,6 +1,10 @@ "use client"; import { + Avatar, Box, + Card, + CardContent, + CardHeader, Chip, Container, IconButton, @@ -8,7 +12,9 @@ import { Link, List, ListItem, + ListItemAvatar, ListItemText, + Skeleton, TablePagination, Typography, useMediaQuery, @@ -56,7 +62,7 @@ export function PagefindResults() { const [items, setItems] = useState(null); - const { search } = usePagefindSearch(); + const { search, loading, error } = usePagefindSearch(); useEffect(() => { const init = async () => { console.log({ search, term, filters: { from, to } }); @@ -68,6 +74,8 @@ export function PagefindResults() { init(); }, [term, from, to, search]); + console.log({ search, loading, error }); + const handleChangeRowsPerPage = ( event: React.ChangeEvent ) => { @@ -123,6 +131,64 @@ export function PagefindResults() { } }; + if (loading) { + return ( + + + {[0, 1].map((key) => ( + + + + + + + } + secondary={} + /> + + ))} + + + ); + } + if (!loading && error) { + return ( + + + + + Why this might have happened +
    +
  • + + A network error may have occurred. Reload the page + +
  • +
  • + + Make sure you are using the latest browser. And your browser + supports WebAssembly + +
  • +
+
+
+
+ ); + } + return ( { submitFilters({ input }); @@ -72,10 +75,15 @@ export function SearchInput(props: SearchInputProps) { { if (reason === "reset") { - handleSubmit(value); + console.log({ value, reason }); + if (value) { + router.push(`/f/${value.split(".").join("/")}`); + } else { + handleSubmit(value); + } } }} options={data.map((e) => e.meta.title)} @@ -89,6 +97,7 @@ export function SearchInput(props: SearchInputProps) { renderInput={(params) => (