Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-12-21 07:31:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix bad HTML encoding in OG images and add news dir. (#39)

Browse Source
This commit is contained in:
Alessandro Jean 2023-09-09 20:02:54 -03:00 committed by GitHub
parent 9bf67129d3
commit f8d334e6e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
website/src/.vitepress/config/hooks/generateOgImages.ts
View File

@ -61,6 +61,18 @@ interface GenerateImagesOptions {
fonts: SatoriOptions["fonts"] fonts: SatoriOptions["fonts"]
} }
function getDir(url: string) {
if (url.startsWith("/docs/faq/")) {
return "FAQ"
} else if (url.startsWith("/docs/guides/")) {
return "Guide"
} else if (url.startsWith("/news/") && url !== "/news/") {
return "News"
}
return undefined
}
async function generateImage({ page, template, outDir, fonts }: GenerateImagesOptions) { async function generateImage({ page, template, outDir, fonts }: GenerateImagesOptions) {
const { frontmatter, url } = page const { frontmatter, url } = page
@ -77,7 +89,7 @@ async function generateImage({ page, template, outDir, fonts }: GenerateImagesOp
frontmatter.layout === "home" frontmatter.layout === "home"
? frontmatter.hero.tagline ?? frontmatter.description ? frontmatter.hero.tagline ?? frontmatter.description
: frontmatter.description, : frontmatter.description,
dir: url.startsWith("/docs/faq/") ? "FAQ" : url.startsWith("/docs/guides/") ? "Guide" : undefined, dir: getDir(url),
}, },
} }

13
website/src/.vitepress/theme/components/OgImageTemplate.vue
View File

@ -16,20 +16,15 @@ defineProps<{ title: string; description?: string; dir?: string }>()
</div> </div>
</div> </div>
<div v-if="dir" tw="flex items-center text-slate-600"> <div v-if="dir" tw="flex items-center text-slate-600">
<div v-if="dir" tw="text-4xl font-semibold mr-2"> <div v-if="dir" tw="text-4xl font-semibold mr-2" v-html="dir" />
{{ dir }}
</div>
<svg v-if="dir === 'FAQ'" width="48" height="48" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" fill="currentColor"><path d="M18,15H6L2,19V3A1,1 0 0,1 3,2H18A1,1 0 0,1 19,3V14A1,1 0 0,1 18,15M23,9V23L19,19H8A1,1 0 0,1 7,18V17H21V8H22A1,1 0 0,1 23,9M8.19,4C7.32,4 6.62,4.2 6.08,4.59C5.56,5 5.3,5.57 5.31,6.36L5.32,6.39H7.25C7.26,6.09 7.35,5.86 7.53,5.7C7.71,5.55 7.93,5.47 8.19,5.47C8.5,5.47 8.76,5.57 8.94,5.75C9.12,5.94 9.2,6.2 9.2,6.5C9.2,6.82 9.13,7.09 8.97,7.32C8.83,7.55 8.62,7.75 8.36,7.91C7.85,8.25 7.5,8.55 7.31,8.82C7.11,9.08 7,9.5 7,10H9C9,9.69 9.04,9.44 9.13,9.26C9.22,9.08 9.39,8.9 9.64,8.74C10.09,8.5 10.46,8.21 10.75,7.81C11.04,7.41 11.19,7 11.19,6.5C11.19,5.74 10.92,5.13 10.38,4.68C9.85,4.23 9.12,4 8.19,4M7,11V13H9V11H7M13,13H15V11H13V13M13,4V10H15V4H13Z" /></svg> <svg v-if="dir === 'FAQ'" width="48" height="48" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" fill="currentColor"><path d="M18,15H6L2,19V3A1,1 0 0,1 3,2H18A1,1 0 0,1 19,3V14A1,1 0 0,1 18,15M23,9V23L19,19H8A1,1 0 0,1 7,18V17H21V8H22A1,1 0 0,1 23,9M8.19,4C7.32,4 6.62,4.2 6.08,4.59C5.56,5 5.3,5.57 5.31,6.36L5.32,6.39H7.25C7.26,6.09 7.35,5.86 7.53,5.7C7.71,5.55 7.93,5.47 8.19,5.47C8.5,5.47 8.76,5.57 8.94,5.75C9.12,5.94 9.2,6.2 9.2,6.5C9.2,6.82 9.13,7.09 8.97,7.32C8.83,7.55 8.62,7.75 8.36,7.91C7.85,8.25 7.5,8.55 7.31,8.82C7.11,9.08 7,9.5 7,10H9C9,9.69 9.04,9.44 9.13,9.26C9.22,9.08 9.39,8.9 9.64,8.74C10.09,8.5 10.46,8.21 10.75,7.81C11.04,7.41 11.19,7 11.19,6.5C11.19,5.74 10.92,5.13 10.38,4.68C9.85,4.23 9.12,4 8.19,4M7,11V13H9V11H7M13,13H15V11H13V13M13,4V10H15V4H13Z" /></svg>
<svg v-else-if="dir === 'Guide'" width="48" height="48" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" fill="currentColor"><path d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z" /></svg> <svg v-else-if="dir === 'Guide'" width="48" height="48" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" fill="currentColor"><path d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z" /></svg>
<svg v-else-if="dir === 'News'" width="48" height="48" viewBox="0 0 24 24"><path fill="currentColor" d="M20 11H4V8h16m0 7h-7v-2h7m0 6h-7v-2h7m-9 2H4v-6h7m9.33-8.33L18.67 3L17 4.67L15.33 3l-1.66 1.67L12 3l-1.67 1.67L8.67 3L7 4.67L5.33 3L3.67 4.67L2 3v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V3l-1.67 1.67Z" /></svg>
</div> </div>
</div> </div>
<div tw="w-full pr-56 flex flex-col items-start justify-end"> <div tw="w-full pr-56 flex flex-col items-start justify-end">
<div tw="text-6xl font-bold text-slate-900"> <div tw="text-6xl font-bold text-slate-900" v-html="title" />
{{ title }} <div v-if="description" tw="mt-2 text-4xl text-slate-600" v-html="description" />
</div>
<div v-if="description" tw="mt-2 text-4xl text-slate-600">
{{ description }}
</div>
</div> </div>
</div> </div>
<div tw="shrink-0 h-2 w-full flex" style="background-color: #8995ff;" /> <div tw="shrink-0 h-2 w-full flex" style="background-color: #8995ff;" />