First Impressions of TinaCMS with the grande starter

After downloading tina-starter-grande, I immediately upgraded all dependencies and launched gatsby start.

Unsurprisingly, things broke. While it’s best to be up to date, the next best thing is to have enough documentation to fix issues.

Some imports were changed in the post template:

import { InlineForm, InlineTextField } from "react-tinacms-inline"
import { InlineWysiwyg } from "react-tinacms-editor"

In the EditToggle, certain API’s (like activate and deactivate) were renamed:

import React from "react"
import { useInlineForm } from "react-tinacms-inline"
import { EditButton } from "./style"
import { useCMS } from "tinacms"

export function EditToggle() {
  const cms = useCMS()

  const { status, } = useInlineForm()

  return (
    <EditButton
      onClick={() => {
        cms.enabled ? cms.disable() : cms.enable()
      }}
    >
      {cms.enabled ? "Preview" : "Edit"}
    </EditButton>
  )
}

However, because I spent longer than I care to admit reading the docs and popular github issues beforehand, I was able to fix these issues easily.

The most difficult issue I encountered was the path input when creating a new page. It was not clear to me that I needed to start the path with a /. Better input sanitization would be great here.

Other miscellaneous user experience issues I noticed:

  • Deleting posts and pages was not immediately clear.
    • The option to delete posts was hidden on the post page under the kebab menu.
    • There was no option to delete pages. When I added that function, it redirected me to a random page after deletion. Also, Gatsby.js kept the page in memory so I was able to navigate back to the page with the menu, mistakingly thinking the page still existed.
  • Reordering authors had no effect.
  • Switching images in posts wouldn’t appear without a full page refresh.

Anyway, I still have a lot to learn :smile:My next goal is to set up gatsby-tinacms-git. I would like to see the automatic commit and push features, but I ran out of time tonight.

The biggest reason why I won’t use TinaCMS today: https://github.com/tinacms/tinacms/issues/771 (performance matters most) combined with unrecoverable errors. By unrecoverable errors, I mean having to either:

  • restart the gatsby process npm start
  • edit the source files in a code editor (forgetting the proceeding / in the path input)

Anyway, this project is really cool and I can’t wait to see it evolve :100:

2 Likes

Welcome @jlarmst !

This is amazing feedback. Thanks a lot.

I started digging into the bundle size issue some more. I’ve left a comment in the issue you posted and I opened this PR. It reduces the bundle size by 720kb.

Great start @ncphi ! Removing moment.js will go a long way to decrease the bundle size. Thank you for making that PR :100:

I am curious—would it be possible to remove all related TinaCMS code in production or have an official dynamic provider? A permanent solution to remove all unused code would be ideal.

I looked at TinaCMS again today, and was able to configure the gatsby-tinacms-git. There is a bug—even though I have a defaultCommitMessage, it still commits with the message Tina commit.

Anyway, I should have more time to play with TinaCMS next week :smile: keep up the great work!

Hey @ncphi my posts are being marked as spam. Any way to fix that? :confused:

would it be possible to remove all related TinaCMS code in production or have an official dynamic provider?

We have no plans to do either of these things. Using bundler macros to strip code is too fragile and dynamic loading is not really possible via libraries. It’s made even more awkward because not every site wants Tina removed in production (e.g. tinacms.org)

Tina is a toolkit for making your website into it’s own CMS. Unfortunately, a trade off of having TIna’s editing interfaces (especially the inline editing interfaces) is that there will be extra code in your site. We’re going to do our best to handle the biggest offenders (e.g. moment, react-color, react-dropzone, prosemirror) via standard methods of decoupling but we’re not looking to reduce the impact to 0kb.

Funky! You could open a bug report or even submit a PR :wink:

This was because you had multiple links to GitHub. I’ll see if I can adjust that in the settings.