scaffold Vike app with Bati

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