website

DAILP Website

This package renders a static website using React that includes all annotated documents produced by the DAILP project. These documents are connected to a Cherokee lexical database using our GraphQL endpoint. The latest commit to the main branch is automatically deployed to dailp.northeastern.edu.

Table of Contents

• DAILP Website
  • Run locally
  • Navigating the Code
  • Type-checking
  • Features of this approach

Run locally

To build and preview the website locally, you need to make a .env file in the root project directory with the following contents:

DAILP_GRAPHQL_URL=https://e3j0jht905.execute-api.us-east-1.amazonaws.com/prod/graphql

Feel free to change the actual URL if you are running a local version of the GraphQL server or otherwise.

After that, you can run the following in a terminal to initially install the dependencies of the project and start a development process:

yarn install
yarn start

Navigating the Code

Several folders have documentation to guide you in understanding the code. There are a few different entry points into the build process of the site. The best place to start is src/pages, where each file represents one page on the site. On the other hand, each file in src/templates represents a type of page, of which there may be many instances. Other components in the src folder are general components to be used in specific pages or templates.

Type-checking

Our whole stack is type-checked. When data from spreadsheets and other sources are pulled into our database, its format is verified and data types are enforced. The GraphQL layer mediating access to this data uses the exact same data types, automatically providing access to them in the GraphQL schema. The front-end build process ingests the GraphQL schema on demand to produce TypeScript types. Thus, we define our types once in the back-end and those definitions propagate all the way here.

Features of this approach

• Built with vite-plugin-ssr as a static site to minimize load times and remove the need for a web server. Gatsby has some helpful pages that also apply to vite: Comparison to Wordpress and explanation for content creators
• Uses typescript to provide compile-time type safety and validation to Javascript.
• Uses vanilla-extract for styling so that we can write scoped styles directly in Typescript with some dynamic features. Incurs zero runtime overhead as styles are extracted at build time. Themeing and dynamic styling becomes very easy with vanilla-extract, while compatible with all browsers (except Internet Explorer, which is now discontinued).