Skip to content

Commit fcf300f

Browse files
PhilDLPhilDL
committed
og image and meta title, description
1 parent 845f2c5 commit fcf300f

File tree

11 files changed

+37
-14
lines changed

11 files changed

+37
-14
lines changed

‎apps/webapp/app/env.server.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export function getEnv() {
2828
return {
2929
MODE: process.env.NODE_ENV,
3030
ALLOW_INDEXING: process.env.ALLOW_INDEXING,
31+
APP_URL: process.env.APP_URL,
3132
};
3233
}
3334

‎apps/webapp/app/root.tsx‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
1-
import type { LinksFunction, MetaFunction } from "react-router";
2-
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
1+
import type { LinksFunction } from "react-router";
2+
import {
3+
data,
4+
Links,
5+
Meta,
6+
Outlet,
7+
Scripts,
8+
ScrollRestoration,
9+
useLoaderData,
10+
} from "react-router";
311

12+
import type { Route } from "./+types/root";
13+
import { getEnv } from "./env.server";
414
import fontStylesheet from "./styles/fonts.css?url";
515
import tailwindStylesheetUrl from "./styles/tailwind.css?url";
616

@@ -11,23 +21,31 @@ export const links: LinksFunction = () => {
1121
];
1222
};
1323

14-
export const meta: MetaFunction = () => {
15-
return [
16-
{ charset: "utf-8" },
17-
{ title: "React Router Gospel Stack" },
18-
{ viewport: "width=device-width,initial-scale=1" },
19-
];
24+
export const loader = async (_args: Route.LoaderArgs) => {
25+
return data({
26+
ENV: getEnv(),
27+
});
2028
};
2129

2230
export default function App() {
31+
const { ENV } = useLoaderData<typeof loader>();
2332
return (
2433
<html lang="en">
2534
<head>
35+
<meta charSet="utf-8" />
36+
<meta name="viewport" content="width=device-width, initial-scale=1" />
2637
<Meta />
2738
<Links />
2839
</head>
2940
<body>
3041
<Outlet />
42+
{ENV && (
43+
<script
44+
dangerouslySetInnerHTML={{
45+
__html: `window.ENV = ${JSON.stringify(ENV)}`,
46+
}}
47+
/>
48+
)}
3149
<ScrollRestoration />
3250
<Scripts />
3351
</body>

‎apps/webapp/app/routes/_index.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ export const loader = async ({
3737

3838
export default function Index() {
3939
const { users } = useLoaderData<typeof loader>();
40+
const ogImageUrl = new URL(
41+
"/og-image.png",
42+
ENV.APP_URL ?? "http://localhost:5173",
43+
).toString();
4044

4145
const hasUsers = users.length > 0;
4246

@@ -51,6 +55,9 @@ export default function Index() {
5155
name="keywords"
5256
content="React Router, Gospel Stack, Monorepo, Turborepo, Tailwind CSS, Shadcn/UI, Drizzle, Prisma, PostgreSQL, Turso"
5357
/>
58+
<meta property="og:image" content={ogImageUrl} />
59+
<meta property="og:image:url" content={ogImageUrl} />
60+
<meta property="og:image:alt" content="React Router Gospel Stack" />
5461
<div className="relative sm:pt-8 sm:pb-16">
5562
<HeroSection />
5663
<div className="mx-auto mt-12 max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
@@ -562,12 +569,8 @@ cd my-app`,
562569
{
563570
id: "generate-env",
564571
title: "Set up your stack",
565-
description: (
566-
<p>
567-
When you are in your project folder, install the dependencies and run
568-
the setup script.
569-
</p>
570-
),
572+
description:
573+
"When you are in your project folder, install the dependencies and run the setup script.",
571574
command: "pnpm install && pnpm run setup",
572575
commandExplainer: (
573576
<div className="flex flex-col gap-2">

‎apps/webapp/public/android-chrome-192x192.png‎

19.7 KB
Loading

‎apps/webapp/public/android-chrome-512x512.png‎

60.8 KB
Loading

‎apps/webapp/public/apple-touch-icon.png‎

17.7 KB
Loading

‎apps/webapp/public/favicon-16x16.png‎

811 Bytes
Loading

‎apps/webapp/public/favicon-32x32.png‎

2.01 KB
Loading

‎apps/webapp/public/favicon.ico‎

-1.52 KB
Binary file not shown.

‎apps/webapp/public/og-image.png‎

438 KB
Loading

0 commit comments

Comments
 (0)