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
7const app = new Hono();
10 const title = c.req.query("title");
11 const format = c.req.query("format");
12 const svg = renderToStaticMarkup(<OGImage title={title} />);
13
14 if (format === "svg") {
15 return new Response(svg, {
16 headers: {
17 "Content-Type": "image/svg+xml",
18 },
19 });
24 return new Response(png, {
25 headers: {
26 "Content-Type": "image/png",
27 "Content-Length": png.length.toString(),
28 },
4import faviconRoute from "./routes/favicon.ts";
5import homeRoutes from "./routes/home.ts";
6import ogImageRoute from "./routes/og-image.ts";
7import proxyRoutes from "./routes/proxy.ts";
8import rssRoute from "./routes/rss.ts";
28app.route("/rss.xml", rssRoute);
29app.route("/favicon.svg", faviconRoute);
30app.route("/og-image.png", ogImageRoute);
31app.route("/", blogRoutes);
32
1Eventually we should host all our images properly, but for now, drag and drop them here 👇
2
3* https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4d90a6f7-247c-4df4-3de6-928364e10000/public
4* https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/f175100b-a190-4772-7056-04c09f273a00/public
12}) {
13 const description = post?.description ?? SITE_DESCRIPTION;
14 const ogImage = new URL("/og-image.png", BLOG_URL);
15 ogImage.searchParams.append("title", title);
16
17 return (
19 <meta charSet="UTF-8" />
20 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
21 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
22
23 <title>{title === "Val Town Blog" ? title : `${title} | Val Town Blog`}</title>
30 <meta property="og:description" content={description} />
31
32 <meta property="og:image" content={ogImage} />
33
34 {/* Twitter */}
35 <meta property="twitter:card" content="summary_large_image" />
36 <meta property="twitter:url" content={BLOG_URL} />
37 <meta property="twitter:title" content={title} />
38 <meta property="twitter:description" content={description} />
39
40 <meta property="twitter:image" content={ogImage} />
41
42 {
79 "slug": "fal",
80 "link": "/blog/fal",
81 "description": "Bringing lightning fast AI image generation to Val Town",
82 "pubDate": "Thu, 31 Oct 2024 00:00:00 GMT",
83 "author": "Steve Krouse",
13 {
14 headers: {
15 "Content-Type": "image/svg+xml",
16 },
17 },
40- Item 3
41
42### Images
43
44Images can be included using markdown syntax.
45
46## Conclusion
6---
7
8
9
10We migrated our blog to Val Town 🥳
79## A fast migration
80
81How did we migrate 65 blog posts – with images, videos, and intricate formatting and styles – to an entirely new blog in a single day?
82
83We didn't. We left them where they are, and proxy to them.
3It's common to have code and types that are needed on both the frontend and the backend. It's important that you write this code in a particularly defensive way because it's limited by what both environments support:
4
5
6
7For example, you *cannot* use the `Deno` keyword. For imports, you can't use `npm:` specifiers, so we reccomend `https://esm.sh` because it works on the server & client. You *can* use TypeScript because that is transpiled in `/backend/index.ts` for the frontend. Most code that works on the frontend tends to work in Deno, because Deno is designed to support "web-standards", but there are definitely edge cases to look out for.
21## `favicon.svg`
22
23As of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).
24
25## `components/`
