Search

getAppleWeather

@chet

An interactive, runnable TypeScript val by chet

Script

import { createJTW, getForecast } from "npm:apple-weatherkit";

export async function getAppleWeather(args: { lat: number; lng: number }) {

const token = createJTW({

teamId: process.env.APPLE_WEATHERKIT_TEAM_ID,

serviceId: process.env.APPLE_WEATHERKIT_SERVICE_ID,

keyId: process.env.APPLE_WEATHERKIT_KEY_ID,

privateKey: process.env.APPLE_WEATHERKIT_WEATHERKIT_KEY,

expireAfter: 60, // 1 minute

const forecast = await getForecast({ lat: args.lat, lng: args.lng, token });

return forecast;

blushSalamander

@pomdtr

An interactive, runnable TypeScript val by pomdtr

Script

import * as esbuild from "https://deno.land/x/esbuild@v0.20.1/wasm.js";

let ts = "let test: boolean = true";

let result = await esbuild.transform(ts, { loader: "ts" });

console.log("result:", result);

await esbuild.stop();

myApi

@sbeben

An interactive, runnable TypeScript val by sbeben

Script

export function myApi() {

return ` <!DOCTYPE html><html lang=";

en;

"><head><meta charset=";

UTF - 8;

"><meta name=";

viewport;

" content=";

width = device - width, initial - scale;

1.0;

gfm

@nbbaier

Convert markdown to Html with Github styling

Script

# Convert markdown to Html with Github styling

export async function gfm(markdown: string, options?: { title?: string; favicon?: string }) {

const html = await unified()

.use(remarkParse)

.use(remarkGfm)

.use(remarkRehype)

.use(rehypeDocument, {

title: options?.title,

link: [

{ href: `https://fav.farm/${options?.favicon || "📝"}`, rel: "icon" },

redditImageGrab

@yawnxyz

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

const subreddits = ["IdiotsInCars"];

const fetchWithImage = async (subreddit: string) => {

const { data: { children } } = await fetchJSON(

`https://www.reddit.com/r/${subreddit}.json`,

const posts = children

.map((child: any) => child.data)

.filter((post: any) => post.post_hint === "image")

.map((post: any) => ({

title: post.title,

hackerNewsDigest

@roramigator

Hacker News Digest Fork this val to get an email like this in your inbox!

Cron

# Hacker News Digest

Fork this val to get an email like this in your inbox!

// This cron emails Hacker News stories from its API every 3 days.

async function fetchStories(type: string, count: number) {

const response = await fetch(`https://hacker-news.firebaseio.com/v0/${type}stories.json`);

const storyIds = await response.json();

const stories = await Promise.all(

storyIds.slice(0, count).map(async (id: number) => {

const storyResponse = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`);

valle_tmp_6579538930770234611834582082941192

@janpaul123

// This val will respond to any request with an HTML "Hello, world!" message with some fun CSS styles and an animated cat

HTTP (deprecated)

// This val will respond to any request with an HTML "Hello, world!" message with some fun CSS styles and an animated cat

export default async function(req: Request): Promise<Response> {

const html = `

<html>

<head>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

limeBandicoot

@jinhanJPpark

An interactive, runnable TypeScript val by jinhanJPpark

Script

export const SAMPLE_JOKE = {

"setup": "What do you call a group of disorganized cats?",

"punchline": "A cat-tastrophe.",

getmiraclechildcounter

@politelyinvinciblepointer

An interactive, runnable TypeScript val by politelyinvinciblepointer

Script

import { miraclechildcounter } from "https://esm.town/v/politelyinvinciblepointer/miraclechildcounter";

export function getmiraclechildcounter() {

return miraclechildcounter;

count_visits

@muhammad_owais_warsi

Count Visits Get code and embed it on your website to count the number of visitors.

HTTP

# Count Visits

Get code and embed it on your website to count the number of visitors.

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

function App() {

const [websiteUrl, setWebsiteUrl] = useState("");

const [embedCode, setEmbedCode] = useState("");

const [visitorCount, setVisitorCount] = useState(0);

const generateEmbedCode = async () => {

if (!websiteUrl) return;

const response = await fetch("/generate-embed", {

easingbattleground

@ejfox

May the best easing win

HTTP

May the best easing win

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

function EasingVisualizer({ easing }) {

const canvasRef = React.useRef(null);

React.useEffect(() => {

const canvas = canvasRef.current;

const ctx = canvas.getContext('2d');

const width = canvas.width;

const height = canvas.height;

function drawCurve() {

LofiGirlSimpleRunner

@macro21kgb

@jsxImportSource https://esm.sh/react

HTTP

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

const LOFI_GIRL_URL = "https://www.youtube.com/embed/jfKfPfyJRdk?autoplay=1";

const LOFI_BOY_URL = "https://www.youtube.com/embed/4xDzrJKXOOY?autoplay=1";

function App() {

const [selectedPlaylist, setSelectedPlaylist] = useState(null);

const selectPlaylist = (url) => {

setSelectedPlaylist(url);

return (

<h1>Lofi Playlist Selector</h1>

jsPDFExample

@maxm

An interactive, runnable TypeScript val by maxm

HTTP (deprecated)

import { jsPDF } from "npm:jspdf";

export const helloWorldPDF = async (req: Request) => {

const doc = new jsPDF();

doc.text("Hello world!", 10, 10);

return new Response(doc.output(), {

headers: { "Content-Type": "application/pdf" },

greenTiger

@maxm

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

import { renderToString } from "npm:react-dom/server";

export default async function(req: Request): Promise<Response> {

return new Response(

renderToString(

<div>

<img src="https://64.media.tumblr.com/347d0addf60ae94599cc49ae01681040/252a4ce9dd8f1e3b-a4/s500x750/ea6db36d749669d43

</div>,

{ headers: { "content-type": "text/html" } },

reacttldrawclient

@tmcw

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

Script

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

// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)

// import "https://esm.sh/tldraw/tldraw.css";

export function App() {

return (

</div>

// The app will be rendered inside the root div

const root = ReactDOM.createRoot(document.getElementById("root"));

…

68 69

71 72

…

364