Search

valle_tmp_065083194034399444924236047421617

@janpaul123

// Initialize sample stories and store them in blob storage

HTTP (deprecated)

// Initialize sample stories and store them in blob storage

const SAMPLE_STORIES_KEY = "hn_sample_stories";

async function initializeSampleStories() {

const existingStories = await blob.getJSON(SAMPLE_STORIES_KEY);

if (!existingStories) {

const sampleStories = Array.from({ length: 30 }).map((_, idx) => ({

id: idx + 1,

title: `Sample Story ${idx + 1}`,

url: `https://example.com/story${idx + 1}`,

votes: Math.floor(Math.random() * 100),

preactExample

@tfayyaz

@jsxImportSource https://esm.sh/preact

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/preact */

function Car(props) {

return <h2>Hi, I am a {props.color} component Car!</h2>;

function Garage() {

return (

<h1>Who lives in my Garage?</h1>

invoice_deta

@pomdtr

@jsxImportSource npm:hono/jsx

HTTP (deprecated)

/** @jsxImportSource npm:hono/jsx **/

const router = new Hono();

router.get("/", (c) => {

return c.html(

<html>

<body>

<ul>

{Object.keys(invoices).map((key) => (

aqi

@sina

An interactive, runnable TypeScript val by sina

Script

export let aqi = async () => {

let pm25 = (

await fetchJSON(

"https://api.openaq.org/v2/latest?" +

new URLSearchParams({

limit: "10",

page: "1",

location: "San Francisco",

offset: "0",

sort: "desc",

micromarkExample

@tmcw

micromark micromark is a fantastic choice for formatting Markdown : it's tiny, safe, works great with Val Town.

Script

# micromark

[micromark](https://github.com/micromark/micromark) is a fantastic choice for formatting [Markdown](https://www.markdownguide

export let micromarkExample = (async () => {

const { micromark } = await import("npm:micromark");

return micromark("**Bold text**");

ThumbMaker

* This application creates a thumbnail maker using Hono for server-side routing and client-side JavaScript for image processing. * It allows users to upload images, specify output options, and generate a composite thumbnail image. * The app uses the HTML5 Canvas API for image manipulation and supports drag-and-drop functionality. * * The process is divided into two steps: * 1. Generating thumbnails: Users choose thumbnail size options and create individual thumbnails. * 2. Rendering: Users can create and export the final composite image with options for format and quality. * This two-step process allows changing format or quality without re-rendering the entire canvas. * * Additional features: * - Users can go back from the second step to the first one to regenerate thumbnails. * - Dropping new files takes the user back to the first step. * - A "Download Metadata" button is added to download a JSON file with thumbnail information.

HTTP

* This application creates a thumbnail maker using Hono for server-side routing and client-side JavaScript for image process

* It allows users to upload images, specify output options, and generate a composite thumbnail image.

* The app uses the HTML5 Canvas API for image manipulation and supports drag-and-drop functionality.

* The process is divided into two steps:

* 1. Generating thumbnails: Users choose thumbnail size options and create individual thumbnails.

* 2. Rendering: Users can create and export the final composite image with options for format and quality.

* This two-step process allows changing format or quality without re-rendering the entire canvas.

* Additional features:

* - Users can go back from the second step to the first one to regenerate thumbnails.

* - Dropping new files takes the user back to the first step.

hydrate_hono_islands

@pomdtr

An interactive, runnable TypeScript val by pomdtr

Script

const islands = Array.from(document.querySelectorAll("[data-hydration-src]"));

if (islands.length > 0) {

const { render } = await import("https://esm.sh/hono/jsx/dom");

const { jsx: _jsx } = await import("https://esm.sh/hono/jsx/dom/jsx-runtime");

for (const island of islands) {

let src = island.getAttribute("data-hydration-src");

if (!src.startsWith("https://")) {

src = `https://esm.town/v/${src}`;

let name = island.getAttribute("data-hydration-name");

if (!name) {

getContentFromUrl

@yawnxyz

getContentFromUrl Use this for summarizers. Combines https://r.jina.ai/URL and markdown.download's Youtube transcription getter to do its best to retrieve content from URLs. https://arstechnica.com/space/2024/06/nasa-indefinitely-delays-return-of-starliner-to-review-propulsion-data https://journals.asm.org/doi/10.1128/iai.00065-23 Usage: https://yawnxyz-getcontentfromurl.web.val.run/https://www.ncbi.nlm.nih.gov/pmc/articles/PMC10187409/ https://yawnxyz-getcontentfromurl.web.val.run/https://www.youtube.com/watch?v=gzsczZnS84Y&ab_channel=PhageDirectory

1 4

HTTP

## getContentFromUrl

Use this for summarizers.

Combines `https://r.jina.ai/URL` and markdown.download's Youtube transcription getter to do its best to retrieve content from

https://arstechnica.com/space/2024/06/nasa-indefinitely-delays-return-of-starliner-to-review-propulsion-data

https://journals.asm.org/doi/10.1128/iai.00065-23

Usage:

/** @jsx jsx */

const app = new Hono();

// https://www.crossref.org/blog/dois-and-matching-regular-expressions/

const DOI_REGEX = /\b(10\.\d{4,9}\/[-._;()\/:\w]+)\b/i;

valle_tmp_50677281064121176482256801591227

@janpaul123

// Improvements Made:

HTTP (deprecated)

// Improvements Made:

// - Re-organized and cleaned the code for better readability and maintainability.

// - Added some comments to explain major parts of the implementation.

// - Updated form elements to handle common form submission patterns more gracefully.

// - Improved existing functions and refactored to maintain a clean structure while keeping it consistent with the existing c

const vt = new ValTown({ bearerToken: Deno.env.get("valtown") });

const username = "janpaul123";

const app = new Hono();

// Helper Function: Render JSX to HTML Response

const jsxResponse = (jsx) => {

ffmpegRepro2

@vlad

An interactive, runnable TypeScript val by vlad

Script

export const ffmpegRepro2 = (async () => {

const { createFFmpeg, fetchFile } = await import("npm:@ffmpeg/ffmpeg");

const ffmpeg = createFFmpeg({

mainName: "main",

corePath: "https://unpkg.com/@ffmpeg/core-st@0.11.1/dist/ffmpeg-core.js",

await ffmpeg.load();

valshot

@pomdtr

Val Shot Usage https://pomdtr-valshot.web.val.run/v/<author>/<val> Example https://pomdtr-valshot.web.val.run/v/pomdtr/valshot

HTTP (deprecated)

# Val Shot

## Usage

`https://pomdtr-valshot.web.val.run/v/<author>/<val>`

## Example

- <https://pomdtr-valshot.web.val.run/v/pomdtr/valshot>

const router = new Hono();

const { author, name } = extractValInfo(import.meta.url);

router.get("/", async c => {

return c.html(gfm(await readme(author, name)));

router.get("/v/:author/:name", async (c) => {

fetchReadable

@hvlck

// inspired by https://www.val.town/v/stevekrouse/fetchJSON

Script

// inspired by https://www.val.town/v/stevekrouse/fetchJSON

interface Readable {

title: string;

content: string;

textContent: string;

length: number;

excerpt: string;

byline: string;

dir: string;

siteName: string;

browserlessPuppeteerExample

@nisargio

An interactive, runnable TypeScript val by nisargio

Script

export const browserlessPuppeteerExample = (async () => {

const puppeteer = new PuppeteerDeno({

productName: "chrome",

const browser = await puppeteer.connect({

browserWSEndpoint: `wss://chrome.browserless.io?token=${process.env.browserlessKey}`,

const page = await browser.newPage();

await page.goto("https://en.wikipedia.org/wiki/OpenAI");

const intro = await page.evaluate(

`document.querySelector('p:nth-of-type(2)').innerText`,

await browser.close();

addToLog

@ejfox

* This chat application allows users to post messages and view a log of all messages. * It uses SQLite for persistence and React for the frontend. * The server handles message posting and retrieval, while the client renders the UI.

HTTP

* This chat application allows users to post messages and view a log of all messages.

* It uses SQLite for persistence and React for the frontend.

* The server handles message posting and retrieval, while the client renders the UI.

/** @jsxImportSource https://esm.sh/react */

interface Message {

id: number;

content: string;

timestamp: string;

function App() {

const [messages, setMessages] = useState<Message[]>([]);

WobbleShapes

@yawnxyz

@jsxImportSource https://esm.sh/react

HTTP

/** @jsxImportSource https://esm.sh/react */

function PotteryPlate({ radius, color, wobbliness, wobbleFrequency, wobbleIrregularity, rotation }) {

const points = [];

const centerX = 250;

const centerY = 250;

const numPoints = 180;

const irregularities = Array.from({ length: wobbleFrequency }, () => Math.random() * 2 * Math.PI);

for (let i = 0; i < numPoints; i++) {

const angle = (i / numPoints) * 2 * Math.PI;

let noise = 0;

…

45 46

48 49

…

364