add further usage examples

examples/full/.testRun.ts

@@ -16,13 +16,15 @@ function testRun(cmd: `pnpm run ${"dev" | "preview"}`) {
     title: "My Vike + Solid App",
     text: "Rendered to HTML.",
     counter: true,
+    image: true,
   });
 
   testUrl({
     url: "/star-wars",
     title: "6 Star Wars Movies",
     description: "All the 6 movies from the Star Wars franchise",
     text: "A New Hope",
+    image: true,
   });
 
   testUrl({
@@ -94,13 +96,15 @@ function testUrl({
   text,
   counter,
   noSSR,
+  image,
 }: {
   url: string;
   title: string;
   description?: string;
   text: string;
   counter?: true;
   noSSR?: true;
+  image?: true;
 }) {
   test(url + " (HTML)", async () => {
     const html = await fetchHtml(url);
@@ -113,6 +117,12 @@ function testUrl({
 
     if (!description) description = "Demo showcasing Vike + Solid";
     expect(html).toMatch(partRegex`<meta name="description" content="${description}">`);
+
+    if (image) {
+      expect(html).toMatch(partRegex`<meta property="og:image" content="${getAssetUrl("logo-new.svg")}">`);
+    } else {
+      expect(html).not.toContain("og:image");
+    }
   });
   test(url + " (Hydration)", async () => {
     await page.goto(getServerUrl() + url);

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

@@ -1,4 +1,8 @@
+export { Page };
+
 import { clientOnly } from "vike-solid/clientOnly";
+import { Config } from "vike-solid/Config";
+import image from "../../assets/logo-new.svg";
 
 const ClientOnlyCounter = clientOnly(() => import("./Counter"));
 const ClientOnlyCounterSlow = clientOnly(async () => {
@@ -8,9 +12,10 @@ const ClientOnlyCounterSlow = clientOnly(async () => {
   return import("./Counter");
 });
 
-export default function Page() {
+function Page() {
   return (
     <>
+      <Config image={image}></Config>
       <h1>My Vike + Solid App</h1>
       This page is:
       <ul>

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

@@ -3,14 +3,27 @@ export { data };
 export type Data = Awaited<ReturnType<typeof data>>;
 
 import fetch from "node-fetch";
+import { useConfig } from "vike-solid/useConfig";
 import type { Movie, MovieDetails } from "../types.js";
+import image from "../../../assets/logo-new.svg";
 
 const data = async () => {
+  const config = useConfig();
+
   const response = await fetch("https://brillout.github.io/star-wars/api/films.json");
   const moviesData = (await response.json()) as MovieDetails[];
+
+  const n = moviesData.length;
+  config({
+    title: `${n} Star Wars Movies`, // <title>
+    description: `All the ${n} movies from the Star Wars franchise`, // <meta name="description">
+    image, // <meta property="og:image">
+  });
+
   // We remove data we don't need because the data is passed to the client; we should
   // minimize what is sent over the network.
   const movies = minimize(moviesData);
+
   return movies;
 };