199- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
200- For persistence, use Val Town SQLite or Blob storage with `import.meta.url` for keys/table names
201- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and include the `@jsxImportSource` pragma
202- When facing client-side render issues, check if all React dependencies are pinned to the same version
203- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
204
262
263### Frontend Best Practices
264- Structure as a standard client-side React app
265- Use SVG for favicons (Val Town only supports text files)
266- Separate components into individual files
267- Access bootstrapped data from `window.__INITIAL_DATA__`
268- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
269- Follow the React component pattern from the example project
270- Handle API calls properly with proper error catching
271
289 - Always run table creation before querying
290
2913. **React Configuration:**
292 - All React dependencies must be pinned to 18.2.0
293 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
294 - Rendering issues often come from mismatched React versions
295
2964. **File Handling:**
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, {
3 useState,
4 useEffect,
5 useCallback,
6 useMemo,
7} from "https://esm.sh/react@18.2.0";
8import { type Memory } from "../../shared/types.ts";
9import { ASSETS, SCENE_POSITIONS, SOURCE_TYPES } from "./assets.ts";
165 }, [fetchMemories]);
166
167 const handleAddMemory = async (e: React.FormEvent) => {
168 e.preventDefault();
169 if (!newMemoryText.trim()) return;
220 };
221
222 const handleUpdateMemory = async (e: React.FormEvent) => {
223 e.preventDefault();
224 if (!editingMemory || !editingMemory.text.trim()) return;
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { BlueskyIcon, DiscordIcon, GitHubIcon, RSSIcon, TwitterIcon } from "./icons.tsx";
3
20
21- **`/index.ts`**: Main entry point that sets up Hono routing and middleware
22- **`/components/`**: React components for rendering the blog
23 - **`Layout.tsx`**: Shared layout with header, footer, and styling
24 - **`HomePage.tsx`**: Renders the blog homepage with featured and recent posts
37### Technical Stack
38
39- **React**: For server-side rendering components
40- **Hono**: Lightweight web framework for routing
41- **Custom CSS**: For styling (no external frameworks)
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import wrap from "https://esm.sh/word-wrap@1.2.5";
3
7 title = "Val Town Blog",
8 ...props
9}: React.SVGProps<SVGSVGElement> & {
10 title?: string;
11}) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { render as renderPNG } from "https://deno.land/x/resvg_wasm@0.2.0/mod.ts";
3import { Hono } from "https://esm.sh/hono@3.12.0";
4import { renderToStaticMarkup } from "https://esm.sh/react-dom@18.2.0/server";
5import OGImage from "../components/OGImage.tsx";
6
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export default function (props: React.SVGProps<SVGSVGElement>) {
4 return (
5 <svg
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export default function(props: React.SVGProps<SVGSVGElement>) {
4 return (
5 <svg
18}
19
20export function Favicon(props: React.SVGProps<SVGSVGElement>) {
21 return (
22 <svg
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import type { BlogPost } from "../utils/types.ts";
4import Footer from "./Footer.tsx";
10interface LayoutProps {
11 title: string;
12 children: React.ReactNode;
13 post?: BlogPost;
14}
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export function RSSIcon (props: React.SVGProps<SVGSVGElement>) {
4 return (
5 <svg
24}
25
26export function TwitterIcon (props: React.SVGProps<SVGSVGElement>) {
27 return (
28 <svg
41}
42
43export function GitHubIcon (props: React.SVGProps<SVGSVGElement>) {
44 return (
45 <svg
59}
60
61export function BlueskyIcon (props: React.SVGProps<SVGSVGElement>) {
62 return (
63 <svg
75}
76
77export function DiscordIcon (props: React.SVGProps<SVGSVGElement>) {
78 return (
79 <svg