fix some a11y problems

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,
               }}

website/src/app/page.tsx

@@ -56,7 +56,7 @@ export default function Home() {
         >
           <Suspense fallback="search input ">
             <FilterProvider>
-              <SearchInput placeholder="search nix functions" />
+              <SearchInput placeholder="search nix functions" autoFocus />
               <Filter disableChevron disableSubmit showDivider />
             </FilterProvider>
           </Suspense>

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<boolean>(true);
+  const [error, setError] = useState<undefined | string>();
+
   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,
   };
 };
 

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 | PagefindResult[]>(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<HTMLInputElement | HTMLTextAreaElement>
   ) => {
@@ -123,6 +131,64 @@ export function PagefindResults() {
     }
   };
 
+  if (loading) {
+    return (
+      <Container maxWidth="lg" sx={{ mt: 2 }}>
+        <List aria-label="basic-list" sx={{ pt: 1, width: "100%" }}>
+          {[0, 1].map((key) => (
+            <ListItem
+              sx={{ px: 0, py: 1 }}
+              aria-label={`item-skeleton`}
+              key={key}
+            >
+              <ListItemAvatar>
+                <Avatar>
+                  <Skeleton variant="circular" />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText
+                primaryTypographyProps={{
+                  variant: "h5",
+                  component: "h2",
+                }}
+                secondaryTypographyProps={{
+                  variant: "body1",
+                }}
+                primary={<Skeleton height={80} />}
+                secondary={<Skeleton />}
+              />
+            </ListItem>
+          ))}
+        </List>
+      </Container>
+    );
+  }
+  if (!loading && error) {
+    return (
+      <Container maxWidth="lg" sx={{ mt: 2 }}>
+        <Card>
+          <CardHeader title="Search not available" subheader={error} />
+          <CardContent>
+            <Typography variant="h5">Why this might have happened</Typography>
+            <ul>
+              <li>
+                <Typography sx={{ py: 1 }}>
+                  A network error may have occurred. Reload the page
+                </Typography>
+              </li>
+              <li>
+                <Typography sx={{ py: 1 }}>
+                  Make sure you are using the latest browser. And your browser
+                  supports WebAssembly
+                </Typography>
+              </li>
+            </ul>
+          </CardContent>
+        </Card>
+      </Container>
+    );
+  }
+
   return (
     <Box
       sx={{

website/src/components/searchInput/searchInput.tsx

@@ -8,6 +8,7 @@ import React from "react";
 import { data } from "@/models/data";
 import TuneIcon from "@mui/icons-material/Tune";
 import { useFilter } from "../layout/filterContext";
+import { useRouter } from "next/navigation";
 
 // import dynamic from "next/dynamic";
 
@@ -17,10 +18,11 @@ import { useFilter } from "../layout/filterContext";
 
 export interface SearchInputProps {
   placeholder: string;
+  autoFocus?: boolean;
 }
 
 export function SearchInput(props: SearchInputProps) {
-  const { placeholder } = props;
+  const { placeholder, autoFocus = false } = props;
   const {
     setShowFilter,
     to,
@@ -31,6 +33,7 @@ export function SearchInput(props: SearchInputProps) {
     setFrom,
     setTo,
   } = useFilter();
+  const router = useRouter();
 
   const handleSubmit = (input: string) => {
     submitFilters({ input });
@@ -72,10 +75,15 @@ export function SearchInput(props: SearchInputProps) {
       <Autocomplete
         freeSolo
         includeInputInList
-        aria-label={"search-input"}
+        aria-label={"search"}
         onInputChange={(e, value, reason) => {
           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) => (
           <TextField
             {...params}
+            autoFocus={autoFocus}
             InputProps={{
               ...params.InputProps,
               type: "search",

website/src/styles/theme/lightThemeOptions.ts

@@ -11,7 +11,8 @@ const lightThemeOptions: ThemeOptions = {
       main: "#6ad541",
     },
     background: {
-      default: "#fafaff",
+      paper: "#fafafa",
+      default: "#f0f1f2",
     },
   },
 };