diff --git a/gatsby-config.ts b/gatsby-config.ts index c63405e01..5660237f2 100644 --- a/gatsby-config.ts +++ b/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, + })), + }, + }, ], }; diff --git a/package-lock.json b/package-lock.json index ca2d0da93..1eabe2e40 100644 --- a/package-lock.json +++ b/package-lock.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,6 +33,7 @@ "postcss": "^8.4.26", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-use-flexsearch": "^0.1.1", "tss-react": "^4.8.8" }, "devDependencies": { @@ -11386,6 +11388,11 @@ "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==", "license": "ISC" }, + "node_modules/flexsearch": { + "version": "0.6.32", + "resolved": "https://registry.npmjs.org/flexsearch/-/flexsearch-0.6.32.tgz", + "integrity": "sha512-EF1BWkhwoeLtbIlDbY/vDSLBen/E5l/f1Vg7iX5CDymQCamcx1vhlc3tIZxIDplPjgi0jhG37c67idFbjg+v+Q==" + }, "node_modules/follow-redirects": { "version": "1.15.9", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", @@ -12273,6 +12280,23 @@ } } }, + "node_modules/gatsby-plugin-local-search": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/gatsby-plugin-local-search/-/gatsby-plugin-local-search-2.0.1.tgz", + "integrity": "sha512-qrApdH2IYfHL+dSmcwSzhDPVxlkt13N0IfEkKxfWf0gITmBwObOJBYAMnYiYUmP0dpYmSV9anJE//SLZBSsisA==", + "dependencies": { + "flexsearch": "^0.6.32", + "lodash": "^4.17.19", + "lunr": "^2.3.8", + "pascal-case": "^3.1.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "gatsby": ">= 2.20.0" + } + }, "node_modules/gatsby-plugin-manifest": { "version": "5.15.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-5.15.0.tgz", @@ -15880,6 +15904,11 @@ "es5-ext": "~0.10.2" } }, + "node_modules/lunr": { + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz", + "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==" + }, "node_modules/make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", @@ -18991,6 +19020,17 @@ "react-dom": ">=16.6.0" } }, + "node_modules/react-use-flexsearch": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/react-use-flexsearch/-/react-use-flexsearch-0.1.1.tgz", + "integrity": "sha512-UDRDB26HPcAo0gXNkUYYkcjoYCW4FSWr7Ich4adgVr7bqefJG7fnjlcqnwsKQkbZuteRLYzzox+1FKRTt3Z5vg==", + "dependencies": { + "flexsearch": "^0.6.22" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, "node_modules/read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", @@ -30980,6 +31020,11 @@ "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz", "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==" }, + "flexsearch": { + "version": "0.6.32", + "resolved": "https://registry.npmjs.org/flexsearch/-/flexsearch-0.6.32.tgz", + "integrity": "sha512-EF1BWkhwoeLtbIlDbY/vDSLBen/E5l/f1Vg7iX5CDymQCamcx1vhlc3tIZxIDplPjgi0jhG37c67idFbjg+v+Q==" + }, "follow-redirects": { "version": "1.15.9", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", @@ -31990,6 +32035,17 @@ "prop-types": "^15.8.1" } }, + "gatsby-plugin-local-search": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/gatsby-plugin-local-search/-/gatsby-plugin-local-search-2.0.1.tgz", + "integrity": "sha512-qrApdH2IYfHL+dSmcwSzhDPVxlkt13N0IfEkKxfWf0gITmBwObOJBYAMnYiYUmP0dpYmSV9anJE//SLZBSsisA==", + "requires": { + "flexsearch": "^0.6.32", + "lodash": "^4.17.19", + "lunr": "^2.3.8", + "pascal-case": "^3.1.1" + } + }, "gatsby-plugin-manifest": { "version": "5.15.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-5.15.0.tgz", @@ -34066,6 +34122,11 @@ "es5-ext": "~0.10.2" } }, + "lunr": { + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz", + "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==" + }, "make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", @@ -36220,6 +36281,14 @@ "prop-types": "^15.6.2" } }, + "react-use-flexsearch": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/react-use-flexsearch/-/react-use-flexsearch-0.1.1.tgz", + "integrity": "sha512-UDRDB26HPcAo0gXNkUYYkcjoYCW4FSWr7Ich4adgVr7bqefJG7fnjlcqnwsKQkbZuteRLYzzox+1FKRTt3Z5vg==", + "requires": { + "flexsearch": "^0.6.22" + } + }, "read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", diff --git a/package.json b/package.json index 3210d8a79..430333ad0 100644 --- a/package.json +++ b/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", diff --git a/src/components/header.tsx b/src/components/header.tsx index bf0049de7..f762d78e7 100644 --- a/src/components/header.tsx +++ b/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({ 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 ( <> @@ -185,6 +202,8 @@ const Header = (props: HeaderProps): ReactElement => { input: classes.inputInput, }} inputProps={{ "aria-label": "search" }} + value={query} + onChange={(event) => setQuery(event.target.value)} /> diff --git a/src/markdown-pages/format-an-sd-card.md b/src/markdown-pages/format-an-sd-card.md index 80ff9d858..82fbad02f 100644 --- a/src/markdown-pages/format-an-sd-card.md +++ b/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`