add minimal example

examples/minimal/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

examples/minimal/package.json

@@ -0,0 +1,16 @@
+{
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite build && vite preview"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "vike": "^0.4.168",
+    "vike-react": "^0.4.6",
+    "vite": "^5.1.1"
+  },
+  "type": "module"
+}

examples/minimal/pages/+config.js

@@ -0,0 +1,11 @@
+export { config }
+
+import vikeReact from 'vike-react/config'
+import { Layout } from './Layout'
+
+const config = {
+  // https://vike.dev/Layout
+  Layout: Layout,
+  // https://vike.dev/extends
+  extends: vikeReact
+}

examples/minimal/pages/Layout.css

@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+}
+
+.navitem {
+  padding: 3px;
+}

examples/minimal/pages/Layout.jsx

@@ -0,0 +1,69 @@
+export { Layout }
+
+import React from 'react'
+import './Layout.css'
+
+function Layout({ children }) {
+  return (
+    <React.StrictMode>
+      <PageLayout>
+        <Sidebar>
+          <a className="navitem" href="/">
+            Home
+          </a>
+          <a className="navitem" href="/about">
+            About
+          </a>
+        </Sidebar>
+        <Content>{children}</Content>
+      </PageLayout>
+    </React.StrictMode>
+  )
+}
+
+function PageLayout({ children }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        maxWidth: 900,
+        margin: 'auto'
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Sidebar({ children }) {
+  return (
+    <div
+      style={{
+        padding: 20,
+        paddingTop: 42,
+        flexShrink: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        lineHeight: '1.8em'
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Content({ children }) {
+  return (
+    <div
+      style={{
+        padding: 20,
+        paddingBottom: 50,
+        borderLeft: '2px solid #eee',
+        minHeight: '100vh'
+      }}
+    >
+      {children}
+    </div>
+  )
+}

examples/minimal/pages/about/+Page.jsx

@@ -0,0 +1,12 @@
+export default Page
+
+import React from 'react'
+
+function Page() {
+  return (
+    <>
+      <h1>About</h1>
+      <p>Example of using Vike.</p>
+    </>
+  )
+}

examples/minimal/pages/index/+Page.jsx

@@ -0,0 +1,19 @@
+export default Page
+
+import React from 'react'
+import { Counter } from './Counter'
+
+function Page() {
+  return (
+    <>
+      <h1>Welcome</h1>
+      This page is:
+      <ul>
+        <li>Rendered to HTML.</li>
+        <li>
+          Interactive. <Counter />
+        </li>
+      </ul>
+    </>
+  )
+}

examples/minimal/pages/index/Counter.jsx

@@ -0,0 +1,12 @@
+export { Counter }
+
+import React, { useState } from 'react'
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <button type="button" onClick={() => setCount((count) => count + 1)}>
+      Counter {count}
+    </button>
+  )
+}

examples/minimal/readme.md

@@ -0,0 +1,8 @@
+Minimal example of using `vike-react`.
+
+```bash
+git clone git@github.com:vikejs/vike-react
+cd vike-react/examples/minimal/
+npm install
+npm run dev
+```

examples/minimal/vite.config.js

@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react'
+import ssr from 'vike/plugin'
+
+export default {
+  plugins: [react(), ssr()]
+}