5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Val Town To-Do App</title>
7 <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml">
8 <!-- TailwindCSS -->
9 <script src="https://cdn.twind.style" crossorigin></script>
610{
611 "content": "The generated content as a string. For 'Blog Ideas', this should be a list of titles/concepts separated by newlines.",
612 "suggestions": "Optional brief suggestions for improving or using the content (e.g., 'Consider adding an image/video.', 'Research relevant keywords for blog posts.') as a string."
613}
614Do not include any explanatory text before or after the JSON object.`,
956 .fCA .fc:focus{color:#495057;background:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}
957 .fCA textarea.fc{min-height:80px}
958 .fCA select.fc{height:38px;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;padding-right:2.25rem}
959 .fCA .aB{display:inline-block;font-weight:500;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;border:1px solid transparent;padding:.5rem 1rem;font-size:.9rem;line-height:1.5;border-radius:.25rem;transition:all .15s ease-in-out;cursor:pointer;font-family:inherit;background:#00aa65;color:#fff;border-color:#00aa65;margin-top:1rem} /* Abbreviated action-button */
960 .fCA .aB:hover{background:#008751;border-color:#007a49}
40- Item 3
41
42### Images
43
44Images can be included using markdown syntax.
45
46## Conclusion
15 .min(1, "Quantity must be at least 1"),
16 category: Yup.string().required("Category is required"),
17 thumbNail: Yup.mixed().required("Product image is required"),
18});
19
83
84 <div className="mb-3">
85 <label>Product Image</label>
86 <input
87 type="file"
88 className="form-control"
89 accept="image/*"
90 onChange={(e) => setFieldValue("thumbNail", e.target.files[0])}
91 />
30 - **`proxy.ts`**: Proxy to the old blog for legacy content
31 - **`rss.ts`**: RSS feed generation
32 - **`favicon.ts`** & **`og-image.ts`**: Asset routes
33- **`/utils/`**: Utility functions for post processing, caching, etc.
34- **`/posts/`**: Markdown files for blog posts
69- Tables
70- Lists
71- Images
72- And other standard markdown features
73
91- Efficient proxy for legacy content
92- Minimal CSS with no external frameworks
93- Optimized image handling
94
95## Deployment
4const LINE_HEIGHT = 72;
5
6export default function OGImage({
7 title = "Val Town Blog",
8 ...props
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 {
