add example

vikejs · Aug 6, 2024 · 875db34 · 875db34
1 parent d2d95bf
commit 875db34
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/examples/full/pages/+Layout.tsx b/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>

diff --git a/examples/full/pages/images/+Page.tsx b/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>
+    </>
+  );
+}