Building TEI-powered websites with static site technology. A hands on exploration of the publishing toolkit of the Scholarly Editing Journal

This half-day (approximately 3 hours) workshop will introduce TEI publishing with static site generators and front-end technologies, namely the static site generator Gatsby and React JS. It will introduce the attendees to the publishing strategies and tool sets developed for the reboot of the online Scholarly Editing journal (https://scholarlyediting.org/), which publishes, among essay-like content, TEI-based small scale editions. This workshop is aimed at attendees who already have some experience with programming (including XSLT) and the command line; however, all are welcome and will be supported as much as possible throughout the workshop.

The publishing tools presented in this workshop were developed for the reboot of the Scholarly Editing journal, which published its newest issue, volume 39, in April 2022. The previous site, built with Apache Cocoon, was converted into a static site and made accessible as an archive (https://scholarlyediting.org/se.index.issues.html). The new website and journal issues are built using Gatsby, a static site generator that relies on React JS for building user interfaces. The journal’s editors chose to adopt a static site generator because, once built, static sites do not need maintenance and can be easily moved and archived. This requires less infrastructure to publish and keep the site online on the web, which is desirable both for keeping operational costs of the journal low and to ensure its longevity. XML technologies can be and are used to generate static sites; the TEI Guidelines are a notable example. Regardless of how the static site is built, the result has minimal infrastructure requirements. A server is always needed to publish something on the web, but its role is limited to sending files over to the client, essentially just supporting HTTP GET operations. This is cheap and it makes it possible to rely on affordable web hosting, or take advantage of free services, or even use a home server.

During the workshop, participants will create a Gatsby website starting from a provided template that includes the TEI rendering tools gatsby-transformer-ceteicean and gatsby-theme-ceteicean. These tools re-implement principles pioneered by CETEIcean, which relies on the browser’s DOM processing and HTML5 Custom Elements to publish TEI documents as a component pluggable into any HTML structure (Cayless and Viglianti 2018). Example TEI documents to integrate into the website will be provided, but attendees are encouraged to bring their own. After an introduction on static sites, the motivations for using them, and an open discussion, the workshop will introduce:

• How to set up Gatsby and the CETEIcean plugins
• How to use built-in behaviors
• Customization via CSS (and CSS-in-JS)
• Defining custom behaviors as React components (we will cover the fundamentals of React components in this workshop)
• Applying optional transformations to TEI documents before and after ingestion into Gatsby (as we will see, transformations must be run by NodeJS and therefore written in JavaScript; however, XSLT scripts can also be applied via SaxonJS).