ONE - Website

Notable packages:

• next-seo
• polished
• framer motion
• matter.js
• @react-spring/core
• chance
• swr

Dev packages:

• babel
• eslint
• husky
• postcss
• slice-machine-ui
• tailwind
• @prismicio/next

Setup

Environment Variables

This code requires Environment Varaible(s) for proper function. Please make sure you have the following environment variables set up according to the Next.js documentation (more info here):

WORKABLE_ACCESS_TOKEN=[your Workable API access token]

Running a local dev environment

This app supports the latest LTS release of Node.

npm install
npm run dev

Scripts

Script	Description
npm start	Run app
npm build	Build app (run before start)
npm run dev	Start dev server on localhost:3000
npm run lint	Run eslint
npm run lint-fix	eslint auto-fix
npm run export	Exports a static version of the site
npm run slicemachine	Start Slicemachine server

Prismic & Slicemachine

This site is built for use with the Prismic CMS and it's Slicemachine Tool.

Directory Overview

• .next – Next.js auto-generated directory.
• .slicemachine – Contains the schemas for the site's Prismic Slices. These are auto-generated by Slicemachine
• customtypes – Contains the schemas for the site's Prismic Types. These are auto-generated by Slicemachine
• public – Public assets directory for Next.js.
• src – Main website source code:
  • core
    • components – React components used throughout the App
    • context – React context definitions, such as global state
    • layouts – Page layout React components (more info here) and other reusable layout-related high-level components.
    • sections – Higher level React components representing Prismic Slices. Slicemachine's auto-generated registry can be found in sections/index.js
  • lib
    • config – JSON config files for defining things like routes & seo metadata
    • constants – JS files containing constant value definitions
    • hooks – React hooks used by various components
    • prismic – Utilities for interfacing with the Prismic API Client
    • utils – Simple utility functions
  • pages – Next.js pages directory
    • api – Next.js severless functions
  • styles – CSS configurations for site-wide styles and typography.
• tailwind – Tailwind config files and plugin definitions

Hosting

Requirements

This website was developed with Vercel Hosting in mind. This is because the careers page of this website relies on the Next.js API Routes feature to interface with the Workable API.

If you would like use an alternative hosting solution, that platform must support Next.js API Routes.

Deployment

If configured properly with Vercel, you can deploy a new version of your site by pushing changes to the main branch of this repository.

Video Formats

This part of this document details how to use ffmpeg to properly format videos for use on the site.

This site contains a section that ties scroll position to seek progress in the video. For best results and smoothest seeking, please make sure your videos are compressed using the following ffmpeg settings for low FPS, low keyframe interval, and h.264 encoding:

ffmpeg -i in.mp4 -vcodec libx264 -x264-params keyint=12:scenecut=0 -filter:v fps=12 -an out.mp4

If a higher video frame rate is desired, you can increase the fps like this:

ffmpeg -i in.mp4 -vcodec libx264 -x264-params keyint=12:scenecut=0 -filter:v fps=24 -an out.mp4

For any videos being used outside of the Scrolling Video section, use the following ffmpeg configs for best performance and cross-device support:

ffmpeg -i input -c:v libx264 -profile:v main -vf format=yuv420p -c:a aac -movflags +faststart output.mp4