diff --git a/docs/.env.example b/docs/.env.example index bce0da194..3a0820a18 100644 --- a/docs/.env.example +++ b/docs/.env.example @@ -1,4 +1,4 @@ -# Copy to `docs/.env`. Every variable is optional. +# Copy to `docs/.env`. # Icon popularity from Plausible. Defaults to 0 for every icon when unset. LUCIDE_ANALYTICS_TOKEN= @@ -6,9 +6,8 @@ LUCIDE_ANALYTICS_TOKEN= # Set to `true` to also show icons that are not released yet. VITE_SHOW_AWAITING_RELEASE= -# Client-side Algolia icon search (public search-only key). -# Overrides the defaults in docs/.vitepress/theme/utils/algolia.ts, -# e.g. to point the site at another index. The index is filled by the Algolia crawler. -VITE_ALGOLIA_APP_ID= -VITE_ALGOLIA_SEARCH_API_KEY= -VITE_ALGOLIA_INDEX_NAME= +# Client-side Algolia icon search (public search-only key). Required for the icon search. +# The index is filled by the Algolia crawler. +VITE_ALGOLIA_APP_ID=R7KKMCPXOB +VITE_ALGOLIA_SEARCH_API_KEY=dd3101054267d35fb28f49c42715f1aa +VITE_ALGOLIA_INDEX_NAME=icons diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 9891941bd..d8cb34e44 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -10,7 +10,7 @@ import { resourcesSidebar } from './sidebar/resources'; import llmstxt from 'vitepress-plugin-llms'; import { transformPageData } from './transformPageData'; import getHeadConfig from './getHeadConfig'; -import { ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY } from './theme/utils/algolia'; +import { loadEnv } from 'vitepress'; const defaultSandpackCSS = await readFile( fileURLToPath(new URL('./theme/sandpack-default.css', import.meta.url)), @@ -25,6 +25,9 @@ const title = 'Lucide'; const socialTitle = 'Lucide Icons'; const description = 'Beautiful & consistent icon toolkit made by the community.'; + +const env = loadEnv(process.env.NODE_ENV, process.cwd()); + // https://vitepress.dev/reference/site-config export default defineConfig({ title, @@ -135,8 +138,8 @@ export default defineConfig({ search: { provider: 'algolia', options: { - appId: ALGOLIA_APP_ID, - apiKey: ALGOLIA_SEARCH_API_KEY, + appId: env.VITE_ALGOLIA_APP_ID, + apiKey: env.VITE_ALGOLIA_SEARCH_API_KEY, indexName: 'lucide', }, }, diff --git a/docs/.vitepress/theme/components/icons/IconsOverview.vue b/docs/.vitepress/theme/components/icons/IconsOverview.vue index 258dca781..6e3e64c0c 100644 --- a/docs/.vitepress/theme/components/icons/IconsOverview.vue +++ b/docs/.vitepress/theme/components/icons/IconsOverview.vue @@ -2,7 +2,7 @@ import { ref, computed, defineAsyncComponent, onMounted, watch } from 'vue'; import type { IconEntity } from '../../types'; import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core'; -import { useRoute } from 'vitepress'; +import { DefaultTheme, useData, useRoute } from 'vitepress'; import IconGrid from './IconGrid.vue'; import Select from '../base/Select.vue'; import InputSearch from '../base/InputSearch.vue'; @@ -48,6 +48,9 @@ const props = defineProps<{ icons: IconEntity[]; }>(); +const { theme } = useData() + const algoliaSearchOptions = theme.value.search?.options as DefaultTheme.AlgoliaSearchOptions; + const activeIconName = ref(null); const selectedSort = ref(SORTING[0]); @@ -69,6 +72,7 @@ const { shortcutText: kbdSearchShortcut } = useSearchShortcut(() => { const { results: searchResults, isPending: isSearchPending } = useIconSearch( searchQueryDebounced, sortedIcons, + algoliaSearchOptions, ); // While searching, "Popularity" keeps Algolia's relevance order. @@ -145,7 +149,7 @@ function handleCloseDrawer() { ref="searchInput" :shortcut="kbdSearchShortcut" class="input-wrapper" - @focus="prefetchAlgoliaClient" + @focus="() =>prefetchAlgoliaClient(algoliaSearchOptions)" />