My landing page, written in Astro
hayden.moe
feat: meta for posts
+33
-2
+32
-1
src/app/routes/posts.$rkey.tsx
+32
-1
src/app/routes/posts.$rkey.tsx
···
1
-
import { json, LoaderFunctionArgs } from '@remix-run/cloudflare';
1
+
import { json, LoaderFunctionArgs, MetaFunction } from '@remix-run/cloudflare';
2
2
import { useLoaderData } from '@remix-run/react';
3
3
import { getPost } from 'src/atproto/getPost';
4
4
import { WhtwndBlogEntryView } from 'src/types';
5
5
import { FormattedDate } from '../components/formatted-date';
6
6
import Markdown from 'react-markdown';
7
+
8
+
export const meta: MetaFunction<typeof loader> = ({ data }) => {
9
+
if (data) {
10
+
const desc = data.post.content?.slice(0, 100).trimEnd();
11
+
const url = `https://hayden.moe/${data.post.rkey}`;
12
+
13
+
return [
14
+
// HTML Meta
15
+
{ title: data.post.title },
16
+
{ name: 'description', content: desc },
17
+
18
+
// OG Meta
19
+
{ property: 'og:url', content: url },
20
+
{ property: 'og:type', content: 'website' },
21
+
{ property: 'og:title', content: data.post.title },
22
+
{ property: 'og:description', content: desc },
23
+
24
+
// Twitter Meta
25
+
{ name: 'twitter:card', content: 'summary_large_image' },
26
+
{ property: 'twitter:domain', content: 'hayden.moe' },
27
+
{ property: 'twitter:url', content: url },
28
+
{ name: 'twitter:title', content: data.post.title },
29
+
{ name: 'twitter:description', content: desc },
30
+
];
31
+
} else {
32
+
return [
33
+
{ title: 'Not found' },
34
+
{ name: 'description', content: "This post doesn't exist!" },
35
+
];
36
+
}
37
+
}
7
38
8
39
export const loader = async ({ params, context }: LoaderFunctionArgs) => {
9
40
const { rkey } = params;