From 53c57dba0e63cd494ac3cdd95c2709eb11f49b27 Mon Sep 17 00:00:00 2001
From: thanhdanh27600 <thanhdanh27600@gmail.com>
Date: Mon, 28 Aug 2023 22:47:17 +0700
Subject: [PATCH 1/5] quick fix hash

---
 src/pages/[...hash].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/[...hash].tsx b/src/pages/[...hash].tsx
index 833862c1..24cd900b 100644
--- a/src/pages/[...hash].tsx
+++ b/src/pages/[...hash].tsx
@@ -28,7 +28,7 @@ const ForwardURL = ({ history, hash, ip, error, redirect }: Props) => {
   const loading = forwardUrl.isLoading && !forwardUrl.isError;
   const url = history?.url;
   const ogTitle = history?.ogTitle || t('ogTitle', { hash });
-  const ogDescription = history?.ogTitle || t('ogDescription');
+  const ogDescription = history?.ogDescription || t('ogDescription');
 
   useEffect(() => {
     if (!Window()) {

From fec7758bc23d1c6c41566de80eabf603ed7b354d Mon Sep 17 00:00:00 2001
From: thanhdanh27600 <thanhdanh27600@gmail.com>
Date: Tue, 29 Aug 2023 15:21:47 +0700
Subject: [PATCH 2/5] feature custom og

---
 .env.example                                  |   2 +-
 .env.production.gpg                           | Bin 574 -> 653 bytes
 .env.test.gpg                                 | Bin 558 -> 557 bytes
 package.json                                  |   2 +
 src/api/requests.ts                           |   3 +
 src/components/atoms/Accordion.tsx            |   2 +-
 src/components/atoms/UploadImage.tsx          |  56 ++++++++++++++++
 .../gadgets/AdvancedSettingUrlForm.tsx        |  54 ++++++++++-----
 src/components/gadgets/FacebookPreview.tsx    |  28 ++++----
 src/components/gadgets/TwitterPreview.tsx     |  28 ++++----
 src/components/layouts/Header.tsx             |   2 +-
 .../sections/URLAdvancedSetting.tsx           |   4 +-
 src/components/sections/URLSharePreview.tsx   |   2 +-
 src/controllers/cld.ts                        |  18 +++++
 src/controllers/forward.ts                    |   2 +
 src/controllers/index.tsx                     |   1 +
 src/controllers/shorten/update.ts             |   3 +
 src/pages/[...hash].tsx                       |   2 +
 src/pages/api/cld.ts                          |   3 +
 src/types/constants.ts                        |   2 +-
 src/utils/validateMiddleware.ts               |   5 ++
 yarn.lock                                     |  62 +++++++++++++++++-
 22 files changed, 232 insertions(+), 49 deletions(-)
 create mode 100644 src/components/atoms/UploadImage.tsx
 create mode 100644 src/controllers/cld.ts
 create mode 100644 src/pages/api/cld.ts

diff --git a/.env.example b/.env.example
index 06d71def..3db9c32f 100644
--- a/.env.example
+++ b/.env.example
@@ -2,4 +2,4 @@ DATABASE_URL="postgres://"
 REDIS_AUTH="xxxxxx"
 # NEXT_PUBLIC_MIX_PANEL_TOKEN="xxxxxx"
 NEXT_PUBLIC_PLATFORM_AUTH="xxxxxx"
-NEXT_PUBLIC_SERVER_AUTH="xxxxxx"
+SERVER_AUTH="xxxxxx"
diff --git a/.env.production.gpg b/.env.production.gpg
index e7edb2aa801a27ebb36def03e5120e47bf7cb95a..fa2800863f62f2fb364f11e0014f9822611fabfc 100644
GIT binary patch
literal 653
zcmV;80&@L~4Fm}T0t2x@A|>!a9sknl0dwaOniHn3>}lypkbiUzyehuYGJPO%8T-)&
z?G_FbW4gEY$mOUO>qGDp`mGh7W<pkz;*#2tF$~5ZvvUV-zi?fI)3p-d=v?EBWEer`
z;lqw1T7VRDbI+*i?gogF6c0Z=mmWUq#Umdn0?{1pEIcSQ`Kn$d?~vB#uS>5MO>1b?
zYr0_PeU&{iKlMsz3L?oaPO@5JIO+<yy^;P71ViY~X_IWXCSr`|$Snex3`qVlYFCUS
zZ3Eu$=blwo5_JOo7uyY7GD;)UPDeKBm6U-(fsbwAm{x(~{i0|L<6WR}+T?i7P`>4q
z&`gF3b|~Byj1?owgfvC&r)Xk7QZ8Wl5k8DYtKj}S2**b{G`V+T*4yt_0q--$eCSC#
zfcELSeo94ho;0IyOxdhi67Nr}vr;mq-GT88)vKD*&UUEWTO-FWGP&wTA&{tBBgY{&
zSZH?8YnWx1O`i1#CQ)kF`pY#I4an=NQx=O6%_h*u9liY{iW8>0o23o5Qg1-ssoF2S
z6vBJ!_Q$E7XVNPzZVwY-GBNXjzN<3o*5jG4jnI0>KJvm0@31yW!dy0LYRo)1zsl}3
za*!_q)<h<gJB}r13z^LeZWjURvQ?BAzgY*!&9p4(b1zC$LKc8d&BtJsAvqjbhbuof
zK+y|c3Z1wKvbk`%1Q&qMd*i!qFHs|Hdq2;Nm11g&*Ni7p5v+E6n|YRb>z&x%l19Lr
z7P~@*_me>Kkk4LP!z0hs!E!?}PHnG!K$RySR|H~!gaB)>;w4%jfMx+F9?VUqC1_6b
n3Ww=^$<cTb%U5m!a9j&3@-p;)i)+n^-fj9unhNsQr_kTWrRq7>

literal 574
zcmV-E0>S-^4Fm}T0v4pl?=|9<cK_1p0Sr!GUmQ8pB<-e$AuwMCh_p#Af97#R1#7E!
zF|qtZK-4tH(8F_TZk93t+*#_#abR;##EvFj+MIFrSTd2FKARk)t#NrksViK>X;cW1
zo~QQnh4H=0+c{M3^Lh}h7aKaH4Tf9cU{&E0tBxb8IUjN@kC(6D+xx>4x(y4~yQ@3o
zTT=S@*#0%Tt{F_DlFARoH5$&7Q51hy;lN%ql_#hjhv9o5$1Ti{f@Eu4o_ys{1%Mv0
ztlWk{DPP5Sxng!Go`Qf|4+>8HQ@m^D)|6TmNW*P6K3||ZJ&M(p|Nlp}vnBH0j~Ng&
zvf8}?GF4nJ@9j?daZ8`N)+L|JLxW#wl6rAquuiRx^4AizrRi+XZn!VerJSCF6NXph
zPCe-AK3>p%9*4X4v_pUojHg;ooc6>J<p;jaALrD+6zE3n0Tk!9^)$ixbhs}LJC%zm
zQQQCWyqL)T@eFupGhWd!U6fC}Dh0%Sa1|jd^QA7^o%waVil{3TgP#bSlwPe*RFM)Q
zhRWZ&@^)gsLuZtBw?x%lJbfW-yQb`46b|Qka$5?}6ymBC>C}c@f5PvmfvujV_Vt|U
z(kyj&)$J;O!(PN9v&89wul!BgX+4btidl~gi*`-63%h7UuBbJ;y|Cj$mBmCOuqNK$
zTgL2$((Np-0h}RZZ*OqxEQxA9J9XdUc7{z|#pyv3NJLeuBT}9pC7wG9<M)jXbHPvu
M`uvWP4H3*6r&9tU4gdfE

diff --git a/.env.test.gpg b/.env.test.gpg
index 88338961b52275a7dd83a39059ae8032c6cfe51f..4cd9af118b7056ac792f273a5f3701e9a834abf3 100644
GIT binary patch
literal 557
zcmV+|0@D4A4Fm}T0xH^&2~%R-tpC#K0kl7ZH%qheDyEMF%0%h;QMi3Px5#EcH(6ND
zQ+W@Q;Pbrx`4DsLZ$~{#OVe&;ZkC`D`9MZA5GFS+#MwzWpO($*tneW6MusPNr_xat
z=v=w%p-Zng=dd_Vq;R=zqBh(a-E>!c4Bb_|&%Jm`{xba|g1igTx~C{_8wg)+)bt<i
zvLWIZhC$p~DU%-%eheHLYqcP_p4?>1vQ&7eK79~r9P#NQ3BqnEmu<@w3mQBG+Q&)V
zD8+MZi0$@xyX+BI!801$V^lEkdwjnl)XuV6u6A~o9@*rLYp@+Qd2`M8d$Mkosv`h6
zW)Xoy){n2w-F2w8O*fTF7NrLng&RP_0B^B7t%KF!T(CYGRj8D)>Ish#JwPr43CN!K
z6!e)S6hi?23h@hOs~g0Z!c46Yp{IVvr?5_h5Qn+7ira+)n{G)n$$;BD#S`;_Eu2wx
zD7LDD;uhn#k{aU`aGg~Js)*j=&tC9E|F28$q-%3AJRIvKeGoCs3h0IF*zSyhMe+v8
zc~$kv*|s<|aLbo#>_{T#dCsPC=F<M_NtfBOPUWL<#cxQrE@N>&-cwLQWFzB^e8(2B
z2x6jQY(Yycy;{ugmXLw!E$A<|Vp%u~_`^!^*FlX`0^9B-O?y}<xKOnkU4xe8X{L@>
vJ=?{#uXkU=i$XDi{h$Xk8?HOmzbq^J(1LGlKAtAa$xCu&qT@qFj{8Y6c8e0^

literal 558
zcmV+}0@3}94Fm}T0*)LeO5f#Z_y5xA0o)kFT^iBSuIBWiz#psNrilDoRV`2b$Df2s
zwG}1inf^xqY2Dft(fp-zflp!xS}AiA+w7WpF4*R9RT0>Qa@~6<P|{T5scs%oflS}^
zBVzb-bP*nOgq<7>U7N~lj;34>CdoFEhzwS|23w<dxhYEQKIxk%z+Bl3(s=>qC;n_Y
zPA>W;d&fiy)3zcICkPMvs;wij7sykRoIoWui@nsS_*yIv?f%Y9HPL&OK_cW)n{SIQ
zwn5L-@5h9Pg<Yk9sX4=q2}+hc<*%V=<t)nW;&OhXFFuA7s#tI><IrM^XHY0b=~^wH
z<RPO}rD;TbXT{A367M5X+K;%vGKsa1MEF#|#g^V*@uufi2Bc9Wfu11@UUwJ*)|^gR
zsih~#{4IvDyaHLvjbH8Zm2V&!NQ*pm8sFkc%)TkB)9%Kna~5i?0t7q?kx_wz^Ko>Q
zokkr<7aSfeW~)>FYZwW`xPnWs8=>pi!gTPr9`TBfE*s-?ZHwd?{;~`x{T<n&2@!k-
zX_&I$E1P$dpN=-Z#s0x~VD$GqQgFbTpRHJ@=?QWfR%ioM4ZUK3`{X!Vn)yGH<Kf`0
z^i*z=xHEdgN_ITsAjgk?Q1(+mt(aQcXcT}s-z!$jC@Jx2y~ETT9F&LGqR}Mi?(uX9
wvLv;4quC_+foLqJk0#I69BdiGEL#m0tyzWWkLZM12$!gS7VQxdP)Bw#s2Q&mX8-^I

diff --git a/package.json b/package.json
index 88450d20..fd157fbe 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@types/ramda": "^0.29.3",
     "add": "^2.0.6",
     "axios": "^1.2.6",
+    "cloudinary": "^1.40.0",
     "clsx": "^1.2.1",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.9",
@@ -38,6 +39,7 @@
     "jest": "^29.5.0",
     "mixpanel-browser": "^2.45.0",
     "next": "13.1.6",
+    "next-cloudinary": "^4.19.0",
     "next-i18next": "^14.0.0",
     "node-fetch": "^3.3.0",
     "node-mocks-http": "^1.12.2",
diff --git a/src/api/requests.ts b/src/api/requests.ts
index 69325252..a4afa70d 100644
--- a/src/api/requests.ts
+++ b/src/api/requests.ts
@@ -17,11 +17,13 @@ export const updateShortenUrlRequest = async ({
   hash,
   ogTitle,
   ogDescription,
+  ogImgSrc,
   locale,
 }: {
   hash: string;
   ogDescription?: string;
   ogTitle?: string;
+  ogImgSrc?: string;
   locale: Locale;
 }) => {
   const rs = await API.put(`/api/shorten/update`, {
@@ -29,6 +31,7 @@ export const updateShortenUrlRequest = async ({
     hash,
     ogTitle,
     ogDescription,
+    ogImgSrc,
   });
   const data = rs.data;
   return data as ShortenUrl;
diff --git a/src/components/atoms/Accordion.tsx b/src/components/atoms/Accordion.tsx
index 708f0d4e..621b5a1e 100644
--- a/src/components/atoms/Accordion.tsx
+++ b/src/components/atoms/Accordion.tsx
@@ -37,7 +37,7 @@ export const Accordion = ({ children, title }: Props) => {
           className="!visible hidden border-0"
           data-te-collapse-item
           aria-labelledby={`heading${id}`}>
-          <div>{children}</div>
+          {children}
         </div>
       </div>
     </div>
diff --git a/src/components/atoms/UploadImage.tsx b/src/components/atoms/UploadImage.tsx
new file mode 100644
index 00000000..0d5ff88a
--- /dev/null
+++ b/src/components/atoms/UploadImage.tsx
@@ -0,0 +1,56 @@
+import { UploadCloud } from '@styled-icons/feather';
+import { CldUploadWidget } from 'next-cloudinary';
+import { MouseEventHandler, useState } from 'react';
+import { isProduction } from 'types/constants';
+
+export const UploadImage = ({ onSuccess }: { onSuccess: (url: string) => void }) => {
+  const [resource, setResource] = useState<any>();
+
+  return (
+    <div>
+      <CldUploadWidget
+        options={{
+          maxFileSize: 5e6,
+          maxImageHeight: 2400,
+          croppingAspectRatio: 1.9 /* 1200/630 */,
+          cropping: true,
+          multiple: false,
+          showSkipCropButton: false,
+          singleUploadAutoClose: true,
+          showPoweredBy: false,
+          showUploadMoreButton: false,
+          maxFiles: 1,
+        }}
+        signatureEndpoint="/api/cld"
+        uploadPreset="clickdi"
+        onSuccess={(result, widget) => {
+          console.log('result', result);
+          setResource(result?.info);
+          const url = (result?.info as any)?.secure_url;
+          if (url) {
+            onSuccess(url);
+          }
+          widget.close();
+        }}>
+        {({ open }) => {
+          const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+            e.preventDefault();
+            open();
+          };
+          return (
+            <button
+              className="w-fit cursor-pointer rounded-lg border border-gray-300 p-4 transition-colors hover:bg-gray-100"
+              onClick={handleOnClick}>
+              <UploadCloud className="h-8 w-8 text-gray-700" />
+            </button>
+          );
+        }}
+      </CldUploadWidget>
+      {!isProduction && (
+        <a className="mt-2 block" href={resource?.secure_url} target="_blank">
+          URL (debug): {resource?.secure_url.slice(-20) || '--'}
+        </a>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/gadgets/AdvancedSettingUrlForm.tsx b/src/components/gadgets/AdvancedSettingUrlForm.tsx
index dcc11727..c5f28529 100644
--- a/src/components/gadgets/AdvancedSettingUrlForm.tsx
+++ b/src/components/gadgets/AdvancedSettingUrlForm.tsx
@@ -5,6 +5,7 @@ import { useBearStore } from 'bear';
 import { Button } from 'components/atoms/Button';
 import { Input, Textarea } from 'components/atoms/Input';
 import mixpanel from 'mixpanel-browser';
+import dynamic from 'next/dynamic';
 import { useCallback, useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -19,6 +20,8 @@ import { QueryKey } from 'utils/requests';
 
 type ShortenSettingPayload = Partial<UrlShortenerHistory> & { locale?: Locale };
 
+const UploadImage = dynamic(() => import('../atoms/UploadImage').then((mod) => mod.UploadImage));
+
 export const AdvancedSettingUrlForm = () => {
   const { t, locale } = useTrans();
   const { shortenSlice } = useBearStore();
@@ -35,6 +38,7 @@ export const AdvancedSettingUrlForm = () => {
 
   const {
     register,
+    setValue,
     handleSubmit,
     formState: { errors },
     watch,
@@ -42,11 +46,16 @@ export const AdvancedSettingUrlForm = () => {
     defaultValues,
   });
 
+  const onUpdateImgSrc = (url: string) => {
+    setValue('ogImgSrc', url);
+    setShortenHistoryForm({ ogImgSrc: url });
+  };
+
   const handleUpdate = useCallback((history: ShortenSettingPayload) => {
     setShortenHistoryForm(history);
   }, []);
 
-  const debouncedUpdate = useCallback(debounce(handleUpdate, 1000), []);
+  const debouncedUpdate = useCallback(debounce(handleUpdate, 600), []);
 
   const [ogTitle, ogDescription] = watch(['ogTitle', 'ogDescription']);
 
@@ -60,8 +69,9 @@ export const AdvancedSettingUrlForm = () => {
   useEffect(() => {
     if (shortenHistory)
       debouncedUpdate({
-        ogTitle: shortenHistory.ogDescription || t('ogTitle', { hash: shortenHistory.hash ?? 'XXX' }),
+        ogTitle: shortenHistory.ogTitle || t('ogTitle', { hash: shortenHistory.hash ?? 'XXX' }),
         ogDescription: shortenHistory.ogDescription || t('ogDescription'),
+        ogImgSrc: shortenHistory.ogImgSrc,
       });
   }, [shortenHistory]);
 
@@ -87,6 +97,7 @@ export const AdvancedSettingUrlForm = () => {
     updateShortenUrl.mutate({
       hash: shortenHistory.hash,
       locale,
+      ogImgSrc: values.ogImgSrc || undefined,
       ogDescription: values.ogDescription || undefined,
       ogTitle: values.ogTitle || undefined,
     });
@@ -98,21 +109,30 @@ export const AdvancedSettingUrlForm = () => {
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="mt-4">
         <div>
-          <label>Title</label>
-          <Input
-            btnSize="md"
-            {...register('ogTitle', {
-              required: { message: t('errorNoInput'), value: true },
-              maxLength: { message: t('maximumCharaters', { n: LIMIT_OG_TITLE_LENGTH }), value: LIMIT_OG_TITLE_LENGTH },
-            })}
-            maxLength={LIMIT_OG_TITLE_LENGTH}
-            disabled={updateShortenUrl.isLoading}
-          />
-          <ErrorMessage
-            errors={errors}
-            name="ogTitle"
-            render={(error) => <p className="text-red-400">{error.message}</p>}
-          />
+          <label>Upload image</label>
+          <div className="mt-2">
+            <UploadImage onSuccess={onUpdateImgSrc} />
+          </div>
+          <div className="mt-4">
+            <label>Title</label>
+            <Input
+              btnSize="md"
+              {...register('ogTitle', {
+                required: { message: t('errorNoInput'), value: true },
+                maxLength: {
+                  message: t('maximumCharaters', { n: LIMIT_OG_TITLE_LENGTH }),
+                  value: LIMIT_OG_TITLE_LENGTH,
+                },
+              })}
+              maxLength={LIMIT_OG_TITLE_LENGTH}
+              disabled={updateShortenUrl.isLoading}
+            />
+            <ErrorMessage
+              errors={errors}
+              name="ogTitle"
+              render={(error) => <p className="text-red-400">{error.message}</p>}
+            />
+          </div>
         </div>
         <div className="mt-4">
           <label>Description</label>
diff --git a/src/components/gadgets/FacebookPreview.tsx b/src/components/gadgets/FacebookPreview.tsx
index d90197dd..48babc06 100644
--- a/src/components/gadgets/FacebookPreview.tsx
+++ b/src/components/gadgets/FacebookPreview.tsx
@@ -4,7 +4,7 @@ import { BASE_URL, PLATFORM_AUTH, brandUrlShortDomain } from 'types/constants';
 import { encrypt } from 'utils/crypto';
 import { useTrans } from 'utils/i18next';
 
-export const FacebookPreview = ({ hash, ogTitle, ogDomain, ogDescription }: Partial<UrlShortenerHistory>) => {
+export const FacebookPreview = ({ hash, ogTitle, ogDomain, ogDescription, ogImgSrc }: Partial<UrlShortenerHistory>) => {
   const { t, locale } = useTrans();
   const title = ogTitle || t('ogTitle', { hash: hash || 'XXX' });
   let encodeTitle = '';
@@ -12,17 +12,21 @@ export const FacebookPreview = ({ hash, ogTitle, ogDomain, ogDescription }: Part
     encodeTitle = encrypt(title);
   }
   return (
-    <div className="w-fit bg-gray-100/75 max-[420px]:overflow-scroll">
-      <div className="w-[420px]">
-        <div className="h-[220.5px] w-full border border-solid border-gray-200 bg-cover bg-no-repeat">
-          <iframe
-            className="relative origin-top-left scale-[0.35]"
-            width={1200}
-            height={630}
-            src={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(
-              encodeTitle,
-            )}&locale=${locale}&preview=true`}
-          />
+    <div className="w-fit">
+      <div className="ml-auto w-[315px] bg-gray-100/75 sm:w-[420px]">
+        <div className="w-full border border-solid border-gray-200 bg-cover bg-no-repeat sm:h-[220.5px]">
+          {ogImgSrc ? (
+            <img className="h-full w-full object-cover" src={ogImgSrc} />
+          ) : (
+            <iframe
+              className="relative origin-top-left scale-[0.35]"
+              width={1200}
+              height={630}
+              src={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(
+                encodeTitle,
+              )}&locale=${locale}&preview=true`}
+            />
+          )}
         </div>
         <div className="border border-t-0 border-solid border-gray-200 py-2 px-2.5">
           <span className="border-separate text-ellipsis whitespace-nowrap break-words font-facebook text-sm uppercase text-[#606770]">
diff --git a/src/components/gadgets/TwitterPreview.tsx b/src/components/gadgets/TwitterPreview.tsx
index ddc41492..52384cf8 100644
--- a/src/components/gadgets/TwitterPreview.tsx
+++ b/src/components/gadgets/TwitterPreview.tsx
@@ -3,7 +3,7 @@ import { BASE_URL, PLATFORM_AUTH, brandUrlShortDomain } from 'types/constants';
 import { encrypt } from 'utils/crypto';
 import { useTrans } from 'utils/i18next';
 
-export const TwitterPreview = ({ hash, ogTitle, ogDomain, ogDescription }: Partial<UrlShortenerHistory>) => {
+export const TwitterPreview = ({ hash, ogTitle, ogDomain, ogDescription, ogImgSrc }: Partial<UrlShortenerHistory>) => {
   const { t, locale } = useTrans();
   const title = ogTitle || t('ogTitle', { hash: hash || 'XXX' });
   let encodeTitle = '';
@@ -11,17 +11,21 @@ export const TwitterPreview = ({ hash, ogTitle, ogDomain, ogDescription }: Parti
     encodeTitle = encrypt(title);
   }
   return (
-    <div className="w-fit max-[420px]:overflow-scroll">
-      <div className="w-[420px]">
-        <div className="h-[221px] w-full rounded-xl rounded-b-none border border-solid border-gray-200 bg-cover bg-no-repeat">
-          <iframe
-            className="relative origin-top-left scale-[0.35]"
-            width={1200}
-            height={630}
-            src={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(
-              encodeTitle,
-            )}&locale=${locale}&preview=true`}
-          />
+    <div className="w-fit">
+      <div className="ml-auto w-[315px] bg-gray-100/75 sm:w-[420px]">
+        <div className="w-full rounded-xl rounded-b-none border border-solid border-gray-200 bg-cover bg-no-repeat sm:h-[221px]">
+          {ogImgSrc ? (
+            <img className="h-full w-full object-cover" src={ogImgSrc} />
+          ) : (
+            <iframe
+              className="relative origin-top-left scale-[0.35]"
+              width={1200}
+              height={630}
+              src={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(
+                encodeTitle,
+              )}&locale=${locale}&preview=true`}
+            />
+          )}
         </div>
         <div className="rounded-xl rounded-t-none border border-t-0 border-solid border-gray-200 py-3 px-2.5">
           <div className="text-left">
diff --git a/src/components/layouts/Header.tsx b/src/components/layouts/Header.tsx
index d1cee608..1a8826c4 100644
--- a/src/components/layouts/Header.tsx
+++ b/src/components/layouts/Header.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 
 export const Header = () => {
   return (
-    <div className="mx-auto flex justify-between py-5 px-4 md:mx-auto md:max-w-7xl">
+    <div className="mx-auto flex justify-between py-5 px-4 sm:w-full md:mx-auto md:max-w-7xl">
       <Link href="/">
         <div className="flex w-fit cursor-pointer flex-col items-center gap-2">
           <BrandLogo
diff --git a/src/components/sections/URLAdvancedSetting.tsx b/src/components/sections/URLAdvancedSetting.tsx
index 0c8c395a..bb852f8d 100644
--- a/src/components/sections/URLAdvancedSetting.tsx
+++ b/src/components/sections/URLAdvancedSetting.tsx
@@ -18,11 +18,11 @@ export const URLAdvancedSetting = () => {
 
   return (
     <Accordion title={title}>
-      <>
+      <div>
         <URLSharePreview />
         <AdvancedSettingUrlForm key={locale} />
         <hr className="my-8" />
-      </>
+      </div>
     </Accordion>
   );
 };
diff --git a/src/components/sections/URLSharePreview.tsx b/src/components/sections/URLSharePreview.tsx
index 927a886d..79faed76 100644
--- a/src/components/sections/URLSharePreview.tsx
+++ b/src/components/sections/URLSharePreview.tsx
@@ -8,7 +8,7 @@ export const URLSharePreview = () => {
   if (!shortenHistoryForm) return null;
 
   return (
-    <div className="mt-4 flex flex-col items-center justify-between gap-8 lg:flex-row">
+    <div className="mx-auto mt-4 flex w-fit flex-col items-center justify-between gap-8 lg:flex-row">
       <div>
         <p className="mb-2 text-gray-500">{`Facebook`}</p>
         <FacebookPreview {...shortenHistoryForm} />
diff --git a/src/controllers/cld.ts b/src/controllers/cld.ts
new file mode 100644
index 00000000..0a842705
--- /dev/null
+++ b/src/controllers/cld.ts
@@ -0,0 +1,18 @@
+import { v2 as cloudinary } from 'cloudinary';
+import { api, badRequest, successHandler } from '../utils/axios';
+
+export const handler = api(
+  async (req, res) => {
+    const body = JSON.parse(req.body) || {};
+    console.log('cld: body', body);
+    const { paramsToSign } = body;
+    console.log('process.env.CLOUDINARY_API_SECRET', process.env.CLOUDINARY_API_SECRET);
+    if (!process.env.CLOUDINARY_API_SECRET) {
+      console.error('Not found CLOUDINARY_API_SECRET');
+      return badRequest(res);
+    }
+    const signature = cloudinary.utils.api_sign_request(paramsToSign, process.env.CLOUDINARY_API_SECRET);
+    return successHandler(res, { signature });
+  },
+  ['POST'],
+);
diff --git a/src/controllers/forward.ts b/src/controllers/forward.ts
index f755f5af..ce983369 100644
--- a/src/controllers/forward.ts
+++ b/src/controllers/forward.ts
@@ -83,6 +83,8 @@ export const postProcessForward = async (payload: any, res?: NextApiResponse<For
       history.ogTitle,
       'ogDescription',
       history.ogDescription,
+      'ogImgSrc',
+      history.ogImgSrc,
       'updatedAt',
       new Date().getTime(),
     ];
diff --git a/src/controllers/index.tsx b/src/controllers/index.tsx
index e6ed8ab6..48984dee 100644
--- a/src/controllers/index.tsx
+++ b/src/controllers/index.tsx
@@ -1,3 +1,4 @@
+export * as cld from './cld';
 export * as f from './f';
 export * as forward from './forward';
 export * as h from './h';
diff --git a/src/controllers/shorten/update.ts b/src/controllers/shorten/update.ts
index 68d56264..7b6743ff 100644
--- a/src/controllers/shorten/update.ts
+++ b/src/controllers/shorten/update.ts
@@ -12,11 +12,13 @@ export const handler = api<ShortenUrl>(
     let locale = req.body.locale as string;
     let ogTitle = req.body.ogTitle as string;
     let ogDescription = req.body.ogDescription as string;
+    let ogImgSrc = req.body.ogImgSrc as string;
     await validateUpdateShortenSchema.parseAsync({
       hash,
       locale,
       ogTitle,
       ogDescription,
+      ogImgSrc,
     });
     const history = await prisma.urlShortenerHistory.findUnique({ where: { hash } });
     if (!history) return badRequest(res, "No URL was found on your request. Let's shorten one!");
@@ -25,6 +27,7 @@ export const handler = api<ShortenUrl>(
       data: {
         ogTitle,
         ogDescription,
+        ogImgSrc,
       },
     });
     const ogKey = getRedisKey(REDIS_KEY.OG_BY_HASH, `${hash}-${locale || Locale.Vietnamese}`);
diff --git a/src/pages/[...hash].tsx b/src/pages/[...hash].tsx
index 24cd900b..4c9685b5 100644
--- a/src/pages/[...hash].tsx
+++ b/src/pages/[...hash].tsx
@@ -96,6 +96,7 @@ const ForwardURL = ({ history, hash, ip, error, redirect }: Props) => {
           property="og:image"
           content={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(encodeTitle)}&locale=${locale}`}
         />
+        <meta property="og:image:alt" content={t('ogDescription')} />
 
         {/* Twitter */}
         <meta property="twitter:card" content="summary_large_image" />
@@ -106,6 +107,7 @@ const ForwardURL = ({ history, hash, ip, error, redirect }: Props) => {
           property="twitter:image"
           content={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(encodeTitle)}&locale=${locale}`}
         />
+        <meta name="twitter:image:alt" content={t('ogDescription')}></meta>
       </Head>
       {error ? <p>{t(error as any)}</p> : <></>}
     </>
diff --git a/src/pages/api/cld.ts b/src/pages/api/cld.ts
new file mode 100644
index 00000000..7ac77a8e
--- /dev/null
+++ b/src/pages/api/cld.ts
@@ -0,0 +1,3 @@
+import { cld } from 'controllers';
+// sign-cloudinary-params
+export default cld.handler;
diff --git a/src/types/constants.ts b/src/types/constants.ts
index 3e463e7e..5c91d69b 100644
--- a/src/types/constants.ts
+++ b/src/types/constants.ts
@@ -48,5 +48,5 @@ export const getRedisKey = (key: RedisKeyValues, value: string) => {
 
 export const MIX_PANEL_TOKEN = process.env.NEXT_PUBLIC_MIX_PANEL_TOKEN;
 export const PLATFORM_AUTH = process.env.NEXT_PUBLIC_PLATFORM_AUTH;
-export const SERVER_AUTH = process.env.NEXT_PUBLIC_SERVER_AUTH;
+export const SERVER_AUTH = process.env.SERVER_AUTH;
 export const TE = () => Window()?.te;
diff --git a/src/utils/validateMiddleware.ts b/src/utils/validateMiddleware.ts
index 3a81e353..026deb6a 100644
--- a/src/utils/validateMiddleware.ts
+++ b/src/utils/validateMiddleware.ts
@@ -40,6 +40,11 @@ export const validateUpdateShortenSchema = z.object({
       required_error: 'Description is required',
     }),
   ),
+  ogImgSrc: z.optional(
+    z.string({
+      required_error: 'Description is required',
+    }),
+  ),
   // ogImgSrc: z.string({
   //   required_error: 'Description is required',
   // }),
diff --git a/yarn.lock b/yarn.lock
index 4077697f..b02ce78d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1257,6 +1257,33 @@
   resolved "https://registry.yarnpkg.com/@cloudamqp/amqp-client/-/amqp-client-2.1.1.tgz#b3c10293f271e6aecb358b83ac334704fe592062"
   integrity sha512-u4nOBfpBTEiohQ/ThJVLmHx+G7mUt1aTXsLqhGVZAnTnA1AZpq/ja1Lhx7equRuE48AhQKS/UDQpV+7grLEF4Q==
 
+"@cloudinary-util/url-loader@^3.10.0":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-3.10.0.tgz#30dbed4d60968687c9161a60b246da62d42c3e33"
+  integrity sha512-RNp6WayU6e5ikA7yCRqNhp0lOwLl82vLco9EwpES2si6Hb+g9yEaeTYvobD44ISQeJUnPl6e1c/AEYVSjfzwrg==
+  dependencies:
+    "@cloudinary-util/util" "2.2.1"
+    "@cloudinary/url-gen" "^1.10.2"
+
+"@cloudinary-util/util@2.2.1", "@cloudinary-util/util@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/util/-/util-2.2.1.tgz#c482d9321d37d921b347858a121c161b68782bd3"
+  integrity sha512-MEIqn5WtPP3mxSMTNNfpqlGS1UquAXcjmVdY/t/edD/ZWVjI85viBiOMIuF0W6n6UF5gTstLymfQNYx0YO/GZg==
+
+"@cloudinary/transformation-builder-sdk@^1.5.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@cloudinary/transformation-builder-sdk/-/transformation-builder-sdk-1.6.1.tgz#89942a43a4ed770f74d486e935062c6de9ab3f19"
+  integrity sha512-cBoSFbE4SnXO2QvUq+cYgUpXufmZTgg05Cy+jAdiNRGcC6lN+KO0ybMnLU6yg9cFub2NRkBDpU4N53wg4a977w==
+  dependencies:
+    "@cloudinary/url-gen" "^1.7.0"
+
+"@cloudinary/url-gen@^1.10.2", "@cloudinary/url-gen@^1.7.0":
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/@cloudinary/url-gen/-/url-gen-1.11.2.tgz#a454dc77f9efb58c6f2c2f61b84d0d3e2dce9405"
+  integrity sha512-9yL3BlThh3PfyRg/zS8cQVic3FdFaIOp361YrDrQ4fqYbYE47SGWF4ji9KoFxYF4ejfDEptayeG9jF2C465KRQ==
+  dependencies:
+    "@cloudinary/transformation-builder-sdk" "^1.5.1"
+
 "@emotion/babel-plugin@^11.10.6":
   version "11.10.6"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz#a68ee4b019d661d6f37dec4b8903255766925ead"
@@ -2797,6 +2824,21 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+cloudinary-core@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/cloudinary-core/-/cloudinary-core-2.13.0.tgz#b59f90871b6c708c3d0735b9be47ac08181c57fb"
+  integrity sha512-Nt0Q5I2FtenmJghtC4YZ3MZZbGg1wLm84SsxcuVwZ83OyJqG9CNIGp86CiI6iDv3QobaqBUpOT7vg+HqY5HxEA==
+
+cloudinary@^1.40.0:
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/cloudinary/-/cloudinary-1.40.0.tgz#34a7de414b4526021c8e25cc66c3122721d91be6"
+  integrity sha512-Fifkl8NRw/M+Enw4cKCXc6e0Or28c5y6RVGYS3OCLzT1W8EfBt416FURhLuuL/S4BCVv8bSilmnM746kCtth3g==
+  dependencies:
+    cloudinary-core "^2.13.0"
+    core-js "^3.30.1"
+    lodash "^4.17.21"
+    q "^1.5.1"
+
 clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
@@ -2899,6 +2941,11 @@ core-js@^3:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.28.0.tgz#ed8b9e99c273879fdfff0edfc77ee709a5800e4a"
   integrity sha512-GiZn9D4Z/rSYvTeg1ljAIsEqFm0LaN9gVtwDCrKL80zHtS31p9BAjmTxVqTQDMpwlMolJZOFntUG2uwyj7DAqw==
 
+core-js@^3.30.1:
+  version "3.32.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.32.1.tgz#a7d8736a3ed9dd05940c3c4ff32c591bb735be77"
+  integrity sha512-lqufgNn9NLnESg5mQeYsxQP5w7wrViSj0jr/kv6ECQiByzQkrn1MKvV0L3acttpDqfQrHLwr2KCMgX5b8X+lyQ==
+
 cosmiconfig@8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.0.0.tgz#e9feae014eab580f858f8a0288f38997a7bebe97"
@@ -4950,7 +4997,7 @@ lodash.repeat@4.1.0:
   resolved "https://registry.yarnpkg.com/lodash.repeat/-/lodash.repeat-4.1.0.tgz#fc7de8131d8c8ac07e4b49f74ffe829d1f2bec44"
   integrity sha512-eWsgQW89IewS95ZOcr15HHCX6FVDxq3f2PNUIng3fyzsPev9imFQxIYdFZ6crl8L56UR6ZlGDLcEb3RZsCSSqw==
 
-lodash@^4.17.14:
+lodash@^4.17.14, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5140,6 +5187,14 @@ neo-async@^2.6.0:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+next-cloudinary@^4.19.0:
+  version "4.19.0"
+  resolved "https://registry.yarnpkg.com/next-cloudinary/-/next-cloudinary-4.19.0.tgz#e531064d1f32ef9fb8a1f1acef6a31de44b6189a"
+  integrity sha512-enWOiyvxxiuMGpW33FvBsu1XGzpeOhM/APwi1/zOJniem2XsNy16RjzIysP1i/W4fxYd7OoNg47rYIzErVPe0A==
+  dependencies:
+    "@cloudinary-util/url-loader" "^3.10.0"
+    "@cloudinary-util/util" "^2.2.1"
+
 next-i18next@^14.0.0:
   version "14.0.0"
   resolved "https://registry.yarnpkg.com/next-i18next/-/next-i18next-14.0.0.tgz#fd637c81df96c9d6f2cc4716037130ac4e5d6968"
@@ -5737,6 +5792,11 @@ pure-rand@^6.0.0:
   resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.0.2.tgz#a9c2ddcae9b68d736a8163036f088a2781c8b306"
   integrity sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==
 
+q@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
+
 qrcode@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.1.tgz#0103f97317409f7bc91772ef30793a54cd59f0cb"

From a7152f291387b5d341e2fee91a64538287e2a60c Mon Sep 17 00:00:00 2001
From: thanhdanh27600 <thanhdanh27600@gmail.com>
Date: Tue, 29 Aug 2023 16:04:58 +0700
Subject: [PATCH 3/5] use og component from cld

---
 src/components/atoms/UploadImage.tsx          |  3 +-
 .../gadgets/AdvancedSettingUrlForm.tsx        |  4 +--
 src/components/gadgets/FacebookPreview.tsx    |  9 +++++-
 src/components/gadgets/TwitterPreview.tsx     |  9 +++++-
 src/pages/[...hash].tsx                       | 28 +++++++++++--------
 src/test/index.ts                             |  2 +-
 src/test/shorten.test.ts                      |  7 +++--
 7 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/components/atoms/UploadImage.tsx b/src/components/atoms/UploadImage.tsx
index 0d5ff88a..fa998c99 100644
--- a/src/components/atoms/UploadImage.tsx
+++ b/src/components/atoms/UploadImage.tsx
@@ -12,7 +12,7 @@ export const UploadImage = ({ onSuccess }: { onSuccess: (url: string) => void })
         options={{
           maxFileSize: 5e6,
           maxImageHeight: 2400,
-          croppingAspectRatio: 1.9 /* 1200/630 */,
+          croppingAspectRatio: 1200 / 630,
           cropping: true,
           multiple: false,
           showSkipCropButton: false,
@@ -24,7 +24,6 @@ export const UploadImage = ({ onSuccess }: { onSuccess: (url: string) => void })
         signatureEndpoint="/api/cld"
         uploadPreset="clickdi"
         onSuccess={(result, widget) => {
-          console.log('result', result);
           setResource(result?.info);
           const url = (result?.info as any)?.secure_url;
           if (url) {
diff --git a/src/components/gadgets/AdvancedSettingUrlForm.tsx b/src/components/gadgets/AdvancedSettingUrlForm.tsx
index c5f28529..a6da4c4c 100644
--- a/src/components/gadgets/AdvancedSettingUrlForm.tsx
+++ b/src/components/gadgets/AdvancedSettingUrlForm.tsx
@@ -98,8 +98,8 @@ export const AdvancedSettingUrlForm = () => {
       hash: shortenHistory.hash,
       locale,
       ogImgSrc: values.ogImgSrc || undefined,
-      ogDescription: values.ogDescription || undefined,
-      ogTitle: values.ogTitle || undefined,
+      ogDescription: values.ogDescription?.trim() || undefined,
+      ogTitle: values.ogTitle?.trim() || undefined,
     });
   };
 
diff --git a/src/components/gadgets/FacebookPreview.tsx b/src/components/gadgets/FacebookPreview.tsx
index 48babc06..c098ca65 100644
--- a/src/components/gadgets/FacebookPreview.tsx
+++ b/src/components/gadgets/FacebookPreview.tsx
@@ -1,4 +1,5 @@
 import { UrlShortenerHistory } from '@prisma/client';
+import { CldImage } from 'next-cloudinary';
 import { BASE_URL, PLATFORM_AUTH, brandUrlShortDomain } from 'types/constants';
 
 import { encrypt } from 'utils/crypto';
@@ -16,7 +17,13 @@ export const FacebookPreview = ({ hash, ogTitle, ogDomain, ogDescription, ogImgS
       <div className="ml-auto w-[315px] bg-gray-100/75 sm:w-[420px]">
         <div className="w-full border border-solid border-gray-200 bg-cover bg-no-repeat sm:h-[220.5px]">
           {ogImgSrc ? (
-            <img className="h-full w-full object-cover" src={ogImgSrc} />
+            <CldImage
+              height={221}
+              width={315}
+              alt={'clickdi-banner'}
+              className="h-full w-full object-cover"
+              src={ogImgSrc}
+            />
           ) : (
             <iframe
               className="relative origin-top-left scale-[0.35]"
diff --git a/src/components/gadgets/TwitterPreview.tsx b/src/components/gadgets/TwitterPreview.tsx
index 52384cf8..832d4970 100644
--- a/src/components/gadgets/TwitterPreview.tsx
+++ b/src/components/gadgets/TwitterPreview.tsx
@@ -1,4 +1,5 @@
 import { UrlShortenerHistory } from '@prisma/client';
+import { CldImage } from 'next-cloudinary';
 import { BASE_URL, PLATFORM_AUTH, brandUrlShortDomain } from 'types/constants';
 import { encrypt } from 'utils/crypto';
 import { useTrans } from 'utils/i18next';
@@ -15,7 +16,13 @@ export const TwitterPreview = ({ hash, ogTitle, ogDomain, ogDescription, ogImgSr
       <div className="ml-auto w-[315px] bg-gray-100/75 sm:w-[420px]">
         <div className="w-full rounded-xl rounded-b-none border border-solid border-gray-200 bg-cover bg-no-repeat sm:h-[221px]">
           {ogImgSrc ? (
-            <img className="h-full w-full object-cover" src={ogImgSrc} />
+            <CldImage
+              height={221}
+              width={315}
+              alt={'clickdi-banner'}
+              className="h-full w-full object-cover"
+              src={ogImgSrc}
+            />
           ) : (
             <iframe
               className="relative origin-top-left scale-[0.35]"
diff --git a/src/pages/[...hash].tsx b/src/pages/[...hash].tsx
index 4c9685b5..0d2582c7 100644
--- a/src/pages/[...hash].tsx
+++ b/src/pages/[...hash].tsx
@@ -2,6 +2,7 @@ import { UrlShortenerHistory } from '@prisma/client';
 import { getForwardUrl } from 'api/requests';
 import mixpanel from 'mixpanel-browser';
 import { GetServerSidePropsContext } from 'next';
+import { CldOgImage } from 'next-cloudinary';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import Head from 'next/head';
 import { useEffect } from 'react';
@@ -29,6 +30,7 @@ const ForwardURL = ({ history, hash, ip, error, redirect }: Props) => {
   const url = history?.url;
   const ogTitle = history?.ogTitle || t('ogTitle', { hash });
   const ogDescription = history?.ogDescription || t('ogDescription');
+  const ogImgSrc = history?.ogImgSrc;
 
   useEffect(() => {
     if (!Window()) {
@@ -92,23 +94,28 @@ const ForwardURL = ({ history, hash, ip, error, redirect }: Props) => {
         <meta property="og:url" content="https://facebook.com/clickditop/ " />
         <meta property="og:title" content={ogTitle} />
         <meta property="og:description" content={ogDescription} />
-        <meta
-          property="og:image"
-          content={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(encodeTitle)}&locale=${locale}`}
-        />
-        <meta property="og:image:alt" content={t('ogDescription')} />
 
         {/* Twitter */}
         <meta property="twitter:card" content="summary_large_image" />
         {/* <meta property="twitter:url" content="https://twitter.com/clickditop" /> */}
         <meta property="twitter:title" content={ogTitle} />
         <meta property="twitter:description" content={ogDescription} />
-        <meta
-          property="twitter:image"
-          content={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(encodeTitle)}&locale=${locale}`}
-        />
-        <meta name="twitter:image:alt" content={t('ogDescription')}></meta>
+        {!ogImgSrc && (
+          <>
+            <meta
+              property="og:image"
+              content={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(encodeTitle)}&locale=${locale}`}
+            />
+            <meta property="og:image:alt" content={t('ogDescription')} />
+            <meta
+              property="twitter:image"
+              content={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(encodeTitle)}&locale=${locale}`}
+            />
+            <meta name="twitter:image:alt" content={t('ogDescription')}></meta>
+          </>
+        )}
       </Head>
+      {ogImgSrc && <CldOgImage alt={t('ogDescription')} src={ogImgSrc} />}
       {error ? <p>{t(error as any)}</p> : <></>}
     </>
   );
@@ -131,7 +138,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       userAgent: context.req.headers['user-agent'],
       ip,
     });
-    console.log('forwardUrl', forwardUrl);
     return {
       props: {
         history: forwardUrl.history,
diff --git a/src/test/index.ts b/src/test/index.ts
index 084b3541..060c70c6 100644
--- a/src/test/index.ts
+++ b/src/test/index.ts
@@ -1,4 +1,4 @@
 import path from 'path';
-require('dotenv').config({ path: path.resolve(__dirname, '../.env.test') });
+require('dotenv').config({ path: path.resolve(__dirname, '../../.env.test') });
 
 jest.setTimeout(20000);
diff --git a/src/test/shorten.test.ts b/src/test/shorten.test.ts
index 64c7a02a..33c8b55b 100644
--- a/src/test/shorten.test.ts
+++ b/src/test/shorten.test.ts
@@ -6,6 +6,7 @@ import HttpStatusCode from '../utils/statusCode';
 
 const ip = '0.0.0.0';
 const key = `limit:${ip}`;
+const exampleUrl = 'U2FsdGVkX1+hDFakyw7MPSqI3JDQ6rXZF0vjpJ1ZOLIf5qp+9ByNbpiiJYIE+4ZYSAw1M2fIIfzcn5YaoYVCkA==';
 
 describe('Test /api/shorten...', () => {
   describe('Shortened URL', () => {
@@ -63,7 +64,7 @@ describe('Test /api/shorten...', () => {
         let { req, res } = createMocks({
           method: 'GET',
           query: {
-            url: 'U2FsdGVkX19lPT7tc2v+EAQ+q+S+QmgedQXJPLAhhjZDskrGAPv+kdWEm624npUtHaEGmCTcJHbFaYeZAv+FQw==',
+            url: exampleUrl,
           },
           headers: { 'x-forwarded-for': ip },
         });
@@ -72,7 +73,7 @@ describe('Test /api/shorten...', () => {
       await Promise.all(requests);
       const { req, res } = createMocks({
         method: 'GET',
-        query: { url: 'U2FsdGVkX19lPT7tc2v+EAQ+q+S+QmgedQXJPLAhhjZDskrGAPv+kdWEm624npUtHaEGmCTcJHbFaYeZAv+FQw==' },
+        query: { url: exampleUrl },
         headers: { 'x-forwarded-for': ip },
       });
       await controller.shorten.handler(req, res);
@@ -84,7 +85,7 @@ describe('Test /api/shorten...', () => {
 
       const { req, res } = createMocks({
         method: 'GET',
-        query: { url: 'U2FsdGVkX19lPT7tc2v+EAQ+q+S+QmgedQXJPLAhhjZDskrGAPv+kdWEm624npUtHaEGmCTcJHbFaYeZAv+FQw==' },
+        query: { url: exampleUrl },
         headers: { 'x-forwarded-for': ip },
       });
       await controller.shorten.handler(req, res);

From 747a9da2261ea3c22da5f159411a0983837e5d33 Mon Sep 17 00:00:00 2001
From: thanhdanh27600 <thanhdanh27600@gmail.com>
Date: Tue, 29 Aug 2023 16:21:35 +0700
Subject: [PATCH 4/5] fix test

---
 .env.production.gpg            | Bin 653 -> 653 bytes
 .github/workflows/cd-short.yml |   2 +-
 .github/workflows/cd.yml       |   2 +-
 .github/workflows/ci.yml       |   2 +-
 scripts/decrypt_secret.sh      |   6 +++---
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.env.production.gpg b/.env.production.gpg
index fa2800863f62f2fb364f11e0014f9822611fabfc..f3f82c6761961e5178fec759c9ed998b1c4e3a95 100644
GIT binary patch
literal 653
zcmV;80&@L~4Fm}T0&c53T&J=nH~-S<0WUVLeF%2;b)_>y0#j!)K{5^GaQM!voa@X7
z%NlEE242VJOz)cS*t#a44=zuc^~LBjPzOE;nYdL-1r>$SLZ&k<ZDBlup}VsZI1g$X
zt6#E{qt!dUK)6h`SIR_XczWy_Z7Vsjhfn6dyY_WSug-LLkt=T97HrV`%wY9_n6AHG
zbDm_`JY0PdqA3;wAyA&5bpA=7co)SipK`RsJK50Xl8S>c>Tw2ELC5zj6bIR4kq$4@
zarKMPI`27?BcSR7CG()cS-#7Wo$%tgzHa&|+<<8D@O|zGJqhz$8J6u%sK`5<z-0$X
z!q1-KJqDxS^JV0CCPPHNXq~^!%((7_or|)toRj1S07~MC<y5)^#iX#<V^!2F#luNN
zndb7}k@$dSGrPFgezvZ)Y)r5cotA%1^&$1(?-0~c`A&M}pLsD_t6bJt=82uNE<b_O
zkwQDh&f(<-Ga3!!@rizUZFST+hhJp+BZX23n)a}>PflN7B1IJU^=*g@E@-n<MP!q*
z+G}8mUByr+Q8+Lt%1nL1O=%UOSkSPe?UwyV^FZ2xyccrx3k73BjDiL?c-TKE2K?&p
z1a&PDU{Ps&tL?EGOkPpsfRi%GXguAZF=x?_6)GeH?>>xa1c%h=pL;ADUgyYUS5>D{
zuN5RVbZO-vwKX#08|z&^dn}i}rKxjB3?)*&D+*oSUia^a^)lYYvUmUbpZA|^bn!Rz
zB#wl@6JdPd$!m<m=&~fp_RdBNGS~wgWBKpgY$ZXKMA4MfphIJ3D47gkn2LfH3<YUJ
n%I2Q~BLtEFNgQqjZrsq4PO~A--k)(J4Ao5X<_jABh_l4zxo1T0

literal 653
zcmV;80&@L~4Fm}T0t2x@A|>!a9sknl0dwaOniHn3>}lypkbiUzyehuYGJPO%8T-)&
z?G_FbW4gEY$mOUO>qGDp`mGh7W<pkz;*#2tF$~5ZvvUV-zi?fI)3p-d=v?EBWEer`
z;lqw1T7VRDbI+*i?gogF6c0Z=mmWUq#Umdn0?{1pEIcSQ`Kn$d?~vB#uS>5MO>1b?
zYr0_PeU&{iKlMsz3L?oaPO@5JIO+<yy^;P71ViY~X_IWXCSr`|$Snex3`qVlYFCUS
zZ3Eu$=blwo5_JOo7uyY7GD;)UPDeKBm6U-(fsbwAm{x(~{i0|L<6WR}+T?i7P`>4q
z&`gF3b|~Byj1?owgfvC&r)Xk7QZ8Wl5k8DYtKj}S2**b{G`V+T*4yt_0q--$eCSC#
zfcELSeo94ho;0IyOxdhi67Nr}vr;mq-GT88)vKD*&UUEWTO-FWGP&wTA&{tBBgY{&
zSZH?8YnWx1O`i1#CQ)kF`pY#I4an=NQx=O6%_h*u9liY{iW8>0o23o5Qg1-ssoF2S
z6vBJ!_Q$E7XVNPzZVwY-GBNXjzN<3o*5jG4jnI0>KJvm0@31yW!dy0LYRo)1zsl}3
za*!_q)<h<gJB}r13z^LeZWjURvQ?BAzgY*!&9p4(b1zC$LKc8d&BtJsAvqjbhbuof
zK+y|c3Z1wKvbk`%1Q&qMd*i!qFHs|Hdq2;Nm11g&*Ni7p5v+E6n|YRb>z&x%l19Lr
z7P~@*_me>Kkk4LP!z0hs!E!?}PHnG!K$RySR|H~!gaB)>;w4%jfMx+F9?VUqC1_6b
n3Ww=^$<cTb%U5m!a9j&3@-p;)i)+n^-fj9unhNsQr_kTWrRq7>

diff --git a/.github/workflows/cd-short.yml b/.github/workflows/cd-short.yml
index cd732de3..a1ed0344 100644
--- a/.github/workflows/cd-short.yml
+++ b/.github/workflows/cd-short.yml
@@ -20,7 +20,7 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
       - name: Decrypt secret
-        run: ./scripts/decrypt_secret.sh .env.production.gpg
+        run: ./scripts/decrypt_secret.sh .env.production.gpg ./.env
         env:
           SECRET_PASSPHRASE: ${{ secrets.SECRET_PASSPHRASE }}
       - name: Login to GitHub Container Registry
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
index 6ca3cedf..dcd32e6d 100644
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@@ -20,7 +20,7 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
       - name: Decrypt secret
-        run: ./scripts/decrypt_secret.sh .env.production.gpg
+        run: ./scripts/decrypt_secret.sh .env.production.gpg ./.env
         env:
           SECRET_PASSPHRASE: ${{ secrets.SECRET_PASSPHRASE }}
       - name: Login to GitHub Container Registry
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a3193188..546458ef 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -20,7 +20,7 @@ jobs:
         with:
           node-version: 16.x
       - name: Decrypt secret
-        run: ./scripts/decrypt_secret.sh .env.test.gpg
+        run: ./scripts/decrypt_secret.sh .env.test.gpg ./.env.test
         env:
           SECRET_PASSPHRASE: ${{ secrets.SECRET_PASSPHRASE }}
       - run: npm i
diff --git a/scripts/decrypt_secret.sh b/scripts/decrypt_secret.sh
index 451fe217..aee035a1 100755
--- a/scripts/decrypt_secret.sh
+++ b/scripts/decrypt_secret.sh
@@ -1,13 +1,13 @@
 #!/bin/sh
 
-if [ -z "$1" ]
+if [ -z "$1" ] || [ -z "$2" ]
 then
     echo "Decript failed. Host is empty!"
 else
-    echo "Decript with host: $1...";
+    echo "Decript with host: $1, to $2...";
     # --batch to prevent interactive command
     # --yes to assume "yes" for questions
     gpg --quiet --batch --yes --decrypt --passphrase="$SECRET_PASSPHRASE" \
-    --output ./.env $1
+    --output $2 $1
     echo "Decript successfully";
 fi

From 22617ec543839654c47c71f8b99e1db2665050c2 Mon Sep 17 00:00:00 2001
From: thanhdanh27600 <thanhdanh27600@gmail.com>
Date: Tue, 29 Aug 2023 23:13:15 +0700
Subject: [PATCH 5/5] feature media for history

---
 .../migration.sql                             |  19 +++
 prisma/schema.prisma                          |  13 +-
 public/locales/en/common.json                 |   5 +-
 public/locales/vi/common.json                 |   5 +-
 src/api/requests.ts                           |   3 +
 src/bear/shortenSlice.ts                      |   4 +
 src/components/atoms/UploadImage.tsx          |  14 +-
 .../gadgets/AdvancedSettingUrlForm.tsx        |  22 ++--
 src/controllers/i.ts                          |  38 +++---
 src/controllers/qr.ts                         |  36 ++---
 src/controllers/shorten/update.ts             |   9 ++
 src/controllers/stats/index.ts                |   2 +-
 src/pages/[...hash].tsx                       |   3 +
 src/test/shorten.update.test.ts               | 123 ++++++++++++++++++
 src/utils/axios.ts                            |   9 +-
 src/utils/loggerServer.ts                     |   6 +-
 src/utils/validateMiddleware.ts               |  13 ++
 17 files changed, 264 insertions(+), 60 deletions(-)
 create mode 100644 prisma/migrations/20230829160135_add_media_for_history/migration.sql
 create mode 100644 src/test/shorten.update.test.ts

diff --git a/prisma/migrations/20230829160135_add_media_for_history/migration.sql b/prisma/migrations/20230829160135_add_media_for_history/migration.sql
new file mode 100644
index 00000000..9dcda7c9
--- /dev/null
+++ b/prisma/migrations/20230829160135_add_media_for_history/migration.sql
@@ -0,0 +1,19 @@
+-- CreateTable
+CREATE TABLE "Media" (
+    "id" SERIAL NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "url" TEXT NOT NULL,
+    "urlShortenerHistoryId" INTEGER,
+
+    CONSTRAINT "Media_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Media_url_key" ON "Media"("url");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Media_urlShortenerHistoryId_key" ON "Media"("urlShortenerHistoryId");
+
+-- AddForeignKey
+ALTER TABLE "Media" ADD CONSTRAINT "Media_urlShortenerHistoryId_fkey" FOREIGN KEY ("urlShortenerHistoryId") REFERENCES "UrlShortenerHistory"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index d1ae33b1..63c9f55a 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -33,8 +33,9 @@ model UrlShortenerHistory {
   ogDescription        String?
   ogImgSrc             String?
   UrlShortenerRecord   UrlShortenerRecord @relation(fields: [urlShortenerRecordId], references: [id], onDelete: Cascade)
+  UrlForwardMeta       UrlForwardMeta[]
   urlShortenerRecordId Int
-  urlForwardMeta       UrlForwardMeta[]
+  Media                Media?
 }
 
 model UrlForwardMeta {
@@ -51,3 +52,13 @@ model UrlForwardMeta {
 
   @@unique([userAgent, ip, urlShortenerHistoryId])
 }
+
+model Media {
+  id        Int      @id @default(autoincrement())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  url                   String               @unique
+  urlShortenerHistoryId Int?                 @unique
+  UrlShortenerHistory   UrlShortenerHistory? @relation(fields: [urlShortenerHistoryId], references: [id], onDelete: Cascade)
+}
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index ad0b9041..9f65f119 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -57,5 +57,8 @@
   "loadMore": "Load more",
   "editPreview": "More options",
   "save": "Save",
-  "maximumCharaters": "Maximum of {{n}} characters"
+  "maximumCharaters": "Maximum of {{n}} characters",
+  "uploadImage": "Upload image",
+  "title": "Title",
+  "description": "Description"
 }
diff --git a/public/locales/vi/common.json b/public/locales/vi/common.json
index 2e88e9d9..c0e0990c 100644
--- a/public/locales/vi/common.json
+++ b/public/locales/vi/common.json
@@ -57,5 +57,8 @@
   "loadMore": "Xem thêm",
   "editPreview": "Chỉnh sửa",
   "save": "Lưu thay đổi",
-  "maximumCharaters": "Tối đa {{n}} ký tự"
+  "maximumCharaters": "Tối đa {{n}} ký tự",
+  "uploadImage": "Upload ảnh",
+  "title": "Tiêu đề",
+  "description": "Mô tả ngắn"
 }
diff --git a/src/api/requests.ts b/src/api/requests.ts
index a4afa70d..a505c1a5 100644
--- a/src/api/requests.ts
+++ b/src/api/requests.ts
@@ -18,12 +18,14 @@ export const updateShortenUrlRequest = async ({
   ogTitle,
   ogDescription,
   ogImgSrc,
+  mediaId,
   locale,
 }: {
   hash: string;
   ogDescription?: string;
   ogTitle?: string;
   ogImgSrc?: string;
+  mediaId?: number;
   locale: Locale;
 }) => {
   const rs = await API.put(`/api/shorten/update`, {
@@ -32,6 +34,7 @@ export const updateShortenUrlRequest = async ({
     ogTitle,
     ogDescription,
     ogImgSrc,
+    mediaId,
   });
   const data = rs.data;
   return data as ShortenUrl;
diff --git a/src/bear/shortenSlice.ts b/src/bear/shortenSlice.ts
index c7b08218..4379cf24 100644
--- a/src/bear/shortenSlice.ts
+++ b/src/bear/shortenSlice.ts
@@ -9,16 +9,20 @@ export interface ShortenSlice {
   shortenHistoryForm?: Partial<UrlShortenerHistory>;
   setShortenHistoryForm: (history?: Partial<UrlShortenerHistory>) => void;
   getShortenUrl: () => string;
+  shortenHistoryMediaId?: number;
+  setShortenHistoryMediaId: (id: number) => void;
 }
 
 const slice: StateCreator<ShortenSlice> = (set, get) => ({
   shortenHistory: undefined,
   shortenHistoryForm: undefined,
+  shortenHistoryMediaId: undefined,
   getShortenUrl: () => (!!get().shortenHistory ? `${BASE_URL_SHORT}/${get().shortenHistory?.hash}` : ''),
 
   setShortenHistory: (history) => set((state) => ({ shortenHistory: { ...state.shortenHistory, ...history } })),
   setShortenHistoryForm: (history) =>
     set((state) => ({ shortenHistoryForm: { ...state.shortenHistoryForm, ...history } })),
+  setShortenHistoryMediaId: (id: number) => set({ shortenHistoryMediaId: id }),
 });
 
 const shortenSlice = create(withDevTools(slice, { anonymousActionType: 'ShortenSlice' }));
diff --git a/src/components/atoms/UploadImage.tsx b/src/components/atoms/UploadImage.tsx
index fa998c99..5cf4b4f6 100644
--- a/src/components/atoms/UploadImage.tsx
+++ b/src/components/atoms/UploadImage.tsx
@@ -1,9 +1,14 @@
 import { UploadCloud } from '@styled-icons/feather';
+import { API } from 'api/axios';
 import { CldUploadWidget } from 'next-cloudinary';
 import { MouseEventHandler, useState } from 'react';
 import { isProduction } from 'types/constants';
 
-export const UploadImage = ({ onSuccess }: { onSuccess: (url: string) => void }) => {
+export const UploadImage = ({
+  onSuccess,
+}: {
+  onSuccess: ({ url, mediaId }: { url: string; mediaId: number }) => void;
+}) => {
   const [resource, setResource] = useState<any>();
 
   return (
@@ -23,11 +28,12 @@ export const UploadImage = ({ onSuccess }: { onSuccess: (url: string) => void })
         }}
         signatureEndpoint="/api/cld"
         uploadPreset="clickdi"
-        onSuccess={(result, widget) => {
+        onSuccess={async (result, widget) => {
           setResource(result?.info);
           const url = (result?.info as any)?.secure_url;
-          if (url) {
-            onSuccess(url);
+          const rs = await API.post('/api/i', { url });
+          if (url && rs) {
+            onSuccess({ url, mediaId: rs.data.id });
           }
           widget.close();
         }}>
diff --git a/src/components/gadgets/AdvancedSettingUrlForm.tsx b/src/components/gadgets/AdvancedSettingUrlForm.tsx
index a6da4c4c..7fb4106a 100644
--- a/src/components/gadgets/AdvancedSettingUrlForm.tsx
+++ b/src/components/gadgets/AdvancedSettingUrlForm.tsx
@@ -25,10 +25,14 @@ const UploadImage = dynamic(() => import('../atoms/UploadImage').then((mod) => m
 export const AdvancedSettingUrlForm = () => {
   const { t, locale } = useTrans();
   const { shortenSlice } = useBearStore();
-  const [shortenHistory, setShortenHistoryForm] = shortenSlice((state) => [
-    state.shortenHistory,
-    state.setShortenHistoryForm,
-  ]);
+  const [shortenHistory, shortenHistoryMediaId, setShortenHistoryForm, setShortenHistoryMediaId] = shortenSlice(
+    (state) => [
+      state.shortenHistory,
+      state.shortenHistoryMediaId,
+      state.setShortenHistoryForm,
+      state.setShortenHistoryMediaId,
+    ],
+  );
   const defaultValues = {
     ogTitle: shortenHistory?.ogTitle || t('ogTitle', { hash: shortenHistory?.hash ?? 'XXX' }),
     ogDescription: shortenHistory?.ogDescription || t('ogDescription'),
@@ -46,8 +50,9 @@ export const AdvancedSettingUrlForm = () => {
     defaultValues,
   });
 
-  const onUpdateImgSrc = (url: string) => {
+  const onUpdateImgSrc = ({ url, mediaId }: any) => {
     setValue('ogImgSrc', url);
+    setShortenHistoryMediaId(mediaId);
     setShortenHistoryForm({ ogImgSrc: url });
   };
 
@@ -97,6 +102,7 @@ export const AdvancedSettingUrlForm = () => {
     updateShortenUrl.mutate({
       hash: shortenHistory.hash,
       locale,
+      mediaId: shortenHistoryMediaId || undefined,
       ogImgSrc: values.ogImgSrc || undefined,
       ogDescription: values.ogDescription?.trim() || undefined,
       ogTitle: values.ogTitle?.trim() || undefined,
@@ -109,12 +115,12 @@ export const AdvancedSettingUrlForm = () => {
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="mt-4">
         <div>
-          <label>Upload image</label>
+          <label>{t('uploadImage')}</label>
           <div className="mt-2">
             <UploadImage onSuccess={onUpdateImgSrc} />
           </div>
           <div className="mt-4">
-            <label>Title</label>
+            <label>{t('title')}</label>
             <Input
               btnSize="md"
               {...register('ogTitle', {
@@ -135,7 +141,7 @@ export const AdvancedSettingUrlForm = () => {
           </div>
         </div>
         <div className="mt-4">
-          <label>Description</label>
+          <label>{t('description')}</label>
           <Textarea
             {...register('ogDescription', {
               required: { message: t('errorNoInput'), value: true },
diff --git a/src/controllers/i.ts b/src/controllers/i.ts
index b6d495dc..fc35a8ec 100644
--- a/src/controllers/i.ts
+++ b/src/controllers/i.ts
@@ -1,25 +1,25 @@
-import { api } from '../utils/axios';
-const src2 = 'https://img.lovepik.com/free-png/20210927/lovepik-smoke-png-image_401538877_wh1200.png';
-const src =
-  'https://scontent.fsgn13-4.fna.fbcdn.net/v/t39.30808-6/369031739_2519714004859279_7507749239407582895_n.jpg?stp=dst-jpg_p526x296&_nc_cat=107&ccb=1-7&_nc_sid=5cd70e&_nc_ohc=hFvQkPhv8SgAX8yAxHV&_nc_ht=scontent.fsgn13-4.fna&oh=00_AfDy2N-XOqLzbEooH3uqVzdyql7jczmwO1DfvnVA7QIDgA&oe=64E82982';
+import prisma from '../db/prisma';
+import { api, successHandler } from '../utils/axios';
+import { validateMediaSchema } from '../utils/validateMiddleware';
 
 export const handler = api(
   async (req, res) => {
-    const img = await fetch(src, {
-      method: 'GET',
-      mode: 'cors',
-      cache: 'no-cache',
+    await validateMediaSchema.parseAsync({
+      body: req.body,
     });
-    const blob = await img.arrayBuffer();
-
-    // res.setHeader({
-    //   'Content-Type': 'image/jpeg',
-    //   'Cache-Control': `immutable, no-transform, s-max-age=2592000, max-age=2592000`,
-    // });
-    // res.setHeader('Content-Type', 'image/png);
-    res.setHeader('Content-Type', 'image/jpeg');
-    res.setHeader('Cache-Control', `immutable, no-transform, s-max-age=2592000, max-age=2592000`);
-    res.send(Buffer.from(blob));
+    const url = req.body.url;
+    const rs = await prisma.media.upsert({
+      where: {
+        url,
+      },
+      update: {
+        url,
+      },
+      create: {
+        url,
+      },
+    });
+    return successHandler(res, rs);
   },
-  ['GET'],
+  ['POST'],
 );
diff --git a/src/controllers/qr.ts b/src/controllers/qr.ts
index 8ee24a40..36043d6e 100644
--- a/src/controllers/qr.ts
+++ b/src/controllers/qr.ts
@@ -4,21 +4,21 @@ import { decrypt } from '../utils/crypto';
 import HttpStatusCode from '../utils/statusCode';
 import { validateQrSchema } from '../utils/validateMiddleware';
 
-export const handler = api<QR>(async (req, res) => {
-  if (req.method !== 'GET') {
-    return res.status(HttpStatusCode.METHOD_NOT_ALLOWED).json({ errorMessage: 'Method Not Allowed' });
-  }
-  await validateQrSchema.parseAsync({
-    query: req.query,
-  });
-  const text = req.query.text as string;
-  const token = req.headers['X-Platform-Auth'.toLowerCase()] as string;
-  const decrypted = decrypt(token);
-  if (!decrypted) {
-    return errorHandler(res);
-  }
-  const QRCode = require('qrcode');
-  let qr = '';
-  qr = await QRCode.toDataURL(text, { width: 300, margin: 1 });
-  return res.status(HttpStatusCode.OK).json({ qr });
-});
+export const handler = api<QR>(
+  async (req, res) => {
+    await validateQrSchema.parseAsync({
+      query: req.query,
+    });
+    const text = req.query.text as string;
+    const token = req.headers['X-Platform-Auth'.toLowerCase()] as string;
+    const decrypted = decrypt(token);
+    if (!decrypted) {
+      return errorHandler(res);
+    }
+    const QRCode = require('qrcode');
+    let qr = '';
+    qr = await QRCode.toDataURL(text, { width: 300, margin: 1 });
+    return res.status(HttpStatusCode.OK).json({ qr });
+  },
+  ['GET'],
+);
diff --git a/src/controllers/shorten/update.ts b/src/controllers/shorten/update.ts
index 7b6743ff..0b728b7c 100644
--- a/src/controllers/shorten/update.ts
+++ b/src/controllers/shorten/update.ts
@@ -13,18 +13,27 @@ export const handler = api<ShortenUrl>(
     let ogTitle = req.body.ogTitle as string;
     let ogDescription = req.body.ogDescription as string;
     let ogImgSrc = req.body.ogImgSrc as string;
+    let mediaId = req.body.mediaId;
     await validateUpdateShortenSchema.parseAsync({
       hash,
       locale,
       ogTitle,
       ogDescription,
       ogImgSrc,
+      mediaId,
     });
+
+    if (mediaId) {
+      const media = await prisma.media.findUnique({ where: { id: mediaId } });
+      if (!media) return badRequest(res);
+    }
+
     const history = await prisma.urlShortenerHistory.findUnique({ where: { hash } });
     if (!history) return badRequest(res, "No URL was found on your request. Let's shorten one!");
     const rs = await prisma.urlShortenerHistory.update({
       where: { id: history.id },
       data: {
+        ...(mediaId ? { Media: { connect: { id: mediaId } } } : null),
         ogTitle,
         ogDescription,
         ogImgSrc,
diff --git a/src/controllers/stats/index.ts b/src/controllers/stats/index.ts
index 839ad73d..2ad77713 100644
--- a/src/controllers/stats/index.ts
+++ b/src/controllers/stats/index.ts
@@ -45,7 +45,7 @@ export const handler = api<Stats>(
         hash,
       },
       include: {
-        urlForwardMeta: {
+        UrlForwardMeta: {
           orderBy: {
             updatedAt: Prisma.SortOrder.desc,
           },
diff --git a/src/pages/[...hash].tsx b/src/pages/[...hash].tsx
index 0d2582c7..886f7de2 100644
--- a/src/pages/[...hash].tsx
+++ b/src/pages/[...hash].tsx
@@ -106,12 +106,15 @@ const ForwardURL = ({ history, hash, ip, error, redirect }: Props) => {
               property="og:image"
               content={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(encodeTitle)}&locale=${locale}`}
             />
