Skip to content

Commit ae04c24

Browse files
committed
tweaks
1 parent 939922e commit ae04c24

4 files changed

Lines changed: 379 additions & 2863 deletions

File tree

README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ A protocol for interactive rendering surfaces
44

55
RenderView defines a simple specification for a renderable surface that emits
66
structured input events (pointer, keyboard, resize) and displays frames. It can
7-
be implemented in browsers, native applications, remote renderers, notebooks,
8-
etc.
7+
be implemented in most programming languages, browsers, native applications,
8+
remote renderers, notebooks, etc.
99

1010
This repository contains the specification and a reference implementation in JavaScript.
11+
12+
Read the spec at https://pygfx.org/renderview/

src/index.html

Lines changed: 84 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,99 @@
1-
<meta charset="utf-8" emacsmode="-*- markdown -*">
1+
<!DOCTYPE html>
2+
<html>
23

3-
**renderview**
4+
<!-- To test this page locally, run `python -m http.server 8080` in the current dir -->
45

5-
A protocol for interactive rendering surfaces
6+
<head>
7+
<title>renderview</title>
8+
<meta charset="utf-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
<meta name="description" content="The renderview event specification">
11+
<style>
12+
body {
13+
font-family: sans-serif;
14+
color: #222;
15+
}
616

7-
RenderView defines a simple specification for a renderable surface that emits
8-
structured input events (pointer, keyboard, resize) and displays frames. It can
9-
be implemented in browsers, native applications, remote renderers, notebooks,
10-
etc.
17+
.title {
18+
text-align: center;
19+
font-size: 300%;
20+
padding: 1em;
21+
font-weight: bold;
22+
}
1123

12-
This repository contains the specification and a reference implementation in JavaScript.
24+
#toc a {
25+
text-decoration: none;
26+
}
1327

14-
# Links
28+
.md {
29+
max-width: 700px;
30+
margin-inline: auto;
31+
padding-inline: 16px;
32+
line-height: 140%;
33+
}
1534

16-
* [Repository](https://github.com/pygfx/renderview)
17-
* Tester
18-
* renderview.js
19-
* renderview.css
35+
h1 {
36+
text-align: center;
37+
margin: 3em;
38+
}
2039

40+
h2 {
41+
border-bottom: 3px solid;
42+
margin-top: 3em;
43+
}
2144

22-
# Used by
45+
h3 {
46+
margin-top: 2em;
47+
}
2348

49+
h4 {
50+
margin-top: 1em;
51+
}
2452

53+
h1 a,
54+
h2 a,
55+
h3 a,
56+
h4 a {
57+
text-decoration: none;
58+
color: inherit
59+
}
60+
</style>
2561

26-
# Spec
62+
</head>
2763

64+
<body>
65+
<script type="module">
66+
import { marked } from "https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js";
2867

68+
let toc = []
69+
let tocWritten = false
2970

71+
const renderer = new marked.Renderer();
72+
renderer.heading = function (token) {
73+
const slug = token.text
74+
.toLowerCase()
75+
.replace(/[^\w]+/g, "-")
76+
let html = `<h${token.depth} id="${slug}"><a href='#${slug}'>${token.text}</a></h${token.depth}>`
77+
if (token.depth > 1) {
78+
toc.push(`${'&nbsp;&nbsp;&nbsp;&nbsp;'.repeat(token.depth)}<a href='#${slug}'>${token.text}</a>`)
79+
if (!tocWritten) {
80+
tocWritten = true
81+
html = '<h2>Contents</h2> <div id="toc""></div>\n\n' + html
82+
}
83+
}
84+
return html
85+
}
3086

31-
<!-- Markdeep: -->
32-
<style class="fallback">
33-
body {
34-
visibility: hidden;
35-
white-space: pre;
36-
font-family: monospace
37-
}
38-
</style>
39-
<script src="static/markdeep.min.js" charset="utf-8"></script>
40-
<script>window.alreadyProcessedMarkdeep || (document.body.style.visibility = "visible")</script>
87+
marked.setOptions({ renderer })
88+
89+
let res = await fetch('spec.md')
90+
let md = await res.text()
91+
document.getElementById('content').innerHTML = marked.parse(md)
92+
document.getElementById('toc').innerHTML = toc.join("<br />")
93+
94+
</script>
95+
96+
<div id='content' class='md'></div>
97+
</body>
98+
99+
</html>

0 commit comments

Comments
 (0)