Val Town Code SearchReturn to Val Town

152    "slug": "post-mortem-esm-sh",
153    "link": "/blog/post-mortem-esm-sh",
154    "description": "Some vals experienced lockfile and React errors due to breaking changes in esm.sh",
155    "pubDate": "Thu, 16 Jan 2025 00:00:00 GMT",
156    "author": "Steve Krouse",

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import SocialLinks from "./SocialLinks.tsx";
3import LogoMark from "./LogoMark.tsx";

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Hono } from "https://esm.sh/hono@3.12.0";
3import { renderToStaticMarkup } from "https://esm.sh/react-dom@18.2.0/server";
4import { Favicon } from "../components/LogoMark.tsx";
5

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { formatDate, dayOfWeek } from "./util.tsx";
3

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 { BlogPostComponent } from "../components/BlogPost.tsx";
5import { getBlogPostBySlug } from "../utils/get-new-posts.ts";

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 Byline from "./Byline.tsx";

14|                     | Before                    | Now        |
15|---------------------|---------------------------|------------|
16| **Rendering**       | Astro                     | React      |
17| **Version control** | GitHub                    | Val Town   |
18| **Text editing**    | Local editor              | Val Town   |

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}) {