/
index.html
240 lines (236 loc) · 9.71 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta property="og:type" content="profile" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./styles.css" />
<script src="./annotate.js" defer></script>
<!-- TODO: Fill out the below -->
<meta property="og:locale" content="en_US" />
<meta name="theme-color" content="#96B78A" />
<link rel="apple-touch-icon" sizes="180x180" href="" />
<link rel="icon" type="image/png" sizes="32x32" href="" />
<link rel="icon" type="image/png" sizes="16x16" href="" />
<meta property="og:site_name" content="" />
<title></title>
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta property="og:image" content="" />
<meta property="og:image:alt" content="" />
<meta property="og:image:width" content="" />
<meta property="og:image:height" content="" />
<meta property="og:url" content="" />
<meta name="twitter:card" content="" />
<meta name="twitter:creator" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:image:alt" content="" />
</head>
<body>
<div class="title-block">
<h1>The Velveteen Rabbit</h1>
<div class="byline">
By Margery Williams,
<a href="https://en.wikisource.org/wiki/The_Velveteen_Rabbit"
>originally published</a
>
in 1922
</div>
<div class="byline">Annotations by Molly White.</div>
</div>
<div class="intro">
<p>Introductory text goes here.</p>
<p class="small">
Use the <code>small</code> class to add explanatory notes.
</p>
</div>
<main class="maincontent">
<article class="article">
<section class="group first">
<div class="content quote">
<p>
There was once a velveteen rabbit, and in the beginning he was
really splendid.
<mark aria-details="bunchy">He was fat and bunchy</mark>, as a
rabbit should be; his coat was spotted brown and white, he had
real thread whiskers, and his ears were lined with pink sateen. On
Christmas morning, when he sat wedged in the top of the Boy’s
stocking, with a sprig of holly between his paws, the effect was
charming.
</p>
</div>
<div class="content note">
<div class="annotation" role="comment" id="bunchy">
<div class="commenter">Molly White</div>
A standalone comment. There's only one in this paragraph, so it
doesn't have a number.
</div>
</div>
</section>
<section class="group">
<div class="content quote">
<p>
There were other things in the stocking, nuts and oranges and a
toy engine, and chocolate almonds and a clockwork mouse, but the
Rabbit was quite the best of all. For at least two hours the Boy
loved him, and then Aunts and Uncles came to dinner, and there was
a great rustling of tissue paper and unwrapping of parcels, and in
the excitement of looking at all the new presents the Velveteen
Rabbit was forgotten.
</p>
</div>
</section>
<section class="group">
<div class="content quote">
<p>
For a long time he lived in the toy cupboard or on the nursery
floor, and no one thought very much about him. He was naturally
shy, and being only made of velveteen, some of the more expensive
toys quite snubbed him. The mechanical toys were very superior,
and looked down upon every one else; they were full of modern
ideas, and pretended they were real. The model boat, who had lived
through two seasons and lost most of his paint, caught the tone
from them and never missed an opportunity of referring to his
rigging in technical terms. The Rabbit could not claim to be a
model of anything, for
<mark data-annotation-id="1" aria-details="real-rabbits"
>he didn’t know that real rabbits existed</mark
>; he thought they were all stuffed with sawdust like himself, and
he understood that sawdust was quite out-of-date and should never
be mentioned in modern circles. Even Timothy, the jointed wooden
lion, who was made by the disabled soldiers, and should have had
broader views, put on airs and
<mark data-annotation-id="2" aria-details="government"
>pretended he was connected with Government</mark
>. Between them all the poor little Rabbit was made to feel
himself very insignificant and commonplace, and the only person
who was kind to him at all was the Skin Horse.
</p>
</div>
<div class="content note">
<div
class="annotation-group"
role="comment"
data-annotation-id="1"
id="real-rabbits"
>
<div class="annotation">
<div class="commenter">Molly White</div>
A comment with indented responses.
</div>
<div class="annotation thread">
<div class="commenter">Another commenter</div>
A reply!
</div>
<div class="annotation thread-2">
<div class="commenter">Molly White</div>
A retort!
</div>
</div>
<div
class="annotation-group"
role="comment"
data-annotation-id="2"
id="government"
>
<div class="annotation">
<div class="commenter">Molly White</div>
Another standalone comment. This one has a response, but it
isn't indented because it doesn't have the
<code>thread</code> class applied.
</div>
<div class="annotation">
<div class="commenter">Molly White</div>
A reply!
</div>
</div>
</div>
</section>
<section class="group last">
<div class="content quote">
<p>
The Skin Horse had lived longer in the nursery than any of the
others. He was so old that his brown coat was bald in patches and
showed the seams underneath, and
<mark data-annotation-id="1" aria-details="bead-necklaces"
>most of the hairs in his tail had been pulled out to string
bead necklaces</mark
>. He was wise, for he had seen a long succession of mechanical
toys arrive to boast and swagger, and by-and-by break their
mainsprings and pass away, and he knew that they were only toys,
and would never turn into anything else. For
<mark data-annotation-id="2" aria-details="nursery-magic"
>nursery magic</mark
>
is very strange and wonderful, and only those playthings that are
old and wise and experienced like the Skin Horse understand all
about it.
</p>
</div>
<div class="content note">
<div
class="annotation-group"
role="comment"
data-annotation-id="1"
id="bead-necklaces"
>
<div class="annotation">
A standalone comment. This one doesn't have a commenter name
identified.
</div>
</div>
<div
class="annotation-group"
role="comment"
data-annotation-id="2"
id="nursery-magic"
>
<div class="annotation">
<div class="commenter">Molly White</div>
Another standalone comment.
</div>
</div>
</div>
</section>
</article>
</main>
<footer class="outro">
An outro can go here, if you want.
<div class="fine-print">
<p>
This is a good place to put a copyright disclosure, especially if
you're republishing a full copyrighted work by another person. I used
this one in my
<a
href="https://www.mollywhite.net/annotations/latecomers-guide-to-crypto"
>Edited Latecomer's Guide to Crypto</a
>:
</p>
<p>
Copyright to the <i>New York Times</i> article belongs to the
<i>Times</i>, and the article can be read in its original form in full
at
<a
href="https://www.nytimes.com/interactive/2022/03/18/technology/cryptocurrency-crypto-guide.html"
>nytimes.com</a
>. It is republished here for the purposes of critical commentary.
Copyright of the annotations belongs to their respective authors, as
noted inline. Those without authors noted inline are combined
commentaries from several annotators.
</p>
</div>
<div class="fine-print">
<p>
Page built with
<a href="https://github.com/molly/annotate" target="_blank"
>Annotate</a
>.
</p>
</div>
</footer>
</body>
</html>