Skip to content

Commit e0b698e

Browse files
Thechi2000Thechi2000
authored
feat: add og properties for preview (#55)
1 parent 022d612 commit e0b698e

File tree

6 files changed

+74
-10
lines changed

6 files changed

+74
-10
lines changed

‎app/src/components/TabTitle.tsx

+19-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,27 @@
11
import Head from "next/head";
22

3-
export default function TabTitle(props: { title: string }) {
3+
export default function TabTitle(props: {
4+
title: string;
5+
ogTitle?: string;
6+
type?: string;
7+
image?: string;
8+
description?: string;
9+
}) {
410
return (
511
<Head>
612
<title>{`CLIC | ${props.title}`}</title>
13+
<meta property="og:title" content={props.ogTitle || props.title} />
14+
<meta property="og:type" content={props.type || "website"} />
15+
{typeof props.image === "string" ? (
16+
<meta property="og:image" content={props.image} />
17+
) : (
18+
<></>
19+
)}
20+
{typeof props.description === "string" ? (
21+
<meta property="og:description" content={props.description} />
22+
) : (
23+
<></>
24+
)}
725
</Head>
826
);
927
}

‎app/src/directus.ts

+17-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { TranslationTable, getTranslation } from "./locales";
22
import { Association, Commission, SocialLink } from "./types/aliases";
3-
import { Schema } from "./types/schema";
3+
import { Schema, components } from "./types/schema";
44
import {
55
createDirectus,
66
readItems,
@@ -140,3 +140,19 @@ export function cleanTranslations<T extends { [key: string]: any }>(
140140
return rec(await f(context), context.locale);
141141
};
142142
}
143+
144+
/**
145+
* Computes the full URL to access an image returned by the Directus instance,
146+
* or `undefined` if no image is given.
147+
* @param image the image object returned by directus
148+
* @returns the full URL of the image, if any
149+
*/
150+
export function getDirectusImageUrl(
151+
image: string | components["schemas"]["Files"] | null | undefined
152+
): string | undefined {
153+
return image
154+
? `${DIRECTUS_URL}/assets/${
155+
typeof image === "string" ? image : image.filename_disk
156+
}`
157+
: undefined;
158+
}

‎app/src/pages/association.tsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import AssociationDescription from "@/components/AssociationDescription";
22
import PoleDescription from "@/components/PoleDescription";
33
import TabTitle from "@/components/TabTitle";
4-
import { directus, populateLayoutProps } from "@/directus";
4+
import { directus, getDirectusImageUrl, populateLayoutProps } from "@/directus";
55
import {
66
capitalize,
77
getTranslation,
@@ -48,7 +48,14 @@ export default function AssociationPage(
4848

4949
return (
5050
<div className={styles.main}>
51-
<TabTitle title={capitalize(tt["association"])} />
51+
<TabTitle
52+
title={capitalize(tt["association"])}
53+
ogTitle={props.association.name || undefined}
54+
description={tt["slogan"]}
55+
image={getDirectusImageUrl(
56+
getTranslation(props.association, router.locale).banner
57+
)}
58+
/>
5259

5360
<div className={styles.center}>
5461
<AssociationDescription

‎app/src/pages/commissions/[slug].tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import DirectusImage from "@/components/DirectusImage";
22
import MembersList from "@/components/MembersList";
33
import SocialsList from "@/components/SocialsList";
44
import TabTitle from "@/components/TabTitle";
5-
import { LayoutProps, directus, populateLayoutProps } from "@/directus";
5+
import {
6+
LayoutProps,
7+
directus,
8+
getDirectusImageUrl,
9+
populateLayoutProps,
10+
} from "@/directus";
611
import { getTranslation, locale, queryTranslations } from "@/locales";
712
import markdownStyle from "@/styles/Markdown.module.scss";
813
import styles from "@/styles/Page.module.scss";
@@ -25,7 +30,11 @@ export default function Page(
2530

2631
return (
2732
<div className={styles.main}>
28-
<TabTitle title={props.commission.name || ""} />
33+
<TabTitle
34+
title={props.commission.name || ""}
35+
description={translation.small_description || undefined}
36+
image={getDirectusImageUrl(translation.banner)}
37+
/>
2938

3039
<div className={styles.center}>
3140
<DirectusImage

‎app/src/pages/index.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,12 @@ import NewsCard from "@/components/NewsCard";
1010
import PartnersList from "@/components/PartnersList";
1111
import SocialsList from "@/components/SocialsList";
1212
import TabTitle from "@/components/TabTitle";
13-
import { LayoutProps, directus, populateLayoutProps } from "@/directus";
13+
import {
14+
LayoutProps,
15+
directus,
16+
getDirectusImageUrl,
17+
populateLayoutProps,
18+
} from "@/directus";
1419
import {
1520
getTranslation,
1621
queryTranslations,
@@ -55,7 +60,12 @@ export default function Home(
5560

5661
return (
5762
<>
58-
<TabTitle title={tt["slogan"]} />
63+
<TabTitle
64+
title={tt["slogan"]}
65+
ogTitle={props.association.name || undefined}
66+
description={tt["slogan"]}
67+
image={getDirectusImageUrl(translation.banner)}
68+
/>
5969
<Background className={styles.background} name="background" />
6070
<div className={styles.divLogo}>
6171
<DirectusImage

‎app/src/pages/news/[slug].tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import CommissionCard from "@/components/CommissionCard";
22
import DirectusImage from "@/components/DirectusImage";
33
import TabTitle from "@/components/TabTitle";
4-
import { directus, populateLayoutProps } from "@/directus";
4+
import { directus, getDirectusImageUrl, populateLayoutProps } from "@/directus";
55
import {
66
capitalize,
77
formatDate,
@@ -26,7 +26,11 @@ export default function Page(
2626

2727
return (
2828
<div className={styles.main}>
29-
<TabTitle title={translation.title || ""} />
29+
<TabTitle
30+
title={translation.title || ""}
31+
description={translation.description}
32+
image={getDirectusImageUrl(translation.banner)}
33+
/>
3034

3135
<div className={styles.center}>
3236
<DirectusImage

0 commit comments

Comments
 (0)