My Contributions to TinaCMS

I have been working full-time at TinaCMS since May 2020. The majority of my work has been on the TinaCMS open source repo which is a monorepo that holds a majority of the source code of TinaCMS. I have over 1200 commits and I am one of the top contributors to the repo.

Below, I will outline in detail some of the major contributions/projects I have worked on.

Editorial workflow

The editorial workflow feature allows a user to define protected branches. When an editor is on a protected branch, instead of saving their content directly to that branch, they are able to create a new branch and a draft pull request will automatically be opened for them.

You can find some of this work in this pull request on the TinaCMS repo.

This feature was a major undertaking and required changes to both the open source and closed source portions of TinaCMS. Here is a list of the technical challenges I faced:

  • Working with the Github API to create branches and pull requests
  • Adding User inputs and async validation to ensure the branch has not already been created
  • Async Polling to wait for indexing to be completed

Self-Hosting TinaCMS

One of the major features that was added to TinaCMS was the ability to self host our "Data layer". Initially added in this PR, the self hosted feature allows a user to host the data layer in a serverless function and store the data in mongoDB. I worked on the CLI aspect of this as well as integrating all of the pieces together. See this Github discussion for an in depth explanation and a video demo. You can also see the blog post announcing this feature.

Here is an outline of the tech used to build this feature:

  • Level DB for storing data
  • Many-Level for storing data in memory locally and communicating over a local server
  • esbuild for building the users Data Layer config file.

CLI that Builds a SPA

Instead of adding TinaCMS UI directly to your site you install a CLI that builds a SPA that goes into your public folder. This allows TinaCMS to work with any framework. I worked on the CLI that builds this SPA. You can see the blog post announcing this features as well as the PR that added this feature

Here is a list of the tech uses and technical challenges I faced:

  • The CLI uses vite for the local dev server and the production build of the SPA.
  • Uses vite plugins to transform TypeScript and React JSX
  • Uses vite plugins to load svg, css, image files so that we could achieve a seamless user experience
  • Automatically re-indexes the content and re-builds the page when a user changes their config file