-update

notes/BGOONZ_BLOG_2.0.wiki/Add-site-search-w-algolia.md.md

@@ -1,10 +1,12 @@
-# Adding a Site Search to Your Stackbit Gatsby Site
+Adding a Site Search to Your Stackbit Gatsby Site
+=================================================
 
 There are a number of options for adding search to your Stackbit site built with Gatsby. There are some free options like [Lunr](https://lunrjs.com/) that are free and open source and can perform simple searches on pre-generated indexes. In this example, we'll use a service called [Algolia](https://www.algolia.com/) for the search API. Algolia is a service specifically geared towards search and thus has many more features. Algolia is a commercial offering, but it has a generous free tier.
 
 The example below was built with Stackbit. You can see the full project code at <https://github.com/remotesynth/good-celery>).
 
-## [](https://www.stackbit.com/docs/developer-guides/gatsby/site-search/#setting_up_algolia)Setting Up Algolia
+[](https://www.stackbit.com/docs/developer-guides/gatsby/site-search/#setting_up_algolia)Setting Up Algolia
+-----------------------------------------------------------------------------------------------------------
 
 You'll need to set up your account on Algolia and set up a project. You can skip the steps about setting up indices when creating your account - we'll take care of that via code. However, be sure to grab all your API keys from the Algolia dashboard as we'll need them later.
 
@@ -120,22 +122,23 @@ const postQuery = `{
 }`;
 
 const flatten = (arr) =>
-    arr.map(({ node: { frontmatter, ...rest } }) => ({
-        ...frontmatter,
-        ...rest
-    }));
+  arr.map(({ node: { frontmatter, ...rest } }) => ({
+    ...frontmatter,
+    ...rest
+  }));
 const settings = { attributesToSnippet: [`excerpt:20`] };
 
 const queries = [
-    {
-        query: postQuery,
-        transformer: ({ data }) => flatten(data.posts.edges),
-        indexName: `Posts`,
-        settings
-    }
+  {
+    query: postQuery,
+    transformer: ({ data }) => flatten(data.posts.edges),
+    indexName: `Posts`,
+    settings
+  }
 ];
 
 module.exports = queries;
+
 ```
 
 Copy
@@ -148,7 +151,8 @@ We can now see the results when going into Algolia and browsing Indices.
 
 ![indices populated on Algolia dashboard](https://www.stackbit.com/docs/images/algolia-indices-sm.png)
 
-## [](https://www.stackbit.com/docs/developer-guides/gatsby/site-search/#creating_the_search_ui)Creating the Search UI
+[](https://www.stackbit.com/docs/developer-guides/gatsby/site-search/#creating_the_search_ui)Creating the Search UI
+-------------------------------------------------------------------------------------------------------------------
 
 Now that our search indices are populated, let's display some results. To do this, we're going to use [React InstantSearch](https://github.com/algolia/react-instantsearch), which offers a search-as-you-type experience. It pretty much works out of the box using the [code they provide](https://www.algolia.com/doc/guides/building-search-ui/installation/react/).
 
@@ -300,10 +304,11 @@ The result works as shown below.
 
 ![finished search results](https://www.stackbit.com/docs/images/finished-search.gif)
 
-## [](https://www.stackbit.com/docs/developer-guides/gatsby/site-search/#deployment)Deployment
+[](https://www.stackbit.com/docs/developer-guides/gatsby/site-search/#deployment)Deployment
+-------------------------------------------------------------------------------------------
 
 When we're ready to deploy the search, we need to ensure that the environment variables we created are available when we deploy. On Netlify, all we need to do is go to Settings > Build & Deploy > Environment and add the necessary variables defined in our `.env` file to our deployment settings.
 
 ![Netlify environment variables](https://www.stackbit.com/docs/images/env-variables-sm.png)
 
-We're all set!
+We're all set!

notes/BGOONZ_BLOG_2.0.wiki/Adding-search-2-gatsby-site.md.md

@@ -1,4 +1,5 @@
-# Adding Search to Your Gatsby Site
+Adding Search to Your Gatsby Site
+=================================
 
 Brian Rinaldi --- July 01, 2020
 
@@ -10,7 +11,8 @@ Search is an important part of almost any site. Once you have a lot of content,
 
 In this post, we're going to explore adding search to a site built with Gatsby. We'll use a service called [Algolia](https://www.algolia.com/) for the search API. This is a commercial offering, but it has a generous free tier. The example site was built with Stackbit, though there's nothing in the code that we'll discuss that is Stackbit specific (for reference, you can see the full project code at <https://github.com/remotesynth/good-celery>). Ok, enough intro...let's get coding.
 
-## Setting Up Algolia
+Setting Up Algolia
+------------------
 
 First things first, you'll need to set up your account on Algolia and set up a project. You can skip the steps about setting up indices as we'll take care of that via code. However, be sure to grab all your API keys from the Algolia dashboard as we'll need them later.
 
@@ -155,7 +157,8 @@ We can now see the results when going into Algolia and browsing Indices.
 
 ![indices populated on Algolia dashboard](https://www.stackbit.com/images/1593607436-algolia-indices-sm.png)
 
-## Creating the Search UI
+Creating the Search UI
+----------------------
 
 Now that our search indices are populated, let's display some results. To do this, we're going to use [React InstantSearch](https://github.com/algolia/react-instantsearch), which offers a search-as-you-type experience. It pretty much works out of the box using the [code they provide](https://www.algolia.com/doc/guides/building-search-ui/installation/react/).
 
@@ -313,12 +316,13 @@ The result works as shown below.
 
 ![](https://www.stackbit.com/images/gatsby-finished-search.png)
 
-## Where to Go From Here
+Where to Go From Here
+---------------------
 
 There's one more step that I should mention. We need to ensure that the environment variables we created are available when we deploy. On Netlify, all we need to do is go to Settings > Build & Deploy > Environment and add the necessary variables defined in our `.env` file to our deployment settings.
 
 ![Netlify environment variables](https://www.stackbit.com/images/1593607459-env-variables-sm.png)
 
 We're all set!
 
-Obviously, this is just one way to implement the search. The [Gatsby documentation](https://www.gatsbyjs.org/docs/adding-search-with-algolia/) offers a similar but probably more flexible implementation. The [InstantSearch](https://www.algolia.com/doc/api-reference/widgets/instantsearch/react/) documentation also offers a ton of API and customization details with code samples to help you make the tools fit the needs of your specific site. In the end, implementing a search seems like a complicated task, but, thankfully, the tools and libraries available to us do a lot of the heavy lifting, making our jobs much easier.
+Obviously, this is just one way to implement the search. The [Gatsby documentation](https://www.gatsbyjs.org/docs/adding-search-with-algolia/) offers a similar but probably more flexible implementation. The [InstantSearch](https://www.algolia.com/doc/api-reference/widgets/instantsearch/react/) documentation also offers a ton of API and customization details with code samples to help you make the tools fit the needs of your specific site. In the end, implementing a search seems like a complicated task, but, thankfully, the tools and libraries available to us do a lot of the heavy lifting, making our jobs much easier.

notes/BGOONZ_BLOG_2.0.wiki/BasicWebDevelopmentEnvironmentSetup.md.md

@@ -1,8 +1,9 @@
-# Basic Web Development Environment Setup
+Basic Web Development Environment Setup
+=======================================
 
 Windows Subsystem for Linux (WSL) and Ubuntu
 
----
+------------------------------------------------------------------------
 
 ### Basic Web Development Environment Setup