Val Town Code SearchReturn to Val Town

5export default async function main(req: Request): Promise<Response> {
6  const url = "https://deno.com/blog";
7  const response = await fetch(url);
8  const html = await response.text();
9

14
15  useEffect(() => {
16    fetchPosts();
17    const interval = setInterval(fetchPosts, 30000); // Refresh every 30 seconds
18    return () => clearInterval(interval);
19  }, []);
20
21  const fetchPosts = async () => {
22    const response = await fetch("/posts");
23    const data = await response.json();
24    setPosts(data);
28    e.preventDefault();
29    setError("");
30    const response = await fetch("/post", {
31      method: "POST",
32      headers: { "Content-Type": "application/json" },
36      setNewTitle("");
37      setNewPost("");
38      fetchPosts();
39    } else {
40      const error = await response.text();
112  const url = new URL(request.url);
113  if (url.pathname === "/posts") {
114    // Fetch posts
115    const posts = await sqlite.execute(`
116      SELECT * FROM ${TABLE_NAME}

1async function fetchContributionData() {
2  try {
3    const response = await fetch('https://ejfox-allvals.web.val.run');
4    if (!response.ok) {
5      throw new Error(`HTTP error! status: ${response.status}`);
8    return processContributionData(data.vals);
9  } catch (error) {
10    console.error('Error fetching contribution data:', error);
11    throw error;
12  }
80async function server(request: Request): Promise<Response> {
81  try {
82    console.log('Fetching contribution data...');
83    const contributionData = await fetchContributionData();
84    console.log('Contribution data fetched successfully');
85
86    const width = 53 * (10 + 4) - 4; // 53 weeks * (10px cell + 4px gap) - 4px (no gap after last week)

1// This approach will fetch data from the specified endpoint, process it to create a GitHub-style contribution chart,
2// and render it using React. We'll use the fetch API to get the data, process it to create a heatmap-like structure,
3// and then use CSS Grid to render the chart with varying shades of green based on the number of vals created each day.
4
12
13  useEffect(() => {
14    fetch('https://ejfox-allvals.web.val.run')
15      .then(response => response.json())
16      .then(data => {
20      })
21      .catch(error => {
22        console.error('Error fetching data:', error);
23        setLoading(false);
24      });

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;