Introduction
A personal project inspired by difficulties I faced in simultaneously reducing costs and increasing performance of the Canadian Journal of Undergraduate Research's WordPress website, this project was my first foray into full-stack development.
Stack and architecture
Approaching the problem with a JAMstack solution was my answer to the need to reduce dependencies on paid hosting services, as this allowed me to host the WP backend locally while also hosting the web content as static sites on highly available CDNs. I built a Gatsby app to generate the static frontend, which programmatically retrieved content using GraphQL queries to the WP backend that I had set up on Flywheel's Local platform.
UI design
I patterned the frontend design after my own redesign of CJUR's print publication. Strong serifed text marked articles and important information, while lighter and understated typefaces were used for metadata and navigation elements. Black, grey and drab olive accents highlighted a sense of negation while keeping the overall design sleek and professional.
Organizing the home page was simple enough - CJUR's content was easy to condense. As we were a publication, a hero banner announcing our latest release at the very top was obligatory. There I also placed navigation elements leading to our key services: author submission, editor/reviewer recruitment and article search. Below this was a catalogue of our five latest articles and the most recent edition and special edition.
The volume and article templates were made to closely resemble those I made for the print publication. Large, clean type delineated new sections of content, with supplementary metadata in olive-accented sidebars or as small subtext. Content was typed in body format, punctuated by bold text where a new subsection began.
I headlined each volume with its cover image in banners to give each its own flavour as well as giving viewers a way to distinguish each by sight. Each article's key contents and metadata were appended in the form of submenus where readers could preview, download or cite the article in question. My plan to introduce nav links to the previous/next volumes in these banners was complicated by the backend's unwieldy GraphQL structure.
As with the print version, a sidebar outlined each article's publication data. I also added here links to the containing volume as well as the PDF download. This sidebar was hidden on portrait-oriented screens, the metadata displayed at the bottom.
Placements for images, tables and graphs presented a problem for me, as these could not be shown at full size because of the layout. Initially, I attempted to place the figures gallery in a tab within the sidebar, but it was difficult to format tables and graphs in such a small width without resorting to images, and this approach would not be responsive enough to display correctly for mobile users. Instead I decided to place figures inline as with the print version, with a link overlay to open a full-size version in a new tab.
To display equations, I used KhanAcademy's TeX library, which accepts LaTeX input and displays HTML output.
