feat(CORE-876 & CORE-865): Implement module search and display all modules

.circleci/config.yml

@@ -48,6 +48,7 @@ references:
         export AWS_SECRET_ACCESS_KEY=`echo ${CREDENTIALS} | jq -r '.Credentials.SecretAccessKey'`
         export AWS_SESSION_TOKEN=`echo ${CREDENTIALS} | jq -r '.Credentials.SessionToken'`
         export AWS_EXPIRATION=`echo ${CREDENTIALS} | jq -r '.Credentials.Expiration'`
+        export ALGOLIA_LIBRARY_INDEX_NAME="stage_docs_sourcer-library-reference"
         ./scripts/push-to-s3-stage.sh
 
   deploy_to_prod: &deploy-to-prod
@@ -60,6 +61,7 @@ references:
         export AWS_SECRET_ACCESS_KEY=`echo ${CREDENTIALS} | jq -r '.Credentials.SecretAccessKey'`
         export AWS_SESSION_TOKEN=`echo ${CREDENTIALS} | jq -r '.Credentials.SessionToken'`
         export AWS_EXPIRATION=`echo ${CREDENTIALS} | jq -r '.Credentials.Expiration'`
+        export ALGOLIA_LIBRARY_INDEX_NAME="prod_docs_sourcer-library-reference"
         ./scripts/push-to-s3-prod.sh
 
   notify_slack_staging: &notify_slack_staging

_docs-sources/iac/reference/index.md

@@ -1,7 +1,7 @@
-# Library Reference
+import SearchArea from "/src/components/SearchArea"
 
-The Library Reference serves as the definitive index for all actively maintained Modules and Services within the Gruntwork Infrastructure as Code Library. This comprehensive reference provides a dedicated page for each module and service providing descriptions, detailed information on input and output variables, and sample code to help you get started.
+# Find a module
 
-If you're already familiar with the IaC Library and are ready to dive right in, you can find the full Service Catalog and Module catalog reference in the left sidebar.
+This section contains a complete list of the modules, services, and tools included in the Gruntwork IaC Library, along with reference documentation for each. For general information on the structure and usage of the Library, refer to our [IaC Library docs](../overview/index.md). If you can't find a module or service that suits your needs, let us know at feedback@gruntwork.io.
 
-For an introduction to the Gruntwork IaC Library, check out the [Overview](/iac/overview) page. This page introduces the concept of Modules and Services, clarifies their respective purposes, and offers guidance on when and how to effectively utilize them. The overview is a great starting point for understanding what the library can offer and how to best navigate it.
+<SearchArea />

config/custom-environment-variables.yaml

@@ -18,6 +18,7 @@ algolia:
   appId: ALGOLIA_APP_ID
   apiKey: ALGOLIA_API_KEY
   indexName: ALGOLIA_INDEX_NAME
+  libraryIndexName: ALGOLIA_LIBRARY_INDEX_NAME
 
 # Posthog Analytics tracking config
 posthog:

config/default.yaml

@@ -4,6 +4,7 @@ algolia:
   appId: 7AWZHGNJE2
   apiKey: f799a6e9a302535bd92bbfab65fb6311 # This is a search only API key. It's safe to check in.
   indexName: docs_site_dev
+  libraryIndexName: dev_docs_sourcer-library-reference
 
 googleAnalytics:
   trackingID: UA-154792164-4

docs/iac/reference/index.md

@@ -1,14 +1,15 @@
-# Library Reference
+import SearchArea from "/src/components/SearchArea"
 
-The Library Reference serves as the definitive index for all actively maintained Modules and Services within the Gruntwork Infrastructure as Code Library. This comprehensive reference provides a dedicated page for each module and service providing descriptions, detailed information on input and output variables, and sample code to help you get started.
+# Find a module
 
-If you're already familiar with the IaC Library and are ready to dive right in, you can find the full Service Catalog and Module catalog reference in the left sidebar.
+This section contains a complete list of the modules, services, and tools included in the Gruntwork IaC Library, along with reference documentation for each. For general information on the structure and usage of the Library, refer to our [IaC Library docs](../overview/index.md). If you can't find a module or service that suits your needs, let us know at feedback@gruntwork.io.
+
+<SearchArea />
 
-For an introduction to the Gruntwork IaC Library, check out the [Overview](/iac/overview) page. This page introduces the concept of Modules and Services, clarifies their respective purposes, and offers guidance on when and how to effectively utilize them. The overview is a great starting point for understanding what the library can offer and how to best navigate it.
 
 <!-- ##DOCS-SOURCER-START
 {
   "sourcePlugin": "local-copier",
-  "hash": "de75e3371081959e3f3d5c1917ecae87"
+  "hash": "128f8ac1292d9dfcfd82cb099562de9a"
 }
 ##DOCS-SOURCER-END -->

docusaurus.config.js

