From 32058027f3b1b9e23a4f97394386db3cebcf49e6 Mon Sep 17 00:00:00 2001 From: Skylar Bolton Date: Mon, 13 Apr 2026 00:24:29 -0400 Subject: [PATCH] docs: Add Firefox Add-on support to homepage showcase (#2208) Co-authored-by: Claude Opus 4.6 Co-authored-by: Aaron --- .../.vitepress/components/UsingWxtSection.vue | 894 ++++++++++++++---- .../composables/useListExtensionDetails.ts | 60 +- 2 files changed, 749 insertions(+), 205 deletions(-) diff --git a/docs/.vitepress/components/UsingWxtSection.vue b/docs/.vitepress/components/UsingWxtSection.vue index 40bc082a..2a083238 100644 --- a/docs/.vitepress/components/UsingWxtSection.vue +++ b/docs/.vitepress/components/UsingWxtSection.vue @@ -1,174 +1,651 @@ diff --git a/docs/.vitepress/composables/useListExtensionDetails.ts b/docs/.vitepress/composables/useListExtensionDetails.ts index 119236c0..65a73790 100644 --- a/docs/.vitepress/composables/useListExtensionDetails.ts +++ b/docs/.vitepress/composables/useListExtensionDetails.ts @@ -1,39 +1,58 @@ import { ref } from 'vue'; -export interface ChromeExtension { +export interface Extension { id: string; name: string; iconUrl: string; - weeklyActiveUsers: number; shortDescription: string; storeUrl: string; rating: number | undefined; + users: number; +} + +export interface ExtensionResults { + chrome: Extension[]; + firefox: Extension[]; } const operationName = 'WxtDocsUsedBy'; -const query = `query ${operationName}($ids:[String!]!) { - chromeExtensions(ids: $ids) { +const query = `query ${operationName}($chromeIds: [String!]!, $firefoxIds: [String!]!) { + chromeExtensions(ids: $chromeIds) { id - name - iconUrl - weeklyActiveUsers - shortDescription - storeUrl - rating + ...ExtensionData } + firefoxAddons(ids: $firefoxIds) { + id: slug + ...ExtensionData + } +} + +fragment ExtensionData on Extension { + name + iconUrl + shortDescription + storeUrl + rating + users }`; -export default function (ids: string[]) { - const data = ref(); +export default function (chromeIds: string[], firefoxSlugs: string[]) { + const data = ref(); const err = ref(); const isLoading = ref(true); + if (chromeIds.length === 0 && firefoxSlugs.length === 0) { + data.value = { chrome: [], firefox: [] }; + isLoading.value = false; + return { data, err, isLoading }; + } + fetch('https://queue.wxt.dev/api', { method: 'POST', body: JSON.stringify({ operationName, query, - variables: { ids }, + variables: { chromeIds, firefoxIds: firefoxSlugs }, }), headers: { 'Content-Type': 'application/json', @@ -41,10 +60,11 @@ export default function (ids: string[]) { }) .then(async (res) => { isLoading.value = false; - const { - data: { chromeExtensions }, - } = await res.json(); - data.value = chromeExtensions; + const { data: responseData } = await res.json(); + data.value = { + chrome: responseData.chromeExtensions ?? [], + firefox: responseData.firefoxAddons ?? [], + }; err.value = undefined; }) .catch((error) => { @@ -54,9 +74,5 @@ export default function (ids: string[]) { err.value = error; }); - return { - data, - err, - isLoading, - }; + return { data, err, isLoading }; }