editor.textmode.art/index.html at main · humanbydefinition/editor.textmode.art · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="color-scheme" content="dark" />
		<link
			rel="icon"
			type="image/png"
			sizes="16x16"
			href="/icon-light-16.png"
			media="(prefers-color-scheme: light)"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="32x32"
			href="/icon-light-32.png"
			media="(prefers-color-scheme: light)"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="64x64"
			href="/icon-light-64.png"
			media="(prefers-color-scheme: light)"
		/>
		<link rel="icon" type="image/png" sizes="16x16" href="/icon-dark-16.png" media="(prefers-color-scheme: dark)" />
		<link rel="icon" type="image/png" sizes="32x32" href="/icon-dark-32.png" media="(prefers-color-scheme: dark)" />
		<link rel="icon" type="image/png" sizes="64x64" href="/icon-dark-64.png" media="(prefers-color-scheme: dark)" />
		<link rel="manifest" href="/site.webmanifest" />
		<script>
			(() => {
				const m = window.matchMedia('(prefers-color-scheme: dark)');
				const u = () => {
					const mode = m.matches ? 'dark' : 'light';
					document.querySelectorAll('link[rel*="icon"][sizes]').forEach((l) => {
						l.href = l.href.replace(/-(light|dark)-/, `-${mode}-`);
					});
				};
				m.addEventListener('change', u);
			})();
		</script>
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
		/>

		<!-- CSS to prevent white flash on iOS Safari -->
		<style>
			html,
			body {
				background-color: #09090b;
			}
		</style>

		<title>editor.textmode.art - textmode.js creative coding editor</title>
		<link rel="canonical" href="https://editor.textmode.art/" />
		<meta
			name="description"
			content="A browser-based editor for live coding ASCII and textmode art with textmode.js."
		/>
		<meta name="author" content="humanbydefinition" />
		<meta name="robots" content="index, follow" />
		<meta name="theme-color" content="#09090b" />
		<meta name="mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<meta name="apple-mobile-web-app-title" content="editor.textmode.art" />

		<!-- Open Graph / Facebook -->
		<meta property="og:type" content="website" />
		<meta property="og:site_name" content="editor.textmode.art" />
		<meta property="og:url" content="https://editor.textmode.art/" />
		<meta property="og:title" content="editor.textmode.art - textmode.js creative coding editor" />
		<meta
			property="og:description"
			content="A browser-based editor for live coding ASCII and textmode art with textmode.js."
		/>
		<meta property="og:image" content="https://editor.textmode.art/og.png" />
		<meta property="og:image:type" content="image/png" />
		<meta property="og:image:width" content="1200" />
		<meta property="og:image:height" content="630" />
		<meta
			property="og:image:alt"
			content="A dense field of animated-looking characters and symbols with textmode editor branding."
		/>
		<meta property="og:locale" content="en_US" />

		<!-- Twitter -->
		<meta name="twitter:card" content="summary_large_image" />
		<meta name="twitter:url" content="https://editor.textmode.art/" />
		<meta name="twitter:title" content="editor.textmode.art - textmode.js creative coding editor" />
		<meta
			name="twitter:description"
			content="A browser-based editor for live coding ASCII and textmode art with textmode.js."
		/>
		<meta name="twitter:image" content="https://editor.textmode.art/og.png" />
		<meta
			name="twitter:image:alt"
			content="A dense field of animated-looking characters and symbols with textmode editor branding."
		/>
		<script type="application/ld+json">
			{
				"@context": "https://schema.org",
				"@type": "WebApplication",
				"name": "editor.textmode.art",
				"description": "A browser-based editor for live coding ASCII and textmode art with textmode.js.",
				"url": "https://editor.textmode.art/",
				"applicationCategory": "DeveloperApplication",
				"operatingSystem": "Web Browser",
				"author": {
					"@type": "Person",
					"name": "humanbydefinition",
					"url": "https://github.com/humanbydefinition"
				},
				"creator": {
					"@type": "Person",
					"name": "humanbydefinition",
					"url": "https://github.com/humanbydefinition"
				}
			}
		</script>
	</head>

	<body>
		<div id="app-container"></div>
		<script type="module" src="/src/main.tsx"></script>
	</body>
</html>