feat: add ogImage width and height in open graph metadata in detail b…

…logs page (#62)
rezafikkri · Dec 21, 2024 · 43f8abe · 43f8abe
2 parents cc9142d + 53dbfad
commit 43f8abe
Show file tree

Hide file tree

Showing 13 changed files with 91 additions and 7 deletions.
diff --git a/app/blogs/[slug]/page.jsx b/app/blogs/[slug]/page.jsx
@@ -24,7 +24,13 @@ export async function generateMetadata({ params }) {
       title: post.title,
       description: post.excerpt,
       url: `${baseUrl}/blogs/${post.slug}`,
-      images: [ post.ogImage ],
+      images: [
+        {
+          url: post.ogImage,
+          width: post.ogImageWidth,
+          height: post.ogImageHeight,
+        },
+      ],
       type: 'article',
     },
   };

diff --git a/data/posts/alternatif-software-berbayar.md b/data/posts/alternatif-software-berbayar.md
@@ -5,6 +5,8 @@ lastmod: 1679999694791
 topics: ["0fff756a-1ad2-4ee2-9c70-3db8d713b476"]
 slug: "alternatif-software-berbayar"
 ogImage: "https://res.cloudinary.com/rezafikkri/image/upload/q_auto/alternatif-software-berbayar.png"
+ogImageWidth: 1364
+ogImageHeight: 657
 ---
 
 Bismillah, kali ini kita akan membahas mengenai alternatif software-software berbayar seperti Microsoft Office, CorelDraw, Adobe Photoshop dan Adobe Premier. Mungkin kamu pernah menggunakan software-software tersebut, atau bahkan kamu bekerja dengan menggunakan software-software tersebut. Kebanyakan, orang yang masih awam atau tidak terlalu paham akan teknologi, biasanya menggunakan software bajakan di laptop atau PC-nya, terutama yang menggunakan sistem operasi windows. Mungkin bagi yang masih awam, hal tersebut terjadi karena ketidaktahuan mereka, tetapi ada juga mereka yang paham akan teknologi dan tahu bahwa mereka menggunakan software bajakan, tetapi tetap menggunakannya. Alangkah baiknya jika menggunakan software berbayar, kita menggunakan versi originalnya, yaitu dengan membeli license dari software berbayar yang digunakan, apalagi bagi yang telah mendapatkan penghasilan dari software-software tersebut. 

diff --git a/data/posts/bagaimana-cara-kerja-cookie-dan-session.md b/data/posts/bagaimana-cara-kerja-cookie-dan-session.md
@@ -5,6 +5,8 @@ lastmod: 1734069067838
 topics: ["50d103e8-2275-4b09-8dea-5105ab5e9838","56863ee6-39ae-40d2-94ca-34e0805ce291","b2ded9c2-dea9-4427-a4aa-3b5a24e89468","cdc80207-597b-4fb7-b572-53b68c9f1a78","3b2bf050-b69c-4438-b3d9-ed0a3a5e0911"]
 slug: "bagaimana-cara-kerja-cookie-dan-session"
 ogImage: "https://res.cloudinary.com/rezafikkri/image/upload/q_auto/cara-kerja-cookie-session.png"
+ogImageWidth: 1200
+ogImageHeight: 630
 ---
 
 Bismillah.

diff --git a/data/posts/css-combinator-cara-kerja-dan-penggunaannya.md b/data/posts/css-combinator-cara-kerja-dan-penggunaannya.md
@@ -5,6 +5,8 @@ lastmod: 1679628746132
 topics: ["12ca2718-3365-465d-b35e-12d05d9a9873"]
 slug: "css-combinator-cara-kerja-dan-penggunaannya"
 ogImage: "https://res.cloudinary.com/rezafikkri/image/upload/q_auto/css-combinators.png"
+ogImageWidth: 1364
+ogImageHeight: 657
 ---
 
 Bismillah, hari ini kita akan membahas mengenai Combinator di CSS. Apa itu Combinator? <!-- excerpt -->Combinator merupakan suatu karakter yang menyatakan hubungan antara selector, untuk menargetkan element dalam dokumen. Misalnya untuk menyeleksi semua<!-- excerpt --> element `<p>` yang ada di dalam element `<article>`, kita menggunakan Descendant Combinator ( ): 

