Hello, this is Tim Langeman, creator of CiteIt.net:
a citation app which enables web authors to easily demonstrate the authenticity and context of their quotations to skeptical and curious readers.
Let’s start by going to the CiteIt.net home page and clicking on the Sample Code examples.
- We see a plain, bare-bones html page that contains several examples.
- We also see the blue CiteIt.net expanding arrows above and below the quotations.
- If the user is using Chrome, we can enter the Developer mode by right-clicking on the web page’s background and select “Inspect“.2
- Next, click on “Network” 3 and then Reload the page.
You should notice a few numerically-named JSON files.
If you select a JSON file from the networking panel, you should be able to inspect the field values and observe that the JSON file contains the contextual data for each quote.
The page dependencies are:
- jquery.min.js: used for dom manipulation and popup window
- forge-sha256.min.js : calculate the hash
- jsVideoUrlParse.min.js : detect if the cited URL is a media provider (YouTube, Vimeo, Soundcloud)
- Main logic: CiteIt-quote-context.js
CiteIt-quote-context.js queries your Html for the following:
<blockquote> and <q> tags that contain a “cite=url” attribute.
It then uses forge-sha256.min.js to create a hash. The hash key is:4
Having constructed a sha256 hash identifier, CiteIt-quote-context.js downloads the JSON file with that name from read.citeit.net.
- “https://read.citeit.net/quote/sha256/” + webservice_version_num + “/” + shard + “/” + hash_value + “.json”
CiteIt-quote-context.js then adds a hidden div#citeit_container to the bottom the the page.
It then appends the JSON content to the hidden div so the blockquote or q tag can later display it if clicked on.
Download Sample Code
So let’s go to GitHub to download the Sample Code to get started
Let’s click the green “Code“ button and select “Download Zip“.
Upload Sample Code to your Website
I’ve already got a copy of the sample code on the CiteIt.net website so for demonstration purposes, I’ll extract and rename the file to sample-123.
I’ll use my FTP client to upload this folder to the my website.
Inspect Code before Indexing
I’ll then load the page in my browser:
I notice that the page looks normal, except for the blue contextual arrows, which don’t appear because the the JSON files don’t exist yet for the quotation on this URL.
Submit URL to be Indexed
The contextual JSON file can be created by clicking on the “New Submission” link in the footer.
Inspect Code after Indexing
Now that we have submitted the URL for indexing, we can reload the cited page to view the contextual data.
Saving JSON Files locally
The sample code saves a copy of the JSON files to a local folder, but points the reader to the read.citeit.net CDN. This is done to simplify the deployment process but a local configuration can be setup by a knowledgeable developer.
Let’s go back to the FTP client and open the CiteIt.net_json folder. We can see the JSON files and you should observe that the filenames of your JSON files are different because the URL of your site is different.5
It is possible to run CiteIt.net’s expanding quotations on a local server by running your own instance of the web service which has access to your private pages.↩
Other browsers have different Developer Tools which enable similar functionality.↩
You may have to expand the list of options if you window is narrow.↩
The protocols are filtered out of the URLs so that sites can change the protocol (from http to https)↩
The filename is determined by a hash of the hashkey.↩