Sep 16, 2025 · Sep 16, 2025 · Sep 16, 2025 · Sep 16, 2025 · Sep 16, 2025 · Sep 17, 2025
diff --git a/docusaurus/package.json b/docusaurus/package.json
    "generate-llms": "node scripts/generate-llms.js",
    "dev:with-llms": "yarn generate-llms && docusaurus start --port 8080 --no-open",
    "build:with-llms": "yarn generate-llms && docusaurus build",
 "meilisearch:update-order": "node -r dotenv/config scripts/meilisearch/add-category-order.js"
    "meilisearch:update-order": "node -r dotenv/config scripts/meilisearch/add-category-order.js"
  },
  "dependencies": {
    "@amplitude/analytics-browser": "^2.12.2",
    "qs": "^6.11.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": ">=1.58.3 <2.0.0"
    "sass": ">=1.58.3 <2.0.0",
    "solid-js": "^1.9.9"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "3.5.2",
diff --git a/docusaurus/src/theme/SearchBar/index.js b/docusaurus/src/theme/SearchBar/index.js
 import React, { useEffect, useRef } from 'react';
 import { docsearch } from 'meilisearch-docsearch';
 import React, { useEffect, useRef, useState } from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { useColorMode } from '@docusaurus/theme-common';
 import'meilisearch-docsearch/css';
 importBrowserOnly from '@docusaurus/BrowserOnly';

 export defaultfunctionSearchBar() {
 functionSearchBarContent() {
  const { siteConfig } = useDocusaurusContext();
  const { colorMode } = useColorMode();
  const searchButtonRef = useRef(null);
  const dropdownRef = useRef(null);
  const searchInstanceRef = useRef(null);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    if (!searchButtonRef.current) {
    // Clear the container content
    searchButtonRef.current.innerHTML = '';

    const search = docsearch({
      container: searchButtonRef.current,
      host: siteConfig.customFields.meilisearch.host,
      apiKey: siteConfig.customFields.meilisearch.apiKey,
      indexUid: siteConfig.customFields.meilisearch.indexUid,

      // Transform search results
      transformItems: (items) => {
        return items.map((item) => {
          let section = item.hierarchy_lvl0 || 'Documentation';

          if (item.url && item.url.includes('/cms/')) {
            section = 'CMS';
          } else if (item.url && item.url.includes('/cloud/')) {
            section = 'Cloud';
          }

          return {
            ...item,
            url: item.url.replace('https://docs.strapi.io', ''),
            hierarchy: {
              lvl0: section,
              lvl1: item.hierarchy_lvl0, // La section (Backend customization, etc.)
              lvl2: item.hierarchy_lvl1, // Le titre de la page
              lvl3: item.hierarchy_lvl2
    // Dynamic import to avoid SSR issues with solid-js
    Promise.all([
      import('meilisearch-docsearch'),
      import('meilisearch-docsearch/css')
    ]).then(([{ docsearch }]) => {
      const search = docsearch({
        container: searchButtonRef.current,
        host: siteConfig.customFields.meilisearch.host,
        apiKey: siteConfig.customFields.meilisearch.apiKey,
        indexUid: siteConfig.customFields.meilisearch.indexUid,

        transformItems: (items) => {
          return items.map((item) => {
            let section = item.hierarchy_lvl0 || 'Documentation';

            if (item.url && item.url.includes('/cms/')) {
              section = 'CMS';
            } else if (item.url && item.url.includes('/cloud/')) {
              section = 'Cloud';
            }
          };
        });
      },

      // Customize search parameters
      searchParams: {
        attributesToHighlight: ['hierarchy', 'content'],
        highlightPreTag: '<mark>',
        highlightPostTag: '</mark>',
        matchingStrategy: 'all',
        attributesToSearchOn: ['hierarchy_lvl1', 'hierarchy_lvl2', 'content']
      },

            return {
              ...item,
              url: item.url.replace('https://docs.strapi.io', ''),
              hierarchy: {
                lvl0: section,
                lvl1: item.hierarchy_lvl0,
                lvl2: item.hierarchy_lvl1,
                lvl3: item.hierarchy_lvl2
              }
            };
          });
        },

      placeholder: 'Search documentation...',
      translations: {
        button: {
          buttonText: 'Search',
          buttonAriaLabel: 'Search',
        searchParams: {
          attributesToHighlight: ['hierarchy', 'content'],
          highlightPreTag: '<mark>',
          highlightPostTag: '</mark>',
          matchingStrategy: 'all',
          attributesToSearchOn: ['hierarchy_lvl1', 'hierarchy_lvl2', 'content']
        },
        modal: {
          searchBox: {
            resetButtonTitle: 'Clear the query',
            resetButtonAriaLabel: 'Clear the query',
            cancelButtonText: 'Cancel',
            cancelButtonAriaLabel: 'Cancel',
          },
          startScreen: {
            recentSearchesTitle: 'Recent',
            noRecentSearchesText: 'No recent searches',
            saveRecentSearchButtonTitle: 'Save this search',
            removeRecentSearchButtonTitle: 'Remove this search',
            favoriteSearchesTitle: 'Favorite',
            removeFavoriteSearchButtonTitle: 'Remove this search from favorites',
          },
          errorScreen: {
            titleText: 'Unable to fetch results',
            helpText: 'You might want to check your network connection.',
          },
          footer: {
            selectText: 'to select',
            selectKeyAriaLabel: 'Enter key',
            navigateText: 'to navigate',
            navigateUpKeyAriaLabel: 'Arrow up',
            navigateDownKeyAriaLabel: 'Arrow down',
            closeText: 'to close',
            closeKeyAriaLabel: 'Escape key',
            searchByText: 'Search by',

        placeholder: 'Search documentation...',
        translations: {
          button: {
            buttonText: 'Search',
            buttonAriaLabel: 'Search',
          },
          noResultsScreen: {
            noResultsText: 'No results for',
            suggestedQueryText: 'Try searching for',
            reportMissingResultsText: 'Believe this query should return results?',
            reportMissingResultsLinkText: 'Let us know.',
          modal: {
            searchBox: {
              resetButtonTitle: 'Clear the query',
              resetButtonAriaLabel: 'Clear the query',
              cancelButtonText: 'Cancel',
              cancelButtonAriaLabel: 'Cancel',
            },
            startScreen: {
              recentSearchesTitle: 'Recent',
              noRecentSearchesText: 'No recent searches',
              saveRecentSearchButtonTitle: 'Save this search',
              removeRecentSearchButtonTitle: 'Remove this search',
              favoriteSearchesTitle: 'Favorite',
              removeFavoriteSearchButtonTitle: 'Remove this search from favorites',
            },
            errorScreen: {
              titleText: 'Unable to fetch results',
              helpText: 'You might want to check your network connection.',
            },
            footer: {
              selectText: 'to select',
              selectKeyAriaLabel: 'Enter key',
              navigateText: 'to navigate',
              navigateUpKeyAriaLabel: 'Arrow up',
              navigateDownKeyAriaLabel: 'Arrow down',
              closeText: 'to close',
              closeKeyAriaLabel: 'Escape key',
              searchByText: 'Search by',
            },
            noResultsScreen: {
              noResultsText: 'No results for',
              suggestedQueryText: 'Try searching for',
              reportMissingResultsText: 'Believe this query should return results?',
              reportMissingResultsLinkText: 'Let us know.',
            },
          },
        },
      },

      getMissingResultsUrl: ({ query }) => {
        return `https://github.com/strapi/documentation/issues/new?title=Missing+search+results+for+${query}`;
      },
    });
 getMissingResultsUrl: ({ query }) => {
 return `https://github.com/strapi/documentation/issues/new?title=Missing+search+results+for+${query}`;
 },
 });

 // Store the search instance
 searchInstanceRef.current = search;
  searchInstanceRef.current = search;
  setIsLoaded(true);

    // Add dark mode class when needed
    if (colorMode === 'dark') {
      dropdownRef.current?.classList.add('dark');
    } else {
      dropdownRef.current?.classList.remove('dark');
    }
      if (colorMode === 'dark') {
        dropdownRef.current?.classList.add('dark');
      } else {
        dropdownRef.current?.classList.remove('dark');
      }
    }).catch((error) => {
      console.error('Failed to load MeiliSearch:', error);
    });

    return () => {
      if (searchInstanceRef.current) {
      <div ref={searchButtonRef}></div>
    </div>
  );
 }

 export default function SearchBar() {
  return (
    <BrowserOnly fallback={<div className="navbar__search"><div></div></div>}>
      {() => <SearchBarContent />}
    </BrowserOnly>
  );
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,7 +17,7 @@
		"generate-llms": "node scripts/generate-llms.js",
		"dev:with-llms": "yarn generate-llms && docusaurus start --port 8080 --no-open",
		"build:with-llms": "yarn generate-llms && docusaurus build",
		"meilisearch:update-order": "node -r dotenv/config scripts/meilisearch/add-category-order.js"
		"meilisearch:update-order": "node -r dotenv/config scripts/meilisearch/add-category-order.js"
		},
		"dependencies": {
		"@amplitude/analytics-browser": "^2.12.2",
Expand DownExpand Up		@@ -49,7 +49,8 @@
		"qs": "^6.11.1",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"sass": ">=1.58.3 <2.0.0"
		"sass": ">=1.58.3 <2.0.0",
		"solid-js": "^1.9.9"
		},
		"devDependencies": {
		"@docusaurus/module-type-aliases": "3.5.2",
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,15 +1,15 @@
		import React, { useEffect, useRef } from 'react';
		import { docsearch } from 'meilisearch-docsearch';
		import React, { useEffect, useRef, useState } from 'react';
		import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
		import { useColorMode } from '@docusaurus/theme-common';
		import'meilisearch-docsearch/css';
		importBrowserOnly from '@docusaurus/BrowserOnly';

		export defaultfunctionSearchBar() {
		functionSearchBarContent() {
		const { siteConfig } = useDocusaurusContext();
		const { colorMode } = useColorMode();
		const searchButtonRef = useRef(null);
		const dropdownRef = useRef(null);
		const searchInstanceRef = useRef(null);
		const [isLoaded, setIsLoaded] = useState(false);

		useEffect(() => {
		if (!searchButtonRef.current) {
Expand All		@@ -25,103 +25,108 @@ export default function SearchBar() {
		// Clear the container content
		searchButtonRef.current.innerHTML = '';

		const search = docsearch({
		container: searchButtonRef.current,
		host: siteConfig.customFields.meilisearch.host,
		apiKey: siteConfig.customFields.meilisearch.apiKey,
		indexUid: siteConfig.customFields.meilisearch.indexUid,

		// Transform search results
		transformItems: (items) => {
		return items.map((item) => {
		let section = item.hierarchy_lvl0 \|\| 'Documentation';

		if (item.url && item.url.includes('/cms/')) {
		section = 'CMS';
		} else if (item.url && item.url.includes('/cloud/')) {
		section = 'Cloud';
		}

		return {
		...item,
		url: item.url.replace('https://docs.strapi.io', ''),
		hierarchy: {
		lvl0: section,
		lvl1: item.hierarchy_lvl0, // La section (Backend customization, etc.)
		lvl2: item.hierarchy_lvl1, // Le titre de la page
		lvl3: item.hierarchy_lvl2
		// Dynamic import to avoid SSR issues with solid-js
		Promise.all([
		import('meilisearch-docsearch'),
		import('meilisearch-docsearch/css')
		]).then(([{ docsearch }]) => {
		const search = docsearch({
		container: searchButtonRef.current,
		host: siteConfig.customFields.meilisearch.host,
		apiKey: siteConfig.customFields.meilisearch.apiKey,
		indexUid: siteConfig.customFields.meilisearch.indexUid,

		transformItems: (items) => {
		return items.map((item) => {
		let section = item.hierarchy_lvl0 \|\| 'Documentation';

		if (item.url && item.url.includes('/cms/')) {
		section = 'CMS';
		} else if (item.url && item.url.includes('/cloud/')) {
		section = 'Cloud';
		}
		};
		});
		},

		// Customize search parameters
		searchParams: {
		attributesToHighlight: ['hierarchy', 'content'],
		highlightPreTag: '<mark>',
		highlightPostTag: '</mark>',
		matchingStrategy: 'all',
		attributesToSearchOn: ['hierarchy_lvl1', 'hierarchy_lvl2', 'content']
		},

		return {
		...item,
		url: item.url.replace('https://docs.strapi.io', ''),
		hierarchy: {
		lvl0: section,
		lvl1: item.hierarchy_lvl0,
		lvl2: item.hierarchy_lvl1,
		lvl3: item.hierarchy_lvl2
		}
		};
		});
		},

		placeholder: 'Search documentation...',
		translations: {
		button: {
		buttonText: 'Search',
		buttonAriaLabel: 'Search',
		searchParams: {
		attributesToHighlight: ['hierarchy', 'content'],
		highlightPreTag: '<mark>',
		highlightPostTag: '</mark>',
		matchingStrategy: 'all',
		attributesToSearchOn: ['hierarchy_lvl1', 'hierarchy_lvl2', 'content']
		},
		modal: {
		searchBox: {
		resetButtonTitle: 'Clear the query',
		resetButtonAriaLabel: 'Clear the query',
		cancelButtonText: 'Cancel',
		cancelButtonAriaLabel: 'Cancel',
		},
		startScreen: {
		recentSearchesTitle: 'Recent',
		noRecentSearchesText: 'No recent searches',
		saveRecentSearchButtonTitle: 'Save this search',
		removeRecentSearchButtonTitle: 'Remove this search',
		favoriteSearchesTitle: 'Favorite',
		removeFavoriteSearchButtonTitle: 'Remove this search from favorites',
		},
		errorScreen: {
		titleText: 'Unable to fetch results',
		helpText: 'You might want to check your network connection.',
		},
		footer: {
		selectText: 'to select',
		selectKeyAriaLabel: 'Enter key',
		navigateText: 'to navigate',
		navigateUpKeyAriaLabel: 'Arrow up',
		navigateDownKeyAriaLabel: 'Arrow down',
		closeText: 'to close',
		closeKeyAriaLabel: 'Escape key',
		searchByText: 'Search by',

		placeholder: 'Search documentation...',
		translations: {
		button: {
		buttonText: 'Search',
		buttonAriaLabel: 'Search',
		},
		noResultsScreen: {
		noResultsText: 'No results for',
		suggestedQueryText: 'Try searching for',
		reportMissingResultsText: 'Believe this query should return results?',
		reportMissingResultsLinkText: 'Let us know.',
		modal: {
		searchBox: {
		resetButtonTitle: 'Clear the query',
		resetButtonAriaLabel: 'Clear the query',
		cancelButtonText: 'Cancel',
		cancelButtonAriaLabel: 'Cancel',
		},
		startScreen: {
		recentSearchesTitle: 'Recent',
		noRecentSearchesText: 'No recent searches',
		saveRecentSearchButtonTitle: 'Save this search',
		removeRecentSearchButtonTitle: 'Remove this search',
		favoriteSearchesTitle: 'Favorite',
		removeFavoriteSearchButtonTitle: 'Remove this search from favorites',
		},
		errorScreen: {
		titleText: 'Unable to fetch results',
		helpText: 'You might want to check your network connection.',
		},
		footer: {
		selectText: 'to select',
		selectKeyAriaLabel: 'Enter key',
		navigateText: 'to navigate',
		navigateUpKeyAriaLabel: 'Arrow up',
		navigateDownKeyAriaLabel: 'Arrow down',
		closeText: 'to close',
		closeKeyAriaLabel: 'Escape key',
		searchByText: 'Search by',
		},
		noResultsScreen: {
		noResultsText: 'No results for',
		suggestedQueryText: 'Try searching for',
		reportMissingResultsText: 'Believe this query should return results?',
		reportMissingResultsLinkText: 'Let us know.',
		},
		},
		},
		},

		getMissingResultsUrl: ({ query }) => {
		return `https://github.com/strapi/documentation/issues/new?title=Missing+search+results+for+${query}`;
		},
		});
		getMissingResultsUrl: ({ query }) => {
		return `https://github.com/strapi/documentation/issues/new?title=Missing+search+results+for+${query}`;
		},
		});

		// Store the search instance
		searchInstanceRef.current = search;
		searchInstanceRef.current = search;
		setIsLoaded(true);

		// Add dark mode class when needed
		if (colorMode === 'dark') {
		dropdownRef.current?.classList.add('dark');
		} else {
		dropdownRef.current?.classList.remove('dark');
		}
		if (colorMode === 'dark') {
		dropdownRef.current?.classList.add('dark');
		} else {
		dropdownRef.current?.classList.remove('dark');
		}
		}).catch((error) => {
		console.error('Failed to load MeiliSearch:', error);
		});

		return () => {
		if (searchInstanceRef.current) {
Expand All		@@ -136,4 +141,12 @@ export default function SearchBar() {
		<div ref={searchButtonRef}></div>
		</div>
		);
		}

		export default function SearchBar() {
		return (
		<BrowserOnly fallback={<div className="navbar__search"><div></div></div>}>
		{() => <SearchBarContent />}
		</BrowserOnly>
		);
		}