Val Town Code SearchReturn to Val Town

1/** @jsxImportSource npm:hono@3/jsx */
2import { modifyFetchHandler as codeOnValTownBanner } from "https://esm.town/v/andreterron/codeOnValTown";
3import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth";
4import { Hono } from "npm:hono@3";
122
123export default codeOnValTownBanner(
124  passwordAuth(app.fetch, { verifyPassword: verifyToken }),
125);

17  const [activeButton, setActiveButton] = useState(null);
18
19  const fetchContent = useCallback(async (prompt, direction) => {
20    setLoading(true);
21    try {
22      const response = await fetch("/generate", {
23        method: "POST",
24        headers: { "Content-Type": "application/json" },
30      setContent(newContent);
31    } catch (error) {
32      console.error("Error fetching content:", error);
33      setContent("An error occurred while fetching content.");
34    }
35    setLoading(false);
39    e.preventDefault();
40    if (topic) {
41      fetchContent(`Provide a concise overview of ${topic} in about 3-4 sentences. Focus on key points and interesting facts. Format your response as follows:
42Title: [A short, catchy title for the topic]
43
52        setActiveButton("right");
53        setTimeout(() => setActiveButton(null), 300);
54        fetchContent(`Based on the topic "${title}" and the following information: "${content}", explore a semantically related topic. Provide a brief overview of this new topic, highlighting its connection to ${title}. Format your response as follows:
55Title: [A short, catchy title for the new related topic]
56
59        setActiveButton("down");
60        setTimeout(() => setActiveButton(null), 300);
61        fetchContent(`Given the overview of ${title}: "${content}", choose a directly related subtopic or aspect of ${title}. Provide a detailed explanation of this subtopic, focusing on its significance and relationship to the main topic. Format your response as follows:
62Title: [A short, catchy title for the subtopic]
63
65      }
66    }
67  }, [fetchContent, title, content]);
68
69  useEffect(() => {
110              🏠 Home
111            </button>
112            <button className={`right-button ${activeButton === 'right' ? 'active' : ''}`} onClick={() => fetchContent(`Based on the topic "${title}" and the following information: "${content}", explore a semantically related topic. Provide a brief overview of this new topic, highlighting its connection to ${title}. Format your response as follows:
113Title: [A short, catchy title for the new related topic]
114
116              ➡️ Related Topic
117            </button>
118            <button className={`down-button ${activeButton === 'down' ? 'active' : ''}`} onClick={() => fetchContent(`Given the overview of ${title}: "${content}", choose a directly related subtopic or aspect of ${title}. Provide a detailed explanation of this subtopic, focusing on its significance and relationship to the main topic. Format your response as follows:
119Title: [A short, catchy title for the subtopic]
120

1/** @jsxImportSource npm:hono@3/jsx */
2import { modifyFetchHandler as codeOnValTownBanner } from "https://esm.town/v/andreterron/codeOnValTown";
3import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth";
4import { Hono } from "npm:hono@3";
122
123export default codeOnValTownBanner(
124  passwordAuth(app.fetch, { verifyPassword: verifyToken }),
125);

37
38/**
39 * @param handler Fetch handler
40 * @param val Define which val should open
41 */
42export function modifyFetchHandler(
43  handler: (req: Request) => Response | Promise<Response>,
44  { val, style, variant }: { val?: ValRef; style?: string; variant?: 'default' | 'green' } = {},
52}
53
54export default modifyFetchHandler;

11Here are 2 different ways to add the "Code on Val Town" ribbon:
12
13### 1. Wrap your fetch handler (recommended)
14
15```ts
16import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
17import { html } from "https://esm.town/v/stevekrouse/html?v=5";
18
19export default modifyFetchHandler(async (req: Request): Promise<Response> => {
20  return html(`<h2>Hello world!</h2>`);
21});
51These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the `val` argument:
52
53- `modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }})`
54- `modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }})`
55
58You can set the style parameter to a css string to customize the ribbon. Check out [github-fork-ribbon-css](https://github.com/simonwhitaker/github-fork-ribbon-css?tab=readme-ov-file#styling) to learn more about how to style the element.
59
60- `modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"})`
61- `modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"})`
62
64
65```ts
66modifyFetchHandler(handler, {style: `@media (max-width: 768px) {
67  .github-fork-ribbon {
68    display: none !important;

11Here are 2 different ways to add the "Code on Val Town" ribbon:
12
13### 1. Wrap your fetch handler (recommended)
14
15```ts
16import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
17import { html } from "https://esm.town/v/stevekrouse/html?v=5";
18
19export default modifyFetchHandler(async (req: Request): Promise<Response> => {
20  return html(`<h2>Hello world!</h2>`);
21});
51These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the `val` argument:
52
53- `modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }})`
54- `modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }})`
55
58You can set the style parameter to a css string to customize the ribbon. Check out [github-fork-ribbon-css](https://github.com/simonwhitaker/github-fork-ribbon-css?tab=readme-ov-file#styling) to learn more about how to style the element.
59
60- `modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"})`
61- `modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"})`
62
64
65```ts
66modifyFetchHandler(handler, {style: `@media (max-width: 768px) {
67  .github-fork-ribbon {
68    display: none !important;

37
38/**
39 * @param handler Fetch handler
40 * @param val Define which val should open
41 */
42export function modifyFetchHandler(
43  handler: (req: Request) => Response | Promise<Response>,
44  { val, style }: { val?: ValRef; style?: string } = {},
52}
53
54export default modifyFetchHandler;

11Here are 2 different ways to add the "Code on Val Town" ribbon:
12
13### 1. Wrap your fetch handler (recommended)
14
15```ts
16import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
17import { html } from "https://esm.town/v/stevekrouse/html?v=5";
18
19export default modifyFetchHandler(async (req: Request): Promise<Response> => {
20  return html(`<h2>Hello world!</h2>`);
21});
51These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the `val` argument:
52
53- `modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }})`
54- `modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }})`
55
58You can set the style parameter to a css string to customize the ribbon. Check out [github-fork-ribbon-css](https://github.com/simonwhitaker/github-fork-ribbon-css?tab=readme-ov-file#styling) to learn more about how to style the element.
59
60- `modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"})`
61- `modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"})`
62
64
65```ts
66modifyFetchHandler(handler, {style: `@media (max-width: 768px) {
67  .github-fork-ribbon {
68    display: none !important;

37
38/**
39 * @param handler Fetch handler
40 * @param val Define which val should open
41 */
42export function modifyFetchHandler(
43  handler: (req: Request) => Response | Promise<Response>,
44  { val, style }: { val?: ValRef; style?: string } = {},
52}
53
54export default modifyFetchHandler;

1// This program crawls Wikipedia pages starting from an initial URL,
2// following links in the infobox and collecting page titles.
3// It uses the fetch API to make HTTP requests and cheerio for HTML parsing.
4
5import cheerio from "https://esm.sh/cheerio@1.0.0-rc.12";
12  visited.add(url);
13
14  const response = await fetch(url);
15  const html = await response.text();
16  const $ = cheerio.load(html);