reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 03:32:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
radishzzz 2025-03-16 14:41:51 +00:00
parent 30febfef22
commit a073ea47bd
6 changed files with 19 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/config.ts
View file

@ -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

8
src/layouts/Head.astro
View file

@ -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 -->

2
src/pages/[...posts_slug].astro
View file

@ -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
>

1
src/types/index.d.ts vendored
View file

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