Val Town Code SearchReturn to Val Town

35We implemented the new blog system using:
36
37- React for rendering components
38- Tailwind CSS for styling
39- Unified/Remark/Rehype for markdown processing

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Hono } from "https://esm.sh/hono@3.12.0";
3import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
4import { HomePage } from "../components/HomePage.tsx";
5import { posts } from "../utils/posts.ts";

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { BlogPost } from "../utils/types.ts";
4import { Layout } from "./Layout.tsx";

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5const LOGO_URL = "https://maxm-imggenurl.web.val.run/elegant-restaurant-logo-for-Heaven-Delights-with-food-elements";

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { BlogPost as BlogPostType } from "../utils/types.ts";
4import { Layout } from "./Layout.tsx";

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import JSZip from "https://esm.sh/jszip@3.10.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
5
6// Fetch products from blob storage

20
21- **`/index.tsx`**: Main entry point that handles routing and proxying
22- **`/components/`**: React components for rendering the blog
23  - **`Layout.tsx`**: Shared layout component with header and Tailwind setup
24  - **`HomePage.tsx`**: Renders the blog homepage with the list of posts
29### Technical Stack
30
31- **React**: For rendering components
32- **Tailwind CSS**: For styling (via CDN)
33- **Unified/Remark/Rehype**: For markdown processing with GitHub Flavored Markdown support
69When modifying the blog system:
70
711. Update the React components in the `/components` directory
722. Modify the blog post utilities in `/utils/blogPosts.ts`
733. Test changes by visiting the homepage and individual blog posts

1/** @jsxImportSource https://esm.sh/react@19 */
2import { ArrowLeft, Share } from "https://esm.sh/lucide-react";
3import { useEffect, useState } from "https://esm.sh/react@19";
4
5export function Section({ children }: any) {

1/** @jsxImportSource https://esm.sh/react@19 */
2import fcsdk from "https://esm.sh/@farcaster/frame-sdk";
3import { ArrowLeft } from "https://esm.sh/lucide-react";
4import { NavLink, Route, Routes, useNavigate, useParams } from "https://esm.sh/react-router@7";
5import { useEffect, useState } from "https://esm.sh/react@19";
6import { Example } from "./components/Example.tsx";
7import { FarcasterMiniApp } from "./components/FarcasterMiniApp.tsx";

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5const VOICES = [