From bc0503842718d2960d0288c5ba895e73f5f8f02c Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Mon, 1 Aug 2022 17:12:04 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20caching=20for=20icons=20with?=
 =?UTF-8?q?=20an=20image=20proxy?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #307
---
 next.config.js                           |  3 +++
 src/components/AppShelf/AppShelfItem.tsx | 10 ++++++----
 src/pages/api/imageproxy.ts              | 10 ++++++++++
 3 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/api/imageproxy.ts

diff --git a/next.config.js b/next.config.js
index 59a7bd7a8..b91c26880 100644
--- a/next.config.js
+++ b/next.config.js
@@ -5,6 +5,9 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 });
 
 module.exports = withBundleAnalyzer({
+  images: {
+    domains: ['cdn.jsdelivr.net'],
+  },
   reactStrictMode: false,
   experimental: {
     outputStandalone: true,
diff --git a/src/components/AppShelf/AppShelfItem.tsx b/src/components/AppShelf/AppShelfItem.tsx
index e611166c3..6c35923e8 100644
--- a/src/components/AppShelf/AppShelfItem.tsx
+++ b/src/components/AppShelf/AppShelfItem.tsx
@@ -3,7 +3,6 @@ import {
   Card,
   Anchor,
   AspectRatio,
-  Image,
   Center,
   createStyles,
   useMantineColorScheme,
@@ -12,6 +11,7 @@ import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import Image from 'next/image';
 import { serviceItem } from '../../tools/types';
 import PingComponent from '../../modules/ping/PingModule';
 import AppShelfMenu from './AppShelfMenu';
@@ -121,11 +121,13 @@ export function AppShelfItem(props: any) {
                 }}
               >
                 <Image
-                  styles={{ root: { cursor: 'pointer' } }}
+                  style={{
+                    cursor: 'pointer',
+                  }}
                   width={80}
                   height={80}
-                  src={service.icon}
-                  fit="contain"
+                  src={`/api/imageproxy?url=${service.icon}`}
+                  objectFit="contain"
                   onClick={() => {
                     if (service.openedUrl) {
                       window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');
diff --git a/src/pages/api/imageproxy.ts b/src/pages/api/imageproxy.ts
new file mode 100644
index 000000000..575960467
--- /dev/null
+++ b/src/pages/api/imageproxy.ts
@@ -0,0 +1,10 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  const url = decodeURIComponent(req.query.url as string);
+  const result = await fetch(url);
+  const body = await result.body;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  body.pipe(res);
+};