Merge branch 'master' into self-hosted-docs-logan

content/blog/Supercharge-Your-Markdown-Blog-with-AI.md

@@ -0,0 +1,43 @@
+---
+title: Markdown Bot - An AI friend who improves your content
+date: '2023-07-14T04:00:00.000Z'
+last_edited: '2023-07-14T04:00:00.000Z'
+author: Logan Anderson
+---
+
+With [TinaCMS](https://tina.io), all your content changes are committed directly to Git. This enables your team to create a variety of workflows for reviewing and merging content updates. By leaning on GitHub, you can integrate CI/CD into your content workflow.
+
+To illustrate the potential of this combination, we're excited to introduce **Markdown Bot**, an AI friend who improves your content by making suggestions to your Pull Requests.
+
+<Youtube embedSrc="https://www.youtube.com/embed/3SkumYmH8nc" />
+
+> Want to skip the reading and jump straight to the code? [Check out the open source repo](https://github.com/tinacms/markdown-bot).
+
+## A Useful Aid, Not a Replacement
+
+AI can be a valuable tool for assisting with writing and editing content. We've designed this bot not to replace content editors, but rather to augment their capabilities. The bot offers content suggestions directly in your pull requests. If you find the suggestions helpful, you can commit them with a click. If not, they're just as easily dismissed.
+
+![AI Suggestion in Github](https://res.cloudinary.com/forestry-demo/image/upload/v1689957451/blog-media/markdown-bot/Screenshot_2023-07-21_at_12.36.48_PM_ztpdes.png "AI Suggestion in Github")
+
+## Markdown Bot Works On Your PRs
+
+There are many AI writing tools out there but if you use them with markdown content it often involved copying and pasting from AI outputs. We wanted something that could interact with our Content in GitHub. That's why we developed a GitHub bot that allows us to receive these suggestions right within a GitHub pull request.
+
+## Working with the GitHub Bot
+
+After you've integrated the bot into your repository, you can command it to make suggestions by commenting `ai fix: <path to file>`. A custom prompt can be added by using `prompt: <Custom Prompt>` underneath. The bot will then offer commit suggestions in the form of a pull request review.
+
+To get started [check out the open source repo](https://github.com/tinacms/markdown-bot "AI Content Github repo").
+
+## Looking Ahead: AI and Git-based Content
+
+Our GitHub bot works hand in hand with TinaCMS to enhance the content creation process. No longer do you need to manually copy and paste suggestions. The bot brings suggestions right to your pull requests for a smooth, efficient experience.
+
+We can envision some impressive custom workflows being built with AI and Git-based content. For instance, you could build off of this bot to:
+
+* Trigger the AI bot with custom events, such as opening a PR.
+* Utilize analytics to suggest recommendations based on your top/bottom performing pages.
+* Integrate this bot with your feedback widget, to open PRs based on user feedback.
+* Catch insensitive, inconsiderate writing with tools like [alex](https://github.com/get-alex/alex)
+
+These are just a few of the many possibilities we see for integrating AI with Git-based content. We're excited about the potential here and look forward to seeing the creative workflows that the community will build.

content/docs/contextual-editing/overview.md

@@ -16,3 +16,13 @@ Tina also allows for "Visual Editing" so that editors can see their pages being
 ## Adding contextual-editing to a page
 
 To add visual editing to a page, you'll need to hydrate the pages data. In React, this is done by [using the `useTina`](/docs/contextual-editing/react) hook. We are currently working on adding support for other frameworks such as [vue](/docs/contextual-editing/vue).
+
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on Visual Editing from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/PcgnJDILv4w?start=1067" title="TinaCMS Deep Dive (Visual Editing)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>

content/docs/editing/blocks.md

@@ -333,5 +333,12 @@ const featureBlock = {
 }
 ```
 
-<!-- TODO: add a gif of a category -->
-<!-- ![block-based-editing-visual](/gif/visual-blocks.gif) -->
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on "Setting Up Blocks" from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/PcgnJDILv4w?start=555&end=727" title="TinaCMS Deep Dive (Configuring Blocks)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>

content/docs/extending-tina/custom-field-components.md

@@ -107,3 +107,13 @@ For example, if you take a look at the color field plugin's definition, it takes
         },
 // ...
 ```
+
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on "Customizing Components" from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/amSRwAbgMR0?start=744" title="TinaCMS Deep Dive (Customizing Components)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>

content/docs/extending-tina/customize-list-ui.md

@@ -85,3 +85,13 @@ For example:
 
 which will render as:
 ![List UI with label and style prop](https://res.cloudinary.com/forestry-demo/image/upload/v1649941182/tina-io/docs/extending-tina/Extending_Tina_Style_List_Props.png)
+
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on "Customizing List Items" from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/amSRwAbgMR0?start=545&end=727" title="TinaCMS Deep Dive (List Item Rendering)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>

content/docs/features/data-fetching.md

@@ -64,6 +64,16 @@ When developing locally, it's often beneficial to talk to the content on your lo
 
 > If you setup Tina via `@tinacms/cli init`, or used one of our starters, this should be setup by default. (Read about the CLI [here](/docs/graphql/cli/.)
 
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on "Data Fetching" from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/PcgnJDILv4w?start=403&end=534" title="TinaCMS Deep Dive (Data Fetching)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>
+
 ## Summary
 
 - Tina provides a GraphQL API for querying your git-based content.

content/docs/index.md

@@ -1,13 +1,13 @@
 ---
 title: Tina Docs
 id: introduction
-last_edited: '2021-07-27T15:51:56.737Z'
+last_edited: '2023-07-18T15:51:56.737Z'
 next: /docs/product-tour
 ---
 
 ## Introduction
 
-Tina is a Git-backed headless content management system that enables developers and content creators to collaborate seamlessly. With Tina, developers can create a custom visual editing experience that is perfectly tailored to their site.
+Tina is an open-source, Git-backed headless content management system (CMS) that empowers both developers and content creators to collaborate seamlessly on a single platform. Tina enables developers to craft a custom visual editing experience perfectly tailored to their website or application while supporting a broad range of content types such as Markdown, MDX, and JSON.
 
 <div style="position:relative;padding-top:56.25%;">
   <iframe width="560" frameborder="0" allowfullscreen
@@ -17,12 +17,23 @@ Tina is a Git-backed headless content management system that enables developers
 
 ## Advantages of Tina
 
-#### Backed by Git
+### Git-based content management
 
-- Both developers and editors collaborate on a single source of truth making site management harmonious.
-- Collaborate on content in real-time with live multi-user editing and change tracking.
+- Tina uses Git to provide a single source of truth for content and code, enhancing collaboration between developers and content editors.
+- Content changes are committed directly to your repository, ensuring version control and content history.
 
-#### Visual Editing
+### Real-time visual editing
 
-- Select and build using your predefined components. Edit text. Adjust the style. Empower editors to edit.
-- Get instant feedback with Tina’s intuitive sidebar editor. Allow your editors to preview their changes before publishing live to your site.
+- Create and edit content directly in the context of your website or application with Tina's real-time visual editor.
+- Customizable content blocks allow content editors to assemble pages and manage content intuitively, similar to using a site builder.
+- The changes made by the editors can be previewed in real-time before publishing, ensuring the quality of the content.
+
+### Control over content
+
+- Tina's open-source model gives you complete control and ownership over your content.
+- Tina's (optional) self-hosted backend gives you piece of mind from vendor lock-in.
+
+### Scalability
+
+- **Performance at Scale:** Tina is designed for large-scale projects. Whether your site has hundreds or tens of thousands of pages, Tina ensures optimal performance.
+- **Powerful Query Capabilities:** With Tina's unique data layer, your Markdown content becomes as flexible and queryable as if it were in a database.

content/docs/product-tour.md

@@ -1,64 +1,106 @@
 ---
-title: Product Tour
+title: Introduction to TinaCMS
 id: /docs/product-tour/
 last_edited: '2022-01-17T15:51:56.737Z'
 next: '/docs/setup-overview'
 ---
 
-To understand the power of Tina, let us first break down Tina into its components.
+Here we give a quick **2 minute overview of TinaCMS**, and how it fits into your website.
 
-## Tina CLI
+> If you're instead just looking to quicky get started, jump to our [Getting Started Guide](/docs/setup-overview/).
 
-![TinaCMS CLI](https://res.cloudinary.com/forestry-demo/image/upload/v1642516210/img/create-tina-app.png 'Setup a project with TinaCMS CLI')
+## Introduction
 
-TinaCMS CLI is a quick and easy way to set up a project with Tina. The CLI can inject Tina into a pre-existing Next.js site, or create a Tina starter site (see our list of [starters](https://app.tina.io/quickstart)) with Tina pre-configured.
+TinaCMS is an open-source Content Management System (CMS) that seamlessly integrates with your Markdown workflow.
 
-A Tina-ified site includes:
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1645712511/tina-io/docs/your-blocks.gif)
 
-- A Tina config file that be used to structure your content and configure Tina.
-- A local version of the Tina GraphQL API (see below!) used to fetch your content.
+### Your Website
 
-The Tina schema file is used to define the shape of your content. To learn more about content modelling within the Tina schema file, click [here](/docs/schema).
-For a list of CLI commands or to learn more about Tina’s CLI, click [here](/docs/cli-overview).
+- With TinaCMS, The developer hosts the site where they like, using whichever framework they choose.
 
-## Tina GraphQl API
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1689874025/tina-io/docs/product-tour/headless_cms1.png)
 
-![Tina GraphQL API](https://res.cloudinary.com/deuzrsg3m/image/upload/v1651008834/carbon_csq54s.png "Fetch data using Tina's GraphQL API")
+### Headless CMS
 
-Tina’s GraphQL API provides a structured API that can be used to fetch your site’s content. This GraphQL API uses your local filesystem as a database. When you define your schema in the Tina schema file, the Tina GraphQL API will generate queries specific to your schema.
+- TinaCMS is "Headless", meaning it's decoupled from your website. TinaCMS provides a queryable content API that your website's code consumes.
 
-When running your site locally, Tina spins up a local GraphQL server at `http://localhost:3000` as well as an Altair client at `http://localhost:4001/altair/` . This allows developers to test out the API and its file fetching capabilities.
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1689874025/tina-io/docs/product-tour/headless_cms2.png)
 
-> When running your site in production with Tina Cloud, instead of the local GraphQL server, your site will run using our hosted content API (more info below!).
+## The CMS Backend
 
-For more info on Tina’s GraphQL API or to understand content fetching, click [here](/docs/features/data-fetching).
+- The TinaCMS backend provides the API for querying your content, offering support for filtering, searching, and pagination.
 
-## Tina Editing UI
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1689874024/tina-io/docs/product-tour/queryable_database.png)
 
-Tina's editing UI is compiled statically into the sites public directory. This allows Tina to be used in any site, regardless of the framework it is built with.
+### Git-backed Content
 
-When a Tina site is served, navigating to the `/admin` (or `/admin/index.html`) route takes you to the Tina editing UI. This UI is used to edit content and manage your site’s content.
+- All your content gets backed by git into JSON/Markdown/MDX files
 
-For more info on Tina’s editing UI, click [here](/docs/using-tina-editor).
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1689874025/tina-io/docs/product-tour/git-backed.png)
 
-Tina has two editing modes. Basic editing, which allows an editor to edit in a "basic editor" and visual editing which can be used on any Reactive site (currently only support react).
+### Tina Cloud
 
-### Visual editing
+- Out of the box, we provide an easy-to-use hosted version of the backend, called Tina Cloud.
 
-![Real-time editing with TinaCMS and Tina Cloud](https://res.cloudinary.com/forestry-demo/image/upload/v1619023278/tina-cms-visual-editing.gif 'Real-time editing with TinaCMS and Tina Cloud')
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1689874024/tina-io/docs/product-tour/tina-cloud.png)
 
-Tina’s sidebar editor allows users to make changes to text, styling or components. Tina’s sidebar editor is set up on the frontend of your site and can be customizable to suit the needs of your site.
+### Self-hosted Backend
 
-To learn more about visual editing and setting up the sidebar, click [here](/docs/tinacms-context).
+- For those preferring more control and customization, TinaCMS also allows you to host the backend entirely on your own stack.
 
-## Tina Cloud
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1689874024/tina-io/docs/product-tour/self-host-backend.png)
 
-![Tina Cloud Dashboard](https://res.cloudinary.com/forestry-demo/image/upload/v1642524904/tina-dashboard.png 'Tina Cloud Dashboard')
+## The CMS Frontend
 
-Tina Cloud is our final piece to providing a full content management experience!
+- TinaCMS provides an intuitive CMS interface for your editors. For sites using React, TinaCMS supports "Visual Editing" to allow content editors to see real-time changes.
 
-When working with Tina in a local environment, **changes made through the Tina sidebar editor are saved locally to your content files** using the local GraphQL API. When editing with Tina Cloud, **edits are saved directly to GitHub** using our hosted content API. The Tina Cloud Dashboard enables you to connect Tina Cloud to your site’s GitHub repo.
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1645712511/tina-io/docs/your-blocks.gif)
 
-Additionally, when a site is configured with Tina Cloud, the editing capability is set behind an authentication wall. This allows only authorized users to make changes to your site. The Tina Cloud Dashboard enables you to invite other users, thus granting them access to edit content on your site and permitting their changes to reflect directly in GitHub.
+### /admin route
 
-Currently Tina Cloud is free to sign up - check it out [here](https://app.tina.io/register)! Or to learn more about Tina Cloud, click [here](/docs/tina-cloud).
+- Users interact with the CMS by navigating to the `/admin` page on your site.
+
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1689874024/tina-io/docs/product-tour/admin.png)
+
+### Saving
+
+- When users make a change in the CMS, a commit is made back to your Git repository.
+
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1689874024/tina-io/docs/product-tour/git-save.png)
+
+## Integrating TinaCMS into a site
+
+TinaCMS can be setup on your site with `tinacms init`. This installs a few Tina packages, and add some boilerplate
+
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1689819318/tina-io/docs/product-tour/cli-init.png)
+
+### Running TinaCMS Locally
+
+- You also have the flexibility to run TinaCMS locally, sourcing local files instead of interacting with the hosted API. This gives developers an ultra-fast feedback loop.
+
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1689874024/tina-io/docs/product-tour/local-workflow.png)
+
+### Content Modelling
+
+- Content in TinaCMS is modelled using a `tina/config.ts` file in your project. Through this, you can define "collections" that model various content types on your site.
+
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1690206543/tina-io/docs/product-tour/content-modelling.png)
+
+### Data-fetching
+
+- TinaCMS provides a GraphQL API, making data-fetching more efficient and powerful.
+
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1690205968/tina-io/docs/product-tour/graphql-query_5.png)
+
+### Client
+
+- Moreover, we also generate a user-friendly client that simplifies the process of querying your content.
+
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1690206445/tina-io/docs/product-tour/client.png)
+
+### Type-safety
+
+- TinaCMS emphasizes type safety, ensuring your content queries remain error-free and consistent, thus improving code reliability and maintainability.
+
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1690206441/tina-io/docs/product-tour/client-typesafe.png)

content/docs/reference/media/overview.md

@@ -18,7 +18,7 @@ export default defineConfig({
   schema: {
     collections: [
       // Array of collections
-    ]
+    ],
   },
   media: {
     // Media config
@@ -45,3 +45,13 @@ With the built-in repo-based media option, media is stored within the site's rep
 TinaCMS also supports pluggable external media providers.
 
 [Read more about the external media store implementation here](/docs/reference/media/external/authentication)
+
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on media from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/x0ACBQeNcts?start=388&end=469" title="TinaCMS Deep Dive (Media)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>