feat: update metadata

renderer/+onRenderClient.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom/client";
-import { getPageMetadata } from "./utils";
+import { getPageTitle } from "./utils";
 import type { OnRenderClientAsync } from "vike/types";
 import Layout from "./app";
 
@@ -33,6 +33,5 @@ export const onRenderClient: OnRenderClientAsync = async (
     root.render(page);
   }
 
-  const meta = getPageMetadata(pageContext);
-  document.title = meta.title;
+  document.title = getPageTitle(pageContext);
 };

renderer/+onRenderHtml.tsx

@@ -21,7 +21,7 @@ export const onRenderHtml: OnRenderHtmlAsync = async (
   );
 
   // See https://vike.dev/head
-  const meta = getPageMetadata(pageContext);
+  const metadata = getPageMetadata(pageContext);
 
   const documentHtml = escapeInject`<!DOCTYPE html>
     <html lang="en" class="dark">
@@ -29,8 +29,7 @@ export const onRenderHtml: OnRenderHtmlAsync = async (
         <meta charset="UTF-8" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="description" content="${meta.description}" />
-        <title>${meta.title}</title>
+        ${dangerouslySkipEscape(metadata)}
       </head>
       <body>
         <div id="react-root">${dangerouslySkipEscape(page)}</div>

renderer/types.ts

@@ -8,6 +8,7 @@ declare global {
       data?: {
         title?: string;
         description?: string;
+        ogImage?: string;
       };
       config: {
         title?: string;

renderer/utils.ts

@@ -1,13 +1,40 @@
 import type { PageContext } from "vike/types";
+import { BASE_URL } from "~/lib/consts";
 
-export function getPageMetadata(pageContext: PageContext) {
+export function getPageTitle(pageContext: PageContext) {
   let title = pageContext.data?.title || pageContext.config.title;
   title = title ? `${title} - CodeShare` : "Welcome to CodeShare";
 
+  return title;
+}
+
+export function getPageMetadata(pageContext: PageContext) {
+  const canonicalUrl = BASE_URL + pageContext.req.url;
+  const title = getPageTitle(pageContext);
   const description =
     pageContext.data?.description ||
     pageContext.config.description ||
     "Share your frontend result with everyone";
+  const ogImage = pageContext.data?.ogImage;
 
-  return { title, description };
+  return `
+    <meta name="description" content="${description}" />
+    <title>${title}</title>
+
+    <link rel="canonical" href="${canonicalUrl}" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="${canonicalUrl}" />
+    <meta property="og:title" content="${title}" />
+    <meta property="og:description" content="${description}" />
+    ${ogImage ? `<meta property="og:image" content="${ogImage}" />` : ""}
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="${canonicalUrl}" />
+    <meta property="twitter:title" content="${title}" />
+    <meta property="twitter:description" content="${description}" />
+    ${ogImage ? `<meta property="twitter:image" content="${ogImage}" />` : ""}
+  `.trim();
 }