comment

.vitepress/hooks/opengraph.ts

@@ -1,19 +1,32 @@
+// Import necessary modules and functions from Node.js built-in 'fs/promises', 'path', 'url', and 'vitepress'
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { createContentLoader } from 'vitepress'
 import type { ContentData, SiteConfig } from 'vitepress'
+
+// Import 'satoriVue' and 'renderAsync' from 'x-satori/vue' and '@resvg/resvg-js' respectively
 import { type SatoriOptions, satoriVue } from 'x-satori/vue'
 import { renderAsync } from '@resvg/resvg-js'
+
+// Import 'consola' for logging
 import consola from 'consola'
 
+// Get the directory name of the current module
 const __dirname = dirname(fileURLToPath(import.meta.url))
+
+// Define the path to the fonts directory
 const __fonts = resolve(__dirname, '../fonts')
 
+// The main function to generate images based on the given configuration
 export async function generateImages(config: SiteConfig): Promise<void> {
+  // Load all the pages using 'createContentLoader'
   const pages = await createContentLoader('**/*.md', { excerpt: true }).load()
+
+  // Read the template file
   const template = await readFile(resolve(__dirname, './Template.vue'), 'utf-8')
 
+  // Define the fonts for the SatoriOptions
   const fonts: SatoriOptions['fonts'] = [
     {
       name: 'Inter',
@@ -41,6 +54,7 @@ export async function generateImages(config: SiteConfig): Promise<void> {
     }
   ]
 
+  // Loop through all the pages and generate images for each page
   for (const page of pages) {
     await generateImage({
       page,
@@ -49,9 +63,12 @@ export async function generateImages(config: SiteConfig): Promise<void> {
       fonts
     })
   }
-  return consola.info('Generated opengraph images.')
+
+  // Log a success message
+  consola.info('Generated opengraph images.')
 }
 
+// Define the interface for the GenerateImagesOptions
 interface GenerateImagesOptions {
   page: ContentData
   template: string
@@ -59,14 +76,17 @@ interface GenerateImagesOptions {
   fonts: SatoriOptions['fonts']
 }
 
+// The function to generate a single image for a page
 async function generateImage({
   page,
   template,
   outDir,
   fonts
 }: GenerateImagesOptions): Promise<void> {
+  // Get the frontmatter and URL of the page
   const { frontmatter, url } = page
 
+  // Define the options for the SatoriOptions
   const options: SatoriOptions = {
     width: 1200,
     height: 628,
@@ -83,14 +103,20 @@ async function generateImage({
     }
   }
 
+  // Render the SVG using the SatoriOptions and template
   const svg = await satoriVue(options, template)
 
+  // Convert the SVG to PNG
   const render = await renderAsync(svg)
 
+  // Define the output folder and file paths
   const outputFolder = resolve(outDir, url.slice(1), '__og_image__')
   const outputFile = resolve(outputFolder, 'og.png')
 
+  // Create the output folder if it doesn't exist
   await mkdir(outputFolder, { recursive: true })
 
+  // Write the PNG to the output file
   await writeFile(outputFile, render.asPng())
 }
+