diff --git a/data/posts/deploy-website-dengan-cicd-1-pendahuluan.md b/data/posts/deploy-website-dengan-cicd-1-pendahuluan.md
@@ -5,6 +5,8 @@ lastmod: 1720766808794
 topics: ["e5d6b8ea-d8e0-4bd2-8bb3-d74d08dc5669","ab8888e2-d055-4507-aec3-7cadb0d36d98","3b2bf050-b69c-4438-b3d9-ed0a3a5e0911"]
 slug: "deploy-website-dengan-cicd-1-pendahuluan"
 ogImage: "https://res.cloudinary.com/rezafikkri/image/upload/q_auto/1-deploy-vercel-github-action.png"
+ogImageWidth: 1920
+ogImageHeight: 1080
 serial: {"id":"ede13e57-95e1-425e-9e07-f5f686cb3990","order":1}
 ---
 

diff --git a/data/posts/deploy-website-dengan-cicd-2-github-actions-workflow.md b/data/posts/deploy-website-dengan-cicd-2-github-actions-workflow.md
@@ -5,6 +5,8 @@ lastmod: 1720767708928
 topics: ["e5d6b8ea-d8e0-4bd2-8bb3-d74d08dc5669","ab8888e2-d055-4507-aec3-7cadb0d36d98","3b2bf050-b69c-4438-b3d9-ed0a3a5e0911"]
 slug: "deploy-website-dengan-cicd-2-github-actions-workflow"
 ogImage: "https://res.cloudinary.com/rezafikkri/image/upload/q_auto/2-deploy-vercel-github-action.png"
+ogImageWidth: 1920
+ogImageHeight: 1080
 serial: {"id":"ede13e57-95e1-425e-9e07-f5f686cb3990","order":2}
 ---
 

diff --git a/data/posts/deploy-website-dengan-cicd-3-deploy-dengan-vercel.md b/data/posts/deploy-website-dengan-cicd-3-deploy-dengan-vercel.md
@@ -5,6 +5,8 @@ lastmod: 1720767708928
 topics: ["e5d6b8ea-d8e0-4bd2-8bb3-d74d08dc5669","ab8888e2-d055-4507-aec3-7cadb0d36d98","3b2bf050-b69c-4438-b3d9-ed0a3a5e0911"]
 slug: "deploy-website-dengan-cicd-3-deploy-dengan-vercel"
 ogImage: "https://res.cloudinary.com/rezafikkri/image/upload/q_auto/3-deploy-vercel-github-action.png"
+ogImageWidth: 1920
+ogImageHeight: 1080
 serial: {"id":"ede13e57-95e1-425e-9e07-f5f686cb3990","order":3}
 ---
 

diff --git a/data/posts/deploy-website-dengan-cicd-4-branch-ruleset.md b/data/posts/deploy-website-dengan-cicd-4-branch-ruleset.md
@@ -5,6 +5,8 @@ lastmod: 1720767968252
 topics: ["e5d6b8ea-d8e0-4bd2-8bb3-d74d08dc5669","ab8888e2-d055-4507-aec3-7cadb0d36d98","3b2bf050-b69c-4438-b3d9-ed0a3a5e0911"]
 slug: "deploy-website-dengan-cicd-4-branch-ruleset"
 ogImage: "https://res.cloudinary.com/rezafikkri/image/upload/q_auto/4-deploy-vercel-github-action.png"
+ogImageWidth: 1920
+ogImageHeight: 1080
 serial: {"id":"ede13e57-95e1-425e-9e07-f5f686cb3990","order":4}
 ---
 

diff --git a/data/posts/pdo-php-data-objects-ekstensi-php-untuk-mengakses-database.md b/data/posts/pdo-php-data-objects-ekstensi-php-untuk-mengakses-database.md
@@ -5,6 +5,8 @@ lastmod: 1723245780821
 topics: ["cdc80207-597b-4fb7-b572-53b68c9f1a78","597f5651-dfe2-4aad-81aa-7c8b090ff468"]
 slug: "pdo-php-data-objects-ekstensi-php-untuk-mengakses-database"
 ogImage: "https://res.cloudinary.com/rezafikkri/image/upload/q_auto/php-pdo.png"
