initial commit after project creation
This commit is contained in:
Gerhard Scheikl
47
content/docs/using-tinacms/how-does-tinacms-work.mdx
Normal file
47
content/docs/using-tinacms/how-does-tinacms-work.mdx
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: How Does TinaCMS Work?
|
||||
last_edited: '2025-07-12T22:32:27.382Z'
|
||||
---
|
||||
|
||||
TinaCMS is a feature-rich and somewhat complex tool.
|
||||
|
||||
If you just want a docs solution, feel free to skip over this chapter. If you yearn for knowledge, read on….
|
||||
|
||||
## The TinaCMS Frontend
|
||||
|
||||
The TinaCMS front-end is 2 fold:
|
||||
|
||||
1. An editing portal that runs on the same port as your website, by default at the `/admin/index.html` route.
|
||||
2. Your content model definition (we call it your schema) and other configuration… this control what fields you get when editing your website.
|
||||
|
||||
|
||||
|
||||
## The TinaCMS Backend
|
||||
|
||||
The TinaCMS Backend is your GraphQL content API.
|
||||
|
||||
Think of this as a database and server that indexes your flat Git files for efficient fetching and exposes the endpoints.
|
||||
|
||||
|
||||
|
||||
This set-up can be achieved with TinaCloud – a paid offering from the TinaCMS team, or by using your own database.
|
||||
|
||||
> During local development, a local version of the server is running that allows for the same editing experience offline.
|
||||
|
||||
## Learn More About TinaCMS
|
||||
|
||||
This kit won't go deep into TinaCMS other than basic usage – [their docs](https://tina.io/docs) have more info.
|
||||
|
||||
Some useful links are highlighted below…
|
||||
|
||||
### The Beginner Series
|
||||
|
||||
There's a series of intro tutorials called [the Beginner Series](https://tina.io/docs/beginner-tutorials/tutorial-overview) that teach you to integrate a website with the CMS, giving you a full website builder feature set (dragging blocks around a page, live previews and click to edit functionality).
|
||||
|
||||
### Usage Docs
|
||||
|
||||
Some useful reference docs include…
|
||||
|
||||
* What is [markdown vs mdx ](https://tina.io/docs/editing/markdown)and what is the supported [markdown spec](https://tina.io/docs/reference/markdown-spec)
|
||||
* Setup guide for [AI powered auto-translations and internationalization](https://tina.io/docs/guides/internationalization) (if useful for your project)
|
||||
* Media options, including [repo-based (Git) media](https://tina.io/docs/reference/media/repo-based) and [external media stores](https://tina.io/docs/reference/media/external/authentication)
|
||||
69
content/docs/using-tinacms/usage-developers.mdx
Normal file
69
content/docs/using-tinacms/usage-developers.mdx
Normal file
@@ -0,0 +1,69 @@
|
||||
---
|
||||
title: Usage – Developers
|
||||
last_edited: '2025-07-15T00:16:15.119Z'
|
||||
---
|
||||
|
||||
<Callout
|
||||
body={<>
|
||||
We recommend reading the previous page on usage for editors before moving onto this one. This page is focused on the local development experience.
|
||||
</>}
|
||||
variant="idea"
|
||||
/>
|
||||
|
||||
The TinaCMS editor has two modes:
|
||||
|
||||
1. **Local Development Mode**: When running your site locally for development
|
||||
2. **Production Mode**: When using the deployed version of your site
|
||||
|
||||
In local development mode, changes are saved directly to files in your local repository.
|
||||
|
||||
In production mode (with TinaCloud), changes are committed directly to your Git repository.
|
||||
|
||||
## Local Mode
|
||||
|
||||
The TinaCMS editor is available at the `/admin` route of your site (for example, `http://localhost:3000/admin`).
|
||||
|
||||
Run the below command from the terminal in your project directory to boot up the application.
|
||||
|
||||
```shell
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
This will run the TinaCMS local server as well as the NextJS front-end.
|
||||
|
||||
The editing UI is the same as in production, but you can safely test any model or content changes that are out of the ordinary.
|
||||
|
||||
### ⚠️ The **tina-lock.json** File
|
||||
|
||||
The `tina-lock.json` must be **checked into source control and pushed to your repo**.
|
||||
|
||||
It contains a compiled schema used to resolve content documents, and should be updated after any local content or schema changes.
|
||||
|
||||
Run `pnpm dev` locally to trigger an update to this file.
|
||||
|
||||
## Testing Production Mode
|
||||
|
||||
You can also test a production instance of your application, hooked up to TinaCloud.
|
||||
|
||||
This may be useful in a pinch to pick up hard-to-find issues.
|
||||
|
||||
1. Update your local .env file with:
|
||||
1. `TINA_TOKEN` from TinaCloud
|
||||
2. `NEXT_PUBLIC_TINA_CLIENT_ID` from TinaCloud
|
||||
3. `NEXT_PUBLIC_TINA_BRANCH` if using branch based editing
|
||||
4. `NEXT_PUBLIC_SITE_URL` to `localhost:3000`
|
||||
2. Run the build and start scripts.
|
||||
|
||||
```shell
|
||||
pnpm build && pnpm start
|
||||
```
|
||||
|
||||
## Next Steps
|
||||
|
||||
Once you're familiar with the basic editing interface, you might want to:
|
||||
|
||||
1. Customize your content schema
|
||||
2. Create custom field components
|
||||
3. Configure advanced validation
|
||||
|
||||
For more details on the editing experience, check out the [official TinaCMS documentation](https://tina.io/docs/using-tina-editor).
|
||||
104
content/docs/using-tinacms/usage-editors.mdx
Normal file
104
content/docs/using-tinacms/usage-editors.mdx
Normal file
@@ -0,0 +1,104 @@
|
||||
---
|
||||
title: Usage – Editors
|
||||
last_edited: '2025-07-15T00:15:32.898Z'
|
||||
---
|
||||
|
||||
> These instructions assume you've already deployed your site – if you created it with the TinaCloud QuickStart, this has all been done for you.
|
||||
|
||||
Let's get to grips with the **no-code editing workflow** in production.
|
||||
|
||||
<Callout
|
||||
body={<>
|
||||
Prefer to watch a video? Follow the one provided.
|
||||
</>}
|
||||
variant="idea"
|
||||
/>
|
||||
|
||||
<youtube embedSrc="https://www.youtube.com/embed/CsCQS7HIBv0?si=os9ona92O2VMOl-V" caption="Seth goes over the basics of using TinaCMS" minutes="2" />
|
||||
|
||||
## First Steps…
|
||||
|
||||
1. You'll need a GitHub account, if you don't have one – create one and come back.
|
||||
2. Add your account to the project in TinaCloud (or ask your admins to add you).
|
||||
|
||||
## Making Edits
|
||||
|
||||
1. Go to the [/admin](/admin#/~/docs/tinadocs-and-tinacms/editing-content) route of your website
|
||||
2. Change the content in one of the fields and watch your site preview update in real time. This is called **visual editing**.
|
||||
3. Press save.
|
||||
|
||||
<Callout
|
||||
body={<>
|
||||
This will automatically trigger an update to your site, unless you have [editorial workflow](https://tina.io/editorial-workflow) features enabled (giving teams a Git based approval workflow).
|
||||
</>}
|
||||
variant="warning"
|
||||
/>
|
||||
|
||||
> **Note:** these kinds of updates shouldn't create any downtime, depending on your deployment pipeline.
|
||||
|
||||
## Editing a Specific Page
|
||||
|
||||
### Collections Menu
|
||||
|
||||
You can either look through all your pages via the **collections menu**, or turn on edit mode for a specific page.
|
||||
|
||||
To go to the collections menu, go to your [/admin](/admin) route, then open the sidebar and follow the below graphic.
|
||||
|
||||
|
||||
|
||||
Clicking on any of the above documents will take you to the visual editor for that page.
|
||||
|
||||
### By URL
|
||||
|
||||
Alternatively, you can access the editor for a page you're on by updating the url.
|
||||
|
||||
Between the **domain** and **the path** of the page you want to edit, add `/admin/#/~/` to take you to the live editor for that page.
|
||||
|
||||
## Adding a New Page
|
||||
|
||||
To create a new doc, go to the Docs collection and click “Add File”.
|
||||
|
||||
Folders can be organised as you see fit, and this file path controls the url of that document.
|
||||
|
||||
> For example, a document, `A.mdx` in the folder `/B` can be accessed at `DOMAIN/docs/B/A`.
|
||||
|
||||
|
||||
|
||||
<Callout
|
||||
body={<>
|
||||
All documents will be exposed, regardless of whether they're included in the navigation bar or not.
|
||||
</>}
|
||||
variant="warning"
|
||||
/>
|
||||
|
||||
## Managing the Navigation Bar
|
||||
|
||||
Docs are organised in tabs and then menus within each tab.
|
||||
|
||||
You can manage this from the Navigation Bar collection.
|
||||
|
||||
### Adding a New Tab
|
||||
|
||||
When adding a new tab, there are two options – either an API tab and a Docs tab.
|
||||
|
||||
* **Docs Tab** – allows you to reference documents in a tree structure to create a navigation structure.
|
||||
* **API Tab** – includes the option to add auto-generated documents from an OpenAPI spec to your sidebar, in addition to regular documents.
|
||||
|
||||
<Callout
|
||||
body={<>
|
||||
Currently, saving the Navigation Bar collection will re-generate these API Tab documents.
|
||||
</>}
|
||||
variant="warning"
|
||||
/>
|
||||
|
||||
|
||||
|
||||
### Menu Structure Changes
|
||||
|
||||
The menu structure is controlled as an tree-like object inside each Tab.
|
||||
|
||||
At each level of the menu, you can choose between a sub-menu or a document file to create the nested navigation structure.
|
||||
|
||||
|
||||
|
||||
Documents are labelled in the sidebar based on their title field, and menu groups can be given custom names.
|
||||
35
content/docs/using-tinacms/what-is-tinacms.mdx
Normal file
35
content/docs/using-tinacms/what-is-tinacms.mdx
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
title: What is TinaCMS?
|
||||
last_edited: '2025-07-11T07:33:46.510Z'
|
||||
---
|
||||
|
||||
[TinaCMS](https://tina.io) is a Headless Git-backed CMS for developers.
|
||||
|
||||
<Callout
|
||||
body={<>
|
||||
A headless CMS is a tool that stores content and sends it to any website or app through an API, without controlling the frontend implementation.
|
||||
</>}
|
||||
variant="info"
|
||||
/>
|
||||
|
||||
It lets you build a custom content editing portal using React, with changes stored as flat files and committed straight to Git.
|
||||
|
||||
This exists separately to your website, which hooks into TinaCMS and pulls that content from Git (see below).
|
||||
|
||||
|
||||
|
||||
For more details, check out the TinaCMS [documentation](https://tina.io/docs).
|
||||
|
||||
If you have further questions, feel free to join the TinaCMS community on [Discord](https://discord.com/invite/zumN63Ybpf).
|
||||
|
||||
## Why TinaCMS?
|
||||
|
||||
This may or may not be the right fit for your project.
|
||||
|
||||
| Feature | Key Benefit |
|
||||
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Flat-file based data storage | Flat files make migrations and data storage straightforward – with markdown and mdx as common content file-types. |
|
||||
| GitHub Workflow | Favors teams that want to or already have GitHub based projects – and allows code and documentation to sit side by side in a mono-repo. |
|
||||
| Headless | You can change your content model and website independently. |
|
||||
| Custom Editing Interface | You can tailor your editing panel with custom components for custom validation, data, etc. |
|
||||
| **Open Source** | **Modify the project as you need, or help maintain it 🫶** |
|
||||
Reference in New Issue
Block a user