feat: new settings [image](https://vike.dev/image)

vikejs · Aug 2, 2024 · 48a0d1f · 48a0d1f
1 parent c9a033a
commit 48a0d1f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 1 deletion.
diff --git a/vike-solid/+config.ts b/vike-solid/+config.ts
@@ -36,6 +36,9 @@ export default {
     description: {
       env: { server: true },
     },
+    image: {
+      env: { server: true },
+    },
     favicon: {
       env: { server: true, client: true },
     },

diff --git a/vike-solid/renderer/getHeadSetting.ts b/vike-solid/renderer/getHeadSetting.ts
@@ -4,7 +4,7 @@ import type { PageContext } from "vike/types";
 import { isCallable } from "../utils/isCallable.js";
 
 function getHeadSetting(
-  headSetting: "title" | "description" | "favicon" | "lang",
+  headSetting: "title" | "description" | "image" | "favicon" | "lang",
   pageContext: PageContext,
 ): undefined | null | string {
   const config = pageContext.configEntries[headSetting]?.[0];

diff --git a/vike-solid/renderer/onRenderHtml.tsx b/vike-solid/renderer/onRenderHtml.tsx
@@ -17,12 +17,16 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
   const title = getHeadSetting("title", pageContext);
   const favicon = getHeadSetting("favicon", pageContext);
   const description = getHeadSetting("description", pageContext);
+  const image = getHeadSetting("image", pageContext);
 
   const titleTag = !title ? "" : escapeInject`<title>${title}</title><meta property="og:title" content="${title}">`;
   const faviconTag = !favicon ? "" : escapeInject`<link rel="icon" href="${favicon}" />`;
   const descriptionTags = !description
     ? ""
     : escapeInject`<meta name="description" content="${description}"><meta property="og:description" content="${description}">`;
+  const imageTags = !image
+    ? ""
+    : escapeInject`<meta property="og:image" content="${image}"><meta name="twitter:card" content="summary_large_image">`;
 
   const Head = pageContext.config.Head || (() => <></>);
   const head = renderToString(() => (
@@ -56,6 +60,7 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
         ${headHtml}
         ${faviconTag}
         ${descriptionTags}
+        ${imageTags}
         ${dangerouslySkipEscape(generateHydrationScript())}
       </head>
       <body${dangerouslySkipEscape(bodyAttributesString)}>

diff --git a/vike-solid/types/Config.ts b/vike-solid/types/Config.ts
@@ -66,6 +66,21 @@ declare global {
        */
       description?: string | ((pageContext: PageContextServer) => string);
 
+      /**
+       * Set the page's preview image upon URL sharing.
+       *
+       * Generates:
+       * ```jsx
+       * <head>
+       *   <meta property="og:image" content={image}>
+       *   <meta name="twitter:card" content="summary_large_image">
+       * </head>
+       * ```
+       *
+       * https://vike.dev/image
+       */
+      image?: string | ((pageContext: PageContextServer) => string);
+
       /**
        * Set the page's favicon.
        *