4. Chronicling America

Run this sample app.

The Library of Congress (LOC) has developed an amazing collection of digitized newspapers from 1770 to 1963: https://chroniclingamerica.loc.gov

We found the presentation of the collection very busy, and wanted to provide a focused experience that allows one to read old newspapers and get lost in a forgotten time.

It turns out, the LOC has made publicly available a set of APIs to explore this collection: https://chroniclingamerica.loc.gov/about/api

So we added just the necessary API calls to a resource called LOC:

Then, we assembled the experience. In essence, we ask our audience to pick a newspaper. Then, pick an issue. Then, view the first page of the issue, and allow to navigate to the next/previous page, choose a different issue, or start over by picking a different newspaper.

Pick Newspaper

We start by making a call to the API to get the newspapers list. We could have done this in the same step as Pick Newspaper, but since users may want to come back to pick a different newspaper, we did not want to make an unnecessary extra API call.

We map the following responses in an array that we'll use to power a drop-down list:

lccn (an index)
combine in the value both the state and the title

Once we have the list of newspapers, we show the interface, and we bind the dropdown newspaper control to this data that we mapped.

Notice that we could have just bind it to

${V.get_newspapers}{newspapers}

However, we do some clean up here, by removing the extra '[Volume]' from titles:

${V.get_newspapers}{newspapers}@{array-modify: affect=label; func=replace(' [volume]', '')}

Choose Issue

Once we have the selected newspaper, it's time to ask our audience to pick an issue.

To do so, we need to look up the issues associated with that newspaper, and retrieve some data about them.

Here is the mapping that we did:

Once we have the newspaper, just like with the dropdown above, we want to clean the name to remove the '[Volume]' extra text, as well as calculate the number of years that the newspaper was in print:

Before we show the interface, we also thought it useful to show the first page of the issue, so get it (as pdf) by providing the pubId, date, edition, and sequence as per the LOC published API.

We are now ready to ask our audience to Choose Issue:

To create the experience above, we used a grid element to structure the output, and mapped the data:

Read

Great. We picked the newspaper and an issue. It's time to read!

First, we grab the first page of the issue. Note that we pass to the API the data fields collected or calculated earlier.

Above, note also that one argument that we need to pass in is sequence - we make it dynamic, so we may use the Next and Previous to navigate forwards and backwards in the issue.

After we have the issue, we show it. We used the grid element to structure the output, and the PDF control mapped to the result of the operation above (view_issue).

The buttons go to the respected locations in the app:

Start Over —> pick newspaper
Different Issue —> choose issue
Next / Previous —> they go to their compute modules where we increase/decrease the page, and go back to View the corresponding page: