diff --git a/database/todoItems.ts b/database/todoItems.ts deleted file mode 100644 index ef8bcf3..0000000 --- a/database/todoItems.ts +++ /dev/null @@ -1,19 +0,0 @@ -interface TodoItem { - text: string; -} - -const todosDefault = [{ text: "Buy milk" }, { text: "Buy strawberries" }]; - -const database = - // We create an in-memory database. - // - We use globalThis so that the database isn't reset upon HMR. - // - The database is reset when restarting the server, use a proper database (SQLite/PostgreSQL/...) if you want persistent data. - // biome-ignore lint: - (( - globalThis as unknown as { __database: { todos: TodoItem[] } } - ).__database ??= { todos: todosDefault }); - -const { todos } = database; - -export { todos }; -export type { TodoItem }; diff --git a/layouts/LayoutDefault.tsx b/layouts/LayoutDefault.tsx index da75de4..bef1242 100644 --- a/layouts/LayoutDefault.tsx +++ b/layouts/LayoutDefault.tsx @@ -123,16 +123,6 @@ export default function LayoutDefault({ - - {children} diff --git a/pages/index/+Page.tsx b/pages/index/+Page.tsx index acc9b5b..5309735 100644 --- a/pages/index/+Page.tsx +++ b/pages/index/+Page.tsx @@ -1,20 +1,11 @@ -import { Counter } from "./Counter.js"; - export default function Page() { return ( <>

- My Vike app + Token-Efficient Context Engineering

- This page is: - ); } diff --git a/pages/index/Counter.tsx b/pages/index/Counter.tsx deleted file mode 100644 index a35a228..0000000 --- a/pages/index/Counter.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useState } from "react"; - -export function Counter() { - const [count, setCount] = useState(0); - - return ( - - ); -} diff --git a/pages/star-wars/@id/+Page.tsx b/pages/star-wars/@id/+Page.tsx deleted file mode 100644 index a2281be..0000000 --- a/pages/star-wars/@id/+Page.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { useData } from "vike-react/useData"; -import type { Data } from "./+data.js"; - -export default function Page() { - const movie = useData(); - return ( - <> -

{movie.title}

- Release Date: {movie.release_date} -
- Director: {movie.director} -
- Producer: {movie.producer} - - ); -} diff --git a/pages/star-wars/@id/+data.ts b/pages/star-wars/@id/+data.ts deleted file mode 100644 index bf226db..0000000 --- a/pages/star-wars/@id/+data.ts +++ /dev/null @@ -1,34 +0,0 @@ -// 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>; - -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: 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; -} diff --git a/pages/star-wars/index/+Page.tsx b/pages/star-wars/index/+Page.tsx deleted file mode 100644 index 118b178..0000000 --- a/pages/star-wars/index/+Page.tsx +++ /dev/null @@ -1,25 +0,0 @@ -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> - </> - ); -} diff --git a/pages/star-wars/index/+data.ts b/pages/star-wars/index/+data.ts deleted file mode 100644 index 2366e2a..0000000 --- a/pages/star-wars/index/+data.ts +++ /dev/null @@ -1,34 +0,0 @@ -// 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 }; - }); -} diff --git a/pages/star-wars/types.ts b/pages/star-wars/types.ts deleted file mode 100644 index ffccdf5..0000000 --- a/pages/star-wars/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -export type Movie = { - id: string; - title: string; - release_date: string; -}; - -export type MovieDetails = Movie & { - director: string; - producer: string; -}; diff --git a/pages/todo/+Page.tsx b/pages/todo/+Page.tsx deleted file mode 100644 index efda410..0000000 --- a/pages/todo/+Page.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { Data } from "./+data"; -import { useData } from "vike-react/useData"; -import { TodoList } from "./TodoList.js"; - -export default function Page() { - const data = useData<Data>(); - return ( - <> - <h1>To-do List</h1> - <TodoList initialTodoItems={data.todo} /> - </> - ); -} diff --git a/pages/todo/+config.ts b/pages/todo/+config.ts deleted file mode 100644 index a668c0a..0000000 --- a/pages/todo/+config.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const config = { - prerender: false, -}; diff --git a/pages/todo/+data.ts b/pages/todo/+data.ts deleted file mode 100644 index 00fb3ca..0000000 --- a/pages/todo/+data.ts +++ /dev/null @@ -1,13 +0,0 @@ -// https://vike.dev/data -import { todos } from "../../database/todoItems"; -import type { PageContextServer } from "vike/types"; - -export type Data = { - todo: { text: string }[]; -}; - -export default async function data( - _pageContext: PageContextServer, -): Promise<Data> { - return { todo: todos }; -} diff --git a/pages/todo/TodoList.tsx b/pages/todo/TodoList.tsx deleted file mode 100644 index a8f4074..0000000 --- a/pages/todo/TodoList.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { useState } from "react"; -import { useTRPCClient } from "../../trpc/client"; - -export function TodoList({ - initialTodoItems, -}: { - initialTodoItems: { text: string }[]; -}) { - const [todoItems, setTodoItems] = useState(initialTodoItems); - const [newTodo, setNewTodo] = useState(""); - const trpc = useTRPCClient(); - - return ( - <> - <ul> - {todoItems.map((todoItem, index) => ( - // biome-ignore lint: - <li key={index}>{todoItem.text}</li> - ))} - </ul> - <div> - <form - onSubmit={async (ev) => { - ev.preventDefault(); - if (newTodo.trim() === "") return; - - // Optimistic UI update - setTodoItems((prev) => [...prev, { text: newTodo }]); - try { - await trpc.onNewTodo.mutate(newTodo); - setNewTodo(""); - } catch (e) { - console.error(e); - // rollback - setTodoItems((prev) => prev.slice(0, -1)); - } - }} - > - <input - type="text" - onChange={(ev) => setNewTodo(ev.target.value)} - value={newTodo} - /> - <button type="submit">Add to-do</button> - </form> - </div> - </> - ); -} diff --git a/trpc/router.ts b/trpc/router.ts index 67211b4..d70f2a4 100644 --- a/trpc/router.ts +++ b/trpc/router.ts @@ -1,22 +1,7 @@ -import { router, publicProcedure } from "../trpc/server"; -import { todos } from "../database/todoItems"; +import { router } from "../trpc/server"; import { chat } from "../pages/chat/trpc"; export const appRouter = router({ - demo: publicProcedure.query(async () => { - return { demo: true }; - }), - onNewTodo: publicProcedure - .input((value): string => { - if (typeof value === "string") { - return value; - } - throw new Error("Input is not a string"); - }) - .mutation(async (opts) => { - console.log("Received new todo", { text: opts.input }); - todos.push({ text: opts.input }); - }), chat, });