6
7Versions 0-17 of this val were done with Hono and server-rendering.
8Versions 18+ were generated with Townie and use client-side React.
9
10To use this val, fork it to your account.
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Hono } from "https://esm.sh/hono";
3import { debounce } from "https://esm.sh/lodash-es";
4import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
5import { useDropzone } from "https://esm.sh/react-dropzone?deps=react@18.2.0,react-dom@18.2.0";
6import React, { ReactNode, useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
7import { lastlogin } from "https://esm.town/v/stevekrouse/lastlogin_safe";
8import { LoginWithGoogleButton } from "https://esm.town/v/stevekrouse/LoginWithGoogleButton";
9
10interface TooltipProps {
11 children: ReactNode;
12 content: string;
13}
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
3import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5import STARTER_PROMPTS from "./starter-prompts.js";
6
30}: {
31 prompt: string;
32 setPrompt: React.Dispatch<React.SetStateAction<string>>;
33 handleSubmit: (e: React.FormEvent) => void;
34 handleStarterPromptClick: (promptItem: PromptItem) => void;
35}) {
116
117function App() {
118 const previewRef = React.useRef<HTMLDivElement>(null);
119 const [prompt, setPrompt] = useState("");
120 const [projectId, setProjectId] = useState<number | null>(null);
174 }
175
176 async function handleSubmit(e: React.FormEvent | string) {
177 if (typeof e !== "string") {
178 e.preventDefault();
673 </div>
674 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
675 <React.Fragment key={iframeKey}>
676 <iframe
677 srcDoc={code}
679 className="w-full grow"
680 />
681 </React.Fragment>
682 </div>
683 </div>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import type React from "https://esm.sh/react@18.2.0";
3import {
4 type ReactNode,
5 createContext,
6 useContext,
7 useEffect,
8 useState,
9} from "https://esm.sh/react@18.2.0";
10import { $api } from "https://esm.town/v/nbbaier/hn_notifier/backend/fetchClient.ts";
11import type { DBItem } from "https://esm.town/v/nbbaier/hn_notifier/shared/types.ts";
34
35interface ItemsProviderProps {
36 children: ReactNode;
37}
38
39export const ItemsProvider: React.FC<ItemsProviderProps> = ({ children }) => {
40 const [items, setItems] = useState<DBItem[]>([]);
41 const [isLoading, setIsLoading] = useState<boolean>(false);
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import type React from "https://esm.sh/react@18.2.0";
3import { useState } from "https://esm.sh/react@18.2.0";
4import { useUrls } from "https://esm.town/v/nbbaier/hn_notifier/frontend/components/ItemContext.tsx";
5
10}
11
12const InputComponent: React.FC<InputProps> = ({
13 placeholder = "Enter a Hacker News URL",
14 initialValue = "",
18 const { saveUrl, isLoading } = useUrls();
19
20 const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
21 e.preventDefault(); // Prevent the default form submission
22
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import Input from "https://esm.town/v/nbbaier/hn_notifier/frontend/components/Input.tsx";
3import { ItemsProvider } from "https://esm.town/v/nbbaier/hn_notifier/frontend/components/ItemContext.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import type React from "https://esm.sh/react@18.2.0";
3import { useState } from "https://esm.sh/react@18.2.0";
4import { useUrls } from "https://esm.town/v/nbbaier/hn_notifier/frontend/components/ItemContext.tsx";
5import { HN_BASE_URL } from "https://esm.town/v/nbbaier/hn_notifier/shared/utils.ts";
9}
10
11const Section: React.FC<SectionProps> = ({ type }) => {
12 const [isOpen, setIsOpen] = useState(true); // Default to collapsed
13 const { items, unfollowUrl, isLoading } = useUrls();
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
3import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5import STARTER_PROMPTS from "./starter-prompts.js";
6
30}: {
31 prompt: string;
32 setPrompt: React.Dispatch<React.SetStateAction<string>>;
33 handleSubmit: (e: React.FormEvent) => void;
34 handleStarterPromptClick: (promptItem: PromptItem) => void;
35}) {
116
117function App() {
118 const previewRef = React.useRef<HTMLDivElement>(null);
119 const [prompt, setPrompt] = useState("");
120 const [projectId, setProjectId] = useState<number | null>(null);
174 }
175
176 async function handleSubmit(e: React.FormEvent | string) {
177 if (typeof e !== "string") {
178 e.preventDefault();
673 </div>
674 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
675 <React.Fragment key={iframeKey}>
676 <iframe
677 srcDoc={code}
679 className="w-full grow"
680 />
681 </React.Fragment>
682 </div>
683 </div>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useEffect, useState } from "https://esm.sh/react@18.2.0";
3import { FiLoader, FiRefreshCw } from "https://esm.sh/react-icons@5.5.0/fi?deps=react@18.2.0";
4import { PixelData } from "../../types.d.ts";
5
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { App } from "./components/App.tsx";
4
