Search
softBronzeGibbon
@Signal
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 **/
import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
export default (req: Request) => {
return new Response(
intelligentTanPelican
@mobile247
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 **/
import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
export default (req: Request) => {
return new Response(
tursoOld
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Script
export let tursoOld = async ({ url, authToken }) => {
// https://cdn.jsdelivr.net/npm/@libsql/client/web
const { createClient } = await import("https://esm.sh/@libsql/client/web");
return createClient({
url,
stagingdailyschedule
@keenanzucker
@jsxImportSource npm:react
HTTP
/** @jsxImportSource npm:react **/
import { renderToString } from "npm:react-dom@18/server";
import { addDays } from "npm:date-fns";
.then((data) => data);
// ============= React Components =================
const Schedule = ({ data }) => {
useCodemirror
@jxnblk
// codemirror esm react hook
Script
// codemirror esm react hook
import { defaultKeymap } from "https://esm.sh/@codemirror/commands";
import { history } from "https://esm.sh/@codemirror/commands";
rectangularSelection,
} from "https://esm.sh/@codemirror/view";
import { useEffect, useRef, useState } from "https://esm.sh/react";
const baseExtensions = [
EditorView.lineWrapping,
blissfulBlackToucan
@ibuuvai
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react **/
import { renderToString } from "https://esm.sh/react-dom@18/server";
export default (req: Request) => {
return new Response(
codeIconReact
@jxnblk
@jsxImportSource npm:react
Script
/** @jsxImportSource npm:react */
import React from "npm:react";
export default function CodeIcon(props: React.SVGProps<SVGSVGElement>) {
return (
AlgoliaDocumentaion
@willthereader
An interactive, runnable TypeScript val by willthereader
Script
Add InstantSearch configuration
Create a search.js file. It will contain configuration for algoliasearch client and InstantSearch.js UI.
import algoliasearch from 'algoliasearch/lite';
import { getPropertyByPath } from 'instantsearch.js/es/lib/utils';
const searchClient = algoliasearch('L3YFVOR7YL', '7fb55c7d480ef8b1ad09b55bf3d57afd');
const search = instantsearch({
indexName: 'Test_index',
searchClient,
search.addWidgets([
import { searchBox, hits } from 'instantsearch.js/es/widgets';
const searchClient = algoliasearch('L3YFVOR7YL', '7fb55c7d480ef8b1ad09b55bf3d57afd');
const search = instantsearch({
indexName: 'demo_ecommerce',
searchClient,
search.addWidgets([
Copy
const searchClient = algoliasearch('L3YFVOR7YL', '7fb55c7d480ef8b1ad09b55bf3d57afd');
const search = instantsearch({
indexName: 'demo_ecommerce',
searchClient,
search.addWidgets([
yarn create instantsearch-app 'getting-started'
To launch the app, type inside your terminal:
shell
linkInBioTemplate
@vacav
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";
export default async function(req: Request) {
return new Response(
helloworld
@gueejla
Hello val town!
HTTP
/** @jsxImportSource npm:react **/
import { renderToString } from "npm:react-dom@18/server";
export default (req: Request) => {
return new Response(
lastlogin
@pomdtr
Lastlogin Authentication for val.town Looking for an hono integration ? See @pomdtr/lastloginHono Support login in trough: Email Link QR Code Google Oauth Github Oauth Gitlab Oauth Facebook Oauth Demo You can try a demo at https://pomdtr-lastloginhonoexample.web.val.run (see @pomdtr/lastLoginHonoExample for code) Usage Wrap your http handlers in a lastlogin middleware (sessions will be persisted in the lastlogin_session table on your sqlite account). If you want to be the only one able to access your val, you can use @pomdtr/verifyUserEmail. import { lastlogin } from "https://esm.town/v/pomdtr/lastlogin";
import { verifyUserEmail } from "https://esm.town/v/pomdtr/verifyUserEmail";
export default lastlogin((req) => {
return new Response(`You are logged in as ${req.headers.get("X-LastLogin-Email")}`);
}, {
// check that the user email match your val town email
verifyEmail: verifyUserEmail
}); If you want to customize how is allowed to signup, you can set the verifyEmail option: import { lastlogin } from "https://esm.town/v/pomdtr/lastlogin";
export default lastlogin((req) => {
return new Response(`You are logged in as ${req.headers.get("X-LastLogin-Email")}`);
}, {
verifyEmail: (email) => { email == "steve@valtown" }
}); You can allow anyone to signup by returning a boolean from the verifyEmail function: import { lastlogin } from "https://esm.town/v/pomdtr/lastlogin";
export default lastlogin((req) => {
return new Response(`You are logged in as ${req.headers.get("X-LastLogin-Email")}`);
}, {
verifyEmail: (_email) => true
}); Public Routes import { lastlogin } from "https://esm.town/v/pomdtr/lastlogin";
import { verifyUserEmail } from "https://esm.town/v/pomdtr/verifyUserEmail";
export default lastlogin(() => {
return new Response("Hi!");
}, {
verifyEmail: verifyUserEmail,
public_routes: ["/", "/public/*"],
}); See the URLPattern API for reference. Logout Just redirect the user to /auth/logout
Script
const url = new URL(req.url);
const clientID = `${url.protocol}//${url.host}/`;
const redirectUri = `${url.protocol}//${url.host}/auth/callback`;
const tokenUrl = new URL("https://lastlogin.net/token");
tokenUrl.searchParams.set("client_id", clientID);
tokenUrl.searchParams.set("code", code);
const authUrl = new URL("https://lastlogin.net/auth");
authUrl.searchParams.set("client_id", clientID);
authUrl.searchParams.set("redirect_uri", redirectUri);
diplomaticAmberWombat
@dave_smith
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 **/
import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
export default (req: Request) => {
return new Response(
highlight
@just_be
Highlight This val exposes and endpoint that you can post code to and get back syntax highlighted
html via Shiki . Shiki does server side highlighting, so it's
perfect for val.town. You can switch themes by providing ?theme=<theme> and specify
the language via ?lang=<language> Example You can play with a working example here . const res = await fetch(`https://just_be-highlight.web.val.run?lang=${lang}&theme=${theme}`, {
method: "POST",
body: code,
});
console.log(await res.text()) Why? I want to add syntax highlighting to my blog soon and I'm
experimenting with what it mean to offload parts of my rendering
to val.town (behind a content-addressible cache, of course).
HTTP
This val exposes and endpoint that you can post code to and get back syntax highlighted
html via [Shiki](https://shiki.style/). Shiki does server side highlighting, so it's
perfect for val.town. You can switch themes by providing `?theme=<theme>` and specify
isthegtrainfucked
@stevekrouse
@jsxImportSource https://esm.sh/preact
HTTP
/** @jsxImportSource https://esm.sh/preact */
import { activeGTrainAlerts } from "https://esm.town/v/pbt/gtrainalerts?v=36";
import { render } from "npm:preact-render-to-string";
import Uwuifier from "npm:uwuifier";
export default async function(req: Request) {
