From c375ba7019bdc6015c545b09539fbcf69dae4873 Mon Sep 17 00:00:00 2001 From: Kayla Altepeter Date: Tue, 29 Mar 2022 13:00:49 -0500 Subject: [PATCH 1/2] --wip-- [skip ci] --- gatsby-config.ts | 32 ++++++++ package-lock.json | 30 +++++++ package.json | 3 +- src/components/header.tsx | 168 +++++++++++++++++++++----------------- 4 files changed, 157 insertions(+), 76 deletions(-) diff --git a/gatsby-config.ts b/gatsby-config.ts index c63405e01..a76f8298e 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..91fb4db6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,6 +32,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 +11387,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", @@ -18991,6 +18997,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 +30997,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", @@ -36220,6 +36242,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..2f485a22e 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,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..64948cd70 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, @@ -25,93 +26,93 @@ const useStyles = makeStyles({ name: "Header" })(( ) => { const cutSize = _theme.spacing(3); - return { - root: { - flexGrow: 1, - right: "auto", - left: 0, - [_theme.breakpoints.up("sm")]: { - marginLeft: drawerWidth, - }, - }, - rootUnscrolled: { - [_theme.breakpoints.up("sm")]: { - width: `calc(100% - ${drawerWidth}px)`, + return { + root: { + flexGrow: 1, + right: "auto", + left: 0, + [_theme.breakpoints.up("sm")]: { + marginLeft: drawerWidth, + }, }, - }, - rootScrolled: { - [_theme.breakpoints.up("sm")]: { - width: "200px", + rootUnscrolled: { + [_theme.breakpoints.up("sm")]: { + width: `calc(100% - ${drawerWidth}px)`, + }, }, - clipPath: `polygon( + rootScrolled: { + [_theme.breakpoints.up("sm")]: { + width: "200px", + }, + clipPath: `polygon( 0% 0%, 100% 0%, 100% calc(100% - ${cutSize}), calc(100% - ${cutSize}) 100%, 0% 100% )`, - }, - menuButton: { - marginRight: _theme.spacing(2), - }, - title: { - flexGrow: 1, - display: "none", - [_theme.breakpoints.up("sm")]: { - display: "flex", }, - alignItems: "center", - padding: _theme.spacing(2, 0), - "& a": { - display: "inline-flex", + menuButton: { + marginRight: _theme.spacing(2), + }, + title: { + flexGrow: 1, + display: "none", + [_theme.breakpoints.up("sm")]: { + display: "flex", + }, + alignItems: "center", + padding: _theme.spacing(2, 0), + "& a": { + display: "inline-flex", + }, + }, + notesIcon: { + height: "20px", + paddingRight: _theme.spacing(1), + }, + notesLogo: { + height: "20px", + }, + search: { + position: "relative", + borderRadius: _theme.shape.borderRadius, + backgroundColor: alpha(_theme.palette.common.white, 0.15), + "&:hover": { + backgroundColor: alpha(_theme.palette.common.white, 0.25), + }, + marginLeft: 0, + width: "100%", + [_theme.breakpoints.up("sm")]: { + marginLeft: _theme.spacing(1), + width: "auto", + }, }, - }, - notesIcon: { - height: "20px", - paddingRight: _theme.spacing(1), - }, - notesLogo: { - height: "20px", - }, - search: { - position: "relative", - borderRadius: _theme.shape.borderRadius, - backgroundColor: alpha(_theme.palette.common.white, 0.15), - "&:hover": { - backgroundColor: alpha(_theme.palette.common.white, 0.25), + searchIcon: { + padding: _theme.spacing(0, 2), + height: "100%", + position: "absolute", + pointerEvents: "none", + display: "flex", + alignItems: "center", + justifyContent: "center", }, - marginLeft: 0, - width: "100%", - [_theme.breakpoints.up("sm")]: { - marginLeft: _theme.spacing(1), - width: "auto", + inputRoot: { + color: "inherit", }, - }, - searchIcon: { - padding: _theme.spacing(0, 2), - height: "100%", - position: "absolute", - pointerEvents: "none", - display: "flex", - alignItems: "center", - justifyContent: "center", - }, - inputRoot: { - color: "inherit", - }, - inputInput: { - padding: _theme.spacing(1, 1, 1, 0), - // vertical padding + font size from searchIcon - paddingLeft: `calc(1em + ${_theme.spacing(4)})`, - transition: _theme.transitions.create("width"), - width: "100%", - [_theme.breakpoints.up("sm")]: { - width: "12ch", - "&:focus": { - width: "20ch", + inputInput: { + padding: _theme.spacing(1, 1, 1, 0), + // vertical padding + font size from searchIcon + paddingLeft: `calc(1em + ${_theme.spacing(4)})`, + transition: _theme.transitions.create("width"), + width: "100%", + [_theme.breakpoints.up("sm")]: { + width: "12ch", + "&:focus": { + width: "20ch", + }, }, }, - }, }; }); @@ -135,8 +136,23 @@ const Header = (props: HeaderProps): ReactElement => { setDrawerOpen(!drawerOpen); }; - return ( - <> + 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 <> { input: classes.inputInput, }} inputProps={{ "aria-label": "search" }} + value={query} + onChange={event => setQuery(event.target.value)} /> From e4ee82bcdac91caea5ecd239c8f47fe6456bb00f Mon Sep 17 00:00:00 2001 From: Kayla Altepeter Date: Tue, 22 Nov 2022 11:33:30 -0600 Subject: [PATCH 2/2] --wip-- [skip ci] --- gatsby-config.ts | 2 +- package-lock.json | 39 ++++++ package.json | 3 +- src/components/header.tsx | 167 ++++++++++++------------ src/markdown-pages/format-an-sd-card.md | 4 +- 5 files changed, 128 insertions(+), 87 deletions(-) diff --git a/gatsby-config.ts b/gatsby-config.ts index a76f8298e..5660237f2 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -85,7 +85,7 @@ const config: GatsbyConfig = { index: ["title", "body"], store: ["id", "path", "title"], normalizer: ({ data }) => - data.allMarkdownRemark.nodes.map(node => ({ + data.allMarkdownRemark.nodes.map((node) => ({ id: node.id, path: node.frontmatter.path, title: node.frontmatter.title, diff --git a/package-lock.json b/package-lock.json index 91fb4db6d..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", @@ -12279,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", @@ -15886,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", @@ -32012,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", @@ -34088,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", diff --git a/package.json b/package.json index 2f485a22e..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", @@ -33,7 +34,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "tss-react": "^4.8.8", - "react-use-flexsearch": "^0.1.1" + "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 64948cd70..f762d78e7 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -18,7 +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" +import { useFlexSearch } from "flexsearch"; const useStyles = makeStyles({ name: "Header" })(( _theme, @@ -26,93 +26,93 @@ const useStyles = makeStyles({ name: "Header" })(( ) => { const cutSize = _theme.spacing(3); - return { - root: { - flexGrow: 1, - right: "auto", - left: 0, - [_theme.breakpoints.up("sm")]: { - marginLeft: drawerWidth, - }, + return { + root: { + flexGrow: 1, + right: "auto", + left: 0, + [_theme.breakpoints.up("sm")]: { + marginLeft: drawerWidth, }, - rootUnscrolled: { - [_theme.breakpoints.up("sm")]: { - width: `calc(100% - ${drawerWidth}px)`, - }, + }, + rootUnscrolled: { + [_theme.breakpoints.up("sm")]: { + width: `calc(100% - ${drawerWidth}px)`, }, - rootScrolled: { - [_theme.breakpoints.up("sm")]: { - width: "200px", - }, - clipPath: `polygon( + }, + rootScrolled: { + [_theme.breakpoints.up("sm")]: { + width: "200px", + }, + clipPath: `polygon( 0% 0%, 100% 0%, 100% calc(100% - ${cutSize}), calc(100% - ${cutSize}) 100%, 0% 100% )`, + }, + menuButton: { + marginRight: _theme.spacing(2), + }, + title: { + flexGrow: 1, + display: "none", + [_theme.breakpoints.up("sm")]: { + display: "flex", }, - menuButton: { - marginRight: _theme.spacing(2), - }, - title: { - flexGrow: 1, - display: "none", - [_theme.breakpoints.up("sm")]: { - display: "flex", - }, - alignItems: "center", - padding: _theme.spacing(2, 0), - "& a": { - display: "inline-flex", - }, - }, - notesIcon: { - height: "20px", - paddingRight: _theme.spacing(1), - }, - notesLogo: { - height: "20px", + alignItems: "center", + padding: _theme.spacing(2, 0), + "& a": { + display: "inline-flex", }, - search: { - position: "relative", - borderRadius: _theme.shape.borderRadius, - backgroundColor: alpha(_theme.palette.common.white, 0.15), - "&:hover": { - backgroundColor: alpha(_theme.palette.common.white, 0.25), - }, - marginLeft: 0, - width: "100%", - [_theme.breakpoints.up("sm")]: { - marginLeft: _theme.spacing(1), - width: "auto", - }, - }, - searchIcon: { - padding: _theme.spacing(0, 2), - height: "100%", - position: "absolute", - pointerEvents: "none", - display: "flex", - alignItems: "center", - justifyContent: "center", + }, + notesIcon: { + height: "20px", + paddingRight: _theme.spacing(1), + }, + notesLogo: { + height: "20px", + }, + search: { + position: "relative", + borderRadius: _theme.shape.borderRadius, + backgroundColor: alpha(_theme.palette.common.white, 0.15), + "&:hover": { + backgroundColor: alpha(_theme.palette.common.white, 0.25), }, - inputRoot: { - color: "inherit", + marginLeft: 0, + width: "100%", + [_theme.breakpoints.up("sm")]: { + marginLeft: _theme.spacing(1), + width: "auto", }, - inputInput: { - padding: _theme.spacing(1, 1, 1, 0), - // vertical padding + font size from searchIcon - paddingLeft: `calc(1em + ${_theme.spacing(4)})`, - transition: _theme.transitions.create("width"), - width: "100%", - [_theme.breakpoints.up("sm")]: { - width: "12ch", - "&:focus": { - width: "20ch", - }, + }, + searchIcon: { + padding: _theme.spacing(0, 2), + height: "100%", + position: "absolute", + pointerEvents: "none", + display: "flex", + alignItems: "center", + justifyContent: "center", + }, + inputRoot: { + color: "inherit", + }, + inputInput: { + padding: _theme.spacing(1, 1, 1, 0), + // vertical padding + font size from searchIcon + paddingLeft: `calc(1em + ${_theme.spacing(4)})`, + transition: _theme.transitions.create("width"), + width: "100%", + [_theme.breakpoints.up("sm")]: { + width: "12ch", + "&:focus": { + width: "20ch", }, }, + }, }; }); @@ -143,16 +143,17 @@ const Header = (props: HeaderProps): ReactElement => { 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 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) + const [query, setQuery] = useState(""); + const results = useFlexSearch(query, index, store); - return <> + return ( + <> { }} inputProps={{ "aria-label": "search" }} value={query} - onChange={event => setQuery(event.target.value)} + 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`