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;
+}

pages/star-wars/index/+Page.tsx

@@ -0,0 +1,21 @@
+import { useData } from "vike-react/useData";
+import type { Data } from "./+data.js";
+
+export default function Page() {
+  const movies = useData<Data>();
+  return (
+    <>
+      <h1>Star Wars Movies</h1>
+      <ol>
+        {movies.map(({ id, title, release_date }) => (
+          <li key={id}>
+            <a href={`/star-wars/${id}`}>{title}</a> ({release_date})
+          </li>
+        ))}
+      </ol>
+      <p>
+        Source: <a href="https://brillout.github.io/star-wars">brillout.github.io/star-wars</a>.
+      </p>
+    </>
+  );
+}

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

@@ -0,0 +1,32 @@
+// https://vike.dev/data
+
+import type { Movie, MovieDetails } from "../types.js";
+import { useConfig } from "vike-react/useConfig";
+
+export type Data = Awaited<ReturnType<typeof data>>;
+
+export const data = async () => {
+  // https://vike.dev/useConfig
+  const config = useConfig();
+
+  const response = await fetch("https://brillout.github.io/star-wars/api/films.json");
+  const moviesData = (await response.json()) as MovieDetails[];
+
+  config({
+    // Set <title>
+    title: `${moviesData.length} Star Wars Movies`,
+  });
+
+  // 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;
+};
+
+function minimize(movies: MovieDetails[]): Movie[] {
+  return movies.map((movie) => {
+    const { title, release_date, id } = movie;
+    return { title, release_date, id };
+  });
+}

pages/star-wars/types.ts

@@ -0,0 +1,10 @@
+export type Movie = {
+  id: string;
+  title: string;
+  release_date: string;
+};
+
+export type MovieDetails = Movie & {
+  director: string;
+  producer: string;
+};