[GH-2791] Add platform tags to docs search results (#2792)

Author: jiayuasu

docs-overrides/assets/javascripts/components/search-tags.js

@@ -0,0 +1,76 @@
+const PLATFORM_RULES = [
+  {pattern: /\/api\/flink\//, label: 'SedonaFlink', cls: 'flink'},
+  {pattern: /\/api\/snowflake\//, label: 'SedonaSnow', cls: 'snow'},
+  {pattern: /\/setup\/flink\//, label: 'SedonaFlink', cls: 'flink'},
+  {pattern: /\/setup\/snowflake\//, label: 'SedonaSnow', cls: 'snow'},
+  {pattern: /\/tutorial\/flink\//, label: 'SedonaFlink', cls: 'flink'},
+  {pattern: /\/tutorial\/snowflake\//, label: 'SedonaSnow', cls: 'snow'},
+  {pattern: /sedonaflink\/?$/, label: 'SedonaFlink', cls: 'flink'},
+  {pattern: /sedonasnow\/?$/, label: 'SedonaSnow', cls: 'snow'},
+  {pattern: /\/api\/sql\//, label: 'SedonaSpark', cls: 'spark'},
+  {pattern: /\/api\/stats\//, label: 'SedonaSpark', cls: 'spark'},
+  {pattern: /\/api\/viz\//, label: 'SedonaSpark', cls: 'spark'},
+  {pattern: /\/setup\/(?!flink|snowflake)/, label: 'SedonaSpark', cls: 'spark'},
+  {
+    pattern: /\/tutorial\/(?!flink|snowflake)/,
+    label: 'SedonaSpark',
+    cls: 'spark',
+  },
+  {pattern: /sedonaspark\/?$/, label: 'SedonaSpark', cls: 'spark'},
+];
+
+function getPlatform(href) {
+  for (const rule of PLATFORM_RULES) {
+    if (rule.pattern.test(href)) {
+      return rule;
+    }
+  }
+  return null;
+}
+
+function tagResult(item) {
+  if (item.querySelector('.search-tag')) return;
+
+  const link = item.querySelector('a');
+  if (!link) return;
+
+  const platform = getPlatform(link.getAttribute('href') || '');
+  if (!platform) return;
+
+  const tag = document.createElement('span');
+  tag.className = `search-tag search-tag--${platform.cls}`;
+  tag.textContent = platform.label;
+
+  const title = link.querySelector('h1, h2');
+  if (title) {
+    title.appendChild(tag);
+  }
+}
+
+function handleMutations(mutationsList) {
+  for (const mutation of mutationsList) {
+    for (const node of mutation.addedNodes) {
+      if (!(node instanceof HTMLElement)) continue;
+
+      if (node.matches('.md-search-result__item')) {
+        tagResult(node);
+        continue;
+      }
+
+      const items = node.querySelectorAll
+        ? node.querySelectorAll('.md-search-result__item')
+        : [];
+      items.forEach(tagResult);
+    }
+  }
+}
+
+export const searchTags = () => {
+  const resultList = document.querySelector('.md-search-result__list');
+  if (!resultList) return;
+
+  resultList.querySelectorAll('.md-search-result__item').forEach(tagResult);
+
+  const observer = new MutationObserver(handleMutations);
+  observer.observe(resultList, {childList: true, subtree: true});
+};

docs-overrides/assets/javascripts/main.js

@@ -1,11 +1,13 @@
 import {industriesTabs} from './components/industries-tabs';
 import {codeTabs} from './components/code-tabs';
 import {typedAnimation} from './components/typed-animation';
+import {searchTags} from './components/search-tags';
 
 document.addEventListener('DOMContentLoaded', () => {
   industriesTabs();
   codeTabs();
   typedAnimation();
+  searchTags();
 });
 
 document$.subscribe(function () {

docs-overrides/assets/stylesheets/components/_search-tags.scss

@@ -0,0 +1,27 @@
+.search-tag {
+  display: inline-block;
+  margin-left: 0.5em;
+  padding: 0.1em 0.5em;
+  border-radius: 3px;
+  font-size: 0.65em;
+  font-weight: 700;
+  line-height: 1.6;
+  vertical-align: middle;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+
+  &--spark {
+    background-color: #fff3e0;
+    color: #e65100;
+  }
+
+  &--flink {
+    background-color: #e3f2fd;
+    color: #1565c0;
+  }
+
+  &--snow {
+    background-color: #e0f7fa;
+    color: #00695c;
+  }
+}

docs-overrides/assets/stylesheets/extra.scss

@@ -12,6 +12,7 @@
 @import "components/buttons";
 @import "components/footer";
 @import "components/sidebar";
+@import "components/search-tags";
 
 // Pages
 @import "pages/page-home";