Fork
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { getMermaidDependencyGraph } from "https://esm.town/v/rlesser/getDependencyGraph?v=90";
import { getReverseDependencies } from "https://esm.town/v/rlesser/getReverseDependencies";
import { gfm } from "https://esm.town/v/rlesser/gfm";
import { Hono } from "npm:hono@3.9.2";
const app = new Hono();
const homePageMarkdown = `
# ValTown Dependency Graph Viewer
### What is this
This tool lets you view dependency graph for any public val on [valtown](www.val.town).
Add a valtown slug (\`author/name\`) to this url to see the dependency graph for that val.
Some big dependency graphs - let me know if you find any bigger ones!
* [stevekrouse/sqlite_admin](stevekrouse/sqlite_admin)
* [nbbaier/vtIdeaAggregator](nbbaier/vtIdeaAggregator)
* [rodrigotello/hnFollow](rodrigotello/hnFollow)
* [rlesser/dependency_graph](rlesser/dependency_graph) (a bit meta...)
### TODO
Some ideas for how to expand this site:
* **show the upstream dependencies** - no public API for this yet, but could probably make it work with the search api
* **search for vals** - let people search for vals right from here, using the search api and debouncing
* **toggle graph complexity** - let people choose to see all dependencies or only valtown dependencies (thru the browser)
* **cache graphs in DB** - we should be kind to valtown's API by caching graph data as exploring the
graph involves a lot of calls. maybe only update it when the val version number changes?
* **handle more module sources** - currently we only group npm, esm.sh, and valtown modules. we could add more or make
this a dynamic grouping mechanism?
* **author pages?** - a page to show all the public vals by a person. not sure if needed and dont want to just end up
wrapping every val.town page here.
* **val readme** - show the val readme at the top of each val page
`;
const valPageMarkdown = (author: string, name: string, mermaid: string, reverseDeps: string) => `
[Home](/)
# ${author}/${name}
### Dependency Graph
\`\`\`mermaid
${mermaid}
\`\`\`
### Reverse Dependencies
${reverseDeps || "*None found*"}
`;
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.