andreterron/codeOnValTown

2 Likes

4 1

Non-Violent Communication (NVC) Mobile Worksheet

Inspired by the lovely iGrok mobile app.

nvc

100

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

import { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=46";

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

export const reactExample = (request: Request) =>

new Response(

modifyHtmlString(

renderToString(

<html

style={{

height: "100%",

boxSizing: "border-box",

textAlign: "center",

fontFamily: "sans-serif",

fontSize: "4vw",

}}

<head>

</head>

What are you feeling?

</div>

<div

style={{

boxSizing: "border-box",

flex: "2",

padding: "0 50px",

overflow: "auto",

gap: "30px",

display: "grid",

gridTemplateColumns: "1fr 1fr",

width: "100%",

}}

<div>

<div style={{ fontWeight: "bold" }}>Peaceful</div> <div>calm</div>

<div>content</div>

<div>satisfied</div>

<div>secure</div>

<div>centered</div>

<div>relieved</div>

<div>confident</div>

<div>comfortable</div>

<div>composed</div>

<div>

fulfilled

</div>

<div style={{ fontWeight: "bold" }}>Affectionate</div> <div>warm</div>

<div>tender</div>

<div>appreciative</div>

<div>passionate</div>

<div>compassionate</div>

<div>loving</div>

<div>touched</div>

</div>

<div style={{ fontWeight: "bold" }}>Happy</div> <div>glad</div>

<div>pleased</div>

<div>excited</div>

<div>joyful</div>

<div>delighted</div>

<div>amused</div>

<div>encouraged</div>

<div>grateful</div>

<div>hopeful</div>

<div>thrilled</div>

<div>moved</div>

</div>

Playful

</div>

<div>energetic</div>

<div>expansive</div>

<div>adventurous</div>

<div>mischievous</div>

<div>silly</div>

<div>light</div>

<div>hearted</div>

<div>enthusiastic</div>

<div>lively</div>

<div>optimistic</div>

</div>

Interested

</div>

<div>inspired</div>

<div>curious</div>

<div>surprised</div>

<div>stimulated</div>

<div>amazed</div>

Preview and edit blobs

Usage:

Create valimport blobEditor from "https://esm.town/v/pomdtr/blob_editor"

export default blobEditor("article.md")

You can easily protect your val behind @pomdtr/password_auth or @pomdtr/email_auth

blob_editor

100

/** @jsxImportSource https://esm.sh/hono/jsx **/

import { useEffect, useRef } from "https://esm.sh/hono/jsx/dom";

export function BlobEditor(props: { blob: { language?: string; text: string } }) {

const ref = useRef();

const saveBlob = async () => {

const resp = await fetch("/edit", {

method: "POST",

body: JSON.stringify({

text: ref.current!.code,

}),

});

if (!resp.ok) {

alert(await resp.text());

return;

}

window.location.replace("/");

};

return (

<code-mirror

style={{

flexGrow: 1,

backgroundColor: "#F9FAFB",

color: "#373C44",

}}

class="overflow-auto"

ref={ref}

code={props.blob.text}

language={props.blob.language}

</code-mirror>

</div>

</footer>

</article>

);

}

export function blobEditor(key: string, options?: { title?: string }) {

return async (req: Request) => {

const { html } = await import("https://esm.town/v/pomdtr/gfm");

const { blob } = await import("https://esm.town/v/std/blob?v=11");

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

const { Island } = await import("https://esm.town/v/pomdtr/hono_island");

const { HTTPException } = await import("npm:hono/http-exception");

const { jsxRenderer, useRequestContext } = await import("npm:hono/jsx-renderer");

const { extractValInfo } = await import("https://esm.town/v/pomdtr/extractValInfo");

async function readBlob(key: string) {

const resp = await blob.get(key);

if (resp.status == 200) {

return resp.text();

} else if (resp.status == 404) {

return "";

} else {

throw new Error(await resp.text());

}

const router = new Hono();

router.use(jsxRenderer(({ children }) => {

const c = useRequestContext();

const { pathname } = new URL(c.req.url);

return (

<html>

<head>

<link

rel="stylesheet"

href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"

<script

type="module"

src="https://esm.town/v/pomdtr/hydrate_hono_islands"

</script>

<script

type="module"

src="https://cdn.jsdelivr.net/npm/code-mirror-web-component@0.0.18/dist/code-mirror.js"

</script>

</head>

<body

style={{

height: "100vh",

}}

{children}

</body>

</html>

);

}));

1 3

Blob Admin

This is a lightweight Blob Admin interface to view and debug your Blob data.

b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png

Use this button to install the val:

It uses basic authentication with your Val Town API Token as the password (leave the username field blank).

TODO

/new - render a page to write a new blob key and value
/edit/:blob - render a page to edit a blob (prefilled with the existing content)
/delete/:blob - delete a blob and render success
add upload/download buttons
Use modals for create/upload/edit/view/delete page (htmx ?)
handle non-textual blobs properly
use codemirror instead of a textarea for editing text blobs

blob_admin

100

/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/

import view_route from "https://esm.town/v/pomdtr/blob_admin_blob";

import create_route from "https://esm.town/v/pomdtr/blob_admin_create";

import delete_route from "https://esm.town/v/pomdtr/blob_admin_delete";

import edit_route from "https://esm.town/v/pomdtr/blob_admin_edit";

import upload_route from "https://esm.town/v/pomdtr/blob_admin_upload";

import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=74";

import { blob } from "https://esm.town/v/std/blob?v=11";

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

import { jsxRenderer } from "npm:hono@4.0.8/jsx-renderer";

const app = new Hono();

app.use(

jsxRenderer(({ children }) => {

return (

<html>

<head>

<link

rel="stylesheet"

href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"

<script

type="module"

src="https://cdn.jsdelivr.net/npm/code-mirror-web-component@0.0.8/dist/code-mirror.js"

</script>

<title>Blob Admin</title>

</head>

<body>

{children}

</main>

</body>

</html>

);

}),

);

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

let blobs = await blob.list();

return c.render(

<h1>Blob Admin</h1>

<section

style={{

display: "flex",

gap: "0.5em",

}}

<a href="/upload">Upload Blob</a>

</section>

<table>

<thead>

<tr>

<th>Last Modified</th>

<th

style={{

textAlign: "center",

}}

Edit

</th>

<th

style={{

textAlign: "center",

}}

Delete

</th>

<th

style={{

textAlign: "center",

}}

Download

</th>

</tr>

</thead>

{blobs.map(b => (

<tr>

<td>

{b.key}

</a>

</td>

<td>{new Date(b.lastModified).toLocaleString()}</td>

<td

style={{

textAlign: "center",

}}

1 9 7 6

HTTP Client

Attach a postman-like http client to your vals, with bookmarks and history support

2fa974c630d393c3b4f419de8a142a2f35a11ceebda42d195b07623889e5604e.png

Usage

Wrap your http handler in an the httpClient middleware.

Create valimport {httpClient} from "https://esm.town/v/pomdtr/http_client"

export default httpClient((req) => {
   return new Response("Hello World!")
})

The http client will be shown on the root.

Adding bookmarks

You might want to bookmark some requests you need often. You can do it by passing a bookmark list as a middleware option:

Create valimport {httpClient} from "https://esm.town/v/pomdtr/http_client"

export default httpClient((req) => {
   return new Response("Hello World!")
}, {
  bookmarks: [
    {
      "label": "Dummy Request",
      "request": new Request("https://dummyjson.com/products")
    }
]})

ad7b95611871eb090ddadfa48f73d14692280e5389db1592403053d311aaa623.png

Customizing the client path

Create valimport {httpClient} from "https://esm.town/v/pomdtr/http_client"

export default httpClient((req) => {
   return new Response("Hello World!")
}, {
  path: "/http-client"
})

TODO

fix syntax highlighting on successive request
allow to prefill the initial request

http_client

/** @jsxImportSource npm:preact **/

import { html } from "https://esm.town/v/stevekrouse/html?v=5";

import { Base64 } from "npm:js-base64";

import { render } from "npm:preact-render-to-string";

type SerializedRequest = {

url: string;

method: string;

headers: [string, string][];

body: string | undefined;

};

type Bookmark = {

label: string;

request: Request;

};

async function serializeRequest(request: Request): Promise<SerializedRequest> {

return {

url: request.url,

method: request.method,

headers: Array.from(request.headers.entries()),

body: request.body ? Base64.encode(await request.text()) : undefined,

};

}

const getBody = async (bookmarks: Bookmark[]) => {

const serializedBookmarks = JSON.stringify(

await Promise.all(bookmarks.map(async (bookmark) => ({

label: bookmark.label,

request: await serializeRequest(bookmark.request),

}))),

);

return render(

<head>

<title>REST Client</title>

<script

type="module"

src="https://cdn.jsdelivr.net/npm/code-mirror-web-component@0.0.20/dist/code-mirror.js"

</script>

</head>

</body>

</html>,

);

};

export function httpClient(next: (req: Request) => Response | Promise<Response>, options: {

path: string;

bookmarks: Bookmark[];

} = { path: "/", bookmarks: [] }) {

return async (req: Request) => {

const url = new URL(req.url);

if (url.pathname == options.path) {

return html(await getBody(options.bookmarks));

}

return next(req);

};

}

export default async function(req: Request) {

const bookmarks = [{ label: "Dummy Request", request: new Request("https://dummyjson.com/products") }];

return html(await getBody(bookmarks));

}

1 2 7

export const title = "mdx"

{title}

Usage

Create valimport { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
import { mdx } from "https://esm.town/v/pomdtr/mdx";

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

mdx

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

import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";

import { api } from "https://esm.town/v/pomdtr/api";

import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";

import { gfm } from "https://esm.town/v/pomdtr/gfm";

import { compile } from "npm:@mdx-js/mdx";

import { render } from "npm:preact-render-to-string";

const css = `

.markdown-body {

box-sizing: border-box;

min-width: 200px;

max-width: 980px;

margin: 0 auto;

padding: 45px;

}

@media (max-width: 767px) {

.markdown-body {

padding: 15px;

}

export function mdx(author: string, name: string) {

return async (req: Request) => {

const { readme } = await api(`/v1/alias/${author}/${name}`);

const vfile = await compile(readme, {

jsxImportSource: "https://esm.sh/preact",

});

const url = new URL(req.url);

if (url.pathname == "/mod.js") {

return new Response(vfile.toString(), {

headers: {

"Content-Type": "text/javascript",

});

}

const blob = new Blob([vfile.toString()], {

type: "text/tsx",

});

const importURL = URL.createObjectURL(blob);

const { default: MDXContent } = await import(importURL);

return new Response(

render(

<html>

<head>

<title>{`${author}/${name}`}</title>

<link

href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown.min.css"

rel="stylesheet"

</head>

</script>

</body>

</html>,

{

headers: {

"Content-Type": "text/html",

);

};

}

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

export default mdx(author, name);

Code Search is Easy

Earlier this week, Tom MacWright posted Code Search is Hard. He describes the research he his doing to improve the code search experience of Val Town. It was a great read, and you might have seen it trending on Hacker News.

As Val Town's most active user (behind Steve Krouse, one of the founders of Val Town), I for sure agree with Tom that search feature of Val Town needs improvements. But while reading his post, I immediately thought of a different approach to the problem. And a few hours later, Val Town Search was born.

Do things that don't scale

How does this new shiny search engine work? Well, it's quite simple.

I wrote a Deno script that fetches all vals from the Val Town API.
I pushed the data to a Github Repository
I added a Github Action that runs the script every hour to refresh the data.
I created a simple frontend on top of the Github Search API that allows you to search the data. It's hosted on Val Town (obviously).

That was it. I didn't have to build a complex search engine, I just used the tools that were available to me.

Is this a scalable solution for Val Town? Probably not.
Am I abusing the Github API? Maybe.
Does it work better than the current search feature of Val Town? Absolutely!

I hope that the val.town engineers will come up with a search feature that will put my little project to shame. But for now, you won't find a better way to search for vals than Val Town Search.

code_search_is_easy

import codeOnValTown from "https://esm.town/v/andreterron/codeOnValTown?v=50";

import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";

import { serveReadme } from "https://esm.town/v/pomdtr/serve_readme";

const val = extractValInfo(import.meta.url);

let handler = serveReadme({

val,

title: "Code search is easy",

});

handler = codeOnValTown(

handler,

{

val: {

handle: val.author,

name: val.name,

);

export default handler;

reactExample

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

import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=46";

import { sqlite } from "https://esm.town/v/std/sqlite?v=4";

import tailwindURL from "https://esm.town/v/stevekrouse/tailwindURL";

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

export const reactExample = modifyFetchHandler(async (request: Request) => {

const url = new URL(request.url);

if (url.pathname === "/favicon.ico") return new Response(null, { status: 404 });

const [, , data] = await sqlite.batch([

"CREATE TABLE IF NOT EXISTS stevekrouse_com_hits (timestamp DATETIME DEFAULT CURRENT_TIMESTAMP)",

"INSERT INTO stevekrouse_com_hits DEFAULT VALUES",

"SELECT COUNT(*) FROM stevekrouse_com_hits",

]);

const hits = data.rows[0][0];

return new Response(

renderToString(

<html>

<head>

<title>Steve Krouse</title>

</head>

<body>

<div>

hi, I'm Steve 👋

</div>

<div>

i work at{" "}

<a href="https://val.town" className="text-blue-500 hover:text-blue-700">val town</a>, a social website to

code in the cloud. i tweet at{" "}

<a href="https://twitter.com/stevekrouse" className="text-blue-500 hover:text-blue-700">@stevekrouse</a>

</div>

<div>

{hits.toString()} hits |{" "}

href="https://stevekrouse.github.io/"

className="text-blue-500 hover:text-blue-700"

style={{ transform: "rotate(90deg)" }}

previous version

</a>

</div>

</body>

</html>,

{

headers: {

"Content-Type": "text/html",

);

});

2 3

andreterron/codeOnValTown

Date Me Directory

Contributing

Todos

dateme

Non-Violent Communication (NVC) Mobile Worksheet

nvc

Preview and edit blobs

blob_editor

Blob Admin

TODO

blob_admin

SQLite Explorer

Install

Authentication

Todos / Plans

sqliteExplorerApp

HTTP Client

Usage

Adding bookmarks

Customizing the client path

TODO

http_client

{title}

Usage

mdx

Code Search is Easy

Do things that don't scale

code_search_is_easy

SQLite Explorer

Install

Authentication

Todos / Plans

whiteXerinae

@postpostscript's ideas

myIdeas

Date Me Directory

Contributing

Todos

amaranthTakin

reactExample

SQLite Explorer (Dev Branch)

Install

Authentication

Todos / Plans

sqliteExplorerApp_DEV

SQLite Explorer

Install

Authentication

Todos / Plans

sqliteExplorerApp

SQLite Explorer (Dev Branch)

Install

Authentication

Todos / Plans

salmonCrab