Public
Script
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { html } from "https://esm.town/v/postpostscript/htmlComponentLibrary";
import svg2dataURL from "npm:mini-svg-data-uri";
export const logo = {
white: html(svg2dataURL(
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"600\" height=\"237\" fill=\"none\"><path d=\"M0 0h600v237H0z\"/><g fill=\"#fff\" clip-path=\"url(#a)\"><path d=\"M171.182 146.387c3.89 0 7.064-1.082 9.524-3.248 2.459-2.164 3.689-5.046 3.689-8.644v-1.1
)),
black: html(svg2dataURL(
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"600\" height=\"237\" fill=\"none\"><path d=\"M0 0h600v237H0z\"/><g fill=\"#000\" clip-path=\"url(#a)\"><path d=\"M171.182 146.387c3.89 0 7.064-1.082 9.524-3.248 2.459-2.164 3.689-5.046 3.689-8.644v-1.1
)),
};
export const mark = {
white: html(svg2dataURL(
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"400\" fill=\"none\"><path d=\"M0 0h400v400H0z\"/><g fill=\"#fff\" clip-path=\"url(#a)\"><path d=\"M265.026 271.002c-7.196 0-13.032-2.235-17.508-6.709-4.48-4.472-6.716-10.452-6.716-17.93v
)),
black: html(svg2dataURL(
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"400\" fill=\"none\"><path d=\"M0 0h400v400H0z\"/><g fill=\"#000\" clip-path=\"url(#a)\"><path d=\"M265.026 271.002c-7.196 0-13.032-2.235-17.508-6.709-4.48-4.472-6.716-10.452-6.716-17.93v
)),
};
export const valTownLogoWhite =
html`<img class="logo-white" style="height: 3.4em; margin: -1.2em auto -1.2em -0.75em;" alt="Val Town" src="${logo.white}">`;
export const valTownLogoBlack =
html`<img class="logo-black" style="height: 3.4em; margin: -1.2em auto -1.2em -0.75em;" alt="Val Town" src="${logo.black}">`;
export const valTownMarkWhite =
html`<img class="mark-white" style="height: 3.4em; margin: -1.2em auto -1.2em -0.75em;" alt="Val Town" src="${mark.white}">`;
export const valTownMarkBlack =
html`<img class="mark-black" style="height: 3.4em; margin: -1.2em auto -1.2em -0.75em;" alt="Val Town" src="${mark.black}">`;
export const valTownLogoAuto = html`
${valTownLogoWhite}
${valTownLogoBlack}
<style>
.logo-white {
display: none;
}
@media (prefers-color-scheme: dark) {
.logo-white {
display: inline-block;
}
.logo-black {
display: none;
}
}
</style>
`;
export const valTownMarkAuto = html`
${valTownMarkWhite}
${valTownMarkBlack}
<style>
.mark-white {
display: none;
}
@media (prefers-color-scheme: dark) {
.mark-white {
display: inline-block;
}
.mark-black {
display: none;
}
}
</style>
`;
// let me know if this is an issue :)
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
March 8, 2024
This produces invalid data URLs :(
I first noticed that while checking valshot landing page output on the W3C validator: https://validator.w3.org/nu/?doc=https://vladimyr-valshot.web.val.run That prompted me to try fetching those URLs and they are indeed malformed: https://www.val.town/v/vladimyr/valTownLogo_test
PR is on the way 🛬
@vladimyr thanks for the catch and PR! 🙏
Any time 😉 Just to be clear, this still produces URLs with spaces, which makes the W3C validator freak out, but they are not invalid, and SVG markup can be extracted from them using a simple
fetchcall.You can see these SVGs in action here: https://www.val.town/v/vladimyr/valTownLogo_test2