diff --git a/docs/.vitepress/hooks/opengraph.ts b/docs/.vitepress/hooks/opengraph.ts index a9473dea2..f86e52902 100644 --- a/docs/.vitepress/hooks/opengraph.ts +++ b/docs/.vitepress/hooks/opengraph.ts @@ -6,6 +6,7 @@ import type { ContentData, SiteConfig } from 'vitepress' import { type SatoriOptions, satoriVue } from 'x-satori/vue' import { renderAsync } from '@resvg/resvg-js' import consola from 'consola' +import { headers } from '../transformer' const __dirname = dirname(fileURLToPath(import.meta.url)) const __fonts = resolve(__dirname, '../fonts') @@ -67,19 +68,29 @@ async function generateImage({ }: GenerateImagesOptions): Promise { const { frontmatter, url } = page + const _page = getPage(url) + const title = + frontmatter.layout === 'home' + ? frontmatter.hero.name ?? frontmatter.title + : frontmatter.title + ? frontmatter.title + : _page?.title + + const description = + frontmatter.layout === 'home' + ? frontmatter.hero.tagline ?? frontmatter.description + : frontmatter.description + ? frontmatter.description + : _page?.description + + consola.info(url, title, description) 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 + title, + description } } @@ -94,3 +105,20 @@ async function generateImage({ await writeFile(outputFile, render.asPng()) } + +function getPage(page: string) { + // Get the page name + const pageName = `${page}.md`.slice(1).split('/').at(-1) + + // Find the header + // TODO: This is a hacky way to find the header + const header = Object.entries(headers).find(([key]) => key === pageName) + if (!header) return + + const { title, description } = header[1] + + return { + title, + description + } +} diff --git a/docs/.vitepress/transformer.ts b/docs/.vitepress/transformer.ts index c89f7d1e8..6f1f56bb0 100644 --- a/docs/.vitepress/transformer.ts +++ b/docs/.vitepress/transformer.ts @@ -2,10 +2,10 @@ import { basename } from 'pathe' import type { Plugin } from 'vitepress' interface Header { - [key: string]: { title: string; description: string } + [file: string]: { title: string; description: string } } -const headers: Header = { +export const headers: Header = { 'adblockvpnguide.md': { title: 'Adblocking / Privacy', description: "Adblocking, Privacy, VPN's, Proxies, Antivirus" @@ -118,7 +118,7 @@ const headers: Header = { title: 'Unsafe Sites', description: 'Unsafe/harmful sites to avoid.' } -} +} as const const excluded = ['readme.md', 'single-page', 'feedback.md', 'index.md'] @@ -374,7 +374,7 @@ function transformLinks(text: string): string { /\[GitHub\]\(([^\)]*?)\)/gm, '
' ) - // Fallback + // Fallback for GitHub .replace( /\[Github\]\(([^\)]*?)\)/gm, '
' @@ -384,7 +384,7 @@ function transformLinks(text: string): string { /\[GitLab\]\(([^\)]*?)\)/gm, '
' ) - // Fallback + // Fallback for GitLab .replace( /\[Gitlab\]\(([^\)]*?)\)/gm, '
' @@ -397,7 +397,7 @@ function transformLinks(text: string): string { // Transform Subreddit links to icons .replace( /\[Subreddit\]\(([^\)]*?)\)/gm, - '
' + '
' ) return _text } diff --git a/docs/posts.md b/docs/posts.md index 38c89e35d..c8b60835c 100644 --- a/docs/posts.md +++ b/docs/posts.md @@ -1,4 +1,6 @@ --- +title: Posts +description: All our posts, sorted by date. sidebar: false editLink: false outline: false diff --git a/unocss.config.ts b/unocss.config.ts index 012a4ffeb..c20cdc879 100644 --- a/unocss.config.ts +++ b/unocss.config.ts @@ -23,7 +23,6 @@ export default defineConfig({ div: 'var(--vp-c-divider)' } }, - shortcuts, presets: [ presetUno(), presetAttributify(),