GitHub Open Source Friday, 19 Oct 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Fast editing for your Next.js site - TinaCMS - Open Source Friday

Description

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

@bdougie interviews the TinaCMS to team to learn how to retain the benefits of a Git workflow for your content and empower all teammates to update your website through a user-friendly interface.

https://tina.io/

0:00 - Start
0:25 - What the Jamstack is missing
2:28 - DEMO - Exploring Tina in the browser
4:26 - Tina behind the scenes
8:10 - Set up Tina in an existing Next.js site
17:29 - New features coming in Tina
21:21 - Working in open source

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

But james I want to talk about tina. Can you give us a brief introduction of what tina cms is.

B

Yeah, so tina is basically a visual editing experience for content, that's stored in git, fire, markdown or json or mdx, which is coming soon, so nice you'll be able to do cool component stuff. um Basically, the idea here is, we felt the jam stack was missing. An important feature which you see in wordpress or or you know in traditional cms's, are kind of like a database with a form, but with like wordpress.

B

You could have that sort of visual editing experience where you could edit and you could see it before you published it well, we decided that we needed the visual editing experience in the jam stack on a live site that you could edit change. Add content, remove content, move your content around and actually get that visual feedback immediately, um so yeah, that's kind of the idea behind behind tina and how it works. It's all in get backs and it's all marked down, slash json.

B

So it's super lightweight and and allows content, writers and editors to have a great experience. Okay,.

A

Excellent and the the so I can connect this to my next js site um yeah. What are do I have to connect some hooks or something like that to point the contact to.

B

Yeah, so the way that that works is um actually, if you scroll down a bit further right here, oh just there, the command line quick starts. So essentially you can just do npx at tina, cms, cli init and will bootstrap tina into your application and we'll override some things like your app.js and we'll add our tina folder things like that to get you up and running and then at that point basically, you create a schema file in that schema.

B

File plus graphql tells us exactly what you want to do with your content, um but with our command quickline, you can pretty much add it to your site in in basically in minutes versus having to rework a whole site. If it's already marked down it's pretty easy to to work with. Okay.

A

So cool awesome. Well I mean speaking of working with it, you had came ready to prepare like prepared with a demo, so I'd love to switch to your screen and uh absolutely.

B

Yeah, absolutely there we go all right, you guys can see my screen, um I'm actually currently logged in as an editor. So you can see this sort of sidebar here, which we can kind of push out a little bit to get a bit more for working experience and essentially yeah. We can start editing things, so we can say, welcome github followers and hit save, and this will save to the markdown file immediately and if this was fully deployed. What would happen is you would kick off a new build and that would be delivered to your.

B

You know the next person that visits the site. um Along with that you can do things. If we sort of go out of this screen, you can rearrange your content. So let's, for example, say that we don't want the hero here, but we'd like these features to be on top. We can just drag and drop and we'll immediately do that for you. So now your content is rearranged.

A

Is this creating a commit in the back end.

B

Yeah, so once you hit the save button, um once it's deployed, we actually just commit it right to your github account. Okay, um when you do it locally. Obviously we just sort of change the file system, for you got it so yeah, so you can sort of do, rearrange and hit, save and we'll know what order this should be in. uh You can add things, for example, if we wanted a testimonial, you could add that to your screen, it's there. We definitely don't want it at the top.

B

We want it at the bottom easily editable and you can also do things like change a theme. Maybe you don't like blue, maybe you're more of a purple fan hit, save and behind the scenes, we're doing some stuff with tailwinds um for this demo, and this demo is available as a template. So if you never checked tina out before, if you go to tina cms's github, there's a template called tinacloud starter that'll. Allow you to do the same things that you're seeing on screen.

B

um What I'd really like to do is probably show how this kind of works behind the scenes yeah so right now, you're seeing it from the perspective of hey, I'm just a content writer. Let me just move stuff around.

B

Oh, I really like this color blah blah blah versus what's actually happening as a developer. So let's open visual studio code and let me just bump up the size a bit more. That should be pretty good.

B

So behind the scenes we have. This thing called a schema file and this schema file is in this dot tina. So when you bootstrap the application, we make the tina file for you and we'll give you like a basic schema. This is quite a complex schema has a lot in it, um but if we kind of scroll down and maybe find something- that's a bit more normal here we go so here we have like a author, so we've set a schema file here.

