Company Website

EQ Works company website.

• Production: https://www.eqworks.com
• Staging deployment preview: https://eqworks.github.io/
• Accounts Holder: creativestudio@eqworks.com

Blog

There is a "blog" aspect to this website, where we post Press Releases, Case Studies, Insights, and more. To do that, we are using the Headless CMS platform Contentful. We create the content on Contentful and then leverage Contentful's Content Delivery API to request and render that content. Byebye WordPress 👋

Whenever new content on Contentful is either published or unpublished, this will send out a webhook to this repository (see the deploy-to-production workflow file) that will trigger a rebuild of the website. This allows for the website to remain static while maintaining access to the latest content from Contentful. The GitHub account authenticating the GitHub webhook is the CreativeStudioEQ account.

You can visit this Google Drive folder to learn about how to add content through Contentful.

Development

This website uses the Next.js framework.

Local development

1. Ensure your environment has Git, Node.js (use the version recommended by .nvmrc, ideally through nvm), and npm installed.
2. Clone repository, run git clone https://github.com/EQWorks/eqworks.github.io.git.
3. Install dependencies, run npm i.
4. Start the website in development mode, run npm run dev.
5. View the website at http://localhost:3000.

Development workflow

1. Update the origin/main reference, run git fetch --prune && git pull.
2. Checkout to a <feature-branch> (this is where you can make your changes), run git checkout -b <feature-branch>.
3. Once your <feature-branch> is ready to be added to the website, open a pull request (PR) to merge your <feature-branch> into the main branch.
4. Upon review (ideally by other team members) and merge, it will trigger a staging build, you can monitor the status in the repo's Actions tab.
5. Verify the staging deployment is working.
6. Make a release by filling in Tag version with the convetion of vX.Y.Z where X.Y.Z may follow the [semantic versioning] practice. This will trigger a production build (through Netlify), and generate a release notes based on commit messages automatically.
7. Rinse and repeat!

Guidelines

To achieve a high level of quality and maintain consistency throughout, we adhere to the guidelines laid out in this section.

Accessibility

We are committed to comply with WCAG 2.1 level AA. We will be using this WCAG 2.1 quick reference guide set to level AA compliancy as our auditing guide for design and development iterations.

Code Formatting

All code must format to the Prettier configuration file.

• Check code format, run npm run lint.
• Format code to Prettier configuration, run npm run lint:format.

Components

Order element attributes alphabetically. For example:

<Smile aria-label='smiley face' role='img' />

Images

This website uses WebP as the image format for better compression and sending less down the wire to clients. We do keep a "fallback" file of every image to ensure maximum browser compatibility. See the ImgWebP component located in /components/shared/img-webp.js for how it works.

To convert any image type (.png, .jpg, etc.) to the .webp format, you can do the following (or follow this tutorial):

1. Install the webp CLI, run brew install webp.
2. Convert the images you want:

• Update one image, run cwebp -q 75 image.png -o image.webp
  • The -q 75 flag refers to quality of 75%. Meaning the image will be reduced by 25% in "perceivable" quality.
• Update all images of same extension in a directory, run find ./ -type f -name '*.png' -exec sh -c 'cwebp -q 75 $1 -o "${1%.png}.webp"' _ {} \;.
  • Change .png in both instances to any other image format (e.g. .jpg).

Services

• Contentful
• Formspree
• Mapbox
• Netlify

Contact

For questions or others, start a thread in the #infrastructure channel on Slack to get help or a discussion going.