Add some basic json-ld

dcramer · Jan 30, 2025 · 7d93578 · 7d93578
1 parent 87f2721
commit 7d93578
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 0 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -45,6 +45,7 @@
     "react-leaflet": "^4.2.1",
     "react-qr-code": "^2.0.15",
     "recharts": "^2.15.0",
+    "schema-dts": "^1.1.2",
     "superjson": "catalog:",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",

diff --git a/apps/web/src/app/(default)/bottles/[bottleId]/layout.tsx b/apps/web/src/app/(default)/bottles/[bottleId]/layout.tsx
@@ -4,9 +4,11 @@ import CollectionAction from "@peated/web/components/collectionAction";
 import FlavorProfile from "@peated/web/components/flavorProfile";
 import ShareButton from "@peated/web/components/shareButton";
 import SkeletonButton from "@peated/web/components/skeletonButton";
+import { summarize } from "@peated/web/lib/markdown";
 import { getTrpcClient } from "@peated/web/lib/trpc/client.server";
 import { redirect } from "next/navigation";
 import { Suspense, type ReactNode } from "react";
+import type { Product, WithContext } from "schema-dts";
 import ModActions from "./modActions";
 
 export default async function Layout({
@@ -30,8 +32,40 @@ export default async function Layout({
     return redirect(`/bottles/${bottle.id}/`);
   }
 
+  const jsonLd: WithContext<Product> = {
+    "@context": "https://schema.org",
+    "@type": "Product",
+    name: bottle.fullName,
+    image: bottle.imageUrl ?? undefined,
+    description: summarize(bottle.description || "", 200),
+    brand: {
+      "@type": "Brand",
+      name: bottle.brand?.name,
+    },
+    aggregateRating: bottle.totalTastings
+      ? {
+          "@type": "AggregateRating",
+          ratingValue: bottle.avgRating ?? 0,
+          reviewCount: bottle.totalTastings ?? 0,
+        }
+      : undefined,
+    offers: bottle.lastPrice
+      ? {
+          "@type": "AggregateOffer",
+          offerCount: 1,
+          lowPrice: bottle.lastPrice?.price,
+          highPrice: bottle.lastPrice?.price,
+          priceCurrency: bottle.lastPrice?.currency,
+        }
+      : undefined,
+  };
+
   return (
     <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
       <div className="w-full p-3 lg:py-0">
         <BottleHeader bottle={bottle} />
 

diff --git a/apps/web/src/app/(default)/entities/[entityId]/layout.tsx b/apps/web/src/app/(default)/entities/[entityId]/layout.tsx
@@ -4,6 +4,7 @@ import ShareButton from "@peated/web/components/shareButton";
 import { getTrpcClient } from "@peated/web/lib/trpc/client.server";
 import { redirect } from "next/navigation";
 import { type ReactNode } from "react";
+import type { Organization, WithContext } from "schema-dts";
 import ModActions from "./modActions";
 
 export default async function Layout({
@@ -27,8 +28,29 @@ export default async function Layout({
     return redirect(`/entities/${entity.id}/`);
   }
 
+  const jsonLd: WithContext<Organization> = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: entity.name,
+    description: entity.description ?? undefined,
+    // url: `/entities/${entity.id}`,
+    address: entity.country
+      ? [
+          {
+            "@type": "PostalAddress",
+            streetAddress: entity.address ?? undefined,
+            addressCountry: entity.country.name ?? undefined,
+          },
+        ]
+      : [],
+  };
+
   return (
     <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
       <div className="w-full p-3 lg:py-0">
         <EntityHeader entity={entity} />
 

diff --git a/apps/web/src/app/(default)/users/[username]/layout.tsx b/apps/web/src/app/(default)/users/[username]/layout.tsx
@@ -9,6 +9,7 @@ import UserTagDistribution from "@peated/web/components/userTagDistribution";
 import { getCurrentUser } from "@peated/web/lib/auth.server";
 import { getTrpcClient } from "@peated/web/lib/trpc/client.server";
 import { type ReactNode } from "react";
+import type { ProfilePage, WithContext } from "schema-dts";
 import FriendButton from "./friendButton";
 import LogoutButton from "./logoutButton";
 import ModActions from "./modActions";
@@ -34,8 +35,23 @@ export default async function Layout({
     user.id !== currentUser.id &&
     user.friendStatus !== "friends";
 
+  const jsonLd: WithContext<ProfilePage> = {
+    "@context": "https://schema.org",
+    "@type": "ProfilePage",
+    mainEntity: {
+      "@type": "Person",
+      name: user.username,
+      image: user.pictureUrl ?? undefined,
+      identifier: `${user.id}`,
+    },
+  };
+
   return (
     <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
       <div className="mb-4 flex min-w-full flex-wrap gap-y-4 lg:mb-8 lg:flex-nowrap">
         <div className="flex w-full justify-center lg:w-auto lg:justify-start">
           <UserAvatar user={user} size={150} />

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml