Log inSign Up
Back to packages list

Vals using html-sloppy-escaper

Project homepagehtml-sloppy-escaper
Description from the NPM package:
It's exactly like html-escaper but it doesn't throw with null/undefined

View source code

Just like a right click + inspect on desktop, except available on mobile too! Just write the website after the /

e.g. https://neverstew-viewSource.web.val.run/bbc.co.uk

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
import { prettifyHtml } from "https://esm.town/v/neverstew/prettifyHtml";
import { fetchText } from "https://esm.town/v/stevekrouse/fetchText?v=6";
import { escape } from "npm:html-sloppy-escaper";
export default async function viewSource(req: Request) {
const pathname = new URL(req.url).pathname;
const html = await fetchText(pathname === "/" ? "example.com" : pathname).then(prettifyHtml);
const body = `<html>
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/code-mirror-web-component@0.0.15/dist/code-mirror.js"
></script>
<script type="module">
document.getElementById("editor").addEventListener("code-change", (e) => {
console.log(e.detail.code);
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="margin: 0px; height: 100vh;">
<code-mirror id="editor" theme="dracula" language="html" code="${escape(html)}"></code-mirror>
</body>
</html>
`;
return new Response(body, {
headers: {
"Content-Type": "text/html",
},
});
}
0

View source code

Just like a right click + inspect on desktop, except available on mobile too! Just write the website after the /

e.g. https://neverstew-viewSource.web.val.run/bbc.co.uk

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
import { prettifyHtml } from "https://esm.town/v/neverstew/prettifyHtml";
import { fetchText } from "https://esm.town/v/stevekrouse/fetchText?v=6";
import { escape } from "npm:html-sloppy-escaper";
export default async function viewSource(req: Request) {
const pathname = new URL(req.url).pathname;
const html = await fetchText(
pathname === "/"
? "https://www.flipkart.com/peter-england-analog-watch-men/p/itmabb4bc1893d05?pid=WATG6YGDUYAUEEMB&cmpid=product.share.pp&_refId=PP.d1a88903-d859-42ee-bc23-aad0425688fb.WATG6YGDUYAUEEMB&_appId=WA"
: pathname,
).then(prettifyHtml);
const body = `<html>
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/code-mirror-web-component@0.0.15/dist/code-mirror.js"
></script>
<script type="module">
document.getElementById("editor").addEventListener("code-change", (e) => {
console.log(e.detail.code);
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="margin: 0px; height: 100vh;">
<code-mirror id="editor" theme="dracula" language="html" code="${escape(html)}"></code-mirror>
</body>
</html>
`;
return new Response(body, {
headers: {
"Content-Type": "text/html",
},
});
}
0

View source code

Just like a right click + inspect on desktop, except available on mobile too!

https://stevekrouse-viewsource.web.val.run/?url=https://www.todepond.com/wikiblogarden/tadi-web/lab/counter/

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
import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
import { prettifyHtml } from "https://esm.town/v/neverstew/prettifyHtml";
import { fetchText } from "https://esm.town/v/stevekrouse/fetchText?v=6";
import { escape } from "npm:html-sloppy-escaper";
export default modifyFetchHandler(async function(req: Request) {
const pathname = new URL(req.url).searchParams.get("url");
const html = await fetchText(pathname ?? "example.com"); // .then(prettifyHtml);
const body = `<html>
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/code-mirror-web-component@0.0.15/dist/code-mirror.js"
></script>
<script type="module">
document.getElementById("editor").addEventListener("code-change", (e) => {
console.log(e.detail.code);
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="margin: 0px; height: 100vh;">
<code-mirror id="editor" theme="dracula" language="html" code="${escape(html)}"></code-mirror>
</body>
</html>
`;
return new Response(body, {
headers: {
"Content-Type": "text/html",
},
});
});
0

View source code

Just like a right click + inspect on desktop, except available on mobile too! Just write the website after the /

e.g. https://neverstew-viewSource.web.val.run/bbc.co.uk

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
import { prettifyHtml } from "https://esm.town/v/neverstew/prettifyHtml";
import { fetchText } from "https://esm.town/v/stevekrouse/fetchText?v=6";
import { escape } from "npm:html-sloppy-escaper";
export default async function viewSource(req: Request) {
const pathname = new URL(req.url).pathname;
const html = await fetchText(pathname === "/" ? "example.com" : pathname); // .then(prettifyHtml);
const body = `<html>
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/code-mirror-web-component@0.0.15/dist/code-mirror.js"
></script>
<script type="module">
document.getElementById("editor").addEventListener("code-change", (e) => {
console.log(e.detail.code);
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="margin: 0px; height: 100vh;">
<code-mirror id="editor" theme="dracula" language="html" code="${escape(html)}"></code-mirror>
</body>
</html>
`;
return new Response(body, {
headers: {
"Content-Type": "text/html",
},
});
}
1
0

View source code

Just like a right click + inspect on desktop, except available on mobile too! Just write the website after the /

e.g. https://neverstew-viewSource.web.val.run/bbc.co.uk

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
import { prettifyHtml } from "https://esm.town/v/neverstew/prettifyHtml";
import { fetchText } from "https://esm.town/v/stevekrouse/fetchText?v=6";
import { escape } from "npm:html-sloppy-escaper";
export default async function viewSource(req: Request) {
const pathname = new URL(req.url).pathname;
const html = await fetchText(pathname === "/" ? "example.com" : pathname).then(prettifyHtml);
const body = `<html>
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/code-mirror-web-component@0.0.15/dist/code-mirror.js"
></script>
<script type="module">
document.getElementById("editor").addEventListener("code-change", (e) => {
console.log(e.detail.code);
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="margin: 0px; height: 100vh;">
<code-mirror id="editor" theme="dracula" language="html" code="${escape(html)}"></code-mirror>
</body>
</html>
`;
return new Response(body, {
headers: {
"Content-Type": "text/html",
},
});
}
31
2
1
Next