[removed]

examples/full/.testRun.ts

@@ -1,6 +1,8 @@
 export { testRun };
 
 import { test, expect, run, fetchHtml, page, getServerUrl, autoRetry, partRegex } from "@brillout/test-e2e";
+import assert from "node:assert";
+const dataHk = partRegex`data-hk="${/[0-9-]+/}"`;
 
 let isProd: boolean;
 
@@ -9,23 +11,24 @@ function testRun(cmd: `pnpm run ${"dev" | "preview"}`) {
 
   isProd = cmd !== "pnpm run dev";
 
-  const title = "My Vike + Solid App";
   testUrl({
     url: "/",
-    title,
+    title: "My Vike + Solid App",
     text: "Rendered to HTML.",
     counter: true,
   });
 
   testUrl({
     url: "/star-wars",
     title: "6 Star Wars Movies",
+    description: "All the 6 movies from the Star Wars franchise",
     text: "A New Hope",
   });
 
   testUrl({
     url: "/star-wars/3",
     title: "Return of the Jedi",
+    description: "Star Wars Movie Return of the Jedi from Richard Marquand",
     text: "1983-05-25",
   });
 
@@ -39,6 +42,8 @@ function testRun(cmd: `pnpm run ${"dev" | "preview"}`) {
   });
 
   testNavigationBetweenWithSSRAndWithoutSSR();
