Last active
August 29, 2015 14:16
-
-
Save BigBlueHat/3068c1e0cb459c048e76 to your computer and use it in GitHub Desktop.
RDFa from Hypothes.is Annotation generator thing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Hypothes.is Annotation in RDFa</title> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.2/mustache.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/superagent/1.2.0/superagent.min.js"></script> | |
| <script src="index.js"></script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @copyright 2014 The Hypothes.is Project | |
| * @license MIT | |
| * @author BigBlueHat <bigbluehat@hypothes.is> | |
| **/ | |
| var style = '<style>\n\ | |
| aside {border: 1px solid darkgray;margin: 2em;padding:1em;background: #efefef;}\n\ | |
| aside blockquote {border-left: 5px solid #CCC;padding:1em;margin:0 0 1em}\n\ | |
| </style>'; | |
| var template = ' \ | |
| <aside vocab="http://www.w3.org/ns/oa#" typeof="Annotation" about="https://hypothes.is/a/{{id}}">\n\ | |
| <header>\n\ | |
| <a property="annotatedBy" href="https://hypothes.is/u/{{__username}}">{{__username}}</a>\n\ | |
| on <a property="hasTarget" typeof="SpecificResource" href="{{{document.link.0.href}}}">\n\ | |
| <span property="hasSelector" typeof="TextQuoteSelector" resource="#quote"></span>\n\ | |
| {{document.title}}\n\ | |
| </a>\n\ | |
| </header>\n\ | |
| <blockquote id="quote" about="#quote" cite="{{{document.link.0.href}}}"><span property="exact">{{__quote}}</span></blockquote>\n\ | |
| <section property="hasBody">\n\ | |
| <p>{{text}}</p>\n\ | |
| </section>\n\ | |
| </aside>\n\ | |
| '; | |
| function renderAnnotation(annotation) { | |
| var rendered = Mustache.to_html(template, annotation); | |
| var div = document.createElement('div'); | |
| div.innerHTML = style + rendered; | |
| var textarea = document.createElement('textarea'); | |
| textarea.style.width = "100%"; | |
| textarea.style.height = "30em"; | |
| textarea.value = rendered; | |
| document.body.appendChild(div); | |
| document.body.appendChild(textarea); | |
| } | |
| var annotation = {}; | |
| superagent | |
| // API URL of an annotation | |
| .get('https://hypothes.is/api/annotations/Gk_TW9d_SyCG5cFH4UCy9A') | |
| .end(function(err, res) { | |
| // res.body is the parsed JSON response | |
| annotation = res.body; | |
| // this bit splits out the actual username from the user URI | |
| annotation.__username = function() { | |
| return annotation.user.split('@')[0].split(':')[1]; | |
| }; | |
| annotation.__quote = function() { | |
| var quote; | |
| annotation.target[0].selector.forEach(function(selector) { | |
| if (selector.type === 'TextQuoteSelector') { | |
| quote = selector.exact; | |
| } | |
| }); | |
| return quote; | |
| }; | |
| // output the rendered HTML+RDFa | |
| renderAnnotation(annotation); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment