fix: UI Vercel OG

aacmal · Jun 30, 2023 · 3f709ac · 3f709ac
1 parent 8ba8aaf
commit 3f709ac
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git a/src/app/api/og/route.tsx b/src/app/api/og/route.tsx
@@ -6,7 +6,9 @@ export const runtime = 'edge';
 
 export async function GET(req: NextRequest) {
   try {
-    const { searchParams } = new URL(req.url);
+    const url = new URL(req.url);
+    const baseUrl = url.origin;
+    const { searchParams } = url;
     const hasChapterId = searchParams.has('chapterId');
 
     if (!hasChapterId) {
@@ -64,22 +66,22 @@ export async function GET(req: NextRequest) {
             <span
               style={{
                 marginLeft: 8,
-                fontSize: 20,
+                fontSize: 30,
                 color: '#10b981',
+                fontWeight: 'bold',
               }}
             >
-              quran.acmal.me
+              {`${baseUrl}/quran/`}
             </span>
           </div>
           <div
             style={{
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center',
-              padding: '20px 20px',
+              padding: '60px 30px',
               fontSize: 32,
-              width: '100%',
-              maxWidth: 750,
+              width: '92%',
               textAlign: 'center',
               backgroundColor: '#10b981',
               color: 'white',
@@ -91,11 +93,28 @@ export async function GET(req: NextRequest) {
             <div
               style={{
                 whiteSpace: 'nowrap',
+                display: 'flex',
+                flexDirection: 'column',
+                fontSize: 50,
+              }}
+            >
+              {chapterData.name_simple}
+              <span
+                style={{
+                  fontWeight: 100,
+                }}
+              >
+                ({chapterData.translated_name.name})
+              </span>
+            </div>
+            <div
+              style={{
+                fontWeight: 'black',
+                fontSize: 70,
               }}
             >
-              {chapterData.name_complex}
+              {chapterData.name_arabic}
             </div>
-            <div>{chapterData.name_arabic}</div>
           </div>
         </div>
       )

diff --git a/src/app/quran/surah/[chapterId]/page.tsx b/src/app/quran/surah/[chapterId]/page.tsx
@@ -29,21 +29,23 @@ export async function generateMetadata({ params }): Promise<Metadata> {
   }
 
   const description = `Baca Surah ${chapterData.name_simple} (${chapterData.translated_name.name}) dengan jumlah ${chapterData.verses_count} ayat, surah ini diturunkan ke ${chapterData.revelation_order} di ${chapterData.revelation_place}. Halaman ini berisi bacaan surah ${chapterData.name_simple} dengan terjemahan bahasa Indonesia, tafsir, dan audio dengan qori yang berbeda.`;
-
+  const imageUrl = `${canonicalUrl}api/og?chapterId=${chapterData.id}`;
   return {
     title: `${chapterData.name_simple} (${chapterData.translated_name.name})`,
     description: description,
     robots: IS_PRODUCTION ? 'index, follow' : 'noindex, nofollow',
     openGraph: {
       ...defaultOpenGraph,
       title: `${chapterData.name_simple} (${chapterData.translated_name.name})`,
-      images: `${canonicalUrl}api/og?chapterId=${chapterData.id}`,
       description: description,
+      url: `${canonicalUrl}quran/surah/${chapterData.id}`,
+      images: imageUrl,
     },
     twitter: {
       ...defaultTwitter,
       title: `${chapterData.name_simple} (${chapterData.translated_name.name})`,
       description: description,
+      images: imageUrl,
     },
   };
 }