+
+  testHeadComponent();
 }
 
 function testNavigationBetweenWithSSRAndWithoutSSR() {
@@ -85,12 +90,14 @@ function testNavigationBetweenWithSSRAndWithoutSSR() {
 function testUrl({
   url,
   title,
+  description,
   text,
   counter,
   noSSR,
 }: {
   url: string;
   title: string;
+  description?: string;
   text: string;
   counter?: true;
   noSSR?: true;
@@ -100,15 +107,12 @@ function testUrl({
     if (!noSSR) {
       expect(html).toContain(text);
     }
+
     expect(getTitle(html)).toBe(title);
-    const hash = /[a-zA-Z0-9_-]+/;
-    const dataHkHash = /[0-9-]+/;
+    expect(html).toMatch(partRegex`<link ${dataHk} rel="icon" href="${getAssetUrl("logo.svg")}">`);
 
-    if (!isProd) {
-      expect(html).toMatch(partRegex`<link data-hk="${dataHkHash}" rel="icon" href="/assets/logo.svg">`);
-    } else {
-      expect(html).toMatch(partRegex`<link data-hk="${dataHkHash}" rel="icon" href="/assets/static/logo.${hash}.svg">`);
-    }
+    if (!description) description = "Demo showcasing Vike + Solid";
+    expect(html).toMatch(partRegex`<meta name="description" content="${description}">`);
   });
   test(url + " (Hydration)", async () => {
     await page.goto(getServerUrl() + url);
@@ -120,6 +124,30 @@ function testUrl({
   });
 }
 
+function testHeadComponent() {
+  test("Head Component (HTML)", async () => {
+    const html = await fetchHtml("/images");
+    expect(html).toMatch(
+      partRegex`<script ${dataHk} type="application/ld+json">{"@context":"https://schema.org/","contentUrl":{"src":"${getAssetUrl(
+        "logo-new.svg",
+      )}"},"creator":{"@type":"Person","name":"brillout"}}</script>`,
+    );
+    expect(html).toMatch(
+      partRegex`<script ${dataHk} type="application/ld+json">{"@context":"https://schema.org/","contentUrl":{"src":"${getAssetUrl(
+        "logo.svg",
+      )}"},"creator":{"@type":"Person","name":"Romuald Brillout"}}</script>`,
+    );
+  });
+  test("Head Component (Hydration)", async () => {
+    await page.goto(getServerUrl() + "/");
+    await testCounter();
+    ensureWasClientSideRouted("/pages/index");
+    await page.click('a:has-text("Head Component")');
+    await testCounter();
+    ensureWasClientSideRouted("/pages/index");
+  });
+}
+
 function getTitle(html: string) {
   const title = html.match(/<title>(.*?)<\/title>/i)?.[1];
   return title;
@@ -161,3 +189,12 @@ function findFirstPageId(html: string) {
   expect(pageId).toBeTruthy();
   return pageId;
 }
+
+function getAssetUrl(fileName: string) {
+  if (!isProd) {
+    return `/assets/${fileName}`;
+  }
+  const [fileBaseName, fileExt, ...r] = fileName.split(".");
+  assert(r.length === 0);
+  return partRegex`/assets/static/${fileBaseName}.${/[a-zA-Z0-9_-]+/}.${fileExt}`;
+}

examples/full/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "node-fetch": "^3.3.2",
     "solid-js": "^1.8.17",
-    "vike": "^0.4.181",
+    "vike": "^0.4.182",
     "vike-solid": "link:vike-solid"
   },
   "devDependencies": {

examples/full/pages/+Head.tsx

@@ -5,7 +5,6 @@ import logoUrl from "../assets/logo.svg";
 export function Head() {
   return (
     <>
-      <meta name="description" content="Demo showcasing Vike + Solid" />
       <link rel="icon" href={logoUrl} />
     </>
   );

examples/full/pages/+Layout.tsx

@@ -19,6 +19,7 @@ export function Layout(props: { children?: JSX.Element }) {
         <Link href="/without-ssr">Without SSR</Link>
         <Link href="/starship">Nested Layout 1</Link>
         <Link href="/stardust">Nested Layout 2</Link>
+        <Link href="/images">Head Component</Link>
       </Sidebar>
       <Content>{props.children}</Content>
     </div>

examples/full/pages/+config.ts

@@ -3,7 +3,10 @@ import type { Config } from "vike/types";
 
 // Default config (can be overridden by pages)
 export default {
-  // <title>
-  title: "My Vike + Solid App",
+  title: "My Vike + Solid App", // <title>
+  description: "Demo showcasing Vike + Solid", // <meta name="description">
+  bodyAttributes: {
+    class: "dark",
+  },
   extends: vikeSolid,
 } satisfies Config;

examples/full/pages/images/+Page.tsx

@@ -0,0 +1,46 @@
+export { Page };
+
+import { Head } from "vike-solid/Head";
+import logoOld from "../../assets/logo.svg";
+import logoNew from "../../assets/logo-new.svg";
+import { Counter } from "../../components/Counter";
+
+function Page() {
+  return (
+    <>
+      <p>
+        Page showcasing <code>{"<Image>"}</code> component, with structured data (see HTML).
+      </p>
+      <div>
+        New logo: <Image src={logoNew} author="brillout" />
+      </div>
+      <br />
+      <div>
+        Old logo: <Image src={logoOld} author="Romuald Brillout" />
+      </div>
+      <br />
+      <Counter />
+    </>
+  );
+}
+
+function Image({ src, author }: { src: string; author: string }) {
+  return (
+    <>
+      <img src={src} height={48} style={{ "vertical-align": "middle", "margin-left": "10px" }} />
+      <Head>
+        <script
+          type="application/ld+json"
+          innerHTML={JSON.stringify({
+            "@context": "https://schema.org/",
+            contentUrl: { src },
+            creator: {
+              "@type": "Person",
+              name: author,
+            },
+          })}
+        ></script>
+      </Head>
+    </>
+  );
+}

examples/full/pages/star-wars/@id/+data.ts

@@ -3,15 +3,25 @@ export { data };
 export type Data = Awaited<ReturnType<typeof data>>;
 
 import fetch from "node-fetch";
+import { useConfig } from "vike-solid/useConfig";
 import type { PageContextServer } from "vike/types";
 import type { MovieDetails } from "../types.js";
 
 const data = async (pageContext: PageContextServer) => {
+  const config = useConfig();
+
   const response = await fetch(`https://brillout.github.io/star-wars/api/films/${pageContext.routeParams?.id}.json`);
   let movie = (await response.json()) as MovieDetails;
+
+  config({
+    title: movie.title,
+    description: `Star Wars Movie ${movie.title} from ${movie.director}`,
+  });
+
   // We remove data we don't need because we pass `pageContext.movie` to
   // the client; we want to minimize what is sent over the network.
   movie = minimize(movie);
+
   return movie;
 };
 

examples/full/pages/star-wars/index/+description.ts

@@ -0,0 +1,9 @@
+export { description };
+
+import type { Data } from "./+data.js";
+import type { PageContext } from "vike/types";
+
+function description(pageContext: PageContext<Data>) {
+  const movies = pageContext.data;
+  return `All the ${movies.length} movies from the Star Wars franchise`;
+}

examples/minimal/package.json

@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "solid-js": "^1.8.17",
-    "vike": "^0.4.181",
+    "vike": "^0.4.182",
     "vike-solid": "link:vike-solid"
   },
   "devDependencies": {