Townie2.cursorrules2 matches
178179- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken180- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead181- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`182- **Storage:** DO NOT use the Deno KV module for storage183- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
Townie2ChatRouteSingleColumn.tsx15 matches
10import { useCreditBalance } from "../hooks/useCreditBalance.tsx";11import { Messages } from "./Messages.tsx";12import { InputBox, ImageDropContainer } from "./InputBox.tsx";13import { PreviewFrame } from "./PreviewFrame.tsx";14import { BranchSelect } from "./BranchSelect.tsx";68refetch: () => void;69}) {70const [images, setImages] = useState<(string|null)[]>([]);71const [selectedFiles, setSelectedFiles] = useState<string[]>([]);72const { audio, user } = useContext(AppContext);88branchId,89selectedFiles,90images,91soundEnabled: audio,92});137138return (139<ImageDropContainer140running={running}141images={images}142setImages={setImages}>143<div className="single-column-container">144<div className="single-sticky-header">148rel="norefferer"149className="block-link text-link lockup">150{project.imageUrl ? (151<img src={project.imageUrl} className="image-thumbnail" />152) : user?.profileImageUrl ? (153<img154src={user.profileImageUrl}155className="avatar"156alt={user.username}159/>160) : (161<div className="image-placeholder" />162)}163<div>{project.name}</div>211onSubmit={e => {212handleSubmit(e);213setImages([]);214}}215onCancel={handleStop}216running={running}217error={error}218images={images}219setImages={setImages}220/>221)}223</div>224</div>225</ImageDropContainer>226);227}
6<title>React Hono Val Town Starter</title>7<script src="https://cdn.tailwindcss.com"></script>8<link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">9</head>10<body class="bg-gray-100 font-sans">
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:4567For 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`2223As 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/).2425## `components/`
1# New Blog Post - Email Notifier2Want to follow a blog but don't use RSS feeds? Try this val, originally [created by saltcod](https://www.val.town/x/saltcod/SethGodinBlogEmail)!345## Usage instructions
log-media-request-headersimage.tsx0 matches
thehost-mapboxscript.js21 matches
20map.on("load", function() {21// Ajout de l'icône custom PNG blanc (hébergée sur Webflow, doit être blanc pur sur fond transparent)22map.loadImage(23"https://cdn.prod.website-files.com/680b45cea1d474e42a333f71/6849450d1f21ddfdce96b8bd_Vector.png",24(error, image) => {25if (error) throw error;26if (!map.hasImage("custom-marker")) {27map.addImage("custom-marker", image, { sdf: true });28}2980mapLocations.features = [];81locationItems.forEach((item, idx) => {82// Récupère l'URL de l'image principale de la card83let image = item.getAttribute("data-image");84if (!image) {85const imgEl = item.querySelector(".image-card-results");86if (imgEl) {87image = imgEl.getAttribute("src");88}89}90if (!image) {91image = "https://uploads-ssl.webflow.com/placeholder.jpg";92}93const lat = parseFloat(item.getAttribute("data-lat"));110name: name,111city: city,112image: image,113description: description,114url: 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>277const newFeatures = [];278visibleItems.forEach((item, idx) => {279let image = item.getAttribute("data-image");280if (!image) {281const imgEl = item.querySelector(".image-card-results");282if (imgEl) {283image = imgEl.getAttribute("src");284}285}286if (!image) {287image = "https://uploads-ssl.webflow.com/placeholder.jpg"; // Mets ici l'URL de ton image par défaut288}289const lat = parseFloat(item.getAttribute("data-lat"));310name: name,311city: city,312image: image,313description: description,314url: url,
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";3940<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>46127margin-bottom: 8px;128}129#outputImageContainer {130padding: 15px;131border: 1px dashed #ccc;148const outputSvgCode = document.getElementById("outputSvgCode");149const outputDataUrl = document.getElementById("outputDataUrl");150const outputImageContainer = document.getElementById("outputImageContainer");151const outputImageCode = document.getElementById("outputImageCode");152const outputMarkdown = document.getElementById("outputMarkdown");153190191// 3. Create the various output formats192const svgDataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgString)))}`;193const htmlImgTag = `<img src="${svgDataUrl}" alt="Generated from HTML" width="${width}" height="${height}">`;194const markdown = ``;195196// 4. Display the outputs200outputDataUrl.value = svgDataUrl;201202outputImageContainer.innerHTML = htmlImgTag;203outputImageCode.value = htmlImgTag;204205outputMarkdown.value = markdown;206});207208[outputSvgCode, outputDataUrl, outputImageCode, outputMarkdown].forEach(textarea => {209textarea.addEventListener('click', () => {210textarea.select();
basic-html-starterindex.html1 match
1112<!-- 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">1415<!-- import the webpage's javascript file -->
