Understanding the CiteIt.net Front-end Code

Video Transcript

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.

Today’s video is targeted at developers who want to learn more about how to use the CiteIt.net javascript library, with the goal of integrating it with their own website or CMS and the CiteIt.net web service. It assumes that the developer has the ability to upload the sample code to a public website.1

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.

This JSON file is requested by the example page’s javascript and the data is saved to a hidden div on the page.

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

• citing quote + “|” + citing_url + “|” + cited_url

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:

• https://www.citeit.net/sample-123/examples.html

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.

Submit the url of a page that contains the CiteIt.net javascript libraries and a quote tagged with a <blockquote cite=url> or <q cite=url> tag.

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

Footnotes