wip

vikejs · Apr 12, 2024 · 37f7d05 · 37f7d05
1 parent 3bcb330
commit 37f7d05
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 1 deletion.
diff --git a/examples/full/pages/+config.ts b/examples/full/pages/+config.ts
@@ -8,7 +8,9 @@ import vikeReact from 'vike-react/config'
 // Default configs (can be overridden by pages)
 const config = {
   // <title>
-  title: 'My Vike + React App',
+  document: {
+    title: 'My Vike + React App',
+  },
   Head: HeadDefault,
   // https://vike.dev/Layout
   Layout: LayoutDefault,

diff --git a/packages/vike-react/src/+config.ts b/packages/vike-react/src/+config.ts
@@ -58,6 +58,10 @@ export default {
     // Vike already defines the setting 'name', but we redundantly define it here for older Vike versions (otherwise older Vike versions will complain that 'name` is an unknown config).
     name: {
       env: { config: true }
+    },
+    document: {
+      env: { client: true, server: true },
+      cumulative: true
     }
   }
 } satisfies Config
diff --git a/packages/vike-react/src/renderer/onRenderHtml.tsx b/packages/vike-react/src/renderer/onRenderHtml.tsx
@@ -9,6 +9,8 @@ import { getPageElement } from './getPageElement.js'
 import { PageContextProvider } from '../hooks/usePageContext.js'
 import React from 'react'
 import type { OnRenderHtmlAsync } from 'vike/types'
+import type { Document } from '../types/Config.js'
+
 
 checkVikeVersion()
 
@@ -17,6 +19,9 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
   const favicon = getHeadSetting('favicon', pageContext)
   const lang = getHeadSetting('lang', pageContext) || 'en'
 
+  const documentData = (pageContext.config.document as any as Document[])
+  console.log('documentData', documentData)
+
   const titleTag = !title ? '' : escapeInject`<title>${title}</title>`
   const faviconTag = !favicon ? '' : escapeInject`<link rel="icon" href="${favicon}" />`
 

diff --git a/packages/vike-react/src/types/Config.ts b/packages/vike-react/src/types/Config.ts
@@ -27,6 +27,8 @@ declare global {
        */
       Wrapper?: (props: { children: React.ReactNode }) => React.ReactNode
 
+      document?: Document
+
       /** &lt;title>${title}&lt;/title> */
       title?: string
 
@@ -70,3 +72,107 @@ declare global {
     }
   }
 }
+
+// TODO: remove
+export type { Document }
+
+// TODO:
+//  - viewport default
+//  - locale default
+//  - <meta property="og:type" content="website">
+//  - icon large, small, ...
+//  - preview images with different sizes?
+//  - dir? https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
+//  - Can lang be set to en-US instead of en?
+type Document = {
+  title?: string
+  description?: string
+  viewport?: string | null
+  /**
+   *
+   *  <html lang="en">
+   *  <meta property="og:locale" content="en_GB">
+   *
+   */
+  locale?: string
+
+  htmlTagAttributes?: Record<string, string>
+  bodyTagAttributes?: Record<string, string>
+  rootTagAttributes?: Record<string, string>
+
+  /** Website icon (aka favicon).
+   *
+   *   <link rel="icon" href="/favicon.ico">
+   *  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+   */
+  icon?:
+    | string
+    | {
+        url: string
+        sizes?: string
+        apple?: boolean
+      }[]
+
+  /**
+   * Preview image for social sharing.
+   *
+   * <meta property="og:image" content="https://vitejs.dev/og-image.png">
+   * <meta name="twitter:card" content="summary_large_image">
+   */
+  previewImage?:
+    | string
+    | {
+        url: string
+        // <meta name="twitter:card" content="summary_large_image">
+        size?: 'summary_large_image' | '??'
+        alt?: string
+      }
+
+  // <meta name="twitter:site" content="@vite_js">
+  twitter?: string
+
+  /**
+   * Canonical URL.
+   *
+   * <meta property="og:url" content="https://www.mywebsite.com/page">
+   * <link rel="canonical" href="https://www.mywebsite.com/page">
+   */
+  canonical?: string
+
+  /**
+   * The web manifest URL.
+   *
+   *   `<link rel="manifest" href="${document.manifest}">`
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/Manifest
+   * https://vike.dev/document
+   */
+  manifest?: string
+
+  /**
+   * The UI frame color for mobile.
+   *
+   * `<meta name="theme-color" content="${document.themeColor}">`
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+   * https://vike.dev/document
+   */
+  themeColor?:
+    | string
+    | {
+        /**
+         * `<meta name="theme-color" content="${document.themeColor.dark}" media="(prefers-color-scheme: dark)">`
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
+         * https://vike.dev/document
+         */
+        dark: string
+        /**
+         * `<meta name="theme-color" content="${document.themeColor.light}" media="(prefers-color-scheme: light)">`
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
+         * https://vike.dev/document
+         */
+        light: string
+      }
+}