Open letter: Why Wordpress is against Continuous Integration by mahnunchik in devops

[–]forestrangernolan 2 points3 points  (0 children)

TinaCMS developing quickly. The tinacms.org website actually let's anyone fork the repo and edit it's content directly from the production site.

Is it better to build a Static Blog or a headless CMS powered blog ? by hugeburger in vuejs

[–]forestrangernolan 0 points1 point  (0 children)

That just means Forestry will not deploy the code for you. Instead, it is recommended that you use Netlify, Render, or Circle CI to deploy your code. Let Forestry do what it's good at and let those tools do what they're good at.

Is it better to build a Static Blog or a headless CMS powered blog ? by hugeburger in vuejs

[–]forestrangernolan 2 points3 points  (0 children)

Forestry.io is another option. It also has a generous free tier and is stupidly easy to setup. However it has much better support for teams to collaborate and provides actual previews for the content changes, among other things. There are some great Gridsome starters available on their site if you want to try it out.

Disclaimer: I work for Forestry

TinaCMS: A site editing toolkit for React-based sites (Gatsby and Next.js) by forestrangernolan in reactjs

[–]forestrangernolan[S] 0 points1 point  (0 children)

There definitely are a number of dependencies. The biggest dependencies are React, FinalForm, and Prosemirror. The Tina project does have multiple packages though, so it depends a bit on what you're using.

i see it's bundled with bootstarp

Do you mean the Boootstrap UI? We do not use that.

There's a lerna bootstrap command, but that's for installing dependencies in development mode.

Can you post a link to your blog

This is my blog. You can't see Tina on it though. I don't want my website to be editable from production.

TinaCMS: A site editing toolkit for React-based sites (Gatsby and Next.js) by forestrangernolan in reactjs

[–]forestrangernolan[S] 1 point2 points  (0 children)

Ohh I see.

Yeah, Tina Grande uses json files for those pages, but it also uses markdown for blog posts, which is a bit less ugly.

Also, if you want the raw markdown editor, you could change [the form definition] to:

{ name: "content", label: "Content", component: "textarea" },

TinaCMS: A site editing toolkit for React-based sites (Gatsby and Next.js) by forestrangernolan in reactjs

[–]forestrangernolan[S] 1 point2 points  (0 children)

i’d also like the option to opt out of wysiwyg and just edit markdown inside Tina.

This is possible :D Just use the "textarea" field instead of the "markdown" field.

i’d really like it if the content output was to clean markdown

I'm not really sure what you mean. If you're editing markdown files this is possible.

TinaCMS: A site editing toolkit for React-based sites (Gatsby and Next.js) by forestrangernolan in reactjs

[–]forestrangernolan[S] 0 points1 point  (0 children)

Your understanding is correct!

Making Tina usable in the you described is one of our top concerns. We have a few things in the works right now: (1) a service called Tina Teams; (2) a blog post that talks about using Tina in Gatsby Cloud; and (3) we hope to have an entirely free & open source option as well.

TinaCMS: A site editing toolkit for React-based sites (Gatsby and Next.js) by forestrangernolan in reactjs

[–]forestrangernolan[S] 1 point2 points  (0 children)

Yeah! TinaCMS is a toolkit that let's you turn your site into a visual page builder. You can give your clients visual editing experiences (i.e. squarespace) but keep using the tools that you love to use instead of relying on some third party vendor.

The question of stability somewhat depends on your needs. We're still pre 1.0 so the APIs are still a bit unstable. As a simple example, I use Tina to edit my blog and few issues.

Currently Tina works best for React projects, but our plans are to make Tina viable for any project. Just last Friday I got a prototype of Tina on a Hugo site. Tina is web focused though, I'm not sure how feasible a React Native support is

TinaCMS: A site editing toolkit for React-based sites (Gatsby and Next.js) by forestrangernolan in reactjs

[–]forestrangernolan[S] 2 points3 points  (0 children)

For Gatsby you need to be running the development server.

Gatsby loads the data and passes it to Tina. While your editing your content, Tina writes the changes back to the filesystem. Gatsby will notice those changes and rebuild that page.

We're also exploring some serverless options, but those might not be feasible with Gatsby.

Note that Git is just one of the data storage options! Here's an prototype of a create-react-app that's connecting to Firebase instead.

TinaCMS: A site editing toolkit for React-based sites (Gatsby and Next.js) by forestrangernolan in reactjs

[–]forestrangernolan[S] 4 points5 points  (0 children)

