Search

export async function getUrlMetadata(url) {

try {

const metadata = await urlMetadata(url);

return metadata;

} catch (err) {

console.error('Error fetching metadata:', err);

return null;

#!/usr/bin/env -S deno run --allow-net

const command = new Command()

.name("serve-gh-repo")

.option("--port <port:number>", "Port to listen on", { default: 8080 })

.option("--ref <ref:string>", "Branch, tag or commit to serve", {

default: "main",

.option("--root <root:string>", "Root directory to serve")

.option("--prefix <prefix:string>", "Prefix to strip from URL")

.arguments("<repo:string>")

.action(({ port, ref, prefix, root }, repo) => {

View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page.


Install the latest stable version (v66) by forking this val:

[](https://www.val.town/v/stevekrouse/sqlite_explorer/fork)

EditorSection,

MockTable,

Separator,

View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page.


Install the latest stable version (v86) by forking this val:

[)](https://www.val.town/v/nbbaier/sqlite_explorer/fork)

EditorSection,

MockTable,

Separator,

This doesn't work :( I hate it. Gonna have to write my own emacs mode probably, this one (that basically every codemirror based editor uses) is broken.

const ret = await build({

dependencies: {

"@codemirror/view": "^6",

"@codemirror/autocomplete": "^6",

"@codemirror/lang-javascript": "^6",

"@codemirror/lint": "^6",

"@codemirror/state": "^6",

"@typescript/vfs": "^1.5.0",

function getRandomEmoji() {

const emojis = ['😀', '😎', '🤖', '👻', '🚀', '🌈', '🍕', '🎉', '💡', '🔥', '🌟', '🦄'];

return emojis[Math.floor(Math.random() * emojis.length)];

function App() {

const [vals, setVals] = useState([]);

const [error, setError] = useState(null);

const [loading, setLoading] = useState(true);

const handleValClick = (valId) => {

function handleKeyDown(e) {

alert(JSON.stringify(e));

function App() {

const [collections, setCollections] = React.useState([]);

const [links, setLinks] = React.useState([]);

const [vals, setVals] = React.useState([]);

const [selected, setSelected] = React.useState([]);

const [selectedCollection, setSelectedCollection] = React.useState();

const update = {

* This val creates a tech stack inventory chooser using React and Tailwind CSS for styling.

* It allows users to select technologies for different categories and displays the chosen stack.

const techCategories = {

frontend: ["React", "Vue", "Angular", "Svelte"],

backend: ["Node.js", "Python", "Ruby", "Java"],

database: ["PostgreSQL", "MongoDB", "MySQL", "SQLite"],

hosting: ["AWS", "Google Cloud", "Heroku", "DigitalOcean"],

function App() {

const [selectedTech, setSelectedTech] = useState({});

import { Hono } from "npm:hono@3";

const app = new Hono();

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

await email({ text: "emails emails emails!" });

return c.text("Email success!")

export default app.fetch;

const basic = (val: number) => (

match(val)

.with(

P.when((_val) => _val % 5 === 0 && _val % 3 === 0),

() => "fizzbuzz",

.with(

P.when((_val) => _val % 5 === 0),

() => "buzz",

.with(

P.when((_val) => _val % 3 === 0),

🌐 Client Side code for the React example

* @title React CSR Client in Val Town

* @description Client-side React application for a personal portfolio website.

const Navigation = () => (

<nav>

<NavLink to="/" className={({ isActive }) => (isActive ? 'active' : '')} end>Home</NavLink>

<NavLink to="/projects" className={({ isActive }) => (isActive ? 'active' : '')}>Projects</NavLink>

<NavLink to="/about" className={({ isActive }) => (isActive ? 'active' : '')}>About</NavLink>

</nav>

import { scriptTag } from "https://esm.town/v/liamdanielduffy/scriptTag";

export function addReactFromValCDN(): string {

const reactDom = scriptTag({

src: "https://api.val.town/v1/express/liamdanielduffy.REACT_DOM_CDN_VAL",

const react = scriptTag({

src: "https://api.val.town/v1/express/liamdanielduffy.REACT_CDN_VAL",

return [react, reactDom].join(" ");

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

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

const doc = new jsPDF();

doc.text("Hello world - Just a test!", 10, 10);

return new Response(doc.output(), {

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

export const axiosEx = (async () => {

const { default: axios } = await import("https://esm.sh/axios");

let r = await axios.get("https://api.github.com/users/stevekrouse/following");

return JSON.stringify(r);

export const SAMPLE_JOKE = {

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

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

async function fetchRandomJoke() {

const response = fetch(

"https://official-joke-api.appspot.com/random_joke",

return response.json();

const randomJoke = fetchRandomJoke();

const setup = randomJoke.setup;