Val Town Code SearchReturn to Val Town

21
22export function Sidebar({ currentPath, navigate, isDarkMode, toggleDarkMode }: SidebarProps) {
23  const { userProfile, isConnected, setApiKey } = useValTown();
24  const [isCollapsed, setIsCollapsed] = useState(false);
25
26  const handleLogout = () => {
27    setApiKey("");
28    navigate("/");
29  };

10
11export function HomePage({ navigate, isDarkMode, toggleDarkMode }: HomePageProps) {
12  const { setApiKey, error, isLoading } = useValTown();
13  const [tempApiKey, setTempApiKey] = useState("");
14  const [showApiKey, setShowApiKey] = useState(false);
15
16  const handleSubmit = (e: React.FormEvent) => {
17    e.preventDefault();
18    if (tempApiKey.trim()) {
19      setApiKey(tempApiKey.trim());
20    }
21  };
46        </div>
47
48        {/* API Key Form */}
49        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border dark:border-gray-700">
50          <h2 className="text-xl font-semibold mb-4 dark:text-white">Get Started</h2>
53            <div>
54              <label className="block text-sm font-medium mb-2 dark:text-gray-200">
55                Val Town API Key
56              </label>
57              <div className="flex gap-2">
58                <input
59                  type={showApiKey ? "text" : "password"}
60                  value={tempApiKey}
61                  onChange={(e) => setTempApiKey(e.target.value)}
62                  placeholder="Enter your API key"
63                  className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
64                  required
66                <button
67                  type="button"
68                  onClick={() => setShowApiKey(!showApiKey)}
69                  className="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-gray-200"
70                >
71                  {showApiKey ? "Hide" : "Show"}
72                </button>
73              </div>
74              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
75                Get your API key from{" "}
76                <a
77                  href="https://val.town/settings/api"
78                  target="_blank"
79                  rel="noopener noreferrer"
93            <button
94              type="submit"
95              disabled={!tempApiKey.trim() || isLoading}
96              className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
97            >

18export function Router({ isDarkMode, toggleDarkMode }: RouterProps) {
19  const [currentPath, setCurrentPath] = useState(window.location.pathname);
20  const { isConnected, apiKey, isLoading } = useValTown();
21
22  useEffect(() => {
47
48  // Show home page if not authenticated
49  if (!apiKey || !isConnected) {
50    return <HomePage navigate={navigate} isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />;
51  }

10
11export function ValTownProvider({ children }: ValTownProviderProps) {
12  const [apiKey, setApiKeyState] = useState<string | null>(null);
13  const [isConnected, setIsConnected] = useState(false);
14  const [isLoading, setIsLoading] = useState(true);
16  const [error, setError] = useState<string | null>(null);
17
18  // Load API key from localStorage on mount
19  useEffect(() => {
20    const savedApiKey = localStorage.getItem("valtown_api_key");
21    if (savedApiKey) {
22      setApiKeyState(savedApiKey);
23    }
24    setIsLoading(false);
25  }, []);
26
27  // Test connection and fetch user profile when API key changes
28  useEffect(() => {
29    if (!apiKey) {
30      setIsConnected(false);
31      setUserProfile(null);
39      
40      try {
41        const response = await fetch("/api/valtown/v1/me", {
42          headers: {
43            "X-ValTown-API-Key": apiKey,
44            "Content-Type": "application/json",
45          },
68
69    testConnection();
70  }, [apiKey]);
71
72  const setApiKey = (key: string) => {
73    if (key.trim()) {
74      localStorage.setItem("valtown_api_key", key.trim());
75      setApiKeyState(key.trim());
76    } else {
77      localStorage.removeItem("valtown_api_key");
78      setApiKeyState(null);
79    }
80  };
81
82  const value: ValTownContextType = {
83    apiKey,
84    setApiKey,
85    isConnected,
86    isLoading,

4
5export function SettingsPage() {
6  const { apiKey, setApiKey, isConnected, userProfile } = useValTown();
7  const [tempApiKey, setTempApiKey] = useState(apiKey || "");
8  const [showApiKey, setShowApiKey] = useState(false);
9
10  const handleSaveApiKey = () => {
11    setApiKey(tempApiKey);
12  };
13
14  const handleClearApiKey = () => {
15    setApiKey("");
16    setTempApiKey("");
17  };
18
22
23      <div className="grid gap-6">
24        {/* API Key Configuration */}
25        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 p-6">
26          <h2 className="text-lg font-semibold mb-4 dark:text-white">Val Town API Configuration</h2>
27          <div className="space-y-4">
28            <div>
29              <label className="block text-sm font-medium mb-2 dark:text-gray-200">
30                API Key
31              </label>
32              <div className="flex gap-2">
33                <input
34                  type={showApiKey ? "text" : "password"}
35                  value={tempApiKey}
36                  onChange={(e) => setTempApiKey(e.target.value)}
37                  placeholder="Enter your Val Town API key"
38                  className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
39                />
40                <button
41                  onClick={() => setShowApiKey(!showApiKey)}
42                  className="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-gray-200"
43                >
44                  {showApiKey ? "Hide" : "Show"}
45                </button>
46              </div>
47              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
48                Get your API key from{" "}
49                <a
50                  href="https://val.town/settings/api"
51                  target="_blank"
52                  rel="noopener noreferrer"
60            <div className="flex gap-2">
61              <button
62                onClick={handleSaveApiKey}
63                disabled={!tempApiKey.trim()}
64                className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
65              >
66                Save API Key
67              </button>
68              <button
69                onClick={handleClearApiKey}
70                className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700"
71              >

6const rateLimitStore = new Map<string, { count: number; resetTime: number }>();
7
8const VALTOWN_API_BASE_URL = `https://api.val.town`;
9const RATE_LIMIT_WINDOW = 60 * 1000; // 1 minute
10const RATE_LIMIT_MAX_REQUESTS = 100; // requests per window
33}
34
35// Proxy handler for all Val Town API requests
36app.all("/valtown/*", async (c) => {
37  const path = c.req.path.replace("/api/valtown/", "");
38  const searchParams = c.req.url.includes("?") ? c.req.url.split("?")[1] : "";
39  const targetUrl = `${VALTOWN_API_BASE_URL}/${path}${searchParams ? `?${searchParams}` : ""}`;
40  const userApiKey = c.req.header("X-ValTown-API-Key");
41  const clientIp = c.req.header("CF-Connecting-IP") || c.req.header("X-Forwarded-For") || "unknown";
42
43  console.log(`[Proxy] Request IN: ${c.req.method} ${c.req.path} from IP: ${clientIp}`);
44  
45  if (!userApiKey) {
46    console.error("[Proxy] X-ValTown-API-Key: MISSING!");
47    return c.json({ error: "User API key not provided to proxy." }, 401);
48  }
49
56  console.log(`[Proxy] Rate limit check PASSED for IP: ${clientIp}`);
57
58  // Prepare headers for Val Town API
59  const requestHeaders = new Headers();
60  const contentType = c.req.header("content-type");
67  if (ifMatch) requestHeaders.set("if-match", ifMatch);
68  if (ifNoneMatch) requestHeaders.set("if-none-match", ifNoneMatch);
69  requestHeaders.set("Authorization", `Bearer ${userApiKey}`);
70
71  // Handle request body
97
98  try {
99    await sleep(100); // Small delay to avoid overwhelming Val Town API
100    
101    console.log(`[Proxy] Making fetch call to ValTown: ${c.req.method} ${targetUrl}`);

9│   ├── index.ts             # Main Hono server entry point
10│   └── routes/
11│       └── proxy.ts         # Val Town API proxy routes
12├── frontend/
13│   ├── index.html           # Main HTML template
42## Architecture
43
44- **Backend**: Hono-based API server with proxy routes to Val Town API
45- **Frontend**: React SPA with client-side routing
46- **Authentication**: API key-based authentication for Val Town services
47- **Styling**: TailwindCSS for responsive design
48
52Key changes made:
53- Removed Next.js routing in favor of client-side routing
54- Converted API routes to Hono endpoints
55- Replaced next-auth with API key authentication
56- Updated imports to use Val Town compatible modules

22  const checkUserVoteStatus = async () => {
23    try {
24      const response = await fetch(`/api/votes/user/${encodeURIComponent(username)}`);
25      const data = await response.json();
26      
40    
41    try {
42      const response = await fetch('/api/votes', {
43        method: 'POST',
44        headers: {
70  const refreshVoteResults = async () => {
71    try {
72      const response = await fetch('/api/votes');
73      const data = await response.json();
74      

16await runMigrations();
17
18// API routes
19app.route("/api/votes", votes);
20app.route("/api/chat", chat);
21
22// Serve static files

18  useEffect(() => {
19    // Set up Server-Sent Events for real-time chat
20    const eventSource = new EventSource('/api/chat/stream');
21    eventSourceRef.current = eventSource;
22
66    
67    try {
68      const response = await fetch('/api/chat/messages', {
69        method: 'POST',
70        headers: {