scaffold Vike app with Bati

pages/star-wars/@id/+Page.tsx

@@ -0,0 +1,16 @@
+import { useData } from "vike-react/useData";
+import type { Data } from "./+data.js";
+
+export default function Page() {
+  const movie = useData<Data>();
+  return (
+    <>
+      <h1>{movie.title}</h1>
+      Release Date: {movie.release_date}
+      <br />
+      Director: {movie.director}
+      <br />
+      Producer: {movie.producer}
+    </>
+  );
+}

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

@@ -0,0 +1,32 @@
+// https://vike.dev/data
+
+import type { PageContextServer } from "vike/types";
+import type { MovieDetails } from "../types.js";
+import { useConfig } from "vike-react/useConfig";
+
+export type Data = Awaited<ReturnType<typeof data>>;
+
+export const data = async (pageContext: PageContextServer) => {
+  // https://vike.dev/useConfig
+  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({
+    // Set <title>
+    title: movie.title,
+  });
+
+  // We remove data we don't need because the data is passed to
+  // the client; we should minimize what is sent over the network.
+  movie = minimize(movie);
+
+  return movie;
+};
+
+function minimize(movie: MovieDetails): MovieDetails {
+  const { id, title, release_date, director, producer } = movie;
+  const minimizedMovie = { id, title, release_date, director, producer };
+  return minimizedMovie;
+}