-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
executable file
·152 lines (134 loc) · 6.53 KB
/
index.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!doctype html>
<html>
<head>
<title>Hope: html out-of-band</title>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/2.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="src/hope.js"></script>
<script type="text/javascript" src="src/hope.range.js"></script>
<script type="text/javascript" src="src/hope.annotation.js"></script>
<script type="text/javascript" src="src/hope.fragment.js"></script>
<script type="text/javascript" src="src/hope.fragment.annotations.js"></script>
<script type="text/javascript" src="src/hope.fragment.text.js"></script>
<script type="text/javascript" src="src/hope.render.html.js"></script>
<script type="text/javascript" src="src/hope.events.js"></script>
<script type="text/javascript" src="src/hope.keyboard.js"></script>
<script type="text/javascript" src="src/hope.editor.js"></script>
<script type="text/javascript" src="src/hope.editor.selection.js"></script>
<style type="text/css">
body {
padding-top: 60px;
line-height: 1.5em;
}
.hope-cursor {
position: absolute;
border-left: 1px solid transparent;
width: 1px;
height: 1.5em;
overflow: hidden;
-webkit-animation: blinkempty 1s infinite;
animation: blinkempty 1s infinite;
}
@-webkit-keyframes blinkempty {
0% { border-left-color: #333; }
59% { border-left-color: #333; }
60% { border-left-color: transparent; }
99% { border-left-color: transparent; }
}
@keyframes blinkempty {
0% { border-left-color: #333; }
59% { border-left-color: #333; }
60% { border-left-color: transparent; }
99% { border-left-color: transparent; }
}
.hope-selection, .hope-selection a {
font-style: normal;
color: white;
background-color: rgb(0,122,255);
line-height: 1.5em;
display: inline;
}
.halfsize {
width: 100%;
height: 350px;
margin-bottom: 2%;
overflow: auto;
}
#output {
xwhite-space: pre-wrap;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand">Hope</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<textarea class="halfsize" id="content">
Hope is an alternative to markup languages.
Note: Hope is superceded by Cobalt
It is currently a proof of concept prototype to see where the ideas of Ted Nelson can lead us.
Ted Nelson came up with the term Hypertext and famously defined 17 rules that a Hypertext system should conform to. His attempts to implement these in his Xanadu system haven't resulted in a finished system. But what if it had?
Hope is an attempt to implement one small part of Ted's Xanadu dream: Annotation based markup. Instead of mixing the markup with the content, Hope keeps them rigorously apart. The content is nothing more than plaintext.
The markup is in a seperate text file, only referencing the content using character ranges.
The content and markup must be kept in sync. This is the main drawback I found so far: you will need a specific editing program to edit content and markup, you cannot just use a text editor. So I am working on making one, you are looking at it right now.
On the left you can edit the content and below it the markup. On the right is the rendered output and below it the html source. The mouse is ignored for now, but keyboard cursor movements are followed. The only commands implemented for now are ctrl-b for bold and ctrl-i for italic.
You can however add any markup you want in the markup textarea, as long as it is a valid HTML tag, whithout the < and > characters.
The upside
Once you accept the need for an editing tool, I have only found advantages in using this approach.
There is no possibility of cross site scripting attacks, all content must be seperated into safe text-only content or unsafe markup. They cannot mingle.
Parsing the markup is extremely simple, it is just a one-dimensional list.
Parsing the content is even simpler, it is just plain text.
You can have many different markup files for different contexts, full html or simplified for e-mail, or even a completely different markup language instead of html.
Revision tracking of the content and showing the differences becomes much easier. This also makes things like collaborative editing much simpler.
Creating a wysiwym html editor becomes easy, witness this thing right here. The markup list has no concept of tree structure and markup can overlap. This makes it easier to capture the intent of the human editor instead of breaking it up to fit the nested structure of a tree.
If you are interested in researching this concept, grab the code from github and start experimenting.
</textarea>
<textarea class="halfsize" id="markup">
0-44:h3
43-44:br
46-80:p
46-80:strong
74-80:a href="https://github.com/poef/cobalt/"
81-177:p
154-164:a href="http://en.wikipedia.org/wiki/Ted_Nelson"
179-406:p
243-251:a href="http://en.wikipedia.org/wiki/Project_Xanadu#Original_17_rules"
409-721:p
479-502:a href="http://blog.codinghorror.com/what-you-cant-see-you-cant-get/"
723-977:p
979-1261:p
1223-1229:em
1243-1249:em
1263-1394:p
1396-1406:h3
1408-1506:li
1408-2389:ul
1508-1660:li
1662-1736:li
1738-1797:li
1799-1963:li
1965-2110:li
2112-2388:li
2390-2491:p
2441-2466:a href="https://github.com/poef/hope"
</textarea>
</div>
<div class="span6">
<div class="halfsize" id="output">
</div>
<textarea class="halfsize" id="renderedSource"></textarea>
</div>
</div>
</div>
<script type="text/javascript">
var editor = hope.editor.create( document.getElementById('content'), document.getElementById('markup'), document.getElementById('output'), document.getElementById('renderedSource'));
</script>
<style>#forkongithub a{z-index: 2000; background:#c00;color:#fff;text-decoration:none;font-family:arial, sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#060;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:absolute;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}</style><span id="forkongithub"><a href="https://github.com/poef/hope/">Fork me on GitHub</a></span>
</body>
</html>