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 : 3 em ;
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 ( `${ ' ' . 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