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

Tweak OG image styling

Browse Source 
Broken, waiting for Alessandro to aid me
This commit is contained in:
Soitora 2023-09-01 14:37:54 +02:00
parent 6f1a88bc00
commit 7922461112
No known key found for this signature in database
GPG Key ID: A6D711EB4F2CCD97
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,6 +75,11 @@ async function generateImage({ page, template, outDir, fonts }: GenerateImagesOp
description: frontmatter.layout === "home" description: 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/"))
? "Guides"
: undefined,
} }
} }

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

@ -1,17 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ title: string; description?: string }>(); defineProps<{ title: string; description?: string; dir?: string }>();
</script> </script>
<template> <template>
<div tw="w-full h-full bg-white flex flex-col"> <div tw="w-full h-full bg-white flex flex-col" style="background:linear-gradient(0deg, rgba(255, 255, 255, 0.98), rgba(231,230,255,0.92)), url(https://tachiyomi-v3-gridsome.netlify.app/background-dark.png);background-position:50%;">
<div tw="py-10 pl-10 pr-64 w-full min-h-0 grow flex flex-col items-center justify-between"> <div tw="py-10 pl-10 pr-64 w-full min-h-0 grow flex flex-col items-center justify-between">
<div tw="w-full flex items-center text-2xl font-medium"> <div tw="w-full flex justify-between items-center text-4xl font-medium">
<svg width="48" height="48" viewBox="0 0 288 288" preserveAspectRatio="xMidYMid meet" fill="#8995FF"><path d="M141.2 36.7l-18.3.3.8 9.8c.4 5.3.8 11.9.8 14.7v5h-41-41l.3 17.9.3 17.9 6.7-.7c15.2-1.4 101.5-1.8 146.2-.7l48 1.6c1.3.4 1.5-2 1.5-17.8V66.5l-38.3.4c-21 .2-39.8 0-41.8-.3l-3.5-.7.3-15c.3-12.8.1-14.9-1.2-14.7-.8.1-9.7.4-19.8.5zm-56.7 76.9c-12.8 5-16 6.7-15.8 8.1.1 1 2.2 7.3 4.7 14 5.8 15.3 12.4 38.4 16.6 57.8l3.5 15.3c.2.2 8.3-2.5 18.2-6l17.9-6.3-1.2-6c-3.5-16.8-24.8-83.6-26.7-83.4-.7.1-8.4 3-17.2 6.5zm93.6 10.1c-10.4 41.7-22.9 83.2-27.1 90.1l-1.9 3.1-17.3.3c-20 .3-91.3-.9-94.3-1.6-1.9-.5-2 0-2 18v18.6l5-.6c2.8-.3 51.8-.9 109-1.2l104-.7v-17.6-17.6l-8.5.7c-4.7.3-19.5.7-32.9.7-19.1.1-24.2-.2-23.8-1.2.3-.6 2.2-5 4.2-9.7 6.5-15.2 29.6-86.3 28.4-87.4-.4-.4-32.6-9.4-36.5-10.3-2-.4-2.4.7-6.3 16.4z"/></svg> <div tw="flex items-center">
<div tw="text-slate-900 ml-2 mt-1 font-semibold">Tachiyomi</div> <svg width="64" height="64" viewBox="0 0 288 288" preserveAspectRatio="xMidYMid meet" fill="#8995FF"><path d="M141.2 36.7l-18.3.3.8 9.8c.4 5.3.8 11.9.8 14.7v5h-41-41l.3 17.9.3 17.9 6.7-.7c15.2-1.4 101.5-1.8 146.2-.7l48 1.6c1.3.4 1.5-2 1.5-17.8V66.5l-38.3.4c-21 .2-39.8 0-41.8-.3l-3.5-.7.3-15c.3-12.8.1-14.9-1.2-14.7-.8.1-9.7.4-19.8.5zm-56.7 76.9c-12.8 5-16 6.7-15.8 8.1.1 1 2.2 7.3 4.7 14 5.8 15.3 12.4 38.4 16.6 57.8l3.5 15.3c.2.2 8.3-2.5 18.2-6l17.9-6.3-1.2-6c-3.5-16.8-24.8-83.6-26.7-83.4-.7.1-8.4 3-17.2 6.5zm93.6 10.1c-10.4 41.7-22.9 83.2-27.1 90.1l-1.9 3.1-17.3.3c-20 .3-91.3-.9-94.3-1.6-1.9-.5-2 0-2 18v18.6l5-.6c2.8-.3 51.8-.9 109-1.2l104-.7v-17.6-17.6l-8.5.7c-4.7.3-19.5.7-32.9.7-19.1.1-24.2-.2-23.8-1.2.3-.6 2.2-5 4.2-9.7 6.5-15.2 29.6-86.3 28.4-87.4-.4-.4-32.6-9.4-36.5-10.3-2-.4-2.4.7-6.3 16.4z"/></svg>
<div tw="text-slate-900 ml-2 mt-1 font-semibold">Tachiyomi</div>
</div>
<div v-if="dir" tw="text-5xl items-center font-bold text-slate-900">{{ dir }}</div>
</div> </div>
<div tw="w-full flex flex-col items-start justify-end"> <div tw="w-full flex flex-col items-start justify-end">
<div tw="text-6xl font-bold text-slate-900">{{ title }}</div> <div tw="text-7xl font-bold text-slate-900">{{ title }}</div>
<div v-if="description" tw="mt-2 text-4xl text-slate-500">{{ description }}</div> <div v-if="description" tw="mt-2 text-5xl text-slate-500">{{ 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;" />