+            <meta property="og:image:width" content="1200" />
+            <meta property="og:image:height" content="627" />
             <meta property="og:image:alt" content={t('ogDescription')} />
             <meta
               property="twitter:image"
               content={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(encodeTitle)}&locale=${locale}`}
             />
             <meta name="twitter:image:alt" content={t('ogDescription')}></meta>
+            <meta property="twitter:card" content="summary_large_image" />
           </>
         )}
       </Head>
diff --git a/src/test/shorten.update.test.ts b/src/test/shorten.update.test.ts
new file mode 100644
index 00000000..14c77127
--- /dev/null
+++ b/src/test/shorten.update.test.ts
@@ -0,0 +1,123 @@
+import { Media, UrlShortenerHistory } from '@prisma/client';
+import { createMocks } from 'node-mocks-http';
+import * as controller from '../controllers';
+import { redis } from '../redis/client';
+import HttpStatusCode from '../utils/statusCode';
+
+const ip = '0.0.0.1';
+const key = `limit:${ip}`;
+const exampleUrl = 'U2FsdGVkX1+hDFakyw7MPSqI3JDQ6rXZF0vjpJ1ZOLIf5qp+9ByNbpiiJYIE+4ZYSAw1M2fIIfzcn5YaoYVCkA==';
+
+describe('Test /api/shorten/update...', () => {
+  describe('Update Shortened URL', () => {
+    const handler = controller.shorten.update.handler;
+
+    it('Should throw error with wrong method', async () => {
+      const { req, res } = createMocks({
+        method: 'POST',
+        body: {},
+      });
+      await handler(req, res);
+
+      expect(res._getStatusCode()).toBe(HttpStatusCode.METHOD_NOT_ALLOWED);
+    });
+
+    it('Should throw error with empty query', async () => {
+      const { req, res } = createMocks({
+        method: 'PUT',
+        query: {},
+      });
+      await handler(req, res);
+
+      expect(res._getStatusCode()).toBe(HttpStatusCode.BAD_REQUEST);
+    });
+
+    it('Should throw error with empty locale', async () => {
+      const { req, res } = createMocks({
+        method: 'PUT',
+        query: { hash: 'xx' },
+      });
+      await handler(req, res);
+      expect(res._getStatusCode()).toBe(HttpStatusCode.BAD_REQUEST);
+    });
+
+    it('Should throw error with wrong hash format', async () => {
+      const { req, res } = createMocks({
+        method: 'PUT',
+        query: { locale: 'vi', hash: 'xx' },
+      });
+      await handler(req, res);
+      expect(res._getStatusCode()).toBe(HttpStatusCode.BAD_REQUEST);
+    });
+
+    it('Should update shortened URL OK without any addition info ', async () => {
+      await redis.expire(key, 0);
+      const { req: req1, res: res1 } = createMocks({
+        method: 'GET',
+        query: { url: exampleUrl },
+        headers: { 'x-forwarded-for': ip },
+      });
+      await controller.shorten.handler(req1, res1);
+      const history: UrlShortenerHistory = JSON.parse(res1._getData());
+      const { req: req2, res: res2 } = createMocks({
+        method: 'PUT',
+        body: { hash: history.hash, locale: 'vi' },
+        headers: { 'x-forwarded-for': ip },
+      });
+      await handler(req2, res2);
+      expect(res2._getStatusCode()).toBe(HttpStatusCode.OK);
+    });
+
+    it('Should update shortened URL OK with og info', async () => {
+      await redis.expire(key, 0);
+      const { req: req1, res: res1 } = createMocks({
+        method: 'GET',
+        query: { url: exampleUrl },
+        headers: { 'x-forwarded-for': ip },
+      });
+      await controller.shorten.handler(req1, res1);
+      const history: UrlShortenerHistory = JSON.parse(res1._getData());
+      const hash = history.hash;
+      const ogTitle = `ogTitle ${hash}`;
+      const ogDescription = `ogDescription ${hash}`;
+      const { req: req2, res: res2 } = createMocks({
+        method: 'PUT',
+        body: { hash, locale: 'vi', ogTitle, ogDescription },
+        headers: { 'x-forwarded-for': ip },
+      });
+      await handler(req2, res2);
+      expect(res2._getStatusCode()).toBe(HttpStatusCode.OK);
+      const data = JSON.parse(res2._getData());
+      expect(data?.ogTitle).toBe(ogTitle);
+      expect(data?.ogDescription).toBe(ogDescription);
+    });
+
+    it('Should update shortened URL OK with custom og image', async () => {
+      await redis.expire(key, 0);
+      const { req: req1, res: res1 } = createMocks({
+        method: 'GET',
+        query: { url: exampleUrl },
+        headers: { 'x-forwarded-for': ip },
+      });
+      await controller.shorten.handler(req1, res1);
+      const history: UrlShortenerHistory = JSON.parse(res1._getData());
+      const hash = history.hash;
+
+      const { req: req2, res: res2 } = createMocks({
+        method: 'POST',
+        body: { url: `ogImgSrc ${hash}` },
+        headers: { 'x-forwarded-for': ip },
+      });
+      await controller.i.handler(req2, res2);
+      const media: Media = JSON.parse(res2._getData());
+
+      const { req: req3, res: res3 } = createMocks({
+        method: 'PUT',
+        body: { hash, locale: 'vi', mediaId: media.id },
+        headers: { 'x-forwarded-for': ip },
+      });
+      await handler(req3, res3);
+      expect(res3._getStatusCode()).toBe(HttpStatusCode.OK);
+    });
+  });
+});
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 87158f8e..657f3644 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -1,7 +1,7 @@
 import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next';
 import { z } from 'zod';
 import { Response } from '../types/api';
-import { isProduction } from '../types/constants';
+import { isProduction, isTest } from '../types/constants';
 import HttpStatusCode from './statusCode';
 
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS';
@@ -12,14 +12,15 @@ export function errorHandler<T extends Response>(
 ) {
   switch (code) {
     case HttpStatusCode.UNAUTHORIZED:
-    default:
       return res.status(HttpStatusCode.UNAUTHORIZED).json({ errorMessage: 'UNAUTHORIZED' } as any);
+    case HttpStatusCode.NOT_FOUND:
+    default:
+      return res.status(HttpStatusCode.NOT_FOUND).json({ errorMessage: 'Not found' } as any);
   }
-  return res.status(HttpStatusCode.NOT_FOUND).json({ errorMessage: 'Not found' } as any);
 }
 
 export const catchErrorHandler = (res: NextApiResponse, error?: any) => {
-  if (!isProduction) console.error('[Error]', error);
+  if (!isProduction && !isTest) console.error('[Error]', error);
   if (error instanceof z.ZodError) {
     require('./loggerServer').warn(error);
     return res.status(HttpStatusCode.BAD_REQUEST).json(error.issues);
diff --git a/src/utils/loggerServer.ts b/src/utils/loggerServer.ts
index 17da337c..e4d9139c 100644
--- a/src/utils/loggerServer.ts
+++ b/src/utils/loggerServer.ts
@@ -4,13 +4,13 @@ import { isProduction, isTest } from '../types/constants';
 module.exports = isTest
   ? {
       info(message: any) {
-        console.log('[INFO]: ', message);
+        //  console.log('[INFO]: ', message);
       },
       warn(message: any) {
-        console.warn('[WARN]: ', message);
+        //  console.warn('[WARN]: ', message);
       },
       error(message: any) {
-        console.error('[WARN]: ', message);
+        console.error('[ERROR]: ', message);
       },
     }
   : pino(
diff --git a/src/utils/validateMiddleware.ts b/src/utils/validateMiddleware.ts
index 026deb6a..e6e4b39c 100644
--- a/src/utils/validateMiddleware.ts
+++ b/src/utils/validateMiddleware.ts
@@ -45,6 +45,11 @@ export const validateUpdateShortenSchema = z.object({
       required_error: 'Description is required',
     }),
   ),
+  mediaId: z.optional(
+    z.number({
+      invalid_type_error: 'Must be a number',
+    }),
+  ),
   // ogImgSrc: z.string({
   //   required_error: 'Description is required',
   // }),
@@ -88,3 +93,11 @@ export const validateQrSchema = z.object({
       .max(100),
   }),
 });
+
+export const validateMediaSchema = z.object({
+  body: z.object({
+    url: z.string({
+      required_error: 'Url is required',
+    }),
+  }),
+});