Val Town Code SearchReturn to Val Town

20  map.on("load", function() {
21    // Ajout de l'icône custom PNG blanc (hébergée sur Webflow, doit être blanc pur sur fond transparent)
22    map.loadImage(
23      "https://cdn.prod.website-files.com/680b45cea1d474e42a333f71/6849450d1f21ddfdce96b8bd_Vector.png",
24      (error, image) => {
25        if (error) throw error;
26        if (!map.hasImage("custom-marker")) {
27          map.addImage("custom-marker", image, { sdf: true });
28        }
29
80  mapLocations.features = [];
81  locationItems.forEach((item, idx) => {
82    // Récupère l'URL de l'image principale de la card
83    let image = item.getAttribute("data-image");
84    if (!image) {
85      const imgEl = item.querySelector(".image-card-results");
86      if (imgEl) {
87        image = imgEl.getAttribute("src");
88      }
89    }
90    if (!image) {
91      image = "https://uploads-ssl.webflow.com/placeholder.jpg";
92    }
93    const lat = parseFloat(item.getAttribute("data-lat"));
110          name: name,
111          city: city,
112          image: image,
113          description: description,
114          url: url,
158      <div id="popup-close-btn-${feature.id}" class="popup-close-btn"></div>
159      <div class="popup-content-inner">
160          <div class="popup-image">
161              <img src="${feature.properties.image}" loading="lazy" alt="${feature.properties.name}" class="popup-image">
162          </div>
163          <div class="popup-title">${feature.properties.name}</div>
277  const newFeatures = [];
278  visibleItems.forEach((item, idx) => {
279    let image = item.getAttribute("data-image");
280    if (!image) {
281      const imgEl = item.querySelector(".image-card-results");
282      if (imgEl) {
283        image = imgEl.getAttribute("src");
284      }
285    }
286    if (!image) {
287      image = "https://uploads-ssl.webflow.com/placeholder.jpg"; // Mets ici l'URL de ton image par défaut
288    }
289    const lat = parseFloat(item.getAttribute("data-lat"));
310          name: name,
311          city: city,
312          image: image,
313          description: description,
314          url: url,

17  //      },
18  //    }),
19  //    { headers: { "Content-Type": "image/jpeg" } }
20  //  );
21}

3 * It uses a textarea for HTML input and a button to trigger the conversion.
4 * To calculate the required SVG dimensions, it renders the input HTML into an off-screen div and measures its bounding box.
5 * The resulting SVG, containing the HTML in a <foreignObject>, is then displayed in four formats: raw SVG code, an SVG data URL, an HTML <img> tag, and a Markdown image link.
6 */
7import { serve } from "https://esm.town/v/g/serveUtils";
39
40        <div class="output-group">
41          <label>3. HTML Image Preview</label>
42          <div id="outputImageContainer"></div>
43          <label for="outputImageCode">HTML <code><img></code> Code</label>
44          <textarea id="outputImageCode" readonly rows="3"></textarea>
45        </div>
46
127    margin-bottom: 8px;
128  }
129  #outputImageContainer {
130    padding: 15px;
131    border: 1px dashed #ccc;
148    const outputSvgCode = document.getElementById("outputSvgCode");
149    const outputDataUrl = document.getElementById("outputDataUrl");
150    const outputImageContainer = document.getElementById("outputImageContainer");
151    const outputImageCode = document.getElementById("outputImageCode");
152    const outputMarkdown = document.getElementById("outputMarkdown");
153
190
191      // 3. Create the various output formats
192      const svgDataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgString)))}`;
193      const htmlImgTag = `<img src="${svgDataUrl}" alt="Generated from HTML" width="${width}" height="${height}">`;
194      const markdown = `![Generated Image](${svgDataUrl})`;
195
196      // 4. Display the outputs
200      outputDataUrl.value = svgDataUrl;
201
202      outputImageContainer.innerHTML = htmlImgTag;
203      outputImageCode.value = htmlImgTag;
204
205      outputMarkdown.value = markdown;
206    });
207
208    [outputSvgCode, outputDataUrl, outputImageCode, outputMarkdown].forEach(textarea => {
209        textarea.addEventListener('click', () => {
210            textarea.select();

19  date: string;
20  doc: string;
21  image: string;
22  tags: string;
23  title: string;
81      sequences: item.sequences,
82      date: item.date,
83      image: item.image,
84      backlinks: item.backlinks,
85      category: extractPostCategory(item),
130        (page.sequences?.length > 0 ? `- sequences: ${page.sequences.map(seq => `[Sequence ${seq.id} on ${seq.topic}](${SITE_URL}/sequences#${seq.id})`).join(", ")}` : null),
131        (page.book ? `- book_id: ${page.book}` : null),
132        (page.image ? `- image: ${page.image}` : null),
133        (page.score ? `- relevance: ${page.score.toFixed(3)}` : null),
134    ].filter((a) => a !== null).join("\n");

11
12    <!-- reference the webpage's favicon. note: currently only svg is supported in val town files -->
13    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
14
15    <!-- import the webpage's javascript file -->

295  // console.log("User", uid, user);
296
297  const image =
298    user?.pfp_url ||
299    userImageUrl(uid) ||
300    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjmD59ugIABXQB5tNl2LwAAAAASUVORK5CYII='
301
302  const goToProfile = (uid) => {
329        <img
330          className="rounded-full w-14 h-14 object-cover bg-neutral-500/10"
331          src={image}
332          onClick={() => setShowMenu(true)}
333        />
346          <img
347            className="rounded-full w-14 h-14 object-cover bg-neutral-500/10"
348            src={image}
349            onClick={() => setShowMenu(true)}
350          />
411}
412
413function userImageUrl(address) {
414  if (!address) return null
415  return 'https://cdn.stamp.fyi/avatar/' + address + '?s=140'

6import { handleAnalyticsEndpoints } from './analytics.ts'
7import { embedMetadata, handleFarcasterEndpoints, name } from './farcaster.ts'
8import { handleImageEndpoints } from './image.tsx'
9import { fetchNeynarGet } from './neynar.ts'
10
11const app = new Hono()
12
13handleImageEndpoints(app)
14handleFarcasterEndpoints(app)
15handleAgoraEndpoints(app)
54        <meta name="fc:frame" content={JSON.stringify(embedMetadata(baseUrl, path))} />
55        <link rel="icon" href={baseUrl + '/icon'} />
56        <meta property="og:image" content={baseUrl + '/image'} />
57      </head>
58      <body class="bg-white text-black dark:bg-black dark:text-white">

8import { fetchUsersById } from './neynar.ts'
9
10export function handleImageEndpoints(app: Hono) {
11  const headers = {
12    'Content-Type': 'image/png',
13    'cache-control': 'public, max-age=3600', // 86400
14  }
15  app.get('/image', async (c) => {
16    const channel = c.req.query('channel')
17    if (channel) return c.body(await spaceImage(channel), 200, headers)
18    return c.body(await homeImage(), 200, headers)
19  })
20  app.get('/icon', async (c) => {
21    const rounded = !!c.req.query('rounded')
22    return c.body(await iconImage(rounded), 200, headers)
23  })
24}
25
26export async function homeImage() {
27  return await ogImage(
28    <div tw="w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]">
29      <div tw="flex flex-col items-start">
37}
38
39export async function spaceImage(channel: string) {
40  const space = await fetchSpace(channel)
41  if (!space) return await homeImage()
42
43  const users = await fetchUsersById([space.created_by, ...space.hosts, ...space.speakers].join(','))
48  const speakers = users?.filter((u) => speakerFids.includes(u.fid))
49
50  return await ogImage(
51    <div tw="w-full h-full flex justify-start items-start text-[100px] bg-black text-white p-[50px]">
52      <div tw="flex flex-col items-start ">
84}
85
86export async function iconImage(rounded = false) {
87  const roundedClass = rounded ? 'rounded-[96px]' : ''
88  return await ogImage(
89    <div tw={`w-full h-full flex justify-center items-center text-[100px] bg-[#7c65c1] text-white p-[50px] ${roundedClass}`}>
90      <img tw="w-[350px] h-[350px]" src={base64Icon(Mic)} />
99//////////
100
101export async function ogImage(body, options = {}) {
102  const svg = await satori(body, {
103    width: 945,
109      if (code === 'emoji') {
110        const unicode = segment.codePointAt(0).toString(16).toUpperCase()
111        return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode))
112      }
113      return ''
145  const base64 = Buffer.from(svg).toString('base64')
146  // console.log('getIconDataUrl', name, svg, base64)
147  return `data:image/svg+xml;base64,${base64}`
148}
149

1// Convert image URL to base64
2async function getImageBase64(url: string): Promise<string> {
3  const res = await fetch(url);
4  const buffer = await res.arrayBuffer();
5  const base64 = btoa(String.fromCharCode(...new Uint8Array(buffer)));
6  const contentType = res.headers.get("content-type") || "image/png";
7  return `data:${contentType};base64,${base64}`;
8}
20  const { applyPlugin } = await import("npm:jspdf-autotable");
21
22  const logoDataUrl = await getImageBase64(
23    "https://www.glance.cx/hs-fs/hubfs/raw_assets/public/Glance/images/gradientLogo.png"
24  );
25
44  let y = 20;
45
46  // Add image: (imageData, format, x, y, width, height)
47  doc.addImage(logoDataUrl, "PNG", 20, y, 30, 10);
48  y += 30;
49

9      "User-Agent":
10        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
11      "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
12      "Accept-Language": "en-US,en;q=0.9",
13      "Accept-Encoding": "gzip, deflate, br",