chore/AppStore: Remove deprecated imageSrc and make the paths relativ…

…e in logo (#8479) * Remove depreated imageSrc and make the paths relative in logo * Do logo replacement at a single place * Make logo relative at other places * Fix campfire page not working in dev environment
calcom · Apr 26, 2023 · 51695ee · 51695ee · vercel · Apr 26, 2023
1 parent 543466f
commit 51695ee
Show file tree

Hide file tree

Showing 103 changed files with 210 additions and 253 deletions.
diff --git a/apps/web/pages/apps/[slug]/index.tsx b/apps/web/pages/apps/[slug]/index.tsx
@@ -6,6 +6,7 @@ import path from "path";
 import { z } from "zod";
 
 import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
+import { getAppAssetFullPath } from "@calcom/app-store/getAppAssetFullPath";
 import prisma from "@calcom/prisma";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -108,9 +109,11 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
   const { content, data } = sourceSchema.parse({ content: result.content, data: result.data });
   if (data.items) {
     data.items = data.items.map((item) => {
-      if (typeof item === "string" && !item.includes("/api/app-store")) {
-        // Make relative paths absolute
-        return `/api/app-store/${appDirname}/${item}`;
+      if (typeof item === "string") {
+        return getAppAssetFullPath(item, {
+          dirName: singleApp.dirName,
+          isTemplate: singleApp.isTemplate,
+        });
       }
       return item;
     });

diff --git a/packages/app-store/_appRegistry.ts b/packages/app-store/_appRegistry.ts
@@ -11,10 +11,6 @@ export async function getAppWithMetadata(app: { dirName: string }) {
   // Let's not leak api keys to the front end
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { key, ...metadata } = appMetadata;
-  if (metadata.logo && !metadata.logo.includes("/api/app-store/")) {
-    const appDirName = `${metadata.isTemplate ? "templates" : ""}/${app.dirName}`;
-    metadata.logo = `/api/app-store/${appDirName}/${metadata.logo}`;
-  }
   return metadata;
 }
 

diff --git a/packages/app-store/amie/DESCRIPTION.md b/packages/app-store/amie/DESCRIPTION.md
@@ -1,8 +1,8 @@
 ---
 items:
-  - /api/app-store/amie/1.jpg
-  - /api/app-store/amie/2.jpg
-  - /api/app-store/amie/3.jpg
+  - 1.jpg
+  - 2.jpg
+  - 3.jpg
 ---
 
 <iframe class="w-full aspect-video -mx-2" width="560" height="315" src="https://www.youtube.com/embed/OGe1NYKhZE8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

diff --git a/packages/app-store/amie/config.json b/packages/app-store/amie/config.json
@@ -3,8 +3,7 @@
   "name": "Amie",
   "slug": "amie",
   "type": "amie_other",
-  "imageSrc": "/api/app-store/amie/icon.svg",
-  "logo": "/api/app-store/amie/icon.svg",
+  "logo": "icon.svg",
   "url": "https://cal.com/apps/amie",
   "variant": "other",
   "categories": ["calendar"],

diff --git a/packages/app-store/appStoreMetaData.ts b/packages/app-store/appStoreMetaData.ts
@@ -1,19 +1,27 @@
 import type { AppMeta } from "@calcom/types/App";
 
 import { appStoreMetadata as rawAppStoreMetadata } from "./apps.metadata.generated";
+import { getAppAssetFullPath } from "./getAppAssetFullPath";
 
 type RawAppStoreMetaData = typeof rawAppStoreMetadata;
 type AppStoreMetaData = {
   [key in keyof RawAppStoreMetaData]: AppMeta;
 };
 
 export const appStoreMetadata = {} as AppStoreMetaData;
-
 for (const [key, value] of Object.entries(rawAppStoreMetadata)) {
-  appStoreMetadata[key as keyof typeof appStoreMetadata] = {
+  const dirName = "dirName" in value ? value.dirName : value.slug;
+  if (!dirName) {
+    throw new Error(`Couldn't derive dirName for app ${key}`);
+  }
+  const metadata = (appStoreMetadata[key as keyof typeof appStoreMetadata] = {
     appData: null,
-    dirName: "dirName" in value ? value.dirName : value.slug,
+    dirName,
     __template: "",
     ...value,
-  } as AppStoreMetaData[keyof AppStoreMetaData];
+  } as AppStoreMetaData[keyof AppStoreMetaData]);
+  metadata.logo = getAppAssetFullPath(metadata.logo, {
+    dirName,
+    isTemplate: metadata.isTemplate,
+  });
 }
diff --git a/packages/app-store/applecalendar/DESCRIPTION.md b/packages/app-store/applecalendar/DESCRIPTION.md
@@ -1,6 +1,6 @@
 ---
 items:
-  - /api/app-store/applecalendar/1.jpg
+  - 1.jpg
 ---
 
 Apple calendar runs both the macOS and iOS mobile operating systems. Offering online cloud backup of calendars using Apple’s iCloud service, it can sync with Google Calendar and Microsoft Exchange Server. Users can schedule events in their day that include time, location, duration, and extra notes.
diff --git a/packages/app-store/applecalendar/_metadata.ts b/packages/app-store/applecalendar/_metadata.ts
@@ -8,11 +8,10 @@ export const metadata = {
   installed: true,
   type: "apple_calendar",
   title: "Apple Calendar",
-  imageSrc: "/api/app-store/applecalendar/icon.svg",
   variant: "calendar",
   categories: ["calendar"],
   category: "calendar",
-  logo: "/api/app-store/applecalendar/icon.svg",
+  logo: "icon.svg",
   publisher: "Cal.com",
   slug: "apple-calendar",
   url: "https://cal.com/",

diff --git a/packages/app-store/around/DESCRIPTION.md b/packages/app-store/around/DESCRIPTION.md
@@ -1,13 +1,13 @@
 ---
 items:
-  - /api/app-store/around/1.jpg
-  - /api/app-store/around/2.jpg
-  - /api/app-store/around/3.jpg
-  - /api/app-store/around/4.jpg
-  - /api/app-store/around/5.jpg
-  - /api/app-store/around/6.jpg
-  - /api/app-store/around/7.jpg
-  - /api/app-store/around/8.jpg
+  - 1.jpg
+  - 2.jpg
+  - 3.jpg
+  - 4.jpg
+  - 5.jpg
+  - 6.jpg
+  - 7.jpg
+  - 8.jpg
 ---
 
 Discover radically unique video calls designed to help hybrid-remote teams create, collaborate and celebrate together.
diff --git a/packages/app-store/around/config.json b/packages/app-store/around/config.json
@@ -4,7 +4,7 @@
   "title": "Around",
   "slug": "around",
   "type": "around_video",
-  "logo": "/api/app-store/around/icon.svg",
+  "logo": "icon.svg",
   "url": "https://cal.com/apps/around",
   "variant": "conferencing",
   "categories": ["video"],

diff --git a/packages/app-store/caldavcalendar/DESCRIPTION.md b/packages/app-store/caldavcalendar/DESCRIPTION.md
@@ -1,6 +1,6 @@
 ---
 items:
-  - /api/app-store/caldavcalendar/1.jpg
+  - 1.jpg
 ---
 
 Caldav is a protocol that allows different clients/servers to access scheduling information on remote servers as well as schedule meetings with other users on the same server or other servers. It extends WebDAV specification and uses iCalendar format for the data.

diff --git a/packages/app-store/caldavcalendar/_metadata.ts b/packages/app-store/caldavcalendar/_metadata.ts
@@ -8,15 +8,15 @@ export const metadata = {
   installed: true,
   type: "caldav_calendar",
   title: "CalDav (Beta)",
-  imageSrc: "/api/app-store/caldavcalendar/icon.svg",
   variant: "calendar",
   category: "calendar",
   categories: ["calendar"],
-  logo: "/api/app-store/caldavcalendar/icon.svg",
+  logo: "icon.svg",
   publisher: "Cal.com",
   slug: "caldav-calendar",
   url: "https://cal.com/",
   email: "ali@cal.com",
+  dirName: "caldavcalendar",
 } as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/caldavcalendar/index.ts b/packages/app-store/caldavcalendar/index.ts
@@ -8,11 +8,10 @@ export const metadata = {
   installed: true,
   type: "caldav_calendar",
   title: "CalDav (Beta)",
-  imageSrc: "/api/app-store/caldavcalendar/icon.svg",
   variant: "calendar",
   category: "calendar",
   categories: ["calendar"],
-  logo: "/api/app-store/caldavcalendar/icon.svg",
+  logo: "icon.svg",
   publisher: "Cal.com",
   slug: "caldav-calendar",
   url: "https://cal.com/",

diff --git a/packages/app-store/campfire/DESCRIPTION.md b/packages/app-store/campfire/DESCRIPTION.md
@@ -1,12 +1,12 @@
 ---
 items:
-  - /api/app-store/campfire/1.jpg
-  - /api/app-store/campfire/2.jpg
-  - /api/app-store/campfire/3.jpg
-  - /api/app-store/campfire/4.jpg
+  - 1.jpg
+  - 2.jpg
+  - 3.jpg
+  - 4.jpg
 ---
 
-<iframe class="w-full aspect-video -mx-2" width="560" height="315" src="https://player.vimeo.com/video/683733529?app_id=122963&h=025a2fae94&referrer=https%3A%2F%2Fwww.campfire.to%2F" />
+<iframe class="w-full aspect-video -mx-2" width="560" height="315" src="https://player.vimeo.com/video/683733529?app_id=122963&h=025a2fae94&referrer=https%3A%2F%2Fwww.campfire.to%2F" ></iframe>
 
 ## Feel connected with your remote team
 

diff --git a/packages/app-store/campfire/config.json b/packages/app-store/campfire/config.json
@@ -3,8 +3,7 @@
   "name": "Campfire",
   "slug": "campfire",
   "type": "campfire_video",
-  "imageSrc": "/api/app-store/campfire/icon.svg",
-  "logo": "/api/app-store/campfire/icon.svg",
+  "logo": "icon.svg",
   "url": "https://cal.com/apps/campfire",
   "variant": "conferencing",
   "categories": ["video"],

diff --git a/packages/app-store/closecom/DESCRIPTION.md b/packages/app-store/closecom/DESCRIPTION.md
@@ -1,10 +1,10 @@
 ---
 items:
-  - /api/app-store/closecom/1.jpg
-  - /api/app-store/closecom/2.jpg
-  - /api/app-store/closecom/3.jpg
-  - /api/app-store/closecom/4.jpg
-  - /api/app-store/closecom/5.jpg
+  - 1.jpg
+  - 2.jpg
+  - 3.jpg
+  - 4.jpg
+  - 5.jpg
 ---
 
 - Close is a modern CRM with build-in sales communication tools for email, phone, SMS, and meetings.

diff --git a/packages/app-store/closecom/config.json b/packages/app-store/closecom/config.json
@@ -4,8 +4,7 @@
   "title": "Close.com",
   "slug": "closecom",
   "type": "closecom_other_calendar",
-  "imageSrc": "/api/app-store/closecom/icon.svg",
-  "logo": "/api/app-store/closecom/icon.svg",
+  "logo": "icon.svg",
   "url": "https://cal.com/apps/closecom",
   "variant": "other",
   "categories": ["other"],

diff --git a/packages/app-store/cron/config.json b/packages/app-store/cron/config.json
@@ -3,7 +3,6 @@
   "name": "Cron",
   "slug": "cron",
   "type": "cron_other",
-  "imageSrc": "logo.png",
   "logo": "logo.png",
   "url": "https://cal.com/apps/cron",
   "variant": "other",

diff --git a/packages/app-store/dailyvideo/DESCRIPTION.md b/packages/app-store/dailyvideo/DESCRIPTION.md
@@ -1,8 +1,8 @@
 ---
 items:
-  - /api/app-store/dailyvideo/1.jpg
-  - /api/app-store/dailyvideo/2.jpg
-  - /api/app-store/dailyvideo/3.jpg
+  - 1.jpg
+  - 2.jpg
+  - 3.jpg
 ---
 
 - **Recordings require a team plan**

diff --git a/packages/app-store/dailyvideo/_metadata.ts b/packages/app-store/dailyvideo/_metadata.ts
@@ -7,11 +7,10 @@ export const metadata = {
   description: _package.description,
   installed: !!process.env.DAILY_API_KEY,
   type: "daily_video",
-  imageSrc: "/api/app-store/dailyvideo/icon.svg",
   variant: "conferencing",
   url: "https://daily.co",
   categories: ["video"],
-  logo: "/api/app-store/dailyvideo/icon.svg",
+  logo: "icon.svg",
   publisher: "Cal.com",
   category: "video",
   slug: "daily-video",

diff --git a/packages/app-store/discord/config.json b/packages/app-store/discord/config.json
@@ -3,8 +3,7 @@
   "name": "Discord",
   "slug": "discord",
   "type": "discord_video",
-  "imageSrc": "/api/app-store/discord/icon.svg",
-  "logo": "/api/app-store/discord/icon.svg",
+  "logo": "icon.svg",
   "url": "https://discord.com/",
   "variant": "conferencing",
   "categories": ["video"],

diff --git a/packages/app-store/exchange2013calendar/_metadata.ts b/packages/app-store/exchange2013calendar/_metadata.ts
@@ -8,12 +8,11 @@ export const metadata = {
   installed: true,
   type: "exchange2013_calendar",
   title: "Microsoft Exchange 2013 Calendar",
-  imageSrc: "/api/app-store/exchange2013calendar/icon.svg",
   variant: "calendar",
   category: "calendar",
   categories: ["calendar"],
   label: "Exchange Calendar",
-  logo: "/api/app-store/exchange2013calendar/icon.svg",
+  logo: "icon.svg",
   publisher: "Cal.com",
   slug: "exchange2013-calendar",
   url: "https://cal.com/",

diff --git a/packages/app-store/exchange2016calendar/_metadata.ts b/packages/app-store/exchange2016calendar/_metadata.ts
@@ -8,12 +8,11 @@ export const metadata = {
   installed: true,
   type: "exchange2016_calendar",
   title: "Microsoft Exchange 2016 Calendar",
-  imageSrc: "/api/app-store/exchange2016calendar/icon.svg",
   variant: "calendar",
   category: "calendar",
   categories: ["calendar"],
   label: "Exchange Calendar",
-  logo: "/api/app-store/exchange2016calendar/icon.svg",
+  logo: "icon.svg",
   publisher: "Cal.com",
   slug: "exchange2016-calendar",
   url: "https://cal.com/",

diff --git a/packages/app-store/exchangecalendar/config.json b/packages/app-store/exchangecalendar/config.json
@@ -3,9 +3,9 @@
   "title": "Microsoft Exchange",
   "name": "Microsoft Exchange",
   "slug": "exchange",
+  "dirName": "exchangecalendar",
   "type": "exchange_calendar",
-  "imageSrc": "/api/app-store/exchangecalendar/icon.svg",
-  "logo": "/api/app-store/exchangecalendar/icon.svg",
+  "logo": "icon.svg",
   "url": "https://cal.com/apps/exchange",
   "variant": "calendar",
   "categories": ["calendar"],

diff --git a/packages/app-store/facetime/DESCRIPTION.md b/packages/app-store/facetime/DESCRIPTION.md
@@ -1,7 +1,7 @@
 ---
 items:
-  - /api/app-store/facetime/facetime1.png
-  - /api/app-store/facetime/facetime2.png
+  - facetime1.png
+  - facetime2.png
 ---
 
 With FaceTime, it’s easy to stay in touch. You can make audio and video calls with up to 32 people, share your screen, enjoy films and music together, and more.
diff --git a/packages/app-store/facetime/config.json b/packages/app-store/facetime/config.json
@@ -4,8 +4,7 @@
   "title": "Facetime",
   "slug": "facetime",
   "type": "facetime_video",
-  "imageSrc": "/api/app-store/facetime/icon.svg",
-  "logo": "/api/app-store/facetime/icon.svg",
+  "logo": "icon.svg",
   "url": "https://cal.com/apps/facetime",
   "variant": "conferencing",
   "categories": ["video"],

diff --git a/packages/app-store/fathom/DESCRIPTION.md b/packages/app-store/fathom/DESCRIPTION.md
@@ -1,6 +1,6 @@
 ---
 items:
-  - /api/app-store/fathom/1.jpg
+  - 1.jpg
 ---
 
 Fathom Analytics provides simple, privacy-focused website analytics. We're a GDPR-compliant, Google Analytics alternative.

diff --git a/packages/app-store/fathom/config.json b/packages/app-store/fathom/config.json
@@ -3,8 +3,7 @@
   "name": "Fathom",
   "slug": "fathom",
   "type": "fathom_analytics",
-  "imageSrc": "/api/app-store/fathom/icon.svg",
-  "logo": "/api/app-store/fathom/icon.svg",
+  "logo": "icon.svg",
   "url": "https://cal.com/apps/fathom",
   "variant": "analytics",
   "categories": ["analytics"],

diff --git a/packages/app-store/ga4/DESCRIPTION.md b/packages/app-store/ga4/DESCRIPTION.md
@@ -1,11 +1,11 @@
 ---
 description: Google Analytics is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand.
 items:
-  - /api/app-store/ga4/1.jpeg
-  - /api/app-store/ga4/2.jpeg
-  - /api/app-store/ga4/3.jpeg
-  - /api/app-store/ga4/4.jpeg
-  - /api/app-store/ga4/5.jpeg
+  - 1.jpeg
+  - 2.jpeg
+  - 3.jpeg
+  - 4.jpeg
+  - 5.jpeg
 ---
 
 Google Analytics is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand.
diff --git a/packages/app-store/ga4/config.json b/packages/app-store/ga4/config.json
@@ -3,8 +3,7 @@
   "name": "Google Analytics",
   "slug": "ga4",
   "type": "ga4_analytics",
-  "imageSrc": "/api/app-store/ga4/icon.svg",
-  "logo": "/api/app-store/ga4/icon.svg",
+  "logo": "icon.svg",
   "url": "https://marketingplatform.google.com",
   "variant": "analytics",
   "categories": ["analytics"],

diff --git a/packages/app-store/getAppAssetFullPath.ts b/packages/app-store/getAppAssetFullPath.ts
@@ -0,0 +1,10 @@
+import type { App } from "@calcom/types/App";
+
+export function getAppAssetFullPath(assetPath: string, metadata: Pick<App, "dirName" | "isTemplate">) {
+  const appDirName = `${metadata.isTemplate ? "templates/" : ""}${metadata.dirName}`;
+  let assetFullPath = assetPath;
+  if (!assetPath.startsWith("/app-store/") && !/^https?/.test(assetPath)) {
+    assetFullPath = `/app-store/${appDirName}/${assetPath}`;
+  }
+  return assetFullPath;
+}