Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-10-31 02:27:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add head details for collections

Browse Source
This commit is contained in:
Zoe Roux 2023-11-04 22:29:41 +01:00
parent 9084a78420
commit d73a37fbed
4 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/packages/primitives/src/utils/head.tsx
View File

@ -21,9 +21,11 @@
export const Head = ({
title,
description,
image,
}: {
title?: string | null;
description?: string | null;
image?: string | null;
}) => {
return null;
};

3
front/packages/primitives/src/utils/head.web.tsx
View File

@ -23,14 +23,17 @@ import NextHead from "next/head";
export const Head = ({
title,
description,
image,
}: {
title?: string | null;
description?: string | null;
image?: string | null;
}) => {
return (
<NextHead>
{title && <title>{title + " - Kyoo"}</title>}
{description && <meta name="description" content={description} />}
{image && <meta property="og:image" content={image} />}
</NextHead>
);
};

4
front/packages/ui/src/collection/index.tsx
View File

@ -29,7 +29,7 @@ import {
getDisplayDate,
} from "@kyoo/models";
import { Header as ShowHeader, TitleLine } from "../details/header";
import { Container, ImageBackground, P, Skeleton, ts } from "@kyoo/primitives";
import { Container, Head, ImageBackground, P, Skeleton, ts } from "@kyoo/primitives";
import { percent, px, useYoshiki } from "yoshiki/native";
import { useTranslation } from "react-i18next";
import { forwardRef } from "react";
@ -48,6 +48,8 @@ const Header = ({ slug }: { slug: string }) => {
<Fetch query={Header.query(slug)}>
{({ isLoading, ...data }) => (
<>
<Head title={data?.name} description={data?.overview} image={data?.thumbnail?.high} />
<ImageBackground
src={data?.thumbnail}
quality="high"

2
front/packages/ui/src/details/header.tsx
View File

@ -386,7 +386,7 @@ export const Header = ({
<Fetch query={query}>
{({ isLoading, ...data }) => (
<>
<Head title={data?.name} description={data?.overview} />
<Head title={data?.name} description={data?.overview} image={data?.thumbnail?.high} />
<ImageBackground
src={data?.thumbnail}
quality="high"