#2325 Followup (#2369)

* Adds initial MDX implementation for App Store pages

* Adds endpoint to serve app store static files

* Replaces zoom icon with dynamic-served one

* Fixes zoom icon

* Makes Slider reusable

* Adds gray-matter for MDX

* Adds zoom screenshots

* Update yarn.lock

* Slider improvements

* WIP

* Update TrendingAppsSlider.tsx

* WIP

* Adds MS teams screenshots

* Adds stripe screenshots

* Cleanup

* Update index.ts

* WIP

* Cleanup

* Cleanup

* Adds jitsi screenshot

* Adds Google meet screenshots

* Adds office 365 calendar screenshots

* Adds google calendar screenshots

* Follow #2325

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/components/apps/Slider.tsx

@@ -20,19 +20,17 @@ const Slider = <T extends unknown>({
   options?: Options;
 }) => {
   const glide = useRef(null);
+  const slider = useRef<Glide.Properties | null>(null);
 
   useEffect(() => {
     if (glide.current) {
-      const slider = new Glide(glide.current, {
+      slider.current = new Glide(glide.current, {
         type: "carousel",
         ...options,
-      });
-
-      slider.mount();
+      }).mount();
     }
 
-    // @ts-ignore TODO: This method is missing in types
-    return () => slider.destroy();
+    return () => slider.current?.destroy();
   }, [options]);
 
   return (

apps/web/pages/api/app-store/[...static].ts

@@ -16,15 +16,15 @@ import path from "path";
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const [appName, fileName] = Array.isArray(req.query.static) ? req.query.static : [req.query.static];
   const fileNameParts = fileName.split(".");
-  const { [fileNameParts.length - 1]: fileExtentsion } = fileNameParts;
+  const { [fileNameParts.length - 1]: fileExtension } = fileNameParts;
   const STATIC_PATH = path.join(process.cwd(), "..", "..", "packages/app-store", appName, "static", fileName);
 
   try {
     const imageBuffer = fs.readFileSync(STATIC_PATH);
-    const mimeType = mime.lookup(fileExtentsion);
+    const mimeType = mime.lookup(fileExtension);
     if (mimeType) res.setHeader("Content-Type", mimeType);
     res.send(imageBuffer);
   } catch (e) {
-    res.status(400).json({ error: true, message: "Image not found" });
+    res.status(400).json({ error: true, message: "Resource not found" });
   }
 }

apps/web/pages/apps/[slug].tsx

@@ -33,7 +33,7 @@ const components = {
         }}
         renderItem={(item) =>
           isTabletAndUp ? (
-            <Image src={item} alt="" layout="fixed" width={573} height={382} />
+            <Image src={item} alt="" loading="eager" layout="fixed" width={573} height={382} />
           ) : (
             <Image src={item} alt="" layout="responsive" width={573} height={382} />
           )