mirror of
https://github.com/fmhy/edit.git
synced 2026-02-19 01:31:41 +11:00
122 lines
3.5 KiB
TypeScript
122 lines
3.5 KiB
TypeScript
// 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',
|
|
data: await readFile(resolve(__fonts, 'Inter-Regular.otf')),
|
|
weight: 400,
|
|
style: 'normal'
|
|
},
|
|
{
|
|
name: 'Inter',
|
|
data: await readFile(resolve(__fonts, 'Inter-Medium.otf')),
|
|
weight: 500,
|
|
style: 'normal'
|
|
},
|
|
{
|
|
name: 'Inter',
|
|
data: await readFile(resolve(__fonts, 'Inter-SemiBold.otf')),
|
|
weight: 600,
|
|
style: 'normal'
|
|
},
|
|
{
|
|
name: 'Inter',
|
|
data: await readFile(resolve(__fonts, 'Inter-Bold.otf')),
|
|
weight: 700,
|
|
style: 'normal'
|
|
}
|
|
]
|
|
|
|
// Loop through all the pages and generate images for each page
|
|
for (const page of pages) {
|
|
await generateImage({
|
|
page,
|
|
template,
|
|
outDir: config.outDir,
|
|
fonts
|
|
})
|
|
}
|
|
|
|
// Log a success message
|
|
consola.info('Generated opengraph images.')
|
|
}
|
|
|
|
// Define the interface for the GenerateImagesOptions
|
|
interface GenerateImagesOptions {
|
|
page: ContentData
|
|
template: string
|
|
outDir: string
|
|
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,
|
|
fonts,
|
|
props: {
|
|
title:
|
|
frontmatter.layout === 'home'
|
|
? frontmatter.hero.name ?? frontmatter.title
|
|
: frontmatter.title,
|
|
description:
|
|
frontmatter.layout === 'home'
|
|
? frontmatter.hero.tagline ?? frontmatter.description
|
|
: frontmatter.description
|
|
}
|
|
}
|
|
|
|
// 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())
|
|
}
|
|
|