Merge branch 'master' into tweaked-command-cta

components/blocks/Actions.tsx

@@ -18,7 +18,7 @@ export const Actions = ({ items, align = 'left' }) => {
             if (item.variant == 'command') {
               return <CodeButton key={item.label}
                 data-tina-field={tinaField(item, 'label')}
-              > {item.label}</CodeButton>
+              >{item.label}</CodeButton>
             }
             const { variant, label, icon, url } = item
             const externalUrlPattern = /^((http|https|ftp):\/\/)/

components/layout/setup-overview.tsx

@@ -78,7 +78,7 @@ const OverviewTemplate = (props) => {
               experience that is perfectly tailored to their site.
             </p>
           </div>
-          <div className="cards">
+          <div className="cards grid-cols-1 md:grid-cols-2">
             {cards.map((card) => (
               <a className="card" href={card.link}>
                 <h2>{card.header}</h2>
@@ -130,7 +130,6 @@ const OverviewTemplate = (props) => {
             border-radius: 0.75rem;
             overflow: hidden;
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             width: 100%;
             border: 1px solid var(--color-seafoam-300);
             box-shadow: 0 6px 24px rgba(0, 37, 91, 0.05),

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/reference/collections.md

@@ -324,7 +324,7 @@ export default defineConfig({
           {
             label: 'Date',
             name: 'date',
-            type: 'date',
+            type: 'datetime',
           },
         ],
       },

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>

content/docs/schema.md

@@ -285,6 +285,16 @@ Each field in a collection can be of the following `type`:
 - [object](/docs/reference/types/object/)
 - [rich-text](/docs/reference/types/rich-text/)
 
+## 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/PcgnJDILv4w?start=554&end=777" title="TinaCMS Deep Dive (Content Modeling)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>
+
 ## Summary
 
 - Your content is modeled in the `tina/config.{ts,js,tsx}` in your repo using `defineConfig`.

content/docs/tina-cloud.md

@@ -31,3 +31,13 @@ To start moving from local-mode to prod-mode, the next steps are to:
 
 - Push your repository to GitHub (if it isn't already)
 - Set up a project in the Tina Cloud dashboard. (See next page)
+
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on "Tina Cloud" 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/r9vzL_8PEW8?start=39" title="TinaCMS Deep Dive (Going To Production)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>

content/docs/tina-cloud/faq.md

@@ -11,20 +11,20 @@ Tina Cloud adds a GraphQL API to Tina's open-source content editor allowing it t
 
 ## Where do I start?
 
-- Have a look at the updated [Tina Cloud docs](/docs/setup-overview/) and try out a starter.
-- [Sign up for Tina Cloud](https://app.tina.io/register)!
-- [Find us on Discord](https://discord.com/invite/zumN63Ybpf)
+* Have a look at the updated [Tina Cloud docs](/docs/setup-overview/) and try out a starter.
+* [Sign up for Tina Cloud](https://app.tina.io/register)!
+* [Find us on Discord](https://discord.com/invite/zumN63Ybpf)
 
 ## Does Tina Cloud only work with GitHub repositories?
 
 Currently, yes, the first Git provider that Tina Cloud integrates with is GitHub. Other Git providers may be available in the future.
 
 ## How can I share an idea or get help using Tina Cloud?
 
-- If you haven't checked yet, the [docs](/docs/) may have the answer you are looking for!
-- Connect with us on [Discord](https://discord.com/invite/zumN63Ybpf).
-- We can help you at [email protected]. Email us if you would like to schedule a chat!
-- Chat with us from your Tina Cloud dashboard (there's a chat widget on the bottom right of the browser window).
+* If you haven't checked yet, the [docs](/docs/) may have the answer you are looking for!
+* Connect with us on [Discord](https://discord.com/invite/zumN63Ybpf).
+* We can help you at [email protected]. Email us if you would like to schedule a chat!
+* Chat with us from your Tina Cloud dashboard (there's a chat widget on the bottom right of the browser window).
 
 ## What is the pricing for Tina Cloud?
 
@@ -34,7 +34,7 @@ A fair use policy will be coming soon.
 
 We will contact you if we believe your use case may eventually fit within our post-beta paid plans.
 
-## **Does Tina Cloud work with Monorepos?**
+## Does Tina Cloud work with Monorepos?
 
 It does! Tina Cloud can work with sites inside monorepos by specifying the path to your `tina` folder in your Project configuration.
 
@@ -54,25 +54,31 @@ See [Path To Tina](/docs/tina-cloud/dashboard/projects/#path-to-tina) for more i
 
 Tina Cloud's GraphQL API returns this error when it cannot find a file in your GitHub repository. This may occur under the following circumstances:
 
-- The `tina` folder (and `__generated__` subfolder) is not in your GitHub repository remote.
-  - If the folder is in your local repository, but not in your remote, make sure there isn't a `.gitignore` file excluding it.
-- Tina is configured with a branch that doesn't exist or a branch that doesn't contain the `tina` folder.
-  - The referenced branch should be created and should contain the `tina` folder.
-- The apiURL prop is misconfigured on the TinaCMS component.
-  - Check the apiURL and make sure it looks like `https://content.tinajs.io/content/{tina_client_id}/github/{branch}` where `{tina_client_id}` matches the Client ID on the Project in Tina Cloud and `{branch}` is a valid branch.
+* The `tina` folder (and `__generated__` subfolder) is not in your GitHub repository remote.
+  * If the folder is in your local repository, but not in your remote, make sure there isn't a `.gitignore` file excluding it.
+* Tina is configured with a branch that doesn't exist or a branch that doesn't contain the `tina` folder.
+  * The referenced branch should be created and should contain the `tina` folder.
+* The apiURL prop is misconfigured on the TinaCMS component.
+  * Check the apiURL and make sure it looks like `https://content.tinajs.io/content/{tina_client_id}/github/{branch}` where `{tina_client_id}` matches the Client ID on the Project in Tina Cloud and `{branch}` is a valid branch.
 
 ## Tina.io login window doesn't close when logging in from a site
 
 When a user logs in from your site, we will pop open a login window. When login is complete, we will attempt to send a message back to the main window.
 
 The most common reasons for this issue are:
 
-- The Site URL is not properly set for the Tina project. The main window's base URL will need to match the Tina project's Site URL setup in the Tina Cloud Dashboard.
-- The Client ID setup in your site's environment variables does not match the Client ID in your project's settings on the Tina Cloud dashboard.
-- The user attempting to login to Tina Cloud does not have access to edit this site. Ensure that this user is authorized on the Tina Cloud dashboard.
+* The Site URL is not properly set for the Tina project. The main window's base URL will need to match the Tina project's Site URL setup in the Tina Cloud Dashboard.
+* The Client ID setup in your site's environment variables does not match the Client ID in your project's settings on the Tina Cloud dashboard.
+* The user attempting to login to Tina Cloud does not have access to edit this site. Ensure that this user is authorized on the Tina Cloud dashboard.
 
 > Make sure to include `https` in the Site URL eg: https://forestry.io or if you are testing locally, it might be something like `http://localhost:3000`
 
+## How do I resolve "The local GraphQL schema doesn't match the remote GraphQL schema." errors?
+
+If you are getting this error in your build logs, it means that the tina/tina-lock.json in your deployed site doesn't match the version that is in Tina Cloud. To resolve it, make sure you have latest versions of @tinacms/cli and tinacms in your project, and then run the dev command locally. Commit any changes to the tina/tina-lock.json and push those to the git repository linked in Tina Cloud.
+
+If you are getting this error when access the TinaCMS interface, it can be caused by a mismatch between the version of tinacms and @tinacms/cli on the project. Update both dependencies to the latest versions and run the dev command locally. Commit any changes to the tina/tina-lock.json and push those to the git repository linked in Tina Cloud.
+
 ## How do I resolve errors caused by unindexed branches?
 
 If you receive an error like `The specified branch, 'my-branch-name', has not been indexed by Tina Cloud`, first verify that the correct branch has been specified in

content/docs/tina-folder/overview.md

@@ -52,32 +52,32 @@ This is where all the files that are generated during the schema build process a
 
 ### `_graphql.json`
 
-The Graphql AST (represented in JSON). Must be pushed to GitHub.
+The Graphql AST (represented in JSON).
 
 ### `_lookup.json`
 
-This is a lookup file that is used to resolve document names. Must be pushed to GitHub.
+This is a lookup file that is used to resolve document names.
 
 ### `_schema.json`
 
-The Graphql Schema AST (represented in JSON). Must be pushed to GitHub.
+The Graphql Schema AST (represented in JSON).
 
 ### `types.{js,ts}`
 
-This file is where all the types of the schema are generated. This file is for the user to use in there site if they want to use the types. It is generated on every build, and does not need to be pushed to GitHub.
+This file is where all the types of the schema are generated. This file is for the user to use in there site if they want to use the types. It is generated on every build.
 
 ### `client.{js,ts}`
 
-This file is where all client is generated. This client can be used on the backend and the frontend. It is very lightweight as to not bloat the bundle size. It is generated on every build, and does not need to be pushed to GitHub. [Check out this document](/docs/data-fetching/overview/) for more information on how to use the client.
+This file is where all client is generated. This client can be used on the backend and the frontend. It is very lightweight as to not bloat the bundle size. It is generated on every build. [Check out this document](/docs/data-fetching/overview/) for more information on how to use the client.
 
 ### `frags.gql`
 
-This file contains the raw Graphql fragments that are generated and used by the [experimental generated client](/docs/data-fetching/overview/). Does not need to be checked into source control.
+This file contains the raw Graphql fragments that are generated and used by the [experimental generated client](/docs/data-fetching/overview/).
 
 ### `queries.gql`
 
-This file contains the raw graphql queries that are generated and used by the [experimental generated client](/docs/data-fetching/overview/). Does not need to be checked into source control since the the code for the generated client is `tina/__generated__/types.ts`.
+This file contains the raw graphql queries that are generated and used by the [experimental generated client](/docs/data-fetching/overview/).
 
 ### `schema.gql`
 
-This file contains the raw graphql schema. Does not need to be checked into source control.
+This file contains the raw graphql schema.

content/guides/tinacms/contextual-drafts/guide.md

@@ -218,3 +218,68 @@ export default App
 Now when an editor logs in they will enter preview mode and be able to contextual edit draft documents.
 
 You can see the [final result here](https://github.com/tinacms/tina-barebones-starter-preview-mode) and if you want to learn more about preview mode [see the Next.js docs](https://nextjs.org/docs/advanced-features/preview-mode).
+
+## Working with editorial workflows
+
+If you're using [editorial workflows](https://tina.io/docs/drafts/editorial-workflow/), you'll likely want to ensure that the preview data is fetching content from the branch
+you're editing. To enable this, subscribe to the `branch:change` event via the `cmsCallback` function in the config:
+
+```ts
+// tina/config.ts
+import { defineConfig } from 'tinacms'
+
+export default defineConfig({
+  // ...
+  cmsCallback: (cms) => {
+    cms.events.subscribe('branch:change', async ({ branchName }) => {
+      console.log(`branch change detected. setting branch to ${branchName}`)
+      return fetch(`/api/preview/change-branch?branchName=${branchName}`)
+    })
+    return cms
+  },
+})
+```
+
+Add another api endpoint at `/api/preview/change-branch`, which only updates the branch data if we're
+in preview mode:
+
+```ts
+// api/preview/change-branch
+export default function handler(req, res) {
+  if (req.preview && req.query?.branchName) {
+    res.setPreviewData({ branch: req.query.branchName })
+    return res.status(200).json({ message: 'Success' })
+  }
+  return res.status(403).json({ message: 'Unauthorized' })
+}
+```
+
+Update our request to include the branch (if provided) in `getStaticProps`:
+
+```ts
+export const getStaticProps = async ({
+  params,
+  preview = false,
+  previewData = {},
+}) => {
+  const { data, query, variables } = await client.queries.post(
+    {
+      relativePath: params.slug + '.md',
+    },
+    {
+      branch: preview && previewData?.branch,
+    }
+  )
+
+  return {
+    // the post is not found if its a draft and the preview is false
+    notFound: data?.post?.draft && !preview,
+    props: {
+      preview,
+      data,
+      query,
+      variables,
+    },
+  }
+}
+```