Gatsbyブログに検索機能を導入した（Algolia）

const escapeStringRegexp = require("escape-string-regexp")
const pagePath = `content`
const indexName = `Pages`
const pageQuery = `{  pages: allMdx(    filter: {      fileAbsolutePath: { regex: "/myblog/" } ,    }  ) {    edges {      node {        frontmatter {          slug          title          description          tags        }      id      }    }  }}`function pageToAlgoliaRecord({ node: { id, frontmatter, fields, ...rest } }) {
  return {
    objectID: id,
    ...frontmatter,
    ...fields,
    ...rest,
  }
}
const queries = [
  {
    query: pageQuery,
    transformer: ({ data }) => data.pages.edges.map(pageToAlgoliaRecord),
    indexName,
    settings: { attributesToSnippet: [`excerpt:20`] },
  },
]
module.exports = queries

import React from "react"
import { connectSearchBox } from "react-instantsearch-dom"
import { Search as SearchIcon } from "@styled-icons/fa-solid"
import { IconButton } from "@chakra-ui/react"

const SearchBox = ({ refine, currentRefinement, className, onFocus }) => {
  const [value, setValue] = React.useState("")

  return (
    <form className={className}>
      <IconButton
        icon={<SearchIcon className="SearchIcon" />}
        onClick={(e) => {          e.preventDefault()          refine(value)        }}      ></IconButton>
      <input
        className="SearchInput"
        type="text"
        placeholder="記事検索..."
        aria-label="Search"
        onFocus={onFocus}
        name="search-input"
        value={value}        onChange={(e) => setValue(e.target.value)}        onKeyDown={(e) => {          if (e.code == "Enter") {            e.preventDefault()            refine(value)          }        }}      />
    </form>
  )
}

export default connectSearchBox(SearchBox)

import { Link } from "gatsby"
import { default as React } from "react"
import {
  connectStateResults,
  Highlight,
  Hits,
  Index,
  Snippet,
  PoweredBy,
} from "react-instantsearch-dom"
const HitCount = connectStateResults(({ searchResults }) => {
  const hitCount = searchResults && searchResults.nbHits
  return hitCount > 0 ? (
    <div className="HitCount">
      {hitCount} result{hitCount !== 1 ? `s` : ``}
    </div>
  ) : null
})
const PageHit = ({ hit }) => (
  <div>
    <Link to={`/${hit.slug}`}>      <h4>
        <Highlight attribute="title" hit={hit} tagName="mark" />
      </h4>
    </Link>
    <Snippet attribute="excerpt" hit={hit} tagName="mark" />
  </div>
)
const HitsInIndex = ({ index }) => (
  <Index indexName={index.name}>
    <HitCount />
    <Hits className="Hits" hitComponent={PageHit} />
  </Index>
)
const SearchResult = ({ indices, className }) => (
  <div className={className}>
    {indices.map(index => (
      <HitsInIndex index={index} key={index.name} />
    ))}
    <PoweredBy />
  </div>
)
export default SearchResult

import styled, { css } from "styled-components"
import SearchBox from "./search-box"

const open = css`
  width: 10em;
  background: ${({ theme }) => theme.background};
  cursor: text;
  margin-left: -1.6em;
  padding-left: 1.6em;
`

const closed = css`
  width: 0;
  background: transparent;
  cursor: pointer;
  margin-left: -1em;
  padding-left: 1em;
`

export default styled(SearchBox)`
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  margin-bottom: 0;

  .SearchInput {
    outline: none;
    border: ${({ hasFocus }) => (hasFocus ? "auto" : "none")};
    font-size: 1em;
    transition: 100ms;
    border-radius: 2px;

    color: ${({ theme }) => theme.foreground};
    ::placeholder {
      color: ${({ theme }) => theme.faded};
    }
    ${({ hasFocus }) => (hasFocus ? open : open)}  }

  .SearchIcon {
    width: 1em;
    margin: 0.3em;
    color: ${({ theme }) => theme.foreground};
    pointer-events: none;
  }
`

// ${({ hasFocus }) => (hasFocus ? open : closed)}

import * as React from "react"
import SearchAlgolia from "../search-algolia"
import { Box } from "@chakra-ui/react"

const searchIndices = [{ name: `Pages`, title: `Pages` }]
const Search = () => {
  return (
    <Box mx={5}>
      <SearchAlgolia indices={searchIndices} />    </Box>
  )
}

export default Search