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 dir alignment and URL for OG images (#12)

Browse Source
This commit is contained in:
Alessandro Jean 2023-09-01 20:36:17 -03:00 committed by GitHub
parent 7922461112
commit 269d9f2509
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
website/src/.vitepress/config/hooks/generateMeta.ts
View File

@ -72,12 +72,16 @@ const generateMeta = (context: TransformContext, hostname: string) => {
const url = pageData.filePath const url = pageData.filePath
.replace("index.md", "") .replace("index.md", "")
.replace(".md", ""); .replace(".md", "");
head.push(["meta", { property: "og:image", content: `${hostname}/${url}__og_image__/og.png` }]); const imageUrl = `${url}/__og_image__/og.png`
.replace(/\/\//g, "/")
.replace(/^\//, "");
head.push(["meta", { property: "og:image", content: `${hostname}/${imageUrl}` }]);
head.push(["meta", { property: "og:image:width", content: "1200" }]); head.push(["meta", { property: "og:image:width", content: "1200" }]);
head.push(["meta", { property: "og:image:height", content: "628" }]); head.push(["meta", { property: "og:image:height", content: "628" }]);
head.push(["meta", { property: "og:image:type", content: "image/png" }]); head.push(["meta", { property: "og:image:type", content: "image/png" }]);
head.push(["meta", { property: "og:image:alt", content: pageData.frontmatter.title }]); head.push(["meta", { property: "og:image:alt", content: pageData.frontmatter.title }]);
head.push(["meta", { name: "twitter:image", content: `${hostname}/${url}__og_image__/og.png` }]); head.push(["meta", { name: "twitter:image", content: `${hostname}/${imageUrl}` }]);
head.push(["meta", { name: "twitter:image:width", content: "1200" }]); head.push(["meta", { name: "twitter:image:width", content: "1200" }]);
head.push(["meta", { name: "twitter:image:height", content: "628" }]); head.push(["meta", { name: "twitter:image:height", content: "628" }]);
head.push(["meta", { name: "twitter:image:alt", content: pageData.frontmatter.title }]); head.push(["meta", { name: "twitter:image:alt", content: pageData.frontmatter.title }]);

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

@ -3,18 +3,21 @@ defineProps<{ title: string; description?: string; dir?: string }>();
</script> </script>
<template> <template>
<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
<div tw="py-10 pl-10 pr-64 w-full min-h-0 grow flex flex-col items-center justify-between"> 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="p-10 w-full min-h-0 grow flex flex-col items-center justify-between">
<div tw="w-full flex justify-between items-center text-4xl font-medium"> <div tw="w-full flex justify-between items-center text-4xl font-medium">
<div tw="flex items-center"> <div tw="flex items-center">
<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> <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 tw="text-slate-900 ml-2 mt-1 font-semibold">Tachiyomi</div>
</div> </div>
<div v-if="dir" tw="text-5xl items-center font-bold text-slate-900">{{ dir }}</div> <div v-if="dir" tw="text-4xl 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 pr-56 flex flex-col items-start justify-end">
<div tw="text-7xl font-bold text-slate-900">{{ title }}</div> <div tw="text-6xl font-bold text-slate-900">{{ title }}</div>
<div v-if="description" tw="mt-2 text-5xl text-slate-500">{{ description }}</div> <div v-if="description" tw="mt-2 text-4xl 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;" />