33 Category?: string;
34 Tags?: string[];
35 "Card Image"?: AirtableAttachment[];
36 "Intro Image"?: AirtableAttachment[];
37 "Body Image 1"?: AirtableAttachment[];
38 "Body Image 2"?: AirtableAttachment[];
39 "Body Image 3"?: AirtableAttachment[];
40 "Quote or Emphasized Text 1"?: string;
41 "Quote or Emphasized Text 2"?: string;
68 category: string;
69 tags: string[];
70 cardImage: string;
71 introImage: string;
72 bodyImage1: string;
73 bodyImage2: string;
74 bodyImage3: string;
75 quoteText1: string;
76 quoteText2: string;
223 category: rec.fields["Category"] || "",
224 tags: [...(rec.fields["Tags"] || []), ...(aiEnhancements?.aiTags || [])],
225 cardImage: getAttachmentUrl(rec.fields["Card Image"]),
226 introImage: getAttachmentUrl(rec.fields["Intro Image"]),
227 bodyImage1: getAttachmentUrl(rec.fields["Body Image 1"]),
228 bodyImage2: getAttachmentUrl(rec.fields["Body Image 2"]),
229 bodyImage3: getAttachmentUrl(rec.fields["Body Image 3"]),
230 quoteText1: rec.fields["Quote or Emphasized Text 1"] || "",
231 quoteText2: rec.fields["Quote or Emphasized Text 2"] || "",
1# Code on Val Town
2
3
4
5Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it.
24 Category?: string;
25 Tags?: string | string[];
26 "Card Image"?: AirtableAttachment[];
27 "Intro Image"?: AirtableAttachment[];
28 "Body Image 1"?: AirtableAttachment[];
29 "Body Image 2"?: AirtableAttachment[];
30 "Body Image 3"?: AirtableAttachment[];
31 "Quote or Emphasized Text 1"?: string;
32 "Quote or Emphasized Text 2"?: string;
164 <p className="mb-2">{item.fields.ShortCardText}</p>
165 <p className="text-sm text-gray-600 mb-4">Read time: {item.fields.ReadTime}</p>
166 {item.fields["Card Image"] && item.fields["Card Image"][0] && (
167 <img
168 src={item.fields["Card Image"][0].url}
169 alt={item.fields.Title}
170 className="w-full h-48 object-cover rounded-md mb-4"
467 title={item.fields.Title}
468 description={item.fields.ShortCardText}
469 image={item.fields["Card Image"] && item.fields["Card Image"][0] ? item.fields["Card Image"][0].url : null}
470 />
471 )),
473}
474
475function ContentItem({ title, description, image }) {
476 return {
477 width: 300,
482 boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
483 children: [
484 image && {
485 width: "100%",
486 height: 200,
487 background: `url(${image})`,
488 backgroundSize: "cover",
489 backgroundPosition: "center",
490 },
491 {
492 y: image ? 200 : 0,
493 padding: 20,
494 children: [
1165 <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166 <meta property="og:type" content="website">
1167 <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168
1169
13 if (selectedFile) {
14 // Validate file type and size
15 const allowedTypes = ['image/', 'video/'];
16 const maxFileSize = 50 * 1024 * 1024; // 50MB
17
89 <input
90 type="file"
91 accept="image/*,video/*"
92 onChange={handleFileUpload}
93 style={{
175
176 // Additional server-side validation
177 const allowedTypes = ['image/', 'video/'];
178 const maxFileSize = 50 * 1024 * 1024; // 50MB
179
13 if (selectedFile) {
14 // Validate file type and size
15 const allowedTypes = ['image/', 'video/'];
16 const maxFileSize = 50 * 1024 * 1024; // 50MB
17
89 <input
90 type="file"
91 accept="image/*,video/*"
92 onChange={handleFileUpload}
93 style={{
175
176 // Additional server-side validation
177 const allowedTypes = ['image/', 'video/'];
178 const maxFileSize = 50 * 1024 * 1024; // 50MB
179
16};
17
18type ImageData = {
19 type: "image";
20 text: string;
21 name?: string | undefined;
48};
49
50export type Data = BooleanData | TextData | ImageData | SpeechData | WebsiteData | FileData;
51
52type DataComponentRequestBody = {
7function renderMainView() {
8 // Default avatar as inline SVG
9 const defaultAvatarSvg = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
10 <circle cx="50" cy="50" r="45" fill="#e0e0e0"/>
11 <circle cx="50" cy="40" r="20" fill="#888"/>
10
11<div align="center">
12<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
13</div>
10
11<div align="center">
12<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
13</div>
