chore: add social tags

Author: mduthey

frontends/catalog/.env.example

@@ -1,3 +1,4 @@
 REGISTRY_ENDPOINT=
 BETA_SCRIPT_DEPLOYMENT_ID=
-BETA_API_KEY=
+BETA_API_KEY=
+VITE_PUBLIC_URL=https://supernode.store

frontends/catalog/Dockerfile

@@ -11,6 +11,7 @@ RUN pnpm install --frozen-lockfile
 FROM base AS build
 COPY --from=dev-deps /app/node_modules ./node_modules
 COPY . .
+ENV VITE_PUBLIC_URL="https://supernode.store"
 RUN pnpm build
 
 FROM base AS prod-deps
@@ -23,5 +24,6 @@ WORKDIR /app
 COPY --from=prod-deps /app/node_modules ./node_modules
 COPY package.json pnpm-lock.yaml ./
 COPY --from=build /app/.output ./
+ENV VITE_PUBLIC_URL="https://supernode.store"
 EXPOSE 3000
 CMD ["node", "server/index.mjs"]

frontends/catalog/public/images/social/banner.jpg

@@ -14,6 +14,9 @@ import { TanStackDevtools } from '@tanstack/react-devtools';
 import { Header } from '~/components/Header';
 import { Banner } from '~/components/ui/Banner';
 
+// Utils
+import { generateSocialMetadata } from '~/utils/social';
+
 import appCss from '~/styles.css?url';
 
 export const Route = createRootRouteWithContext<{
@@ -29,8 +32,18 @@ export const Route = createRootRouteWithContext<{
         content: 'width=device-width, initial-scale=1',
       },
       {
-        title: 'SuperNode Catalog',
+        title: 'SuperNode',
+      },
+      {
+        name: 'description',
+        content: 'Supercharge your blockchain infrastructure',
       },
+      ...generateSocialMetadata(
+        'SuperNode',
+        'Supercharge your blockchain infrastructure',
+        `${import.meta.env.VITE_PUBLIC_URL}/images/social/banner.jpg`,
+        import.meta.env.VITE_PUBLIC_URL,
+      ),
     ],
     links: [
       { rel: 'stylesheet', href: appCss },

frontends/catalog/src/routes/__root.tsx

@@ -0,0 +1,15 @@
+export function generateSocialMetadata(title: string, description: string, imageUrl: string, pageUrl?: string) {
+  if (!pageUrl) {
+    return [];
+  }
+  return [
+    { property: 'og:title', content: title },
+    { property: 'og:description', content: description },
+    { property: 'og:image', content: imageUrl },
+    { property: 'og:url', content: pageUrl },
+    { name: 'twitter:title', content: title },
+    { name: 'twitter:description', content: description },
+    { name: 'twitter:image', content: imageUrl },
+    { name: 'twitter:url', content: pageUrl },
+  ];
+}