4 | This lives in the pages dir 5 | See the code 9 | 10 |
11 | 12 |13 | It composes automatically into your layouts and uses the file system routing 14 |
15 | -------------------------------------------------------------------------------- /packages/hype_demo/src/pages/index.ts: -------------------------------------------------------------------------------- 1 | import { db } from "$/data/init"; 2 | import { new_recipes } from "$/theme/forms/new_recipes"; 3 | import { html } from "@hype/hype"; 4 | 5 | export default async () => { 6 | const data = await db.query.recipes.findMany({}); 7 | 8 | const recipes_list = data.map((recipe) => { 9 | return html`PROJECT STATUS: Super Early Exploration
This demo app is intended to show how you might work in Hype to create awesome sites. Expect things to be imperfect
17 | Check out the source 18 |
19 | 20 |Try this form, it adds to a database. The delete button deletes it. This is just html forms and htmx progressively enhancing that. Keep in mind these are being stored in a database and the html is being returned and inserted into the dom. Check the network panel of your devtools.
23 | 24 | ${new_recipes} 25 | 26 |This is a nested page
`; 4 | -------------------------------------------------------------------------------- /packages/hype_demo/src/pages/recipes/delete.ts: -------------------------------------------------------------------------------- 1 | import { db } from "$/data/init"; 2 | import { recipes } from "$/data/schema"; 3 | import { html } from "@hype/hype"; 4 | 5 | export async function post({ request, body }: { request: Request }) { 6 | try { 7 | await db.delete(recipes); 8 | return html``; 9 | } catch (e) { 10 | console.log("e", e); 11 | return "fail"; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/hype_demo/src/pages/recipes/index.ts: -------------------------------------------------------------------------------- 1 | import { db } from "$/data/init"; 2 | import { recipes } from "$/data/schema"; 3 | import { html } from "@hype/hype"; 4 | import createDOMPurify from "dompurify"; 5 | import type { Context } from "hono"; 6 | import { JSDOM } from "jsdom"; 7 | 8 | const window = new JSDOM("").window; 9 | const DOMPurify = createDOMPurify(window); 10 | 11 | function sanitizeHtmlInput(html: string) { 12 | return DOMPurify.sanitize(html, { ALLOWED_TAGS: [""] }); 13 | } 14 | 15 | // TODO would love someone to help with the types here. 16 | export async function post({ req }: Context) { 17 | const body = await req.parseBody(); 18 | try { 19 | const name = sanitizeHtmlInput(body.name); 20 | const added_recipe = await db 21 | .insert(recipes) 22 | .values({ 23 | name, 24 | }) 25 | .returning(); 26 | return html`