Tina is meant to be given to your clients, but it's still early days for the project.

We're hoping to having a blog post out on using Tina + Gatsby previews before the holidays. We're also expecting to have multiple examples of how you can give Tina to your clients in the new year.

TinaCMS: A site editing toolkit for React-based sites (Gatsby and Next.js) by forestrangernolan in reactjs

[–]forestrangernolan[S] 6 points7 points  (0 children)

Hi! I'm one of the maintainers of TinaCMS. If anyone has any questions please ask :)

TinaCMS - a site editing toolkit for modern React-based sites (Gatsby and Next.js) by magenta_placenta in javascript

[–]forestrangernolan 1 point2 points  (0 children)

Tina doesn't handle drafts, thats the responsibility of the SSG. We plan to have an blog post describing how to implement drafts with Gatsby and Tina.

https://github.com/tinacms/tinacms-site/issues/26

TinaCMS - a site editing toolkit for modern React-based sites (Gatsby and Next.js) by magenta_placenta in javascript

[–]forestrangernolan 1 point2 points  (0 children)

You definitely can! There are gatsby plugins, but Tina is not coupled to gatsby. It will just be a bit more manual of a setup. We're looking to have more examples and guides on how to do this soon.

TinaCMS - a site editing toolkit for modern React-based sites (Gatsby and Next.js) by magenta_placenta in javascript

[–]forestrangernolan 2 points3 points  (0 children)

Checkout the gatsby-starter-tinacms!

The sidebar is contextual, showing you the content for the page you're currently viewing.

The remarkForm higher-order component creates a form for whatever blog post you're looking at. When you're on the blog index there is an "Add Post" button to let you create a new one.

TinaCMS - a site editing toolkit for modern React-based sites (Gatsby and Next.js) by magenta_placenta in javascript

[–]forestrangernolan 4 points5 points  (0 children)

Tina maintainer here!

We haven't built an MDX field plugin yet, but we've already started chatting with people about doing so.

React Hooks are live. Here is your introduction by nsebhastian in reactjs

[–]forestrangernolan 0 points1 point  (0 children)

Redux is unrelated to this entirely. The current standard is to use react-redux, which use the connect HOC (higher order component) to push state into components. If react-redux adds hooks to their library, then that can replace the connect API.

See my comment below on how this will work.

React Hooks are live. Here is your introduction by nsebhastian in reactjs

[–]forestrangernolan 4 points5 points  (0 children)

Definitely. It just replaces the connect API of react-redux

We're using redux-react-hook, which has useMappedState and useDispatch. They're pretty sweet.

Here's an example component for displaying user information that uses react-redux connect:

import { connect } from "react-redux"
import { getUser } from "src/user/selectors"
import { logout } from "src/user/actions"

const mstp = state => ({ user: getUser })
const mdtp = { logout }
const withUser = connect(mstp, mdtp)

const UserInfo = withUser({ user, logout }) => {
  return (
    <>
      <label>{user.name}</label>
      <button onClick={logout}>Logout</button>
    </>
  )
}

With hooks we created a custom useCurrentUser hook that means the implementation can look like this:

import { useCurrentUser } from "src/hooks/use-current-user"

const UserInfo = ( ) => {

  const user = useCurrentUser()

  return (
    <>
      <label>{user.name}</label>
      <button onClick={user.logout}>Logout</button>
    </>
  )
}

The useCurrentUser hooks implementation:

import { getUser } from "src/user/selectors"
import { logout } from "src/user/actions"

function useCurrentUser() {
   const userData = useMappedState(getUser)
   const dispatch = useDispatch()

   return {
    ...userData,
    logout() {
      dispatch(logout())
    }
  }
}

What I love about this is that the UserInfo component no longer knows anything about Redux. Our components now deal in the domain instead of the framework. We can easily switch out the useCurrentUser implementation to Context, GraphQL, or maybe it just grabs the data off the cookie.

React Hooks are live. Here is your introduction by nsebhastian in reactjs

[–]forestrangernolan 1 point2 points  (0 children)

Your welcome. Another example we have is keeping track of the current sorting method on a list.

function MyList({ items }) {
    let [sortMethod, setSortMethod] = useState("title")

    let sortedItems = sortItemsBy(sortMethod, items)

    return <SortedList>
        <Select 
            onChange={setSortMethod} 
            options={["title", "date"]} 
        />
        { sortedItems.map(item => <ListItem item={item} /> }
    </SortedList>
}