prep docs/ site

thysultan · Apr 20, 2020 · 994e7c9 · 994e7c9
1 parent 395454b
commit 994e7c9
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 0 deletions.
diff --git a/docs/CNAME b/docs/CNAME
@@ -0,0 +1 @@
+stylis.js.org
diff --git a/docs/asset/logo.svg b/docs/asset/logo.svg
diff --git a/docs/asset/stylesheet.css b/docs/asset/stylesheet.css
@@ -0,0 +1,22 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body { background: #F1F1F1; font-family: 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
+p { color: #535353; line-height: 38px; font-size: 17px; text-align: center; }
+a { color: #332E22; font-size: 19px; text-decoration: none; }
+a[title=github] { font-weight: bold; }
+
+.container > .welcome > *:not(pre):not(div), .wrap { max-width: 600px; width: 100%; margin: 0 auto; padding:0 20px; }
+.header { padding-top: 40px; padding-bottom: 14px; min-height: 160px; text-align: center; }
+.logo { margin-bottom: 20px; display: block; }
+.logo a { display: inline-block; width: 194px; height: 76px; cursor: pointer; }
+
+.nav {display: inline-block; font-weight: bold; }
+.nav li { display: inline-block; }
+.nav li:not(:last-child) a { margin-right: 16px; }
+
+.code { position: relative; display: block; margin: 40px auto 0; }
+.code > div { display: flex; flex-direction: row; overflow: auto; tab-size: 4; height: 100%; }
+.code pre { font: 15px/1.8em menlo,monospace; flex: auto; width: 50%; padding: 26px 30px; outline: none; }
+span.selector { color: #AA0C91; }
+span.value { color: #C41913; }
+span.string { color: #007400; }
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset=utf-8>
+		<meta name=viewport content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
+		<meta name=description content='light – weight css preprocessor'>
+		<title>stylis</title>
+		<link rel='stylesheet' href='asset/stylesheet.css'>
+	</head>
+	<body>
+		<div class='header'>
+			<div class='wrap'>
+				<div class='logo'><a class=./><img src='asset/logo.svg'></a></div>
+				<div class='nav'>
+					<ul>
+						<li><a href='https://github.com/thysultan/stylis.js'>Github</a></li>
+						<li><a href='https://npmjs.com/package/stylis'>NPM</a></li>
+					</ul>
+				</div>
+			</div>
+		</div>
+		<div class='container'>
+			<div class='welcome'>
+				<p>light – weight css preprocessor</p>
+				<div class='code'>
+					<div spellcheck='false'>
+<pre contenteditable id='editor'>
+div {
+	display: flex;
+
+	@media screen {
+		color: red;
+	}
+}
+
+div {
+	transform: translateZ(0);
+
+	h1, h2 {
+		color: red;
+	}
+}
+</pre>
+<pre id='output'></pre>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script type=module>
+			import {compile, serialize, middleware, prefixer, stringify} from '../index.js'
+
+			function tabbed (select, ranged, content) {
+				ranged.deleteContents()
+				ranged.insertNode(content)
+				ranged.setStartAfter(content)
+				select.removeAllRanges()
+				select.addRange(ranged)
+			}
+
+			// update output preview
+			function update (value) {
+				switch (value.keyCode) {
+					// tab indent
+					case 9: tabbed(value = window.getSelection(value.preventDefault()), value.getRangeAt(0), document.createTextNode('\t'))
+						break
+					// formatting
+					default:
+						value = serialize(compile(`[namespace]{${value.target.textContent}}`), middleware([prefixer, stringify]))
+						value = value.replace(/(;|\})/g, (match, group) => group + (group === '}' ? '\n\n' : '\n'))
+						value = value.replace(/(.*?)\{/g, (match, group) => '<span class=selector>' + group.trim() + '</span> {\n')
+						value = value.replace(/:(.*);/g, (match, group) => ': <span class=value>' + group.trim() + '</span>;')
+						value = value.replace(/^[^@].*;$/gm, (match) => '\t' + match)
+						value = value.replace(/\}\n\n\}/g, '}\n}')
+						value = value.replace(/(.*@.*\{)([^}]+\})(\n\})/g, (match, group1, group2, group3) => group1 + group2.split('\n').join('\n\t') + group3)
+						value = value.replace(/['"`].*?['"`]/g, (match) => '<span class=string>'+ match.trim() +'</span>')
+
+						output.innerHTML = value
+				}
+			}
+
+			const target = document.getElementById('editor')
+			const output = document.getElementById('output')
+
+			target.addEventListener('keydown', update)
+			target.addEventListener('input', update)
+
+			update({target})
+		</script>
+	</body>
+</html>