Skip to content

Commit 4e173f7

Browse files
MoonMoon1919MoonMoon1919
authored
feat(CORE-876 & CORE-865): Implement module search and display all modules (#850)
* Add module search to library reference
1 parent a6ac812 commit 4e173f7

File tree

12 files changed

+579
-18
lines changed

12 files changed

+579
-18
lines changed

‎.circleci/config.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ references:
4848
export AWS_SECRET_ACCESS_KEY=`echo ${CREDENTIALS} | jq -r '.Credentials.SecretAccessKey'`
4949
export AWS_SESSION_TOKEN=`echo ${CREDENTIALS} | jq -r '.Credentials.SessionToken'`
5050
export AWS_EXPIRATION=`echo ${CREDENTIALS} | jq -r '.Credentials.Expiration'`
51+
export ALGOLIA_LIBRARY_INDEX_NAME="stage_docs_sourcer-library-reference"
5152
./scripts/push-to-s3-stage.sh
5253
5354
deploy_to_prod: &deploy-to-prod
@@ -60,6 +61,7 @@ references:
6061
export AWS_SECRET_ACCESS_KEY=`echo ${CREDENTIALS} | jq -r '.Credentials.SecretAccessKey'`
6162
export AWS_SESSION_TOKEN=`echo ${CREDENTIALS} | jq -r '.Credentials.SessionToken'`
6263
export AWS_EXPIRATION=`echo ${CREDENTIALS} | jq -r '.Credentials.Expiration'`
64+
export ALGOLIA_LIBRARY_INDEX_NAME="prod_docs_sourcer-library-reference"
6365
./scripts/push-to-s3-prod.sh
6466
6567
notify_slack_staging: &notify_slack_staging

‎_docs-sources/iac/reference/index.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
# Library Reference
1+
import SearchArea from "/src/components/SearchArea"
22

3-
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.
3+
# Find a module
44

5-
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.
5+
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.
66

7-
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.
7+
<SearchArea />

‎config/custom-environment-variables.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ algolia:
1818
appId: ALGOLIA_APP_ID
1919
apiKey: ALGOLIA_API_KEY
2020
indexName: ALGOLIA_INDEX_NAME
21+
libraryIndexName: ALGOLIA_LIBRARY_INDEX_NAME
2122

2223
# Posthog Analytics tracking config
2324
posthog:

‎config/default.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ algolia:
44
appId: 7AWZHGNJE2
55
apiKey: f799a6e9a302535bd92bbfab65fb6311 # This is a search only API key. It's safe to check in.
66
indexName: docs_site_dev
7+
libraryIndexName: dev_docs_sourcer-library-reference
78

89
googleAnalytics:
910
trackingID: UA-154792164-4

‎docs/iac/reference/index.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
# Library Reference
1+
import SearchArea from "/src/components/SearchArea"
22

3-
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.
3+
# Find a module
44

5-
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.
5+
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.
6+
7+
<SearchArea />
68

7-
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.
89

910
<!-- ##DOCS-SOURCER-START
1011
{
1112
"sourcePlugin": "local-copier",
12-
"hash": "de75e3371081959e3f3d5c1917ecae87"
13+
"hash": "128f8ac1292d9dfcfd82cb099562de9a"
1314
}
1415
##DOCS-SOURCER-END -->

‎docusaurus.config.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ const config = {
4747
stylesheets: [
4848
"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",
4949
],
50-
50+
customFields: {
51+
libraryIndexName: algoliaConfig ? algoliaConfig.libraryIndexName : undefined
52+
},
5153
presets: [
5254
[
5355
"@docusaurus/preset-classic",
@@ -291,6 +293,7 @@ const config = {
291293
// Public API key: safe to commit, but still sourced from config
292294
apiKey: algoliaConfig.apiKey,
293295
indexName: algoliaConfig.indexName,
296+
libraryIndexName: algoliaConfig.libraryIndexName,
294297
contextualSearch: true,
295298
}
296299
: undefined,

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"react": "^17.0.1",
4040
"react-dom": "^17.0.1",
4141
"react-modal": "^3.14.4",
42+
"react-select": "^5.7.3",
4243
"ts-jest": "^27.1.3",
4344
"url-loader": "^4.1.1"
4445
},
@@ -53,7 +54,7 @@
5354
"yargs": "^17.4.0"
5455
},
5556
"optionalDependencies": {
56-
"docs-sourcer": "git+ssh://git@github.com/gruntwork-io/docs-sourcer.git#v0.16",
57+
"docs-sourcer": "git+ssh://git@github.com/gruntwork-io/docs-sourcer.git#v0.18",
5758
"ts-commons": "gruntwork-io/ts-commons#v3.2.1"
5859
},
5960
"browserslist": {

‎scripts/update-search-index.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ function index_docs() {
8484
echo "Updating search index with docs-sourcer using prefix: $index_prefix..."
8585
# Update Algolia index using docs-sourcer. This is the new method of indexing.
8686
# In order to add plugins to this list just space separate them.
87-
ALGOLIA_APP_ID="$ALGOLIA_APPLICATION_ID" ALGOLIA_API_KEY="$api_key" ALGOLIA_INDEX_PREFIX="$index_prefix" yarn regenerate --plugins docs-indexer
87+
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
8888

8989
# Update Algolia index using docsearch-scraper. This is the old method of indexing. We are temporarily running this
9090
# alongside the docs-sourcer index.

‎sidebars/library-reference.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const sidebar = [
55
collapsible: false,
66
items: [
77
{
8-
label: "Library Reference",
8+
label: "Find a module",
99
type: "doc",
1010
id: "iac/reference/index",
1111
},

‎src/components/SearchArea.module.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
/* BASIC STRUCTURE */
2+
3+
.container {
4+
max-width: 600px;
5+
margin-top: 4rem;
6+
}
7+
8+
.card_container_max_width {
9+
min-width: 300px;
10+
max-width: 300px;
11+
max-height: 240px;
12+
margin: 0 auto;
13+
}
14+
15+
.card_result {
16+
text-overflow: ellipsis;
17+
display: -webkit-box;
18+
-webkit-line-clamp: 2;
19+
-webkit-box-orient: vertical;
20+
overflow: hidden;
21+
font-size: 13px;
22+
}
23+
24+
.SearchContainerItem {
25+
width: 300px;
26+
}
27+
28+
.SearchContainerDropdown {
29+
width: 300px;
30+
}
31+
32+
.NoResultsContainer {
33+
max-width: 600px;
34+
align-items: center;
35+
}
36+
37+
.NoResults {
38+
font-size: large;
39+
color: rgba(40, 40, 40, 0.628);
40+
font-style: italic;
41+
}
42+
43+
.SearchContainerItemHeader {
44+
font-size: x-small;
45+
align-items: start;
46+
font-weight: 600;
47+
color: rgba(40, 40, 40, 0.628);
48+
margin-bottom: 0;
49+
}
50+
51+
.SearchInputContainer {
52+
height: 40.40px;
53+
margin-top: 1px;
54+
padding-bottom: 1px;
55+
padding-right: 1px;
56+
}
57+
58+
.SearchInput {
59+
align-items: center;
60+
background: rgb(255, 255, 255);
61+
border-width: 1px;
62+
border-style: solid;
63+
border-color: #CCCCCC;
64+
border-radius: 4px;
65+
-webkit-border-radius: 4px;
66+
padding-top: 0px;
67+
color: hsl(0, 0%, 20%);
68+
display: flex;
69+
font-weight: 400;
70+
justify-content: space-between;
71+
padding: 2px 8px;
72+
-webkit-user-select: none;
73+
user-select: none;
74+
width: 100%;
75+
height: 100%;
76+
margin-left: 1px;
77+
margin-top: 0px;
78+
font-size: 15px;
79+
font-family: "Source Sans Pro";
80+
}
81+
82+
.SearchInput:focus-visible {
83+
outline: unset;
84+
border-color: #6f5bd7;
85+
box-shadow: 0 0 0 1px #6f5bd7;
86+
}
87+
88+
89+
.SearchInput::-webkit-input-placeholder {
90+
color: #969faf;
91+
opacity: unset;
92+
}
93+
94+
.SearchInput::placeholder {
95+
color: #969faf;
96+
}
97+
98+
.FacetListContainer {
99+
position:absolute;
100+
}
101+
102+
@media only screen and (max-width: 640px) {
103+
.card_container_max_width {
104+
width: 100%;
105+
max-width: unset;
106+
}
107+
.container {
108+
width: 100%
109+
}
110+
.SearchContainerItem {
111+
width: 100%
112+
}
113+
.SearchContainerDropdown {
114+
width: 100%
115+
}
116+
.FacetListContainer {
117+
width: 100%;
118+
padding-right: 1.7rem;
119+
}
120+
}

0 commit comments

Comments
 (0)