+ogImageWidth: 1364
+ogImageHeight: 657
 ---
 
 Bismillah, hari ini kita akan mempelajari PDO (PHP Data Objects).

diff --git a/lib/generate-post.mjs b/lib/generate-post.mjs
@@ -8,6 +8,7 @@ import input from '@inquirer/input';
 import checkbox from '@inquirer/checkbox';
 import confirm from '@inquirer/confirm';
 import select from '@inquirer/select';
+import number from '@inquirer/number';
 import { randomUUID } from 'crypto';
 
 const dataDirectory = path.join(process.cwd(), 'data');
@@ -34,14 +35,15 @@ async function generateTopics() {
     selectedTopics = await checkbox({
       message: 'Pilih Topik:',
       choices: oldTopics.map(topic => ({ name: topic.name.replace(/-/g, ' '), value: topic.id })),
+      loop: false,
     });
   }
   let newTopics = await input({ message: 'Topik Baru (jika ada, pisah dengan koma):' });
   newTopics = newTopics.trim() == '' ? [] : newTopics.split(',');
   if (newTopics.length > 0) {
     newTopics = newTopics.map(topic => {
       const topicId = randomUUID();
-      return { id: topicId, name: topic.replace(/\s/g, '-') };
+      return { id: topicId, name: topic.trim().replace(/\s/g, '-') };
     });
   }
 
@@ -95,7 +97,15 @@ async function generatePost() {
   const title = await input({ message: 'Judul:' });
   // generate topics
   const topicIds = await generateTopics();
-  const ogImage = await input({ message: 'URL gambar (untuk open graph):' }); 
+
+  // genarete ogImage
+  const ogImage = await input({ message: 'URL gambar (untuk open graph):' });
+  let ogImageWidth;
+  let ogImageHeight;
+  if (ogImage.trim() !== '') {
+    ogImageWidth = await number({ message: 'Open graph image width:' });
+    ogImageHeight = await number({ message: 'Open graph image height:' });
+  }
 
   // generate serial
   const serial = await generateSerial();
@@ -105,7 +115,7 @@ async function generatePost() {
   const newSlug = slug(title);
   const postId = randomUUID();
 
-  let content = `---\nid: "${postId}"\ntitle: "${title}"\nlastmod: ${lastmod}\ntopics: ["${topicIds.join('","')}"]\nslug: "${newSlug}"\nogImage: "${ogImage}"\n`;
+  let content = `---\nid: "${postId}"\ntitle: "${title}"\nlastmod: ${lastmod}\ntopics: ["${topicIds.join('","')}"]\nslug: "${newSlug}"\nogImage: "${ogImage}"\nogImageWidth: ${ogImageWidth ?? ''}\nogImageHeight: ${ogImageHeight ?? ''}\n`;
   if (serial) {
     content += `serial: ${JSON.stringify(serial)}\n---\n`;
   } else {

diff --git a/lib/posts.mjs b/lib/posts.mjs
@@ -15,11 +15,13 @@ import { remarkDefinitionList, defListHastHandlers } from 'remark-definition-lis
 const dataDirectory = path.join(process.cwd(), 'data');
 
 export function getTopics(topicIds = null) {
-  const topics = readFileSync(path.join(dataDirectory, 'topics.json'), 'utf8');
+  const topics = JSON.parse(readFileSync(path.join(dataDirectory, 'topics.json'), 'utf8'));
   if (topicIds) {
-    return JSON.parse(topics).filter(topic => topicIds.includes(topic.id));
+    return topicIds.map(topicId => {
+      return topics.filter(topic => topic.id === topicId)[0];
+    });
   }
-  return JSON.parse(topics);
+  return topics;
 }
 
 export function getSerials() {

diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@inquirer/checkbox": "^4.0.3",
     "@inquirer/confirm": "^5.1.0",
     "@inquirer/input": "^4.1.0",
+    "@inquirer/number": "^3.0.4",
     "@inquirer/select": "^4.0.3",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.13",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml