Search

gatsby-config.ts

@@ -61,6 +61,38 @@ const config: GatsbyConfig = {
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,
+    {
+      resolve: "gatsby-plugin-local-search",
+      options: {
+        name: "pages",
+        engine: "flexsearch",
+        engineOptions: "speed",
+        query: `
+          {
+            allMarkdownRemark {
+              nodes {
+                id
+                frontmatter {
+                  path
+                  title
+                }
+                rawMarkdownBody
+              }
+            }
+          }
+        `,
+        ref: "id",
+        index: ["title", "body"],
+        store: ["id", "path", "title"],
+        normalizer: ({ data }) =>
+          data.allMarkdownRemark.nodes.map((node) => ({
+            id: node.id,
+            path: node.frontmatter.path,
+            title: node.frontmatter.title,
+            body: node.rawMarkdownBody,
+          })),
+      },
+    },
   ],
 };
 

package.json

@@ -20,6 +20,7 @@
     "@svgr/webpack": "^8.0.1",
     "gatsby": "^5.11.0",
     "gatsby-plugin-image": "^3.11.0",
+	  "gatsby-plugin-local-search": "^2.0.1",
     "gatsby-plugin-manifest": "^5.11.0",
     "gatsby-plugin-offline": "^6.11.0",
     "gatsby-plugin-postcss": "^6.11.0",
@@ -32,7 +33,8 @@
     "postcss": "^8.4.26",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tss-react": "^4.8.8"
+    "tss-react": "^4.8.8",
+    "react-use-flexsearch": "^0.1.1"
   },
   "devDependencies": {
     "@emotion/cache": "^11.11.0",

src/components/header.tsx

@@ -18,6 +18,7 @@ import NotesIcon from "../images/notes-icon.svg";
 import ElevationScroll from "./elevation-scroll";
 import HideOnScroll from "./hide-on-scroll";
 import { Navigation } from "./navigation";
+import { useFlexSearch } from "flexsearch";
 
 const useStyles = makeStyles<HeaderProps>({ name: "Header" })((
   _theme,
@@ -135,6 +136,22 @@ const Header = (props: HeaderProps): ReactElement => {
     setDrawerOpen(!drawerOpen);
   };
 
+  const queryData = useStaticQuery(graphql`
+    query {
+      localSearchPages {
+        index
+        store
+      }
+    }
+  `);
+  const index = queryData.localSearchPages.index;
+  console.log("🚀 ~ file: header.tsx ~ line 145 ~ Header ~ index", index);
+  const store = queryData.localSearchPages.store;
+  console.log("🚀 ~ file: header.tsx ~ line 147 ~ Header ~ store", store);
+
+  const [query, setQuery] = useState("");
+  const results = useFlexSearch(query, index, store);
+
   return (
     <>
       <ElevationScroll>
@@ -185,6 +202,8 @@ const Header = (props: HeaderProps): ReactElement => {
                     input: classes.inputInput,
                   }}
                   inputProps={{ "aria-label": "search" }}
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
                 />
               </div>
             </HideOnScroll>

src/markdown-pages/format-an-sd-card.md

@@ -30,14 +30,14 @@ Find a copy of the image you want online and start download. In this example Kal
    `xz -d kali-2017.01-rpi2.img.xz`
 
 2. unmount sd card  
-   **linux**
+    **linux**
 
    \`lsblk \# verify disk
 
    sudo umount /dev/sdc1\`
 
    **mac**  
-   `diskutil list    
+    `diskutil list    
 diskutil unmountDisk /dev/sdc1`
 
 3. copy image to sd card `sudo dd if=kali-2017.01-rpi2.img of=/dev/sdc1 bs=1m`