docs: show Edge Add-ons in showcase (#2452)

Co-authored-by: Aaron <aaronklinker1@gmail.com>

Author: cookesan

docs/.vitepress/components/UsingWxtSection.vue

@@ -21,6 +21,7 @@ interface ListedExtension {
 const extensionEntries = _extensionEntries as Array<{
   chromeId?: string;
   firefoxSlug?: string;
+  edgeId?: string;
 }>;
 
 const chromeIds = extensionEntries.flatMap((e) =>
@@ -31,8 +32,13 @@ const firefoxSlugs = [
     extensionEntries.flatMap((e) => (e.firefoxSlug ? [e.firefoxSlug] : [])),
   ),
 ];
+const edgeIds = extensionEntries.flatMap((e) => (e.edgeId ? [e.edgeId] : []));
 
-const { data, isLoading } = useListExtensionDetails(chromeIds, firefoxSlugs);
+const { data, isLoading } = useListExtensionDetails(
+  chromeIds,
+  firefoxSlugs,
+  edgeIds,
+);
 
 function addUtmSource(storeUrl: string): string {
   const url = new URL(storeUrl);
@@ -49,6 +55,9 @@ const sortedExtensions = computed((): ListedExtension[] => {
   const firefoxBySlug = new Map(
     (data.value.firefox ?? []).filter(Boolean).map((e) => [e.id, e]),
   );
+  const edgeById = new Map(
+    (data.value.edge ?? []).filter(Boolean).map((e) => [e.id, e]),
+  );
 
   const results: ListedExtension[] = [];
 
@@ -57,12 +66,14 @@ const sortedExtensions = computed((): ListedExtension[] => {
     const firefox = entry.firefoxSlug
       ? firefoxBySlug.get(entry.firefoxSlug)
       : undefined;
+    const edge = entry.edgeId ? edgeById.get(entry.edgeId) : undefined;
 
-    if (!chrome && !firefox) continue;
+    if (!chrome && !firefox && !edge) continue;
 
-    const primary = chrome ?? firefox!;
-    const users = (chrome?.users ?? 0) + (firefox?.users ?? 0);
-    const rating = chrome?.rating ?? firefox?.rating;
+    const primary = chrome ?? firefox ?? edge!;
+    const users =
+      (chrome?.users ?? 0) + (firefox?.users ?? 0) + (edge?.users ?? 0);
+    const rating = chrome?.rating ?? firefox?.rating ?? edge?.rating;
 
     const stores: StoreLink[] = [];
     if (chrome) {
@@ -71,9 +82,16 @@ const sortedExtensions = computed((): ListedExtension[] => {
     if (firefox) {
       stores.push({ label: 'Firefox', url: addUtmSource(firefox.storeUrl) });
     }
+    if (edge) {
+      stores.push({ label: 'Edge', url: addUtmSource(edge.storeUrl) });
+    }
 
     results.push({
-      id: entry.chromeId ?? `firefox:${entry.firefoxSlug}`,
+      id:
+        entry.chromeId ??
+        (entry.firefoxSlug
+          ? `firefox:${entry.firefoxSlug}`
+          : `edge:${entry.edgeId}`),
       name: primary.name,
       iconUrl: primary.iconUrl,
       shortDescription: primary.shortDescription,

docs/.vitepress/composables/useListExtensionDetails.ts

@@ -13,10 +13,11 @@ export interface Extension {
 export interface ExtensionResults {
   chrome: Extension[];
   firefox: Extension[];
+  edge: Extension[];
 }
 
 const operationName = 'WxtDocsUsedBy';
-const query = `query ${operationName}($chromeIds: [String!]!, $firefoxIds: [String!]!) {
+const query = `query ${operationName}($chromeIds: [String!]!, $firefoxIds: [String!]!, $edgeIds: [String!]!) {
   chromeExtensions(ids: $chromeIds) {
     id
     ...ExtensionData
@@ -25,6 +26,10 @@ const query = `query ${operationName}($chromeIds: [String!]!, $firefoxIds: [Stri
     id: slug
     ...ExtensionData
   }
+  edgeAddons(ids: $edgeIds) {
+    id
+    ...ExtensionData
+  }
 }
 
 fragment ExtensionData on Extension {
@@ -36,13 +41,21 @@ fragment ExtensionData on Extension {
   users
 }`;
 
-export default function (chromeIds: string[], firefoxSlugs: string[]) {
+export default function (
+  chromeIds: string[],
+  firefoxSlugs: string[],
+  edgeIds: string[],
+) {
   const data = ref<ExtensionResults>();
   const err = ref<unknown>();
   const isLoading = ref(true);
 
-  if (chromeIds.length === 0 && firefoxSlugs.length === 0) {
-    data.value = { chrome: [], firefox: [] };
+  if (
+    chromeIds.length === 0 &&
+    firefoxSlugs.length === 0 &&
+    edgeIds.length === 0
+  ) {
+    data.value = { chrome: [], firefox: [], edge: [] };
     isLoading.value = false;
     return { data, err, isLoading };
   }
@@ -52,7 +65,7 @@ export default function (chromeIds: string[], firefoxSlugs: string[]) {
     body: JSON.stringify({
       operationName,
       query,
-      variables: { chromeIds, firefoxIds: firefoxSlugs },
+      variables: { chromeIds, firefoxIds: firefoxSlugs, edgeIds },
     }),
     headers: {
       'Content-Type': 'application/json',
@@ -64,6 +77,7 @@ export default function (chromeIds: string[], firefoxSlugs: string[]) {
       data.value = {
         chrome: responseData.chromeExtensions ?? [],
         firefox: responseData.firefoxAddons ?? [],
+        edge: responseData.edgeAddons ?? [],
       };
       err.value = undefined;
     })

docs/assets/extension-showcase.yml

@@ -7,7 +7,8 @@
 # Use:
 #
 # - `chromeId` for the Chrome Web Store listing,
-# - `firefoxSlug` for Firefox Add-ons (slug from https://addons.mozilla.org/firefox/addon/{slug}/)
+# - `firefoxSlug` for Firefox Add-ons (slug from https://addons.mozilla.org/firefox/addon/{slug}/),
+# - `edgeId` for the Edge Add-ons listing (ID from https://microsoftedge.microsoft.com/addons/detail/{slug}/{id})
 #
 # You may include one or more of these fields for your extension.
 
@@ -30,6 +31,7 @@
 - # StayFree - Website Blocker & Web Analytics
   chromeId: elfaihghhjjoknimpccccmkioofjjfkf
   firefoxSlug: stayfree
+  edgeId: aghmglalnfmjbipodadgbgpakneabgnp
 
 - # Doozy: Ai Made Easy
   chromeId: okifoaikfmpfcamplcfjkpdnhfodpkil