B

That says these are our authors, here's the name for the graphql queries and here's where you can actually find the content.

B

So if you look in my project here, if I kind of close everything we have this content here, authors and that's where my two authors are found and that's where we'll be looking for these authors and inside of that we have a name and an avatar.

B

So if I click in here in the markdown file, you can see we have an avatar and the name napoleon and what's happening behind the scenes is when you generate these this this type, we essentially have like a graphql layer that allows us to look at what's in your schema file and match that to make the sidebar the way that it is so when tina cms first began, you had to basically manually make every single form.

B

So you had to tell us what pieces you were allowed to edit what you weren't allowed to edit, etc, etc. So we've actually with our cloud, offering now made this much faster. So we have this graphql layer. You can just tell us the types that we're expecting and the names that you want to give it and that will show up for the user and then what's happening behind that so once you've built this schema file and you're you're you're happy with that.

B

What we have is this graphql layer and we're using getstatic props and get static paths if needed, and what we're doing is essentially making these queries that you have to create. Currently, at the moment, you have to create them yourself.

B

We offer a way to do that right in the browser, if you go to localhost 4001, and that will give you the option to essentially play around with your queries and get the data that you want.

B

So in this example, what we're getting is the title we're getting the author we're also getting the date hero image and then the body which is obviously the content body, and this allows us to essentially edit this and what you'll see is all we do is return the props and then you can use that props data to to essentially fill in your form. So in this example, if I go into this post and we go down here- you'll see that there's like data.title or data.name avatar and then formatteddate.

B

All those things are coming from that static, props and being pushed into the to the site. So you get the speed and reliability of static generation. So you're not missing out on any of that, but you still get the real-time editing experience for your users.

A

Yeah, that's that's pretty crafty uh and I'm curious uh like folks approaching this. If you already have a next.js app, let's, let's say you already have a marketing site up and running it's using xjs. um Can you embed tina after you've already have a bunch of stuff on the page.

B

uh Yeah absolutely so, if you like, for example, let's see if we can do some off uh brand here, so, let's see if I've got anything, I can use in the demos to give you an example. Okay, so we have this tina quick start, which is probably very small right now. But let me just.

B

Open this in code, so this is a nexus site that has doesn't have tina on it. This is just the bog standard. Whatever comes from um nextgs uh quick starts, so this hat doesn't have anything on it. But if you wanted to add tea, let's say you only wanted to add tina to a specific part of your website, so you don't have to put it everywhere. You could just put it in one place.

B

So in this example, if we did like mpx at tina, cms cli- and we make this latest so we can get the latest and greatest what's going to happen, is we're going to install all the dependencies that you need for tina, so everything that you need the tina cms packages, the tina cli, all of that's going to be installed for you, then we're also going to create a simple schema file that will allow you to extend it.

B

However, you want so we do like a really basic schema that allows you to understand how the schema works. Then, once that's done, we also wrap your app.js in tina, so it's available on whatever page you want to put it on and then it's up to you to implement what pages use tina. So if you don't use, if you use get started props and you decide to just grab data from a file system or from a different cms, that's perfectly fine, but you can denote where you use it on your application.

B

What pages can and can't be edited where you can add new documents or not, so it can be really helpful if, for example, maybe your marketing site doesn't change very often and it's not worth it on the front page, but you write a ton of blog posts, yeah.

A

B

You don't want to have to write it in markdown, because maybe you don't understand what markdown is yes yeah. We.

A

Can give you that flexibility, yeah and one of the the thoughts that come in mind to mind is like the testimonials things that you had talked about: yep yeah. Those are something that perhaps maybe your team frequently changes. um Yeah.

B

You want to keep them.

A

Fresh of, like the last three tweets, um not even the last three tweets but like the last three, you know notable people that want to provide some context of your product, um keeping it fresh. Maybe it's! You can always.

B

A

Get updated and you don't need to kick off of release and a pull request, and all this other um normal development best practices right just to change a little bit of copy.

B

Yeah and that, and that's kind of one of the things that I feel the jam stack is struggling with right is we want to push more people into the like ssg or some variant of that, but the problem is: is that if you're a content writer in some cases, you actually have to go to a developer and be like? I would like x and the developers like I'll update that copy for you or yep just push a pr and we'll deal with it later like there's this whole release cycle that is involved versus with tina.

