@@ -208,8 +205,4 @@ watchEffect(() => {
.icons {
margin-bottom: 8px;
}
-
-.overview-container {
- padding-bottom: 288px;
-}
diff --git a/docs/.vitepress/theme/components/icons/IconsOverview.vue b/docs/.vitepress/theme/components/icons/IconsOverview.vue
index 4f3f03a5a..ebdb91a9c 100644
--- a/docs/.vitepress/theme/components/icons/IconsOverview.vue
+++ b/docs/.vitepress/theme/components/icons/IconsOverview.vue
@@ -1,5 +1,5 @@
-
+
diff --git a/docs/.vitepress/theme/components/icons/NoResults.vue b/docs/.vitepress/theme/components/icons/NoResults.vue
index 8155f1839..7d4bbbd6b 100644
--- a/docs/.vitepress/theme/components/icons/NoResults.vue
+++ b/docs/.vitepress/theme/components/icons/NoResults.vue
@@ -1,56 +1,218 @@
-
- No icons found for '{{ searchQuery }}'
-
+
{{ placeholder.title.replace('[name]', searchQuery) }}
+
+ {{ placeholder.message.replace('[name]', searchQuery) }}
+
+
+
+ {{ placeholder.finePrint }}
+
+
or
+
{
display: flex;
flex-direction: column;
align-items: center;
+ text-align: center;
+ padding-block: 48px;
}
-.animal-icon {
- width: 160px;
- height: 160px;
- color: var(--vp-c-neutral);
- opacity: 0.8;
- margin-top: 72px;
+.placeholder-icon {
+ width: 96px;
+ height: 96px;
+ color: var(--vp-c-text-1);
}
-.animal-icon.flip {
+.placeholder-icon.flip {
transform: rotateY(180deg);
}
-@media (min-width: 960px) {
- .animal-icon {
- width: 240px;
- height: 240px;
- }
-}
-
.no-results-text {
- line-height: 40px;
+ line-height: 1.35;
font-size: 24px;
margin-top: 24px;
+ margin-bottom: 8px;
+ text-wrap: balance;
+}
+
+.no-results-message {
+ text-wrap: balance;
+}
+
+.no-results-fine-print {
+ max-inline-size: 60ch;
+ font-size: 14px;
margin-bottom: 32px;
- text-align: center;
+ color: var(--vp-c-text-2);
+ text-wrap: balance;
}
.text-divider {
@@ -97,4 +264,10 @@ onMounted(() => {
font-size: 16px;
color: var(--vp-c-neutral);
}
+.divider {
+ margin: 24px auto 18px;
+ width: 64px;
+ height: 1px;
+ background-color: var(--vp-c-divider);
+}
diff --git a/docs/.vitepress/theme/utils/useSearchPlaceholder.ts b/docs/.vitepress/theme/utils/useSearchPlaceholder.ts
new file mode 100644
index 000000000..62ffcaaa1
--- /dev/null
+++ b/docs/.vitepress/theme/utils/useSearchPlaceholder.ts
@@ -0,0 +1,41 @@
+import { ref, Ref, watch } from 'vue';
+import BRAND_STOPWORDS from '../../data/brandStopwords.json' with { type: 'json' };
+
+export default function useSearchPlaceholder(
+ searchQuery: Ref,
+ results: Ref<{ name: string }[]>,
+) {
+ const state = ref({
+ isNoResults: false,
+ isBrand: false,
+ query: '',
+ });
+
+ watch(
+ results,
+ () => {
+ const query = searchQuery.value;
+ const searchResults = results.value;
+ if (query.length > 0 && searchResults.length === 0) {
+ for (const stopword of Object.keys(BRAND_STOPWORDS)) {
+ if (stopword.startsWith(query)) {
+ state.value = {
+ isNoResults: true,
+ isBrand: true,
+ query: BRAND_STOPWORDS[stopword],
+ };
+ return;
+ }
+ }
+ }
+ state.value = {
+ isNoResults: query in BRAND_STOPWORDS || (searchResults.length === 0 && query !== ''),
+ isBrand: query in BRAND_STOPWORDS,
+ query: BRAND_STOPWORDS[query] ?? query,
+ };
+ },
+ { immediate: true },
+ );
+
+ return state;
+}
diff --git a/docs/package.json b/docs/package.json
index 139a9fb1e..ffde218f0 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,6 +15,7 @@
"prebuild:categoriesJson": "node --experimental-strip-types ./scripts/writeCategoriesMetadata.mjs",
"prebuild:relatedIcons": "node --experimental-strip-types ./scripts/writeIconRelatedIcons.mjs",
"prebuild:iconDetails": "node --experimental-strip-types ./scripts/writeIconDetails.mjs",
+ "prebuild:brandStopwords": "node --experimental-strip-types ./scripts/writeBrandStopwords.mjs",
"postbuild:vercelJson": "node --experimental-strip-types ./scripts/writeVercelOutput.mjs",
"dev": "npx nitropack dev",
"prebuild:api": "npx nitropack prepare",
diff --git a/docs/scripts/writeBrandStopwords.mjs b/docs/scripts/writeBrandStopwords.mjs
new file mode 100644
index 000000000..63c246d89
--- /dev/null
+++ b/docs/scripts/writeBrandStopwords.mjs
@@ -0,0 +1,15 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+const currentDir = process.cwd();
+const dataDirectory = path.resolve(currentDir, '.vitepress/data');
+const stopwordsSource = path.resolve(currentDir, `../brand-stopwords.json`);
+const stopwordsFile = path.resolve(dataDirectory, `brandStopwords.json`);
+
+fs.copyFile(stopwordsSource, stopwordsFile)
+ .then(() => {
+ console.log('Successfully copied brandStopwords.json file');
+ })
+ .catch((error) => {
+ throw new Error(`Something went wrong generating the brandStopwords.json file,\n ${error}`);
+ });