Add a facet search per section (#3279)

Author: gmourier

.github/workflows/scraper.yml

@@ -34,3 +34,16 @@ jobs:
             -e MEILISEARCH_API_KEY=$API_KEY \
             -v $CONFIG_FILE_PATH:/docs-scraper/config.json \
             getmeili/docs-scraper:v0.12.8 pipenv run ./docs_scraper config.json
+
+      - name: Extract section from URLs using RHAI function
+        env:
+          HOST_URL: ${{ secrets.MEILISEARCH_HOST_URL }}
+          API_KEY: ${{ secrets.MEILISEARCH_API_KEY }}
+        run: |
+          curl -X POST "$HOST_URL/indexes/mintlify-production/documents/edit" \
+            -H "Content-Type: application/json" \
+            -H "Authorization: Bearer $API_KEY" \
+            --data-binary '{
+              "filter": "url IS NOT NULL",
+              "function": "let url_parts = doc.url.split(\"/docs/\"); if url_parts.len() > 1 { let after_docs = url_parts[1]; let section_parts = after_docs.split(\"/\"); if section_parts.len() > 0 { doc.section = section_parts[0]; } }"
+            }'

docs-scraper.config.json

@@ -42,6 +42,12 @@
           "content",
           "hierarchy_lvl0"
       ],
+      "filterableAttributes": [
+        "url",
+        "section",
+        "hierarchy_lvl0",
+        "hierarchy_lvl1"
+      ],
       "synonyms": {
           "large language model": [
             "llm"

meilisearch-search-bar.css

@@ -187,4 +187,73 @@
   padding: 20px; 
   text-align: center; 
   color: #f87171;
-}
+}
+
+/* Filter Container Styles */
+.meilisearch-filter-container {
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.dark .meilisearch-filter-container {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.meilisearch-filter-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.7);
+  margin-bottom: 12px;
+}
+
+.dark .meilisearch-filter-title {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.meilisearch-filter-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.meilisearch-filter-tag {
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.7);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-transform: capitalize;
+}
+
+.dark .meilisearch-filter-tag {
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.meilisearch-filter-tag:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+.dark .meilisearch-filter-tag:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.meilisearch-filter-tag.active {
+  background-color: #f472b6;
+  border-color: #f472b6;
+  color: white;
+}
+
+.meilisearch-filter-tag.active:hover {
+  background-color: #cb4d86;
+  border-color: #cb4d86;
+}