avraham/context-efficient-ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove unnecessary pages and files that came with the Vike init

Browse Source
This commit is contained in:
Avraham Sakal
2025-08-27 07:40:37 -04:00
parent 18411402f5
commit b11c34b660
14 changed files with 2 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/+Page.tsx
+1 -10
View File
@@ -1,20 +1,11 @@
import { Counter } from "./Counter.js";
export default function Page() {
return (
<>
<h1
css={{ fontWeight: "700", fontSize: "1.875rem", paddingBottom: "1rem" }}
>
My Vike app
Token-Efficient Context Engineering
</h1>
This page is:
<ul>
<li>Rendered to HTML.</li>
<li>
Interactive. <Counter />
</li>
</ul>
</>
);
}
pages/index/Counter.tsx
-25
View File
@@ -1,25 +0,0 @@
import { useState } from "react";
export function Counter() {
const [count, setCount] = useState(0);
return (
<button
type="button"
css={{
display: "inline-block",
border: "1px solid black",
borderRadius: "0.25rem",
backgroundColor: "#e5e7eb",
padding: "4px 8px 4px 8px",
fontSize: "0.75rem",
fontWeight: "500",
textTransform: "uppercase",
lineHeight: "1.5",
}}
onClick={() => setCount((count) => count + 1)}
>
Counter {count}
</button>
);
}
pages/star-wars/@id/+Page.tsx
-16
View File
@@ -1,16 +0,0 @@
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
-34
View File
@@ -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<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
-25
View File
@@ -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>
</>
);
}
pages/star-wars/index/+data.ts
-34
View File
@@ -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 };
});
}
pages/star-wars/types.ts
-10
View File
@@ -1,10 +0,0 @@
export type Movie = {
id: string;
title: string;
release_date: string;
};
export type MovieDetails = Movie & {
director: string;
producer: string;
};
pages/todo/+Page.tsx
-13
View File
@@ -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} />
</>
);
}
pages/todo/+config.ts
-3
View File
@@ -1,3 +0,0 @@
export const config = {
prerender: false,
};
pages/todo/+data.ts
-13
View File
@@ -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 };
}
pages/todo/TodoList.tsx
-49
View File
@@ -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>
</>
);
}