feat: add automatic website screenshot generation for Open Graph preview images

.vscode/settings.json

@@ -61,6 +61,7 @@
   "cSpell.words": [
     "abbrlink",
     "antfu",
+    "apiflash",
     "Artículos",
     "astrodotbuild",
     "astrojs",

pnpm-lock.yaml

@@ -1812,8 +1812,8 @@ packages:
     peerDependencies:
       eslint: '>=8'
 
-  eslint-plugin-import-x@4.7.2:
+  eslint-plugin-import-x@4.8.0:
-    resolution: {integrity: sha512-+GpGWKbQMK3izrwU4XoRGdAJHwvxuboiNusqU25nNXlRsmnxj8B5niQRuFK1aHEvcbIKE6D9ZfwjsLmBQbnJmw==}
+    resolution: {integrity: sha512-rCZftKo2QvFfV62MomJuIog74NrsfdEriJZxcNPEnjwrHpfHge6ZfUe+Pp2f4pqZe+ArtH8RapwqxLc1O+KJYw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -2701,10 +2701,6 @@ packages:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
 
-  minimatch@10.0.1:
-    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
-    engines: {node: 20 || >=22}
-
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -3865,7 +3861,7 @@ snapshots:
       eslint-merge-processors: 2.0.0(eslint@9.22.0(jiti@2.4.2))
       eslint-plugin-antfu: 3.1.1(eslint@9.22.0(jiti@2.4.2))
       eslint-plugin-command: 3.1.0(eslint@9.22.0(jiti@2.4.2))
-      eslint-plugin-import-x: 4.7.2(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
+      eslint-plugin-import-x: 4.8.0(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
       eslint-plugin-jsdoc: 50.6.6(eslint@9.22.0(jiti@2.4.2))
       eslint-plugin-jsonc: 2.19.1(eslint@9.22.0(jiti@2.4.2))
       eslint-plugin-n: 17.16.2(eslint@9.22.0(jiti@2.4.2))
@@ -5755,7 +5751,7 @@ snapshots:
       eslint: 9.22.0(jiti@2.4.2)
       eslint-compat-utils: 0.5.1(eslint@9.22.0(jiti@2.4.2))
 
-  eslint-plugin-import-x@4.7.2(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2):
+  eslint-plugin-import-x@4.8.0(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2):
     dependencies:
       '@types/doctrine': 0.0.9
       '@typescript-eslint/utils': 8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
@@ -5764,8 +5760,7 @@ snapshots:
       eslint: 9.22.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
       get-tsconfig: 4.10.0
-      is-glob: 4.0.3
+      picomatch: 4.0.2
-      minimatch: 10.0.1
       rspack-resolver: 1.1.0
       semver: 7.7.1
       stable-hash: 0.0.5
@@ -7100,10 +7095,6 @@ snapshots:
 
   min-indent@1.0.1: {}
 
-  minimatch@10.0.1:
-    dependencies:
-      brace-expansion: 2.0.1
-
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11

src/config.ts

@@ -98,7 +98,7 @@ export const themeConfig: ThemeConfig = {
     verification: {
       // google search console
       // docs: https://search.google.com/search-console
-      google: '',
+      google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM',
       // bing webmaster tools
       // docs: https://www.bing.com/webmasters
       bing: '',
@@ -123,6 +123,10 @@ export const themeConfig: ThemeConfig = {
       // user ID
       userID: '',
     },
+    // apiflash access key
+    // automatically generate website screenshots for open graph preview images
+    // get your access key at: https://apiflash.com/
+    apiflashKey: '',
   },
   // SEO SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 

src/layouts/Head.astro

@@ -16,7 +16,7 @@ const currentUI = ui[currentLang as keyof typeof ui]
 
 const { title, subtitle, description, author, url, favicon, i18nTitle } = themeConfig.site
 const { mode, light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
-const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '' } = themeConfig.seo ?? {}
+const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '', apiflashKey = '' } = themeConfig.seo ?? {}
 const { google = '', bing = '', yandex = '', baidu = '' } = verification
 const { commentURL = '', imageHostURL = '', customGoogleAnalyticsJS = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
 
@@ -26,7 +26,11 @@ const headSubtitle = i18nTitle ? currentUI.subtitle : subtitle
 const pageTitle = postTitle ? `${postTitle} | ${headTitle}` : `${headTitle} - ${headSubtitle}`
 const pageDescription = postDescription || description
 // TODO: Change openGraph image fallback url
-const pageImage = postSlug ? `${url}/opengraph/${postSlug}.png` : 'https://placehold.co/1200x630'
+const pageImage = postSlug
+  ? `${url}/opengraph/${postSlug}.png`
+  : apiflashKey
+    ? `https://api.apiflash.com/v1/urltoimage?access_key=${apiflashKey}&url=${url}&format=png&width=1500&height=788&ttl=86400&wait_until=network_idle&no_tracking=true`
+    : 'https://api.apiflash.com/v1/urltoimage?access_key=02a837b6188f4ba0a7fd9fbeff03a83e&url=https://retypeset.radishzz.cc&format=png&width=1500&height=788&ttl=86400&wait_until=network_idle&no_tracking=true'
 ---
 <head>
 <!-- Basic info -->

src/pages/[...posts_slug].astro

@@ -129,7 +129,7 @@ function getTagUrl(tagName: string): string {
 
     <!-- Date -->
     <div
-      class="mb-17 block c-primary font-time"
+      class="mb-16.8 block c-primary font-time"
       transition:name={`time-${post.data.abbrlink || post.slug}-${lang}`}
       data-disable-transition-on-theme
     >

src/types/index.d.ts

@@ -61,6 +61,7 @@ export interface ThemeConfig {
       feedID?: string
       userID?: string
     }
+    apiflashKey?: string
   }
 
   footer: {