# recipes/posts-to-pages/site.tsx
One file of [`recipes/posts-to-pages`](/docs/recipes/posts-to-pages), at commit `9a5bb24`.
```tsx
// The reading side of a small publication: an index of posts and a page per post.
//
// The posts are a prop, not something this file goes and fetches. The build hands it the rows in
// the store; the browser hands it the same rows, read from a file the build wrote beside the pages.
// That is the pattern `dom`'s README describes for a component that would otherwise wait on the
// server and wait again on the client.
import { Head, Meta, Stage, StageContext, Title, h } from '@aweftjs/ui';
import type { Act } from '@aweftjs/ui';
import type { Router } from '@aweftjs/dom/router';
/** One post, as the store holds it and as the page reads it. */
export interface Post {
readonly id: string;
readonly title: string;
readonly body: string;
}
const Index = (props: { posts?: readonly Post[] }): unknown => (
The publication
Posts
{(props.posts ?? []).map((post) => - {post.title}
)}
);
const Missing = (): unknown => (
No such post
That post is not here.
);
/** Builds the acts around one list of posts, so the same list reaches the pages and `entries()`. */
export const actsFor = (posts: readonly Post[]): Record => {
const Article = StageContext.use((stage) => (): unknown => {
const id = String(stage!.params.get()['id']);
const post = posts.find((one) => one.id === id);
return post === undefined ? : (
{post.title}
{post.title}
{post.body}
);
});
const Home = (): unknown => ;
return {
'': Home,
// Which posts exist is the application's answer, and here it is the store's rows.
'posts/:id': Object.assign(Article, { entries: async () => posts.map((post) => ({ id: post.id })) }),
missing: Missing,
};
};
export const Site = (props: { router: Router; posts?: readonly Post[] }): unknown => (
);
```