{
    "componentChunkName": "component---src-components-blog-post-jsx",
    "path": "/blog/create-gatsby-blog-search-tutorial/",
    "result": {"data":{"site":{"siteMetadata":{"author":"Monica Powell","siteUrl":"https://www.aboutmonica.com"}},"mdx":{"id":"751b1c17-a947-5b40-9c6f-8fd2b3f7f226","timeToRead":6,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"How to Add Search Functionality to a Gatsby Blog\",\n  \"date\": \"2019-11-26T02:43:13.595Z\",\n  \"template\": \"post\",\n  \"slug\": \"create-gatsby-blog-search-tutorial\",\n  \"category\": [\"tutorial\"],\n  \"tags\": [\"Gatsby\", \"JavaScript\", \"React\", \"Tutorial\"],\n  \"description\": \"This tutorial will walk through how to create functionality to allow users to filter posts on a Gatsby site by description, title and, tags. \"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar TableOfContents = makeShortcode(\"TableOfContents\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"I recently added functionality to this site to allow visitors to filter posts based on the posts description, title, and tags in an effort to allow better discovery of content. This tutorial will is based off of how I implemented a basic search on this site and will cover how to create a search filter on a site built with \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.org\"\n  }, \"GatsbyJS\"), \". In particular, this tutorial walks through how to create an input field that allows users to filter a list of an entire Gatsby site's posts if the description, title or tags matches the input query. The solution proposed in this tutorial leverages GraphQL and React hooks to update the state to show appropriate data when content is filtered.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, mdx(\"center\", null, \"Demo of the Search Filter\"))), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/filter-demo.gif#center-small\",\n    \"alt\": \"filter demo from aboutmonica.com/writing\"\n  })), mdx(TableOfContents, {\n    headings: props.tableOfContents,\n    mdxType: \"TableOfContents\"\n  }), mdx(\"h2\", {\n    \"id\": \"getting-started\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#getting-started\",\n    \"aria-label\": \"getting started permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Getting Started\"), mdx(\"h3\", {\n    \"id\": \"prerequisites\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#prerequisites\",\n    \"aria-label\": \"prerequisites permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Prerequisites\"), mdx(\"p\", null, \"Although, some of the implementation details can be abstracted and applied in any React application to get the most value out of this tutorial you should have:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Some knowledge of ES6 and React\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Local Gatsby site with Markdown posts\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"If you have a Gatsby site \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"without\"), \" Markdown posts check out the \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#boilerplate-code\"\n  }, \"Boilerplate Code\"), \" or update the code in this tutorial to query posts from your data source instead.\")))), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"If you do not yet have Markdown files on your site then you should start by \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.org/docs/adding-markdown-pages/\"\n  }, \"adding markdown pages\"), \" to Gatsby. You can also learn more about \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.org/docs/adding-a-list-of-markdown-blog-posts/\"\n  }, \" creating an index of markdown posts\"), \" in the Gatsby Docs.\")), mdx(\"h3\", {\n    \"id\": \"boilerplate-code-query-all-posts\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#boilerplate-code-query-all-posts\",\n    \"aria-label\": \"boilerplate code query all posts permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Boilerplate Code: Query All Posts\"), mdx(\"p\", null, \"If you do \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"not\"), \" already have an index page listing all of your posts then create a new gatsby page for example named \\\"writing.js\\\" in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" within the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pages\"), \" directory. This file will be responsible for rendering information about every post on your site.\"), mdx(\"p\", null, \"We will be using a GraphQL page query which allows the data returned from the query to be available to the component in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"data\"), \" prop. The posts are returned by the page query and are equal to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"data.allMarkdownRemark.edges\"), \" . Once we have the posts we can \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".map()\"), \" through each of the posts and destructure the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"node.frontmatter\"), \" with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const { tags, title, date, description, slug } = node.frontmatter\"), \". This will add the title, date, description, and slug to the DOM for each post.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\\"Gatsby uses the concept of a page query, which is a query for a specific page in a site. It is unique in that it can take query variables unlike Gatsby\\u2019s static queries.\\\" Source: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.org/docs/page-query/\"\n  }, \"Gatsby Docs\"))), mdx(\"p\", null, \"Below is the boilerplate code that will be used throughout this tutorial:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from \\\"react\\\"\\nimport { Link, graphql } from \\\"gatsby\\\"\\n\\nconst BlogIndex = props => {\\n  const { data } = props\\n  const posts = data.allMarkdownRemark.edges\\n\\n  return (\\n    <>\\n      {/* in my site I wrap each page with a Layout and SEO component which have \\n    been omitted here for clarity and replaced with a React.fragment --> */}\\n\\n      {/*in-line css for demo purposes*/}\\n      <h1 style={{ textAlign: `center` }}>Writing</h1>\\n\\n      {posts.map(({ node }) => {\\n        const { excerpt } = node\\n        const { slug } = node.fields\\n\\n        const { title, date, description, slug } = node.frontmatter\\n        return (\\n          <article key={slug}>\\n            <header>\\n              <h2>\\n                <Link to={slug}>{title}</Link>\\n              </h2>\\n\\n              <p>{date}</p>\\n            </header>\\n            <section>\\n              <p\\n                dangerouslySetInnerHTML={{\\n                  __html: description || excerpt,\\n                }}\\n              />\\n            </section>\\n            <hr />\\n          </article>\\n        )\\n      })}\\n    </>\\n  )\\n}\\n\\nexport default BlogIndex\\n\\nexport const pageQuery = graphql`\\n  query {\\n    allMarkdownRemark(sort: { order: DESC, fields: frontmatter___date }) {\\n      edges {\\n        node {\\n          excerpt(pruneLength: 200)\\n          id\\n          frontmatter {\\n            title\\n            description\\n            date(formatString: \\\"MMMM DD, YYYY\\\")\\n            tags\\n          }\\n          fields {\\n            slug\\n          }\\n        }\\n      }\\n    }\\n  }\\n`\\n\")), mdx(\"p\", null, \"At this point you should be able to view an index of all of the posts on your site by running \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby develop\"), \" and going to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"http://localhost:8000/${NAME_OF_FILE}\"), \". For example, the file I created is named \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"writing.js\"), \" so I navigate to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://localhost:8000/writing\"\n  }, \"http://localhost:8000/writing\"), \" to view it. The page output by the boilerplate code above should resemble the below image (i.e., each blog post is listed along with its title, date, and description). Additionally, the header for each article should navigate to the slug for the article and be a valid link.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, mdx(\"center\", null, \"Index Page of All Posts\"))), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/list-of-posts.png\",\n    \"alt\": \"list of posts after setting up initial template\"\n  })), mdx(\"h3\", {\n    \"id\": \"why-query-all-of-the-posts\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#why-query-all-of-the-posts\",\n    \"aria-label\": \"why query all of the posts permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Why Query All of The Posts?\"), mdx(\"p\", null, \"Before filtering the posts its helpful fetch all of the posts before we return a filtered subset from all of the posts. On my site, I used a page query on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/writing/\"), \" page to retrieve data for all the blog posts from my site so that I can construct a list of posts. The results of the page query are available to this component within the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"data\"), \" prop to the component i.e., (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const { data } = props\"), \").\"), mdx(\"p\", null, \"The boilerplate code above is a variation of the GraphQL query that my site uses to pull in each post along with its excerpt, id, frontmatter (title, category, description, date, slug, and tags). The blog posts are in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"allMarkdownRemark\"), \" as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"edges\"), \" and can be accessed like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const posts = data.allMarkdownRemark.edges\"), \".You can use the above-provided query to return metadata and slugs for all posts OR if you already have a query to return an index of all blog posts then feel free to use that.\"), mdx(\"p\", null, \"Below is a photo that shows the data that the above GraphQL query returned for my site. You can view the data returned by that query for your particular site in an interactive format by running \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby develop\"), \" and navigating to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://localhost:8000/___graphql?query=%7BallMarkdownRemark(sort%3A%20%7B%20order%3A%20DESC%2C%20fields%3A%20frontmatter___date%20%7D)%20%7B%0A%20%20%20%20%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20%20%20%20%20node%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20excerpt(pruneLength%3A%20200)%0A%20%20%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20%20%20frontmatter%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20category%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20description%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20date(formatString%3A%20%22MMMM%20DD%2C%20YYYY%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20tags%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20timeToRead%0A%20%20%20%20%20%20%20%20%20%20%20%20fields%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%7D%0A&operationName=undefined&explorerIsOpen=false\"\n  }, \"http://localhost:8000/\", \"_\", \"_\", \"_\", \"graphql\"), \" and pressing run. If you go to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://localhost:8000/___graphql?query=%7BallMarkdownRemark(sort%3A%20%7B%20order%3A%20DESC%2C%20fields%3A%20frontmatter___date%20%7D)%20%7B%0A%20%20%20%20%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20%20%20%20%20node%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20excerpt(pruneLength%3A%20200)%0A%20%20%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20%20%20frontmatter%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20category%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20description%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20date(formatString%3A%20%22MMMM%20DD%2C%20YYYY%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20tags%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20timeToRead%0A%20%20%20%20%20%20%20%20%20%20%20%20fields%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%7D%0A&operationName=undefined&explorerIsOpen=false\"\n  }, \"http://localhost:8000/\", \"_\", \"_\", \"_\", \"graphql\"), \" and scroll down you should see that there is metadata being returned for every single post on your site which is exactly what we are trying to capture before we filter posts.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, mdx(\"center\", null, \"Sample Data in GraphiQL\")), \"\\n\", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/graphql-blog-query.png#center\",\n    \"alt\": \"output data\"\n  })), mdx(\"h2\", {\n    \"id\": \"how-to-filter-posts-by-user-input\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#how-to-filter-posts-by-user-input\",\n    \"aria-label\": \"how to filter posts by user input permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"How to Filter Posts by User Input\"), mdx(\"h3\", {\n    \"id\": \"capture-user-input-with-input-event\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#capture-user-input-with-input-event\",\n    \"aria-label\": \"capture user input with input event permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Capture User Input with Input Event\"), mdx(\"p\", null, \"Now that we have the boilerplate code setup let's get back to the task at hand which is to filter the posts based on user input. \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"How can we capture what query a user is searching for and update the DOM with the appropriate post(s) accordingly?\"), \" Well, there are various types of browser events including, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"keypress\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"click\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"drag\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"drop\"), \". When these events occur JavaScript can be written to respond based on the type and value of the event.\"), mdx(\"p\", null, \"Since we are having users type a search query into a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<input>\"), \" we can process their query as they type. We will be focusing on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input\"), \"event which triggers whenever the value in an input field changes. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input\"), \" event changes with each keystroke which is in contrast to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"change\"), \" event which is fired once for each submission (i.e., pressing enter) for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<input>\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<select>\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<textarea>\"), \" elements. You can read more about how \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/handling-events.html\"\n  }, \"React handles events in the React docs\"), \".\"), mdx(\"h3\", {\n    \"id\": \"create-input-element-with-onchange-event-handler\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#create-input-element-with-onchange-event-handler\",\n    \"aria-label\": \"create input element with onchange event handler permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Create Input Element with \", mdx(\"inlineCode\", {\n    parentName: \"h3\"\n  }, \"onChange\"), \" event handler\"), mdx(\"p\", null, \"We already have the post data we need to filter available in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"data\"), \" prop so let's create an element to allow users to type in their search query. \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<input/>\"), \" will have an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChange\"), \" property that calls a function \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"handleInputChange\"), \" whenever the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<input/>\"), \" changes and an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Input\"), \" event is fired. In other words, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChange\"), \" calls another function which handles the Input event which fires every time someone types in our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<Input/>\"), \". So if someone typed \\\"React\\\" into an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<input/>\"), \". It will trigger 5 events with the following values (\\\"R\\\", \\\"Re\\\", \\\"Rea\\\", \\\"Reac\\\", \\\"React\\\").\"), mdx(\"p\", null, \"Note: The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<input/>\"), \" should go below the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<h1>\"), \" and outside of the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"posts.map\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{2-7}\",\n    \"{2-7}\": true\n  }, \"\\n        <h1 style={{ textAlign: `center` }}>Writing</h1>\\n          <input\\n              type=\\\"text\\\"\\n              aria-label=\\\"Search\\\"\\n              placeholder=\\\"Type to filter posts...\\\"\\n              onChange={handleInputChange}\\n          />\\n        {posts.map(({ node }) => {\\n\")), mdx(\"p\", null, \"The page should now visibly have an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<input/>\"), \" element. However, it will not yet be functional as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"handleInputChange\"), \" has not been added yet.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, mdx(\"center\", null, \"Visible Input Element\"))), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/input-element.png\",\n    \"alt\": \"visible input element on DOM\"\n  })), mdx(\"h3\", {\n    \"id\": \"usestate-to-store-filtered-data-and-query-information-in-state\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#usestate-to-store-filtered-data-and-query-information-in-state\",\n    \"aria-label\": \"usestate to store filtered data and query information in state permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"useState() to Store Filtered Data and Query Information in State\"), mdx(\"p\", null, \"Before implementing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChange\"), \" let's set the default state with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useState()\"), \" for our search input with the default \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"query\"), \" as an empty string and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filteredData\"), \" as an empty array. You can \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/hooks-state.html\"\n  }, \"read more about the \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"useState()\"), \" hook in the React docs\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{2-6}\",\n    \"{2-6}\": true\n  }, \"  const posts = data.allMarkdownRemark.edges\\n  const emptyQuery = \\\"\\\"\\n  const [state, setState] = useState({\\n    filteredData: [],\\n    query: emptyQuery,\\n  })\\n  return (\\n\")), mdx(\"h3\", {\n    \"id\": \"implement-onchange-to-filter-posts-by-input-event-value\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#implement-onchange-to-filter-posts-by-input-event-value\",\n    \"aria-label\": \"implement onchange to filter posts by input event value permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Implement \", mdx(\"inlineCode\", {\n    parentName: \"h3\"\n  }, \"onChange\"), \" to Filter Posts by \", mdx(\"inlineCode\", {\n    parentName: \"h3\"\n  }, \"<input/>\"), \" Event Value\"), mdx(\"p\", null, \"This \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"handleInputChange\"), \" function takes the Input event in which the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"event.target.value\"), \" is the query string that is being searched for. \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"handleInputChange\"), \" also has access to our props which contain all of the posts for the site. So we can filter all of the site's posts based on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"query\"), \" and return \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filteredPosts\"), \".\"), mdx(\"p\", null, \"In order to process the event (which fires on each keystroke) we need to implement \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"handleInputChange\"), \". \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"handleInputChange\"), \" receives an Input event. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"target.value\"), \" from the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"event\"), \" is the string that the user typed and we will store that in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"query\"), \" variable.\"), mdx(\"p\", null, \"Inside of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"handleInputChange\"), \" we have access to the posts and the query so let's update the code to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".filter()\"), \" the posts based on the query. First, we should standardize the casing of the fields and the query with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".toLowerCase()\"), \" so that if someone types \\\"JaVAsCriPt\\\" it should return posts that match \\\"JavaScript\\\". For our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".filter()\"), \" if any of the three conditions that check if the post contains the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"query\"), \" evaluates to true then that post will be returned in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filteredData\"), \" array.\"), mdx(\"p\", null, \"After we filter the data in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"handleInputChange\"), \" the state should be updated with the current \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"query\"), \" and the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filteredData\"), \" that resulted from that query.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{7-36}\",\n    \"{7-36}\": true\n  }, \"\\n  const [state, setState] = useState({\\n    filteredData: [],\\n    query: emptyQuery,\\n  })\\n\\nconst handleInputChange = event => {\\n  const query = event.target.value\\n  const { data } = props\\n\\n  // this is how we get all of our posts\\n  const posts = data.allMarkdownRemark.edges || []\\n\\n\\n   // return all filtered posts\\n  const filteredData = posts.filter(post => {\\n    // destructure data from post frontmatter\\n    const { description, title, tags } = post.node.frontmatter\\n    return (\\n      // standardize data with .toLowerCase()\\n      // return true if the description, title or tags\\n      // contains the query string\\n      description.toLowerCase().includes(query.toLowerCase()) ||\\n      title.toLowerCase().includes(query.toLowerCase()) ||\\n      (tags && tags\\n        .join(\\\"\\\") // convert tags from an array to string\\n        .toLowerCase()\\n        .includes(query.toLowerCase()))\\n    )\\n  })\\n\\n  // update state according to the latest query and results\\n  setState({\\n    query, // with current query string from the `Input` event\\n    filteredData, // with filtered data from posts.filter(post => (//filteredData)) above\\n  })\\n}\\n\\nreturn (\\n    <>\\n\")), mdx(\"p\", null, \"Now if you type in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<Input/>\"), \" now it still won't update the list of posts because we are always rendering the same posts regardless of if we have \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filteredData\"), \" available in the state or not. But if you were to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"console.log(event.target.value)\"), \" in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"handleInputChange\"), \" we can confirm that \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"handleInput\"), \" is firing properly by typing \\\"React\\\". Even though the page doesn't visually change the console output should be something like:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"r writing.js:1\\nre writing..js:1\\nrea writing..js:1\\nreac writing.js:1\\nreact writing.js:1\\n\")), mdx(\"h3\", {\n    \"id\": \"display-filtered-posts\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#display-filtered-posts\",\n    \"aria-label\": \"display filtered posts permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Display Filtered Posts\"), mdx(\"p\", null, \"We are already storing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filteredData\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"query\"), \" in state but let's rename \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"posts\"), \" to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"allPosts\"), \" so that we can make the value of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"posts\"), \" conditional based on whether or not a user has typed a search query and should see their filtered search query results as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"posts\"), \" or if they have yet to type a query then we should display all of the blog posts.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{2-3,5}\",\n    \"{2-3,5}\": true\n  }, \"const BlogIndex = props => {\\nconst { filteredData, query } = state\\nconst { data } = props\\n // let's rename posts to all posts\\nconst allPosts = data.allMarkdownRemark.edgess\\nconst emptyQuery = \\\"\\\"\\n\")), mdx(\"p\", null, \"For the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"posts\"), \" we need to decide whether to return all of the posts or the filtered posts by checking \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"state\"), \" and conditionally rendering either all of the posts OR just the filtered posts based on whether or not we have \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filteredData\"), \" and the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"query != emptyQuery\"), \".\"), mdx(\"p\", null, \"The below code updates our render logic accordingly.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{4, 7}\",\n    \"{4,\": true,\n    \"7}\": true\n  }, \"const { filteredData, query } = state\\n// if we have a fileredData in state and a non-emptyQuery then\\n// searchQuery then `hasSearchResults` is true\\nconst hasSearchResults = filteredData && query !== emptyQuery\\n\\n// if we have a search query then return filtered data instead of all posts; else return allPosts\\nconst posts = hasSearchResults ? filteredData : allPosts\\n\")), mdx(\"h2\", {\n    \"id\": \"summary\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#summary\",\n    \"aria-label\": \"summary permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Summary\"), mdx(\"p\", null, \"You should now have a working post filter on your blog index page (if not check out the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#final-code\"\n  }, \"Final Code\"), \" below). At a high-level the steps taken to implement filtering were:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"create a page query to implement a blog index page which lists all of the posts\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"create an input field on the blog index page with an onChange event handler to process keystrokes in our input field\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"filter all of the posts on the blog index page based on the current query (from input event) and use \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"useState()\"), \" to update the state with the search query and filtered data\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"update rendering logic to either display all of the posts or the filtered posts on the blog index page based on whether or not there's a query in state\")), mdx(\"p\", null, \"Below is the final code as outlined in the tutorial. However, this is just the baseline for search and you may want to make the functionality more robust by adding additional features such as autocomplete suggestions, displaying the number of results (based on length of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"posts\"), \") and providing an empty state with messaging for when there are zero results (based on filteredData being an empty array).\"), mdx(\"h3\", {\n    \"id\": \"final-code\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#final-code\",\n    \"aria-label\": \"final code permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Final Code\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React, { useReact } from \\\"react\\\"\\nimport { Link, graphql } from \\\"gatsby\\\"\\n\\nconst BlogIndex = props => {\\n  const { data } = props\\n  const allPosts = data.allMarkdownRemark.edges\\n\\n  const emptyQuery = \\\"\\\"\\n\\n  const [state, setState] = useState({\\n    filteredData: [],\\n    query: emptyQuery,\\n  })\\n\\n  const handleInputChange = event => {\\n    console.log(event.target.value)\\n    const query = event.target.value\\n    const { data } = props\\n\\n    const posts = data.allMarkdownRemark.edges || []\\n\\n    const filteredData = posts.filter(post => {\\n      const { description, title, tags } = post.node.frontmatter\\n      return (\\n        description.toLowerCase().includes(query.toLowerCase()) ||\\n        title.toLowerCase().includes(query.toLowerCase()) ||\\n        (tags &&\\n          tags\\n            .join(\\\"\\\")\\n            .toLowerCase()\\n            .includes(query.toLowerCase()))\\n      )\\n    })\\n\\n    setState({\\n      query,\\n      filteredData,\\n    })\\n  }\\n\\n  const { filteredData, query } = state\\n  const hasSearchResults = filteredData && query !== emptyQuery\\n  const posts = hasSearchResults ? filteredData : allPosts\\n\\n  return (\\n    <>\\n      <h1 style={{ textAlign: `center` }}>Writing</h1>\\n\\n      <div className=\\\"searchBox\\\">\\n        <input\\n          className=\\\"searchInput\\\"\\n          type=\\\"text\\\"\\n          aria-label=\\\"Search\\\"\\n          placeholder=\\\"Type to filter posts...\\\"\\n          onChange={handleInputChange}\\n        />\\n      </div>\\n\\n      {posts.map(({ node }) => {\\n        const { excerpt } = node\\n\\n        const { slug } = node.fields\\n        const { tags, title, date, description } = node.frontmatter\\n        return (\\n          <article key={slug}>\\n            <header>\\n              <h2>\\n                <Link to={slug}>{title}</Link>\\n              </h2>\\n\\n              <p>{date}</p>\\n            </header>\\n            <section>\\n              <p\\n                dangerouslySetInnerHTML={{\\n                  __html: description || excerpt,\\n                }}\\n              />\\n            </section>\\n            <hr />\\n          </article>\\n        )\\n      })}\\n    </>\\n  )\\n}\\n\\nexport default BlogIndex\\n\\nexport const pageQuery = graphql`\\n  query {\\n    allMarkdownRemark(sort: { order: DESC, fields: frontmatter___date }) {\\n      edges {\\n        node {\\n          excerpt(pruneLength: 200)\\n          id\\n          frontmatter {\\n            title\\n            description\\n            date(formatString: \\\"MMMM DD, YYYY\\\")\\n\\n            tags\\n          }\\n\\n          fields {\\n            slug\\n          }\\n        }\\n      }\\n    }\\n  }\\n`\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#getting-started","title":"Getting Started","items":[{"url":"#prerequisites","title":"Prerequisites"},{"url":"#boilerplate-code-query-all-posts","title":"Boilerplate Code: Query All Posts"},{"url":"#why-query-all-of-the-posts","title":"Why Query All of The Posts?"}]},{"url":"#how-to-filter-posts-by-user-input","title":"How to Filter Posts by User Input","items":[{"url":"#capture-user-input-with-input-event","title":"Capture User Input with Input Event"},{"url":"#create-input-element-with-onchange-event-handler","title":"Create Input Element with onChange event handler"},{"url":"#usestate-to-store-filtered-data-and-query-information-in-state","title":"useState() to Store Filtered Data and Query Information in State"},{"url":"#implement-onchange-to-filter-posts-by-input-event-value","title":"Implement onChange to Filter Posts by <input/> Event Value"},{"url":"#display-filtered-posts","title":"Display Filtered Posts"}]},{"url":"#summary","title":"Summary","items":[{"url":"#final-code","title":"Final Code"}]}]},"frontmatter":{"title":"How to Add Search Functionality to a Gatsby Blog","date":"November 26, 2019","description":"This tutorial will walk through how to create functionality to allow users to filter posts on a Gatsby site by description, title and, tags. ","tags":["Gatsby","JavaScript","React","Tutorial"]}},"allWebMentionEntry":{"edges":[{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid.gy/post/twitter/indigitalcolor/1360496390477144064","wmProperty":"mention-of","wmId":1029501,"type":"entry","url":"https://twitter.com/krzysztof_zuraw/status/1360496390477144064","likeOf":null,"author":{"url":"https://twitter.com/krzysztof_zuraw","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/91c1d1eb925a8bc54ac4764340ae3184972c7af213de811bb7d8a97663d293d3.jpg","name":"Krzysztof Żuraw"},"published":"February 13, 2021","content":{"text":"Huge thanks to @indigitalcolor for article about adding search to @gatsbyjs powered blog: aboutmonica.com/blog/create-ga… 👏🏻"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1349329777501626368/28203065","wmProperty":"like-of","wmId":1016505,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1349329777501626368#favorited-by-28203065","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/eunicekokor","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c24886f1bcb8a8f7afe3fa05e3ab91068c60240e45c2b2a2428901c72e864697.jpg","name":"euni"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1349329777501626368","wmProperty":"mention-of","wmId":988139,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1349329777501626368","likeOf":null,"author":{"url":"https://twitter.com/indigitalcolor","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b17a181a222b006c4de292e40f80a97674c9ce4d5ec3bf2ead3176653549519c.jpg","name":"Monica.dev"},"published":"January 13, 2021","content":{"text":"Need to add basic filtering functionality in React? Check out my article on how I implemented search on my Gatsby site to filter articles based on keywords. aboutmonica.com/blog/create-ga…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/comment/twitter/waterproofheart/1349329777501626368/1349335478789672960","wmProperty":"in-reply-to","wmId":988138,"type":"entry","url":"https://twitter.com/_red_Ant_/status/1349335478789672960","likeOf":null,"author":{"url":"https://twitter.com/_red_Ant_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ad1ddc984f708bfdff9faabff3aa42febf9f80a1b1a8bb8bf83f2de291a437ab.jpg","name":"red_ant"},"published":"January 13, 2021","content":{"text":"Thanks i will take a look"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/3580004117","wmProperty":"like-of","wmId":851493,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-3580004117","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/taniarascia","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2baaae112fb9311fa576971ee5f57139c1e67afa1b163a69ea8069f2cdda75d0.jpg","name":"Tania Rascia"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/769092584065077248","wmProperty":"like-of","wmId":851168,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-769092584065077248","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/Indigenous_Tech","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d878cad242016e910e24afc67db0d835626151d7b0e68ae890291b03c731862e.jpg","name":"Rae #BLM"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/386898552","wmProperty":"like-of","wmId":851064,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-386898552","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/imrubangarmon","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2123e5801abe11267969f2592dba3325551a6a9569d888c21dbbc9cd1b89f443.jpg","name":"Rubén García"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/15111972","wmProperty":"like-of","wmId":851012,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-15111972","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/sergeyche","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/54950d7bb52b8577f4095a51b2fb371bc2983d8bbeac43b2ccacccf48bf1070b.jpg","name":"Sergey Chernyshev"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/1044888772784123904","wmProperty":"like-of","wmId":851003,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-1044888772784123904","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/TheRealDine","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/1d88d140413f90f7532b822b3c9a73f86bf44dcc2db7c455159a5c2f6709c261.jpg","name":"TheRealDine"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/1285589380862627841","wmProperty":"like-of","wmId":850994,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-1285589380862627841","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/NepMontanez","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ce7190c3bd2f2fa14d1e9f0b138801513ba586bfa6f80255fea4db6bbbc41ff3.jpg","name":"Nep Montanez"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/13289382","wmProperty":"like-of","wmId":850992,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-13289382","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/BrettSinclair","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9a3e1512b386ebaeb0901aa257b86d4faa765997843ebecea664507f87c37f39.jpg","name":"Brett Sinclair"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/1281232604516286464","wmProperty":"like-of","wmId":850993,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-1281232604516286464","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/EChanbang","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6d7f647b4b40444d1ed58d748a1be4bd25099d2c8b099c70b3ce19ec4eec95f0.jpg","name":"Elizabeth Modupeoluwa Chanbang"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/1145441861521281024","wmProperty":"like-of","wmId":850991,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-1145441861521281024","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/aleja_ferre","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a14888ea921ff93ae09a237a1b90c2e783a65824361881a8050d7373dacbee54.jpg","name":"Maria Alejandra Ferreira torres"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/2675247881","wmProperty":"like-of","wmId":850919,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-2675247881","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/thisismahmoud_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/024dbde7a8e07cb28cd0350d4af4bb4fd30358d6d54fd809fcaf820cd74ce253.jpg","name":"Mahmoud Abdelwahab"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/759424995923603456","wmProperty":"like-of","wmId":850918,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-759424995923603456","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/lindakatcodes","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d639d755be9ef6baec24c55cefdf463b1776fb1edbe2d3f83999ad33f60c4179.jpg","name":"Linda T."},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/838088898882453504","wmProperty":"like-of","wmId":850917,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-838088898882453504","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/IrenaJovanowska","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/29449e62fb79cbc1b7ce6d4a649c38de91541dff82cdd0cd2676d717c284a68c.jpg","name":"Irena Jovanovska"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/839828916990799873","wmProperty":"like-of","wmId":850863,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-839828916990799873","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/smolcodes","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/5a1105a0526c118da753258414c1fb49a7fc9a64f9198427c543d0367d9c58f8.jpg","name":"loafing loaf"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/3335075884","wmProperty":"like-of","wmId":850858,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-3335075884","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/FranTheCheese","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2a1dfbca69e2990a6437edf3117ce336c631eb3311b8a68897a93e8b503612f7.jpg","name":"Fran Lucchini #YoApruevo"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1304557738798833671/1304595017097412609","wmProperty":"repost-of","wmId":850857,"type":"entry","url":"https://twitter.com/FranTheCheese/status/1304595017097412609","likeOf":null,"author":{"url":"https://twitter.com/FranTheCheese","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2a1dfbca69e2990a6437edf3117ce336c631eb3311b8a68897a93e8b503612f7.jpg","name":"Fran Lucchini #YoApruevo"},"published":"September 12, 2020","content":{"text":"I redid the index page of my site (heavily inspired by @taniarascia and @chrisbiscardi) and really like how it turned out!\n\nIf you're inter"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/1199088940893949953","wmProperty":"like-of","wmId":850856,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-1199088940893949953","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/Paulie_Dev","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/be8fca9bc13824d003e1e4b675e1a8a00a3850abd89ae95f9d4fd5d7e8c9df63.jpg","name":"Paulie Rodriguez"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1304557738798833671/1304588702241435651","wmProperty":"repost-of","wmId":850849,"type":"entry","url":"https://twitter.com/shikkaba/status/1304588702241435651","likeOf":null,"author":{"url":"https://twitter.com/shikkaba","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ee69d8a58a7ded685535d69490b49b0c010f57153648dc938b7933e87ab082c9.jpg","name":"sepiasteak"},"published":"September 12, 2020","content":{"text":"I redid the index page of my site (heavily inspired by @taniarascia and @chrisbiscardi) and really like how it turned out!\n\nIf you're inter"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/1133414706436288512","wmProperty":"like-of","wmId":850847,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-1133414706436288512","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/CarpioWeen1","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/3fb6a5fdc515ddbd19b9d02ba465b72740108e379a1503caf7768ca4bf41765d.jpg","name":"Sedarkstian07"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/1224745261504835584","wmProperty":"like-of","wmId":850848,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-1224745261504835584","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/maggiecodes_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6fa3e77fb0b8ef037acc41f866b18cfb37b3a19f0ee42668048d46387d2fb0de.jpg","name":"maggie 👩🏽‍💻🌱"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/2313873457","wmProperty":"like-of","wmId":850838,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-2313873457","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/sseraphini","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ccd41aabb1b70c8c426ce74d3482497de48249f580742baf059c66774df82bc1.jpg","name":"Sibelius Seraphini"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/1226267333561327616","wmProperty":"like-of","wmId":850837,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-1226267333561327616","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/risxyang","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/78fa5f21303f01bb712ab51178df189a3de8491ca5434f85920576bda0878ffc.jpg","name":"christine"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/460945083","wmProperty":"like-of","wmId":850836,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-460945083","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/SoyChidi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/45a60b4a5a215dfa54d167d1b15b10b5203b38b2b2577c6c7cba444dd9429753.jpg","name":"Memphis ✌🏼"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1304557738798833671/1304563732232777728","wmProperty":"repost-of","wmId":850826,"type":"entry","url":"https://twitter.com/chrisbiscardi/status/1304563732232777728","likeOf":null,"author":{"url":"https://twitter.com/chrisbiscardi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6cb62548f7ea6e68607b69c1553bde1fcfef10b564e7f87d10e7a8def2dee7dc.png","name":":party-corgi:"},"published":"September 11, 2020","content":{"text":"I redid the index page of my site (heavily inspired by @taniarascia and @chrisbiscardi) and really like how it turned out!\n\nIf you're inter"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/8430132","wmProperty":"like-of","wmId":850825,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-8430132","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/rosnovsky","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ae547891ff505cf88377b7b47710cc220654da87e94e445ad3a37b46923b96f1.jpg","name":"Art Rosnovsky"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/1129050291981176832","wmProperty":"like-of","wmId":850823,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-1129050291981176832","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/cyberjobmentor","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/77d05546fb0e1049feec4609005148187f51ec0f4fb14ba6b6650d3ab8136c7b.png","name":"cyberjobmentor"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/889681749789245444","wmProperty":"like-of","wmId":850824,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-889681749789245444","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/CobyPear","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/8d2920815c17425530f4a3b844949123aecfabed3603782d46306c9c5ccc4fc4.jpg","name":"_🍐"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/21738527","wmProperty":"like-of","wmId":850821,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-21738527","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/bobbybrooksatx","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6104fe9db29ba075d45b80e680aad47c7dba3d00cabd4dc677f350ec4304ccdf.png","name":"Bobby"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/837424448085110784","wmProperty":"like-of","wmId":850822,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-837424448085110784","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/carolstran","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/7abe9ca520ae85167ee8cb9140e4206b44abc9aa40ebe177093c34122d6bb879.jpg","name":"Carolyn Stransky"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/322691440","wmProperty":"like-of","wmId":850819,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-322691440","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/deserie85","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9920057244154f5bfbbf54d46aa29402faea3ea22bfb9d11771c8933ed76b582.jpg","name":"Deserie"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/529315717","wmProperty":"like-of","wmId":850820,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-529315717","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/AYearInTri","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/f5079e751b8f9352854465c93b773a5c405f915ae1dc7a2446a8115e1491c81b.jpg","name":"A Year in Tri 👩‍💻🏃🏻‍♀️🛸"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/33521530","wmProperty":"like-of","wmId":850818,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-33521530","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/swyx","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b91fcf264e59aa729dce9c122c263c8b556748c53201359278f5e077cfc3e955.jpg","name":"swyx"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/1248559007763058688","wmProperty":"like-of","wmId":850817,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-1248559007763058688","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/eliciaauduong","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2f29653a8332deb1ed16a84ccca241dae61905f30f96362cc8b5b7e44c944a81.jpg","name":"Elicia"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/240315182","wmProperty":"like-of","wmId":850815,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-240315182","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/chrisbiscardi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6cb62548f7ea6e68607b69c1553bde1fcfef10b564e7f87d10e7a8def2dee7dc.png","name":":party-corgi:"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/1254335705901420545","wmProperty":"like-of","wmId":850816,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-1254335705901420545","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/joyancefa","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/3b961b83797b423d96df260d4b98b367053e7e32d1b1be5a10117c4c23e9f8b2.jpg","name":"Fatou"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/247028865","wmProperty":"like-of","wmId":850814,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-247028865","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/gooderdle","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6a775a4829a773fad83bf0fd8459923e223d29443886732f13d75f97e2247c08.jpg","name":"erdle 🍍"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/1259622945955016705","wmProperty":"like-of","wmId":850812,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-1259622945955016705","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/tannerdolby","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0b9b6080c2486ab209b39facadec189a081288baa997cdb77bda07ddd9dafa21.jpg","name":"Tanner Dolby"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/77569492","wmProperty":"like-of","wmId":850813,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-77569492","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/sophia_wyl","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/bd5274e29914762857f8ca34f33b912d5fd623542d1b07e14bca8c1ce04c449d.jpg","name":"Sophia Li"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304557738798833671/17456514","wmProperty":"like-of","wmId":850811,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304557738798833671#favorited-by-17456514","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/kcollasarundell","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/adf5ec3d7568524144754260cfa31953a338cc325454842c57c6c87fcfa51f5a.jpg","name":"Kevin Collas-Arundell"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/comment/twitter/waterproofheart/1304557738798833671/1304560006256373761","wmProperty":"in-reply-to","wmId":850810,"type":"entry","url":"https://twitter.com/joyancefa/status/1304560006256373761","likeOf":null,"author":{"url":"https://twitter.com/joyancefa","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/3b961b83797b423d96df260d4b98b367053e7e32d1b1be5a10117c4c23e9f8b2.jpg","name":"Fatou"},"published":"September 11, 2020","content":{"text":"Thanks for sharing ❤️. I am trying to create a blog ans was wondering how to implement the search. This will come handy 😊"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1277083954865008640","wmProperty":"mention-of","wmId":816841,"type":"entry","url":"https://twitter.com/erchwy/status/1277083954865008640","likeOf":null,"author":{"url":"https://twitter.com/erchwy","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/e6dd8950de10729120d529d075bf1c026e176c33e670f1656f90475d419054f0.jpg","name":"Eric Howey"},"published":"June 28, 2020","content":{"text":"This is a really great post for those interested in filtered search functionality on a Gatsby blog.  Thanks for writing @waterproofheart \n\naboutmonica.com/blog/create-ga…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1261328970882129922","wmProperty":"mention-of","wmId":796742,"type":"entry","url":"https://twitter.com/spences10/status/1261328970882129922","likeOf":null,"author":{"url":"https://twitter.com/spences10","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/fddad3d64cbe1abef4606c8e5c46e00bfe53095f9bfbecc30fb9999e8d8a4980.png","name":"Scott Spence - WFH 🌈"},"published":"May 15, 2020","content":{"text":"I was just trying to get my head around adding search functionality to a site then remembered @jsjoeio  sharing this! \n\nThanks @waterproofheart ❤️\n\nHow to Add Search Functionality to a Gatsby Blog aboutmonica.com/blog/create-ga… #JavaScript #React #Gatsby #Tutorial"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199351020872179712","wmProperty":"repost-of","wmId":786419,"type":"entry","url":"https://twitter.com/AishaBlake/status/1199351020872179712","likeOf":null,"author":{"url":"https://twitter.com/AishaBlake","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d1f47e0aa3638002ba8e828760cc0df61fc249192e3bf7d9507f5316735c282a.jpg","name":"Aisha Blake @ 🏡"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199349560457515008","wmProperty":"repost-of","wmId":786420,"type":"entry","url":"https://twitter.com/maxcell/status/1199349560457515008","likeOf":null,"author":{"url":"https://twitter.com/maxcell","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a883720df399748ec3c5e79fdb00e3bcfa1aed681d0b2db5977e20976816186d.jpg","name":"Prince Wilson"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1204124214204215300","wmProperty":"mention-of","wmId":786350,"type":"entry","url":"https://twitter.com/studio_hungry/status/1204124214204215300","likeOf":null,"author":{"url":"https://twitter.com/studio_hungry","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/48acd998de8a35b551537721c55e59ba02141e53e5060d3bf0c0df8aea3cdf1c.jpg","name":"Richard Haines"},"published":"December 09, 2019","content":{"text":"After reading this great article by @waterproofheart (aboutmonica.com/blog/create-ga…) I have added search functionality to justask.dev with some teaks. 😄 Also added some more content and a new @typescript section 🤗"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1238267429102350338","wmProperty":"mention-of","wmId":786351,"type":"entry","url":"https://twitter.com/DavidGeorgeBell/status/1238267429102350338","likeOf":null,"author":{"url":"https://twitter.com/DavidGeorgeBell","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a25651f2b26ab0d996b3b670d20b27005db162993b4fd41b0c2f14b39a87ee73.jpg","name":"David G. Bell"},"published":"March 13, 2020","content":{"text":"I built a search input for a Gatsby blog using this super tutorial! aboutmonica.com/blog/create-ga… #JavaScript #React #Gatsby #Tutorial via @waterproofheart"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199369107344416774","wmProperty":"repost-of","wmId":786348,"type":"entry","url":"https://twitter.com/CarolSaysThings/status/1199369107344416774","likeOf":null,"author":{"url":"https://twitter.com/CarolSaysThings","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/443d6a45bc27a2a6e3103efc170665682aba7aecc9346bd1d504b2630a6f5468.jpg","name":"Carol 🌴living the island life ✨"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199364733696139264","wmProperty":"repost-of","wmId":786349,"type":"entry","url":"https://twitter.com/CandaceWorthen/status/1199364733696139264","likeOf":null,"author":{"url":"https://twitter.com/CandaceWorthen","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b388aa12ba7e0e2d7defa7594a9f59c338660974d6f9b1c655e60b2c608a7e07.jpg","name":"Candace Worthen"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199370739129966593","wmProperty":"repost-of","wmId":786347,"type":"entry","url":"https://twitter.com/samanthabretous/status/1199370739129966593","likeOf":null,"author":{"url":"https://twitter.com/samanthabretous","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/8f72d18f195f2ac9e9939e3ffeede4b5f558823c438f127d23eccced3696a871.jpg","name":"Samantha Bretous"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199370919304728576","wmProperty":"repost-of","wmId":786346,"type":"entry","url":"https://twitter.com/ParissAthena/status/1199370919304728576","likeOf":null,"author":{"url":"https://twitter.com/ParissAthena","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d665c4e18ea3b69ee80dc00f329c43376f7366f029d76b20ac045e1aee08ae27.jpg","name":"🃏Pariss Athena⚔️"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199400029615603713","wmProperty":"repost-of","wmId":786345,"type":"entry","url":"https://twitter.com/techgirl1908/status/1199400029615603713","likeOf":null,"author":{"url":"https://twitter.com/techgirl1908","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/030e12121e47ef027a6255a9b520b1cce14e5b1de39fa6c1882f6a328ca71f44.jpg","name":"Angie Jones"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199400104232390657","wmProperty":"repost-of","wmId":786344,"type":"entry","url":"https://twitter.com/Taku_Nashe/status/1199400104232390657","likeOf":null,"author":{"url":"https://twitter.com/Taku_Nashe","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/89917a8ca75580052dd0248e61732a1a77336698e2b63e8e6c44cbfe5accd1a7.jpg","name":"Takudzwanashe Nakwaenda"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199445925711745024","wmProperty":"repost-of","wmId":786343,"type":"entry","url":"https://twitter.com/danabrit/status/1199445925711745024","likeOf":null,"author":{"url":"https://twitter.com/danabrit","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9e15f4d43e43b3da2c4001d92086bb254ade7dd995d20b7a93ae9bab3685bee0.jpg","name":"Dana Jones"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199452845378027523","wmProperty":"repost-of","wmId":786342,"type":"entry","url":"https://twitter.com/dan_abramov/status/1199452845378027523","likeOf":null,"author":{"url":"https://twitter.com/dan_abramov","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/e86fc2bd18d4f88b7a48c5c11f2e9a83f46cc58f6cd8544a891d01cc41f0489b.jpg","name":"Dan Abramov"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199453284722868224","wmProperty":"repost-of","wmId":786340,"type":"entry","url":"https://twitter.com/eunicekokor/status/1199453284722868224","likeOf":null,"author":{"url":"https://twitter.com/eunicekokor","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/e3d663a6dae6672a680590dea5a7fb378da8fc30a965a3c2d4e288f41ec9f382.jpg","name":"euni, a quarantine introvert"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199453277542375424","wmProperty":"repost-of","wmId":786341,"type":"entry","url":"https://twitter.com/Zaeboi222/status/1199453277542375424","likeOf":null,"author":{"url":"https://twitter.com/Zaeboi222","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/14375fb002af574736a00ccd509c55b529c45e29e4252706bd3f2cedc37c6369.jpg","name":"Kassidan"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199455985951281152","wmProperty":"repost-of","wmId":786338,"type":"entry","url":"https://twitter.com/Cibaru/status/1199455985951281152","likeOf":null,"author":{"url":"https://twitter.com/Cibaru","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/73bdbdfbb83ae25281628ad74ee0beb4b986ecf489d9432f3895139e04250a44.jpg","name":"『ᴳ⁶』"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199455326652772352","wmProperty":"repost-of","wmId":786339,"type":"entry","url":"https://twitter.com/Kazungu__Safari/status/1199455326652772352","likeOf":null,"author":{"url":"https://twitter.com/Kazungu__Safari","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/79d54e55b4c0122823edd372ed023b3e0cd0a9160818dab11b968d20f55117b4.jpg","name":"Kazungu Safari"},"published":"November 26, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199479835027836928","wmProperty":"repost-of","wmId":786337,"type":"entry","url":"https://twitter.com/who_brother/status/1199479835027836928","likeOf":null,"author":{"url":"https://twitter.com/who_brother","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/5bb7d4857a008a37fddc7d08971f6a2cc845a4557e913cd3220d7544635e821b.jpg","name":"Brothers-who-code"},"published":"November 27, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199589675209576450","wmProperty":"repost-of","wmId":786336,"type":"entry","url":"https://twitter.com/mz__kev/status/1199589675209576450","likeOf":null,"author":{"url":"https://twitter.com/mz__kev","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/1380e5eac4dda3b595c5dce799c9233ac0f51af9e9a7f3cdf82290a70a17643f.jpg","name":"Kevwe Ochuko"},"published":"November 27, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199638524879867904","wmProperty":"repost-of","wmId":786335,"type":"entry","url":"https://twitter.com/_olegkusov/status/1199638524879867904","likeOf":null,"author":{"url":"https://twitter.com/_olegkusov","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/1a50a951237cea47ce923ac8f217076688d2a4fa4c89e64e8de2ac06d3289b4c.jpg","name":"Oleg"},"published":"November 27, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199669909099294720","wmProperty":"repost-of","wmId":786334,"type":"entry","url":"https://twitter.com/ngoede/status/1199669909099294720","likeOf":null,"author":{"url":"https://twitter.com/ngoede","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/f97cab6922c3cd0b54561b7789e5fe173b9777ee8c7aaeb003e1c5bc3599164e.jpg","name":"Nick #stayhome Goede"},"published":"November 27, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199675190344585216","wmProperty":"repost-of","wmId":786333,"type":"entry","url":"https://twitter.com/solandow/status/1199675190344585216","likeOf":null,"author":{"url":"https://twitter.com/solandow","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0666621cde01503d719fa0a8fe2d4905d37fa04d78ae147729dc6c9fcdeaa5ed.jpg","name":"World Greatest!!!🇨🇦"},"published":"November 27, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1199347801492271104/1199726081797832704","wmProperty":"repost-of","wmId":786332,"type":"entry","url":"https://twitter.com/EasyVipin/status/1199726081797832704","likeOf":null,"author":{"url":"https://twitter.com/EasyVipin","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/91502bc88b82782cae6334185188329d990684ab2aaa5dc4165e8d11544965cb.jpg","name":"Vipin Chandra"},"published":"November 27, 2019","content":{"text":"I just published a tutorial on how to create a Gatsby blog post search filter: aboutmonica.com/blog/create-ga… twitter.com/waterproofhear…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/8697162","wmProperty":"like-of","wmId":786330,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-8697162","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/josgraha","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/529b0ff33257b8fc8c035375df5b50d0f47110a65bc95f7c262e36cdac1bce8a.jpg","name":"Joe Graham"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/2662146008","wmProperty":"like-of","wmId":786331,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-2662146008","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/simbatheesailor","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/e8306b8d598710cae7c03b4d69bd7de4e704fcb8976301d263a7e87f33f6cba1.jpg","name":"Anil Chaudhary"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/1162791801452990464","wmProperty":"like-of","wmId":786329,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-1162791801452990464","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/i_in_dev","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d3328e9a0c4dd0ca129c0e9c8c0ada3c66e245a6fd02b33bf3d8f81dcaac0047.jpg","name":"Aien 🌱"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/11488202","wmProperty":"like-of","wmId":786328,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-11488202","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/pauloelias","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/7f41ca22296a8bd5a08906058923531a4d9bc1f211818ee2923a4ba016dfeea5.jpg","name":"Paulo Elias"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/293293497","wmProperty":"like-of","wmId":786326,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-293293497","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/aclairefication","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/360908976bcb73e6e7b39308e501bc93cef4cb027dd720a10ee384d609cf1640.jpg","name":"a-prepare-fication"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/26775378","wmProperty":"like-of","wmId":786327,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-26775378","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/ngoede","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/f97cab6922c3cd0b54561b7789e5fe173b9777ee8c7aaeb003e1c5bc3599164e.jpg","name":"Nick #stayhome Goede"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/55149856","wmProperty":"like-of","wmId":786324,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-55149856","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/ricardocanelas","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/abb30a92b87a52861ae58d736d3e6b1adba99ffd70aaae06a25499ab64bca530.jpg","name":"Ricardo Canelas"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/911201271062962177","wmProperty":"like-of","wmId":786325,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-911201271062962177","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/solandow","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0666621cde01503d719fa0a8fe2d4905d37fa04d78ae147729dc6c9fcdeaa5ed.jpg","name":"World Greatest!!! 🇨🇦"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/16832123","wmProperty":"like-of","wmId":786323,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-16832123","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/JCurt","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/078c89b0344776f2061c013c735607bbb2189a5379b5b837e55e08c2d6e6134e.jpg","name":"Joseph Curtis"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/1113089774414323713","wmProperty":"like-of","wmId":786322,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-1113089774414323713","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/wizvee_dev","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/90d34e2a6cb4e101e6c88d8f170337f8d48c0c0251ca5e9f733fc8da61abec14.jpg","name":"위즈비"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/1090246542898868224","wmProperty":"like-of","wmId":786321,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-1090246542898868224","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/shaonkabir8","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a20f91c47f2d00b0aa124f7059f9227c36afb92bde0199b84d28ac57052acc51.jpg","name":"Shaon 🇧🇩"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/1198204846865702912","wmProperty":"like-of","wmId":786320,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-1198204846865702912","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/EasyVipin","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/91502bc88b82782cae6334185188329d990684ab2aaa5dc4165e8d11544965cb.jpg","name":"Vipin Chandra"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/1033234998193676289","wmProperty":"like-of","wmId":786318,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-1033234998193676289","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/dev_prakashk","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/177b0e774a8f86090766a09b38808162d3232cb8ba722aec0fb01252e30dae41.jpg","name":"Prakash Kumar"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/2316760164","wmProperty":"like-of","wmId":786319,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-2316760164","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/Becca9941","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9108f6eb38450d09ac5e7497d2eecdbc04c56e6e41a46ec49863ed870a196bf7.jpg","name":"Becca Williams"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/1020827460672409607","wmProperty":"like-of","wmId":786317,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-1020827460672409607","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/jhoncerpa_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/69c86e6abd0f714f96b4ea9564ce2a0b55952801e8109e2b350d1445f9ff0812.jpg","name":"John"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/14053735","wmProperty":"like-of","wmId":786316,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-14053735","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/somkiat","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/3412d819622a4f27d2bb29d816abfa71fbfc8cc42cbb4d6d161dacee2ddc2d68.png","name":"UP1"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/150675774","wmProperty":"like-of","wmId":786315,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-150675774","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/bjornrixman","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/89408018a8260e52c9b01e3c3f152fc5ba523ad1ddc854775e8fe0a30f6db499.jpg","name":"Björn Rixman"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/806114078448111617","wmProperty":"like-of","wmId":786314,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-806114078448111617","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/wichopy","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/e7b119e97dd3c63ef7c5b559edf6939a5b0923f2dfd2c0bfc70bca7bbc336e8f.jpg","name":"William Chou"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/1316759172","wmProperty":"like-of","wmId":786313,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-1316759172","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/lovebondz","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ab3e88d36937f0197c447e702598d397617f85bbc78cc96bf1d7e11abed81076.jpg","name":"Akinmade Bond"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/209942586","wmProperty":"like-of","wmId":786312,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-209942586","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/40ftSlinky","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9d56e279bace0c2b07112858c89d027bb975ce04b6d92e359856e55ebb80d483.png","name":"40ftSlinky"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/1136748837656236032","wmProperty":"like-of","wmId":786310,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-1136748837656236032","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/ak1ro1","type":"card","photo":"https://webmention.io/avatar/abs.twimg.com/0e6b2cd70aa5b35dec24ca4e1e63f8963f0118736d9ec3bba77e3a8c99a27bc2.png","name":"ak1ro"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/14394155","wmProperty":"like-of","wmId":786311,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-14394155","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/marakuba","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/e40e93090cd98f6777c3d5c7f486aa314f6c38cc3440f44fdc126397bc5b7ca1.jpg","name":"Anatoly"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/896087563","wmProperty":"like-of","wmId":786308,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-896087563","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/cmd545","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c304d72c27ede301e196d269e61ab7733c4505352bc79e0acf9b8eaf8f9ed4e0.jpg","name":"Carrie"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/1091097030473199617","wmProperty":"like-of","wmId":786309,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-1091097030473199617","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/WWCodeFrontEnd","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9d7c67c161780187e8a8951f89cd34f9a1302d6e6ea76017e924526f738c99ea.png","name":"WWCode FrontEnd"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1199347801492271104/1171874501153439749","wmProperty":"like-of","wmId":786307,"type":"entry","url":"https://twitter.com/waterproofheart/status/1199347801492271104#favorited-by-1171874501153439749","likeOf":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","author":{"url":"https://twitter.com/Hysteriaa2","type":"card","photo":"https://webmention.io/avatar/abs.twimg.com/0e6b2cd70aa5b35dec24ca4e1e63f8963f0118736d9ec3bba77e3a8c99a27bc2.png","name":"Hysteriaa"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1204679160628727808","wmProperty":"mention-of","wmId":786305,"type":"entry","url":"https://twitter.com/iamdillion/status/1204679160628727808","likeOf":null,"author":{"url":"https://twitter.com/iamdillion","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ce37d5fc203253643013c90e9fe853c8b56c92c85bc94b0f3f2d8b4167545a22.jpg","name":"Stay Home | Wash Your Hands 💛"},"published":"December 11, 2019","content":{"text":"Merry Christmas in advance ☺️\n+ a search functionality I added to my gatsby site by following this article - aboutmonica.com/blog/create-ga… by @waterproofheart 🔥\n\n#100DaysOfCode"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1203745815296167936","wmProperty":"mention-of","wmId":786304,"type":"entry","url":"https://twitter.com/jsjoeio/status/1203745815296167936","likeOf":null,"author":{"url":"https://twitter.com/jsjoeio","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/819966659d27915d4561fe97cb7b96d0b1f9e0f33dfaf56e4c537d03c7c30ac6.jpg","name":"Joe Previte 🦀"},"published":"December 08, 2019","content":{"text":"If you're looking to add search functionality to your Gatsby (or non-Gatsby) site, check out this tutorial by @waterproofheart\n\nI used it for my site and it was super helpful 😄\naboutmonica.com/blog/create-ga…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1250584301399191552","wmProperty":"mention-of","wmId":786168,"type":"entry","url":"https://twitter.com/IAmKennyWhyte/status/1250584301399191552","likeOf":null,"author":{"url":"https://twitter.com/IAmKennyWhyte","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/f094bca5daed1f645de3f10639891e87f7b2d2f905957ffbfb3271da0d44d356.png","name":"Kenny Whyte"},"published":"April 16, 2020","content":{"text":"Thanks @waterproofheart  for this beautiful article on how to add a filter functionality to a @gatsbyjs website. aboutmonica.com/blog/create-ga…"}}}]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial/","slug":"/blog/create-gatsby-blog-search-tutorial/","prev":{"id":"fa528f2e-174b-568f-9ebc-33358250c1cc","frontmatter":{"title":"Egghead Podcast: \"Personal Growth From Open-Source And Meetups\"","category":["reflection"],"date":"2019-12-22T02:43:13.595Z","slug":"personal-growth-egghead-podcast-monica-powell","tags":["Reflection","Podcast"],"redirects":null},"fields":{"slug":"/blog/personal-growth-egghead-podcast-monica-powell/"}},"next":{"id":"c916c59e-38b3-5c4f-8c7b-441af7802538","frontmatter":{"title":"Delete Your Code and Other Reflections from Coderetreat Day","category":["resources"],"date":"2019-11-17T02:43:13.595Z","slug":"code-retreat-reflection","tags":["Reflection"],"redirects":null},"fields":{"slug":"/blog/code-retreat-reflection/"}}}},
    "staticQueryHashes": ["1977783444","764694655"]}