From d5b9655063693be76d2205453af05f73ab98b8e8 Mon Sep 17 00:00:00 2001
From: Romuald Brillout <git@brillout.com>
Date: Fri, 9 Aug 2024 11:31:17 +0200
Subject: [PATCH] add further usage examples

---
 examples/full/.testRun.ts                           | 10 ++++++++++
 examples/full/pages/index/+Page.tsx                 |  7 ++++++-
 examples/full/pages/star-wars/index/+data.ts        | 13 +++++++++++++
 examples/full/pages/star-wars/index/+description.ts |  9 ---------
 examples/full/pages/star-wars/index/+title.ts       |  9 ---------
 5 files changed, 29 insertions(+), 19 deletions(-)
 delete mode 100644 examples/full/pages/star-wars/index/+description.ts
 delete mode 100644 examples/full/pages/star-wars/index/+title.ts

diff --git a/examples/full/.testRun.ts b/examples/full/.testRun.ts
index 31b2d69..72f5ec7 100644
--- a/examples/full/.testRun.ts
+++ b/examples/full/.testRun.ts
@@ -16,6 +16,7 @@ function testRun(cmd: `pnpm run ${"dev" | "preview"}`) {
     title: "My Vike + Solid App",
     text: "Rendered to HTML.",
     counter: true,
+    image: true,
   });
 
   testUrl({
@@ -23,6 +24,7 @@ function testRun(cmd: `pnpm run ${"dev" | "preview"}`) {
     title: "6 Star Wars Movies",
     description: "All the 6 movies from the Star Wars franchise",
     text: "A New Hope",
+    image: true,
   });
 
   testUrl({
@@ -94,6 +96,7 @@ function testUrl({
   text,
   counter,
   noSSR,
+  image,
 }: {
   url: string;
   title: string;
@@ -101,6 +104,7 @@ function testUrl({
   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);
diff --git a/examples/full/pages/index/+Page.tsx b/examples/full/pages/index/+Page.tsx
index da91dff..7232688 100644
--- a/examples/full/pages/index/+Page.tsx
+++ b/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>
diff --git a/examples/full/pages/star-wars/index/+data.ts b/examples/full/pages/star-wars/index/+data.ts
index c3bbeb2..4ab76e0 100644
--- a/examples/full/pages/star-wars/index/+data.ts
+++ b/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;
 };
 
diff --git a/examples/full/pages/star-wars/index/+description.ts b/examples/full/pages/star-wars/index/+description.ts
deleted file mode 100644
index e2be061..0000000
--- a/examples/full/pages/star-wars/index/+description.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-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`;
-}
diff --git a/examples/full/pages/star-wars/index/+title.ts b/examples/full/pages/star-wars/index/+title.ts
deleted file mode 100644
index f410050..0000000
--- a/examples/full/pages/star-wars/index/+title.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export { title };
-
-import type { Data } from "./+data.js";
-import type { PageContext } from "vike/types";
-
-function title(pageContext: PageContext<Data>) {
-  const movies = pageContext.data;
-  return `${movies.length} Star Wars Movies`;
-}