Hi Legends 👋

Tina.io – the Website for TinaCMS

Source code for the tina.io website, including the TinaCMS documentation and blog.

Found a bug? Create a PBI and we'll look into it.

🧿 Vision

Make a website to communicate the awesomeness of TinaCMS.

🛠️ Tech Stack

Static web application built with...

• React
• Next.js
• TypeScript
• Tailwind CSS

for Node versions, check this docs page.

• and of course... TinaCMS! 🦙

Hosting and deployment...

• GitHub and Vercel

🛠️ Dependency Installation + Setup

We're using pnpm as the package manager for node.

cp .env.example .env
pnpm i

Note: Python is required for gyp – install python and if necessary (newer python versions) the setup tools.

🧑🏻‍💻 Running the Project

pnpm dev

This will spin up the react/Next project locally, running on localhost:3000 (react app) and localhost:4001 (playground for testing graphql against the Tina datalayer).

Note: if you get an error that say's something like "end of JSON input" – try running the command again.

Not Familiar with Tina?

We've put together a simple explanation of the project directory – in _docs/Directory-Structure.

This should give you an idea of how it all fits into the project.

Additionally, the Tina docs contains the usage details for development with Tina.

Additional Documentation

• Definition of Done (work requirements)
• Definition of Ready (PBI requrements)
• Contribution Guidelines

Design

The Tina.io site aims to adhere to the design library created by the awesome designers at SSW

• Tina.io Design Library on Figma

🔍 Search Functionality Overview

• A custom indexing system processes MDX documentation files using createIndices.ts.
• Integrated with Algolia Search for fast, typo-tolerant full-text search.
• Search indices are automatically updated via a GitHub Actions workflow named create-indices.yml whenever documentation changes are merged into the main branch.

This setup ensures that search remains accurate, up-to-date, and efficient across the documentation.