B

You could be like okay as a developer. This is what I've given you. Access to. These are all the things you can, edit here's how it works. Okay, off you go and then, as a developer, you never have to worry again. They can't break anything they're not allowed to touch and they're in charge of their own content and data.

A

Okay, excellent yeah, it looks like this is still uh okay, then.

B

A

Question, uh if you want to over over at the app which you had called out in the uh homepage, yep.

B

So if you, for example, had a really complicated um like this app.js was super complicated, you had a bunch of data in there and you just didn't want to to to have us override it. We can do that. You just click. No and we'll tell you what you need to put in here.

B

So we'll tell you, hey just drop in this hand. Drop in this import and you'll be good to go. What we do do, which is, I think, is really nice- is we'll actually look for any style sheets that you've imported in your app.js and put them back for you. So you won't lose out on styles, which is, you know, can be really painful if you've got a bunch of style sheets.

B

So what's happened here is we've bootstrapped, and now you have this tina editor provider and also this tina cms and now that's wrapped around your components. So when you're in editing mode, we'll use this version and when you're not you'll just serve up regular page props and components, um and when you deploy to the cloud these these things can become important um yeah.

B

Some of this is v1 stuff, like we don't actually use organizations anymore, but if you're using the old version, you can still use them, it's back ported. um So let me show you kind of what happened behind the scenes so that um so what we've done is we've created this new demo file here yeah and in this demo file.

B

This is fully editable with tina and we we've added in a content folder here with a halowell post that gives you access that you can edit any of this as you see fit, and then we've created a really basic schema and when I mean the last one was complicated.

B

This is what a basic schema looks like it's just got a title and then the body and those are two things.

B

So if we launch this site now, what we can do is you'll see that nothing has changed behind the scenes.

B

It will still look just like it did before for the other people. um But if we go to the specific, oh I'm still running that you're still running it somewhere. Let's see here.

A

Is it in your vs code? Did you run it from there.

B

Yeah, I don't there we go. I don't normally do that. I promise there we go all right. uh Cd, yep, it's been a while, since I've live coded uh all right. uh Let's see tina.

B

Quick start and if yeah so now, what we've done also is so that we don't break your application. We've added these three uh tina specific ways to launch our application, um so your old ones are still work the same, and now you can use the tina ones. If you happen to be trying to, you know, integrate it slowly, yeah. So if I type ty uh yarn, tina, dev, we'll spin up a local version of our graphql and we'll start next, yes, at the same time.

B

So now in theory, if I go to localhost, it should no longer be this and it should be something else.

B

Maybe you can do it? My my poor macbook is, you know I take.

A

It you're not using an m1.

B

I am not using it. I wish I was using an m1. I am not using an m1 uh yeah, I'm using a 2019 macbook and one once I have like zoom open and one thing: uh it's that's the end of the road for it, so you can see that nothing has really changed here. All the content still exists from next year. Yeah.

A

B

If you happen to be logged in as a editor, what you'll see is, it will just say, welcome to tina. Let's set up a form, so you couldn't actually edit anything on this page yeah.

A

Because you probably have to go in and do all the edits in your yep, your copy.

B

Yep exactly so, what we can do is go to the site, which is uh slash, demo blog and then uh hello. World, I believe, is the right one. This has changed a few times over the over the period here. So let's see okay, so here is an example, and now, when they click this, we actually give them the ability to edit.

B

So we can just clear everything out and then start typing away, and if you happen to type some stuff in markdown, it will also help um you know it will do markdown stuff for you, um even if you're, in a tech. This is just a plain text: area box, yeah.

A

B

Versus the actual markdown editor that we offer um and then, like I said, mdx is coming so you'll- be able to actually use components on pages so that you know as a developer. You can build a bunch of components and then give it to your content, writers and they can just click a button and it will drop the component in they can edit all the fields hit, save and that component will live on that page, perfect.

A

Yeah, this is extremely powerful too, as well, and I uh we had a question come up which I want to address. uh Yeah looks like uh to a bandits which I hopefully got that right. I was wondering if you could do scheduled or time updates, which I guess I know the answer to that. But I'm curious what your your response is.

B

uh No it's the answer. Yeah I mean in theory it. I suppose you you wouldn't want to is basically the point um from a content, editing experience. You would want to be able to edit the content and then the content goes there.

