-
Notifications
You must be signed in to change notification settings - Fork 13
/
editor.html
126 lines (113 loc) · 2.63 KB
/
editor.html
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
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/styles.css">
<title>Editor</title>
<style>
.wrapper {
display: flex;
}
.wrapper > * {
min-height: 100vh;
box-sizing: border-box;
}
form {
background-color: #000;
overflow: auto;
flex: 1;
}
aside {
flex: 1.5;
}
aside * {
transition: all 0.5s;
}
#editor {
all: initial;
padding: 2rem;
font-family: monospace;
font-size: 1rem;
color: #fff;
outline: none;
height: 100%;
width: 100%;
white-space: pre;
}
form:focus-within {
outline: none;
box-shadow: inset 0 0 0 0.333rem rgb(24, 22, 22);
}
</style>
</head>
<body>
<div class="wrapper">
<form role="form">
<textarea id="editor" aria-label="code editor">
<!--
see the component docs:
https://github.com/Heydon/bruck#components
-->
<template id="header">
<b-ox class="u-invert" pad="2">
<s-pread>
<a href="https://github.com/Heydon/bruck" class="u-h2">Bruck</a>
<l-ine between="•" class="u-h3">
<w-ords count="1"></w-ords>
<w-ords count="1"></w-ords>
<w-ords count="1"></w-ords>
</l-ine>
</s-pread>
</b-ox>
</template>
<c-omment wording="The page header">
<c-lone of="header"></c-lone>
</c-omment>
<b-ox>
<s-tack gap="2">
<h1><w-ords capitalize></w-ords></h1>
<s-tack repeat="3">
<t-ext></t-ext>
</s-tack>
<c-omment wording="A grid of gallery images">
<g-rid itemWidth="10rem" repeat="6">
<s-tack gap="-1">
<i-mage ratio="1:2"></i-mage>
<t-ext words="4,5" class="u-text-center"></t-ext>
</s-tack>
</g-rid>
</c-omment>
</s-tack>
</b-ox></textarea>
</form>
<aside>
<output for="editor"></output>
</aside>
</div>
<script src="js/app.js" type="module"></script>
<script>
(function () {
function debounce(func, wait) {
let timeout;
return function () {
let context = this, args = arguments;
let later = function () {
timeout = null;
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
const input = document.getElementById('editor');
const output = document.querySelector('output')
const convert = debounce(() => {
output.innerHTML = input.value;
}, 200);
input.addEventListener('keyup', convert);
convert();
})();
</script>
</body>
</html>