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

vikejs · Aug 2, 2024 · 8ff1b6f · 8ff1b6f
1 parent a0ce8d4
commit 8ff1b6f
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 1 deletion.
diff --git a/vike-solid/+config.ts b/vike-solid/+config.ts
@@ -33,6 +33,9 @@ export default {
     title: {
       env: { server: true, client: true },
     },
+    description: {
+      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" | "favicon" | "lang",
+  headSetting: "title" | "description" | "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
@@ -16,9 +16,13 @@ checkVikeVersion();
 const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRenderHtmlAsync> => {
   const title = getHeadSetting("title", pageContext);
   const favicon = getHeadSetting("favicon", pageContext);
+  const description = getHeadSetting("description", 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 Head = pageContext.config.Head || (() => <></>);
   const head = renderToString(() => (
@@ -51,6 +55,7 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
         ${titleTag}
         ${headHtml}
         ${faviconTag}
+        ${descriptionTags}
         ${dangerouslySkipEscape(generateHydrationScript())}
       </head>
       <body${dangerouslySkipEscape(bodyAttributesString)}>

diff --git a/vike-solid/types/Config.ts b/vike-solid/types/Config.ts
@@ -2,6 +2,7 @@
 import type { Component, JSX } from "solid-js";
 
 import type {
+  PageContextServer,
   // Rename it to `PageContext_` to be able to reference it from within `namespace Vike`
   // - https://stackoverflow.com/questions/46559021/typescript-use-of-global-type-inside-namespace-with-same-type
   // - https://github.com/Microsoft/TypeScript/issues/983
@@ -30,6 +31,21 @@ declare global {
       /** <title>${title}</title> */
       title?: string | ((pageContext: PageContext_) => string);
 
+      /**
+       * Set the page's description.
+       *
+       * Generates:
+       * ```jsx
+       * <head>
+       *   <meta name="description" content={description}>
+       *   <meta property="og:description" content={description}>
+       * </head>
+       * ```
+       *
+       * https://vike.dev/description
+       */
+      description?: string | ((pageContext: PageContextServer) => string);
+
       /** <link rel="icon" href="${favicon}" /> */
       favicon?: string;