Scriptly

Welcome to Scriptly, a site designed to produce scripture-styled patriarchal blessings. What's a patriarchal blessing?

Local Development

In order to run the site locally, clone this repository then install all dependencies using either yarn install or npm install. Finally, run gatsby develop. Visit https://localhost:8000 to see the site.

To run tests, run npm run test which will kick off the Jest testing suite. Note: Currently, there are only unit tests.

Site breakdown

This site is made up of multiple components:

• Frontend - Built on GatsbyJS, a React based website building framework
• Backend - Two Node.js functions hosted on AWS Lambda

Frontend

The frontend code makes up the majority of this repository.

.
├── __mocks__
│   ├── file-mock.js
│   └── gatsby.js
├── src
│   ├── components
│   │   ├── __tests__
│   │   ├── css
│   │   └── ...
│   ├── images
│   ├── intl
│   ├── machines
│   └── pages
├── static
├── gatsby-config.js
├── jest-preprocess.js
├── jest.config.js
└── loadershim.js

The __mocks__ directory and jest-preprocess.js, jest.config.js, and loadershim.js files are all used for testing. The tests themselves are in the __tests__ directory. See Gatsby testing for more information about this setup.

Overall site flow and logic is handled by an xState state machine, located in the machines directory.

The pages directory contains React components that will be turned into pages on build, while the components are used in those pages across the site.

Internationalization is handled by react-intl, with translations located in the intl directory. The site is currently available in the following languages:

• English
• Spanish

Would you like to help translate to a new language? Get in touch!

Backend

The backend functions are at the root level of the repository in these folders.

.
├── scriptly-docx-lambda
└── scriptly-pdf-lambda

Once the user posts their form data, it is sent over to the scriptly-docx-lambda function. This function has docx templates which are populated with the user's data by the docxtemplater library. After the docx is created, the scriptly-pdf-lambda function is called. It picks up the docx file from S3 and converts it to a PDF using a headless OpenOffice in Lambda.

Todo

• Visual testing using Jest or Cypress
• OCR/text-recognition so that users can upload PDF versions of their blessings instead of typing them
• A completely client-side method for creating the scripture pages