Glade is built using web components, and the library itself is a custom element.
Wrapping content with the Glade custom element augments that content and makes it annotatable by web users!
That's done like this:
<p>I don't know latin</p>
Now as a user, if I encountered that magnum opus online in the wild, I would be able to interact with it, and add annotations to any of the DOM nodes inside by clicking on them. At that point I'd be prompted to log in to my Glade account.
Sign up for a Glade account here!
Glade will iterate through the referents that make up your document and it will add the class
glade-has-annotations if a referent has annotations, so you can choose how to style those referent nodes however you want.
In the Weeds
Let's assume you've gone through the Getting Started Guide
At that point after your page loads, the following events will occur in the browser as a result of the component being rendered to the DOM.
The Svelte lifecycle event onMount will be triggered, and we call
startGlade(), which will perform the following 3 actions:
setSemanticContentHashes, which means it will generate a unique identifier for each node within the glade document as they appear to the user.
Currently it is only the textContent property of the nodes that is hashed. Each DOM node hash is known as a
gladeDOMNodeHash, and it will be reflected on the node as an attribue called
Next, all these hashes are concatenated and hashed once more, this new hash is called the
gladeDocumentHashand this is used as the unique identifier for the Glade document.
getAnnotationsis called and all Glade annotations are looked up by their
gladeDocumentHashin firestore, and are subsequently iterated through in the client and assigned to their referent nodes by looking at the annotation's
gladeDomNodeHashproperty and comparing them to the ones in the DOM as attributes currently.