Templates¶
A new website starts from a template. Each one is a whole website you change as you like ; every page has comments which say why it is written so, for you and for an AI assistant. Each README.md lists its pages and what they show.
| Template | What it is | UI libraries | Needs |
|---|---|---|---|
| Starter | One example page per feature : loaders, dynamic and catch-all routes, forms and actions, components, a grid of a table (search, sort, pages), a form which inserts rows, a sign-in and private pages, the cache, cookies, scripts in the browser, UI libraries, partials, endpoints. The place to learn. | Chart.js, on one page | Nothing ; the grid and the form use the table contacts, the sign-in the auth provider customers |
| Blank | A layout, a home page and a page for 404. | Nothing | |
| Blog | Posts with tags and authors, search, pages of results, an RSS feed, Open Graph, JSON-LD, a sitemap of every post. Posts from data/posts.json, or a table. |
highlight.js | Nothing |
| Shop | Products with filters and pages, a cart in a cookie, sign-in and sign-up, a checkout which saves orders, the orders of each customer which nobody else reaches. | Bootstrap, Bootstrap Icons | Runs on sample products ; orders need the tables and the auth provider customers |
| Dashboard | A support desk behind a sign-in : numbers and charts, tickets with a search as you type (htmx), forms to create and change them, removing for the group admin, pages only that group opens. |
Bootstrap, Bootstrap Icons, Chart.js, htmx | The auth provider staff ; the table tickets to save |
| Landing page | A product page in Tailwind CSS : hero, features, prices, questions, a newsletter form whose table the website may only add to. | Tailwind CSS | Nothing to show it |
| Documentation | Pages in sections from JSON, a catch-all route, a navigation, search, the page before and after, headings with anchors. | highlight.js | Nothing |
The panel shows, for each, what it shows, its libraries, what it needs, and the pages worth opening first.
New files¶
New file in the tree of a website starts a file from a model :
| Model | Kind | Where |
|---|---|---|
| Page | Page | pages/new-page.tsx |
| Page with data | Page | pages/items/index.tsx : a loader with ctx.db, a search, pages |
| Page of a record | Page | pages/items/[id].tsx : getById, notFound() |
| Form | Page | pages/contact.tsx : an action, its checks, the message after it |
| Page for signed-in visitors | Page | pages/account.tsx : access |
| Cached page | Page | pages/news.tsx : cache with a tag |
| Sign-in page | Page | pages/login.tsx : ctx.auth.login |
| Layout | Layout | pages/_layout.tsx |
| Middleware | Layout | pages/_middleware.ts |
| Page for 404, Page for errors | Layout | pages/_404.tsx, pages/_error.tsx |
| JSON endpoint | Endpoint | pages/api/hello.ts |
| Endpoint of a table | Endpoint | pages/api/items.ts : GET a list, POST a record, with the rules of the website |
| Sign-out endpoint | Endpoint | pages/logout.ts |
| HTML partial | Endpoint | pages/partials/item.ts : HTML without the layout, for htmx |
| RSS feed | Endpoint | pages/feed.xml.ts |
| Component | Component | components/<Name>.tsx |
| Code module | Code | lib/<name>.ts |
Every template and every model is compiled and rendered by the tests of the server : what you start from works.