B

You can do things behind the scenes like on my own personal site, uh which I use tina on when I'm editing when I'm adding new blog posts, I have a check flag that basically marks them as published or not or edited or changed or whatever, and if it's not true, I won't push it out to my like it won't show up in my next chair site and you can't access it anywhere, um but yeah for the most part you will want to just be pushing this out.

B

One thing to note is that branching is not supported right now. Okay,.

A

But we're working questions yeah we're.

B

Working on that right now, so you could technically set the branch. um If I show you in the demo in the app.js, you can actually set the branch that you want as the uh editable branch.

B

So you could set that as your development and then you could approve that afterwards and merge it into main um and then in the future. We're gonna have proper branching support, so you can switch between branches. If you're working on a bunch of content, editing um you'll be able to do that soon, which is an old feature we had. But it's going to be new for tinacloud yeah.

A

Yeah and I my suggestion would have been uh whatever you're deploying to so perhaps you're, using for sale or right.

B

A

Else um you could you could time those deploys on those platforms.

B

A

Also, if you wanted to, if you had, if you once the branch feature is actually shipped, perhaps github actions could actually you could schedule those um to be able to pull it or open the pr or merge that to the main branch.

B

Exactly yep and that and that's basically one of one of the most requested features. Second most requested feature was branching um and that's because yeah, sometimes you don't want to publish directly to your. You know your main um and it's a bit clunky for some people to be like well, I've set the branch in production to be. You know this branch. So when you do an edit, we save it somewhere else, and then you have to go and check for that for sale.

B

Deployment see if it looks exactly what you expected it whatever and then okay yeah. Now we can merge that pr or somebody else has to approve it yeah um so soon branching. That will probably help you with those timed deployments. Yeah.

A

I could also see the for the content creator our editors be able to when branching the ship. uh Perhaps they want to do a b testing. So if you do ship it to multi like multiple branches, one branch, whatever it is, uh keep made pristine but have like a sort of testing branch. um You can leverage things like the ab, the split testing or.

B

A

uh In the wild, but also still have the ability for content editors to edit their stuff directly yep.

B

Exactly exactly and then yeah and basically that's that's. What we want in the future is the ability to do a b testing or to maybe you've got some wild component that you want to try out in mdx that you think would look really cool or is something that you really think is important, and then you ship it and realize that you haven't used it ever yeah um and then you're like oh yeah, we didn't even use it. Those kinds of things are important and yeah, so branching should be coming very soon. I think it's.

B

The next thing after mdx gets fully supported.

A

Excellent and that my follow question, because I wanted to switch gears and chat about the actual open source project side of it yeah, um and so basically, how can I keep up to date with like, what's getting shipped uh like mdx and branching? Do you all do that in the open or a release.

B

Or change log, so tina cms that you're currently on right now everything is done in the open um and we also have somewhere in the open I'll have to let me just switch screens, and we can leave that out. For now. uh We have ability to get involved in the discussions and things like that. um But yeah everything's done uh in this tina cms package that you're in right now, yeah.

A

B

Anything, that's not in the cloud is, is openly sourced and done. Every issue is filed, prs are done in the wild um feel free to look at issues. If you feel like you want to contribute, we have people in our discord, come in and and say, hey like I found this weird bug, here's the pr for it. I've opened it up, for you feel, like you know, go for it and yeah jeff is one of our guys in the open source team.

B

As you can see, he is currently working on mdx improvements, even though I think it's pretty solid. Already I've been secretly playing with it for a while, um but yeah all our pr's. Are there every everything that you could we basically don't hold back unless it's in the cloud which doesn't really affect the editing experience, yeah.

A

B

We do it all in the world in the tiny cms packages like I said, if you have problems jump in the discord, if you want to chat about how you could use it, my calendar is very open.

B

I have people coming in, have some guys from brazil talking next week to see how I can help them so yeah come down, join in and hopefully you'll enjoy it as much as I do.

A

Perfect all right y'all. uh This is our last actual open source friday stream scheduled. So if you have an open source, proj open source project- uh and you want to come on the stream next month- uh we're gonna take a couple weeks off because of github universe, um so join us at get up universe uh in two weeks. uh I think it's gonna be a wednesday and thursday, uh but if you do want to show up on on november, hit me up and we'll get you on the uh the list.

B

A