-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathwelcome.html
74 lines (56 loc) · 5.7 KB
/
welcome.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-3.5.0.min.js" type="text/javascript"></script>
<script src="content.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles/styles.css" type="text/css">
<meta name="author" content="tom and toby">
<title>welcome to blogger peer review</title>
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="images/site.webmanifest">
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="images/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="images/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body class="welcome">
<p>hello! welcome to blogger peer review. we're <a href="http://tomcritchlow.com">Tom</a> and <a href="https://tobyshorin.com">Toby</a>. thanks for trying out our experimental citation tool!</p>
<p>we made this tool to generate <span style="border: 1px dotted gray; background-color:yellow">quotebacks</span>. quotebacks are like quote-retweets for any piece of writing on the internet, using simple web-native technology. here's what one looks like:</p>
<div class="portal-container-519256">
<div id="portal-parent-519256" class="portal-parent-519256">
<div class="portal-content-519256">The web is still a very young medium, and it has been influenced more than anything else by print media design. There is so much more that can be done with text on a screen than is being done today. Citations, drawing, chat, speech-to-text. There are opportunities everywhere, and the bar is low! If we are serious about unlocking the value of knowledge we should consider how to improve every part of the knowledge production stack, and that includes reading. As Laurel Schwulst says: “Imaginative functionality is important, even if it’s only a trace of what was, as it’s still a sketch for a more ideal world.”
</div>
</div>
<div class="portal-head-519256">
<div class="portal-avatar-519256"><img class="mini-favicon-519256" src="https://s2.googleusercontent.com/s2/favicons?domain_url=https://subpixel.space/&sz=64"/></div>
<div class="portal-metadata-519256">
<div class="portal-title-519256">
<div class="portal-author-519256">Toby Shorin</div>
<div class="title-wrapper-519256">Open Transclude for Networked Writing</div>
</div>
</div>
<div class="portal-backlink-519256"><a target="_blank" href="https://subpixel.space/entries/open-transclude/" class="portal-arrow-519256">Go to text <span class="right-arrow">→</span></a></div>
</div>
</div>
<p>try creating one yourself. <span style="background-color: #B4D8FD">highlight the paragraph below, then press</p>
<p style="width:100%; text-align:center">Mac: <span style="font-size:20px; border-radius: 4px; padding:4px; border: 1px solid cyan; background-color: AliceBlue;">⌘+shift+s</span> Windows: <span style="font-size:20px; border-radius: 4px; padding:4px; border: 1px solid cyan; background-color: AliceBlue;">ctrl+shift+s</span></p>
<p style="background-color: AliceBlue; border: 1px dotted Cyan; padding: 5px;">The web is still a very young medium, and it has been influenced more than anything else by print media design. There is so much more that can be done with text on a screen than is being done today. Citations, drawing, chat, speech-to-text. There are opportunities everywhere, and the bar is low! If we are serious about unlocking the value of knowledge we should consider how to improve every part of the knowledge production stack, and that includes reading. As Laurel Schwulst says: “Imaginative functionality is important, even if it’s only a trace of what was, as it’s still a sketch for a more ideal world.”</p>
<p>nice! see that popup there? you can change the title and author, if you want.</p>
<p>now all you need to do is click the <strong><span style="background-color: AliceBlue; border-radius: 2px; padding:4px; border: 1px solid cyan"><> Embed</span></strong> button and you'll copy a nice block of HTML. <strong><span style="background-color: AliceBlue;">Paste</span></strong> it into your blog post to get a quoteback like the one above.</p>
...<br/>...<br/>...<br/>
<p>quotebacks can be used anywhere a normal block quote might go. they help give added context, structured metadata, and better linking back to the original author. we've found them to be really useful for:</p>
<ol>
<li><strong>quoting other people at length when writing online </strong><a target="_blank"href="https://tomcritchlow.com/2020/04/13/after-peacetime/">(here's an example in a post by Tom).</a></li>
<li><strong>quoting <em>yourself</em> in your own blog posts</strong> - sometimes you've written the perfect thing already. <a target="_blank" href="http://subpixel.space/entries/building-for-the-culture/#portal-parent-emotional-deficit">(here's an example in a post by Toby.)</a></li>
</ol>
<p>every quote you save is also stored, locally for now. we built a small tool to browse and search for any quotes you've saved.</p>
<a style="padding:4px; border: 1px solid blue; border-radius: 2px;" target="_blank" href="/options.html">go to your quote library →</a>
<p>so what next?</p>
<p>one thing you could try right now is going to one of your own blog posts generating a quoteback where you have a block quote to see how it feels.</p>
<p>let us know how you go with it, and email us at [email protected] / [email protected] if you need anything.</p>
</body>
</html>