@@ -47,7 +47,9 @@ const config = {
   stylesheets: [
     "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap",
   ],
-
+  customFields: {
+    libraryIndexName: algoliaConfig ? algoliaConfig.libraryIndexName : undefined
+  },
   presets: [
     [
       "@docusaurus/preset-classic",
@@ -291,6 +293,7 @@ const config = {
             // Public API key: safe to commit, but still sourced from config
             apiKey: algoliaConfig.apiKey,
             indexName: algoliaConfig.indexName,
+            libraryIndexName: algoliaConfig.libraryIndexName,
             contextualSearch: true,
           }
         : undefined,

package.json

@@ -39,6 +39,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-modal": "^3.14.4",
+    "react-select": "^5.7.3",
     "ts-jest": "^27.1.3",
     "url-loader": "^4.1.1"
   },
@@ -53,7 +54,7 @@
     "yargs": "^17.4.0"
   },
   "optionalDependencies": {
-    "docs-sourcer": "git+ssh://git@github.com/gruntwork-io/docs-sourcer.git#v0.16",
+    "docs-sourcer": "git+ssh://git@github.com/gruntwork-io/docs-sourcer.git#v0.18",
     "ts-commons": "gruntwork-io/ts-commons#v3.2.1"
   },
   "browserslist": {

scripts/update-search-index.sh

@@ -84,7 +84,7 @@ function index_docs() {
   echo "Updating search index with docs-sourcer using prefix: $index_prefix..."
   # Update Algolia index using docs-sourcer. This is the new method of indexing.
   # In order to add plugins to this list just space separate them.
-  ALGOLIA_APP_ID="$ALGOLIA_APPLICATION_ID" ALGOLIA_API_KEY="$api_key" ALGOLIA_INDEX_PREFIX="$index_prefix" yarn regenerate --plugins docs-indexer
+  ALGOLIA_APP_ID="$ALGOLIA_APPLICATION_ID" ALGOLIA_API_KEY="$api_key" ALGOLIA_INDEX_PREFIX="$index_prefix" yarn regenerate --plugins docs-indexer module-catalog-api-index service-catalog-api-index
 
   # Update Algolia index using docsearch-scraper. This is the old method of indexing. We are temporarily running this
   # alongside the docs-sourcer index.

sidebars/library-reference.js

@@ -5,7 +5,7 @@ const sidebar = [
     collapsible: false,
     items: [
       {
-        label: "Library Reference",
+        label: "Find a module",
         type: "doc",
         id: "iac/reference/index",
       },

src/components/SearchArea.module.css

@@ -0,0 +1,120 @@
+/* BASIC STRUCTURE */
+
+.container {
+  max-width: 600px;
+  margin-top: 4rem;
+}
+
+.card_container_max_width {
+  min-width: 300px;
+  max-width: 300px;
+  max-height: 240px;
+  margin: 0 auto;
+}
+
+.card_result {
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 13px;
+}
+
+.SearchContainerItem {
+  width: 300px;
+}
+
+.SearchContainerDropdown {
+  width: 300px;
+}
+
+.NoResultsContainer {
+  max-width: 600px;
+  align-items: center;
+}
+
+.NoResults {
+  font-size: large;
+  color: rgba(40, 40, 40, 0.628);
+  font-style: italic;
+}
+
+.SearchContainerItemHeader {
+  font-size: x-small;
+  align-items: start;
+  font-weight: 600;
+  color: rgba(40, 40, 40, 0.628);
+  margin-bottom: 0;
+}
+
+.SearchInputContainer {
+  height: 40.40px;
+  margin-top: 1px;
+  padding-bottom: 1px;
+  padding-right: 1px;
+}
+
+.SearchInput {
+  align-items: center;
+  background: rgb(255, 255, 255);
+  border-width: 1px;
+  border-style: solid;
+  border-color: #CCCCCC;
+  border-radius: 4px;
+  -webkit-border-radius: 4px;
+  padding-top: 0px;
+  color: hsl(0, 0%, 20%);
+  display: flex;
+  font-weight: 400;
+  justify-content: space-between;
+  padding: 2px 8px;
+  -webkit-user-select: none;
+  user-select: none;
+  width: 100%;
+  height: 100%;
+  margin-left: 1px;
+  margin-top: 0px;
+  font-size: 15px;
+  font-family: "Source Sans Pro";
+}
+
+.SearchInput:focus-visible {
+  outline: unset;
+  border-color: #6f5bd7;
+  box-shadow: 0 0 0 1px #6f5bd7;
+}
+
+
+.SearchInput::-webkit-input-placeholder {
+  color: #969faf;
+  opacity: unset;
+}
+
+.SearchInput::placeholder {
+  color: #969faf;
+}
+
+.FacetListContainer {
+  position:absolute;
+}
+
+@media only screen and (max-width: 640px) {
+  .card_container_max_width {
+    width: 100%;
+    max-width: unset;
+  }
+  .container {
+    width: 100%
+  }
+  .SearchContainerItem {
+    width: 100%
+  }
+  .SearchContainerDropdown {
+    width: 100%
+  }
+  .FacetListContainer {
+    width: 100%;
+    padding-right: 1.7rem;
+  }
+}