Fix link of encrypted-card

Add date and author to blog articles

src/components/EncryptedItems/EncryptedBusinessCard.client.vue

@@ -78,7 +78,7 @@
           <input class="rounded-md border border-gray-200 px-4 py-2 w-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-300" v-model="password">
         </div>
       </div>
-    <div class="mt-6 w-full text-center italic">The content of this web page is end-2-end encrypted, for more details please read the <a class="underline cursor-pointer" href="/blog/encrypted-card" target="_blank" rel="noopener">related blog article</a>.</div>
+    <div class="mt-6 w-full text-center italic">The content of this web page is end-2-end encrypted, for more details please read the <a class="underline cursor-pointer" href="/en/blog/encrypted-card" target="_blank" rel="noopener">related blog article</a>.</div>
   </div>
 </template>
 

src/components/MetaOGImage.astro

@@ -6,6 +6,7 @@ import { existsSync } from 'node:fs'
 import AstroConfig, { PWD } from '../../astro.config'
 import { PNG } from '~/utils/createImage'
 import ogImage from './og-image'
+import { languages } from '~/i18n'
 
 export interface Props {
   title: string
@@ -14,7 +15,8 @@ export interface Props {
   width?: number
   height?: number
   author?: string
-  date?: Date
+  date?: Date,
+  dateFormat?: keyof languages
 }
 
 const {
@@ -24,7 +26,8 @@ const {
   author,
   date,
   width = 1200,
-  height = 630
+  height = 630,
+  dateFormat
 } = Astro.props
 
 const generateHash = (input: string): string => {
@@ -38,7 +41,7 @@ const ogDir = path.resolve(publicDir, 'og')
 
 if (!(existsSync(ogDir))) await mkdir(ogDir)
 
-const options = { image: Buffer.from(image), title, description, author, date, width, height }
+const options = { image: Buffer.from(image), title, description, author, date, width, height, dateFormat }
 
 const hash = generateHash(JSON.stringify({ ...options, image: options.image.toString('base64') }))
 

src/components/og-image.tsx

@@ -12,14 +12,18 @@ import { waterfall } from 'astro-pintora'
 //  will fail. Using the waterfall makes sure they wait for each other to finish.
 //  see: https://github.com/hikerpig/pintora/issues/237 and
 
-export default waterfall(async ({ image, title, description, author, date, width = 1200, height = 630 }: { image: ArrayBuffer, title: string, description: string, width?: number, height?: number, author?: string, date?: Date }) => {
+export default waterfall(async ({ image, title, description, author, date, width = 1200, height = 630, dateFormat }: { image: ArrayBuffer, title: string, description: string, width?: number, height?: number, author?: string, date?: Date, dateFormat: string }) => {
   const resizedImage = await sharp(Buffer.from(image))
     .resize({ width: Math.floor(width / 3), height: 1.25 * Math.floor(width / 3), fit: 'cover' })
     .png()
     .toBuffer()
 
   const b64ImageSrc = `data:image/png;base64,${resizedImage.toString('base64')}`
-  const dateString = date ? `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear().toString().padStart(4, '0')}` : undefined
+  const dateString = date ?
+    dateFormat === 'en' ?
+      `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}/${date.getFullYear().toString().padStart(4, '0')}` :
+      `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear().toString().padStart(4, '0')}` :
+    undefined
 
   const frameWidth = 48
   const imageMargin = 20

src/pages/[lang]/blog/[slug]/index.astro

@@ -50,8 +50,11 @@ const image = imageFilePath != null ? await readFile(imageFilePath) : undefined
       {
         (image != null)
           ? <MetaOGImage title={post.data.title}
-                             description={post.data.description ?? truncatedPost}
-                             image={image}
+                         description={post.data.description ?? truncatedPost}
+                         author="Timothée Rebours"
+                         date={post.data.date}
+                         dateFormat={lang}
+                         image={image}
                 />
           : <></>
       }