43
44Custom middleware can be added in an array as the third argument.
45Middleware can add data to the `req.data` object or return a response for things like API endpoints.
46
47```tsx
69```tsx
70// example middleware
71async function api (req: Request, res: Response, next): Promise<Response> {
72 if (req.pathname !== "/api") return next();
73 if (req.method === "POST") {
74 return Repsonse.json({ message: "Hello POST request" });
77}
78
79export default render(App, import.meta.url, [ api ]);
80```
81
1import { betterFetch, BetterFetchError } from "https://esm.sh/@better-fetch/fetch";
2import { HNAPIResponse } from "https://esm.town/v/nbbaier/hn_notifier/shared/types.ts";
3
4export const HN_BASE_URL = "https://news.ycombinator.com/item";
5export const HN_API_URL = "https://hn.algolia.com/api/v1/items";
6
7export function countAllChildren(item: HNAPIResponse): number {
8 const stack: HNAPIResponse[] = [item];
9 let count = 0;
10
22
23export async function getHNItem(id: number) {
24 return await betterFetch<HNAPIResponse>(
25 `${HN_API_URL}/${id}`,
26 );
27}
47}
48
49export async function createDBItem(id: number, data: HNAPIResponse): Promise<DBItem> {
50 const comments = countAllChildren(data);
51
6};
7
8export type HNAPIResponse = {
9 author: string;
10 children: HNAPIResponse[];
11 created_at: string;
12 created_at_i: number;
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { createContext, type ReactNode, useContext, useEffect, useState } from "https://esm.sh/react@18.2.0";
3import { $api } from "https://esm.town/v/nbbaier/hn_notifier/backend/fetchClient.ts";
4import type { DBItem } from "https://esm.town/v/nbbaier/hn_notifier/shared/types.ts";
5
38 setIsLoading(true);
39 try {
40 const { data, error } = await $api<DBItem[]>("/list");
41 if (data) {
42 setItems(data);
59 setIsLoading(true);
60 try {
61 const { data, error } = await $api<{ hnId: number }>("/follow", {
62 method: "POST",
63 headers: {
80 setIsLoading(true);
81 try {
82 const { data, error } = await $api(`/unfollow/${id}`);
83 await fetchUrls(); // Refresh the list after unfollowing
84 } catch (error) {
1import api from "https://esm.town/v/nbbaier/hn_notifier/backend/api.ts";
2import { createTables } from "https://esm.town/v/nbbaier/hn_notifier/backend/database/migrations.ts";
3import { parseProject, readFile, serveFile } from "https://esm.town/v/std/utils/index.ts";
24app.get("/shared/**/*", c => serveFile(c.req.path, import.meta.url));
25
26// api routes
27app.route("/api", api);
28
29app.onError((err, c) => {
1import { createFetch } from "https://esm.sh/@better-fetch/fetch";
2
3export const $api = createFetch({
4 baseURL: "/api",
5});
1import { HTTPException } from "https://esm.sh/hono/http-exception";
2import * as db from "https://esm.town/v/nbbaier/hn_notifier/backend/database/queries.ts";
3import { DBItem, HNAPIResponse } from "https://esm.town/v/nbbaier/hn_notifier/shared/types.ts";
4import {
5 createDBItem,
19});
20
21const api = new Hono();
22
23api.get("/follow/:id", zValidator("param", idSchema), async c => {
24 const { id } = c.req.valid("param");
25 return c.text(`GET /follow/${id}`);
26});
27
28api.post("/follow", zValidator("json", z.object({ id: z.number() })), async (c) => {
29 const { id } = c.req.valid("json");
30 const { data, error } = await getHNItem(id);
48});
49
50api.get("/unfollow/:id", zValidator("param", idSchema), async c => {
51 const { id } = c.req.valid("param");
52 await db.unfollow(id);
54});
55
56api.get("/get/:id", zValidator("param", idSchema), async c => {
57 const { id } = c.req.valid("param");
58 const data = await db.getItem(id);
60});
61
62api.get("/list", async c => {
63 const urls = await db.getAllItems();
64 return c.json(urls);
65});
66
67api.get("/check", async c => {
68 return c.text("GET /check");
69});
70
71export default api;
57 name: f.title,
58 product: p.title,
59 json: `/api/${kp}.${kf}.json`,
60 atom: `/api/${kp}.${kf}.atom`,
61 rss: `/api/${kp}.${kf}.rss`,
62 }));
63
136 Object.entries(product.feeds).map(([feedKey, feed]) => `
137 <div>
138 <a href="/api/${productKey}.${feedKey}.rss" class="feed-link">
139 ${feed.title}
140 <span class="feed-type">RSS</span>
141 </a>
142 <a href="/api/${productKey}.${feedKey}.atom" class="feed-link">
143 ${feed.title}
144 <span class="feed-type">Atom</span>
145 </a>
146 <a href="/api/${productKey}.${feedKey}.json" class="feed-link">
147 ${feed.title}
148 <span class="feed-type">JSON</span>
175
176 // Existing feed generation route remains unchanged
177 const [, apiPath] = pathParts;
178 const [product, feed, ext] = apiPath.split(".");
179
180 if (!(product in QUERIES)) {
359 <meta name="viewport" content="width=device-width, initial-scale=1.0">
360 <title>Wired Components Playground</title>
361 <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
362 <style>${css}</style>
363 </head>
398 <meta name="viewport" content="width=device-width, initial-scale=1.0">
399 <title>Sketchy Text Generator</title>
400 <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
401 <style>${css}</style>
402 </head>
