Tim Tries caisy CMS: the best CMS for agencies?

imagine this you are a developer at an agency or maybe you're a tech lead and every project you do has their own marketing your own design and it looks amazing your own messaging but generally the tech is relatively similar right they all need something like next or next or Astro on the front end flexible stuff and then in the back end you tend to have I would say 95 of cases there's a CMS and maybe a few other bits but let's focus on that CMS for a second because as an agency you have extra needs for that CMS wouldn't it be awesome if there was a CMS for just that built by another agency to sell two agencies well apparently this exists and this is a Tim price video to look into KC CMS [Music] [Applause] thank you before diving into kccms itself let's talk about a few features that I think every agency focused CMS should have first of all is the workspaces project you know teams management you should be able to make different organizations with different groups and different projects and to be able to then give certain clients a seat at that project and allow them to do certain things but then the agency is still in there and is able to help and I think that's a killer feature and then with that comes the fact that if you make a little project that you think this is a great base that you have to be able to clone that project and then constantly clone it adapted beam new project I think that is very cool on top of that localization and translation is always a thing wouldn't be awesome if that was really easy to manage and then on top of that thinking about things like budget you might not always be able to reach out to like external damn systems for media management well then a CMS needs to have excellent media management but also media delivery right being able to crop with height things like that that's a really important one and so I realize lots of these features a lot of CMS have but do they all have them in the same package and are they actually decently priced or does it become outrageous very fast I think probably Casey has this but this is a Tim tries video so we're gonna have to go in and see it because I'm relying on my personal experience of many many years of using a lot of cmss and then just diving in without doing too much research so here we go all right so we're in the KC dashboard and we are starting up by looking at that whole workspace team project group thing and so I'm here at operation turbo and I've already made some stuff so operation turbo is my organization in here and then I have another organization called Tim tries because it's a Sim size video and then in operation turbo I don't have groups but I made two projects and one just came out of like a standard um import that Casey gives you and another one is something I made myself and there's also in this team types organization I have a group called try it and then it's a project inside so there's there's lots of stuff going on here and so you can actually quite easily switch between these like I can go to operation turbo and then go in my blog posts and then here I'm in that project can I also go to another project which is this one or I can switch my organization and go to Tim tries in the group go to the blog so and these can be they're scoped quite differently they're actually separate entities but I'm controlling all of them and then I can give customers a seat in these different places and I think this is actually really something that's awesome for agencies and they do this flawlessly and there's it's so cool so how about we just make a new project and just try it one here and so okay so we have a new empty project a new existing project or yeah new from existing and there's a new one from template so this is that second thing we just we talk about like if you have this blueprint project that works well for you that you always kind of use let's say you make a lot of blogs we make a lot of product websites you might want to have a data models called blueprints in case a um that have stuff for products with older connections or word blogs and authors and media stuff like that you can set that up and then clone from that well in this case let's just go from a new template that they give you and they actually give you a bunch of starters like you can say next go for a Blog Astro go for a Blog and I guess let's just let's have a look at this one and so they actually give you a bunch of code it explains stuff are there still wind next and then you can also just add it to your project so how about we do that foreign we don't need an image for now so I'm just gonna grab this block call it my project and then run and so now it's actually importing everything creating stuff and that's really fast I like this so this was basically a project that they have as template for that you can use and reuse and whatever and so they build a bunch of stuff so how about we click around a bit so let's click on a Blog article here so I guess every CMS should have certain things and do them really well and so I'm looking at okay there's a title a slug which is basically your url url connector there's an author okay so this is actually something that's linked to something else it seems so I can unlink that and then link to an existing document okay so here I can just select another thing another data model and connect that in this is stuff cms's need to have in case it has it I'm not sure we should talk about that much if you know something about CMS as you know this works um I don't think we've set up any sort of translations yet but I do see that here so what I'm imagining is that there will be if you have multilingual there's just going to be multiple languages here and these fields are just going to be there will be multiple fields for the different languages and they can just turn them on and off here so that's actually a really simple way to edit this stuff let's look at some other things like releases oh yeah I like this um you know again this is a Tim price video I have not seen this yet I'm just looking at it now to see if it works and I can imagine if you make a new page and for let's consider the length of this video so I'm not going to do all that but I imagine if you make a page you can create a release and add something to that release oh and then you can just add which ones you want so I want to have home in about link this stuff and then you can say okay in a few days beam you can even select your time so this is cool so what this means is that if one of your clients has like a big release with a campaign you can already make all your stuff and then add that to this release and it all goes live and you can actually say you know what we can publish and unpublish in this release I like this this is good stuff I've always had struggles with this right it's nice to have management like this in your project and then we have assets I already mentioned we need very solid ways of actually managing these assets adding tags to them whatever but then also delivering them through a CDN and then have you know a width and a height and a quality setting stuff like that so this looks like a pretty simple just a list of stuff where you can list it like this and then okay let's let's have a look at what we can do with these things so we have title source description keywords um okay so you can you can do a few things here with extra stuff and I like this dominant color thing and I imagine that that comes in on upload and so you can use that let's say this is a portrait image rather than a landscape but you're showing it as a portrait on the website you can put that color behind or if you do like a custom preloader you can have the color first and then the image comes in good stuff and so there's actually some magic here so we can preview okay that makes sense but there's also an edit all right let's see what can we do with this so there's cropping rotate flip soon I like it when I do this so now it probably crops I would have loved to see like you know I want to focus on the eyes something like that but that might come later and then we have fine tune so we can do oh yeah look at that it's kind of fun not sure how often you would use this but it could be pretty cool when you do stuff like opacity and then we make it like a little bit like this because you could have text over it and then in certain instances you want that for now let's not save this because I don't want to screw up my demo environment here but that's cool good basics in place and then the last thing is playground and we didn't even talk about this but this system has graphql as an API and some people might not like that but a lot of people will and so um you can see that this playground is fully integrated in the KC system here which I like it's cool it's just it fits like in the CMS and we can just grab all the blog posts with the edges and then every for every note I want the ID the slug and the headline let's see how that comes up there we go this is just really solid simple fast just works so I actually really like this system it looks great it's easy to navigate and you know what I really like graphql now you saw my video from last week where I actually went into the best nox3 version of graphql you know what I'll do I'm gonna cut here I'm gonna make a starter for Casey I think that's actually a good move because I'm getting pretty excited by this stuff and so um I'll be back soon and I'll show you the starter that I made so you can actually get started with Casey and if you like next of course um that should be a nice way to get get you started cheers approximately 10 hours later all right different day different outfit same light makes me happy as a YouTuber anyway so I've created this starter and so we're here on GitHub and so there's the next three Casey starter at the dim benics account so you can find this and you can actually give this a go and this is very similar to my previous video that was about next three and like the super clean way to set up graphql and querying it in next three and so if you don't know the ins and outs of this go there but you know there there's like a few additions now so you can actually um look at what you need to do to get it to work with Casey and of course you need the next graphql client and in your environment variables need a KC host and a Casey API key and what's different here from my previous video is that we now have a client specifically to casing and you can set a host and you can send headers because you need to say set the xkc API key header to make things work and after that it's all the same you can query based on graphql files and then just go ahead and I've added a few extra fun bits that I learned about Casey while I was making this starter so I added Tailwind because somehow nowadays when I think about CSS I just use Tailwind then I've also created a custom KC next image provider so you can just use next image and then use the you know the quality settings and the width and height and stuff like that from Gacy and that works pretty well so I thought I'd just give you that little extra thing and then Casey also has Rich Text of course this is a Blog example so we need to somehow get that rich text Json and make it into HTML and they have a package and I've added that in and then for the rest it's very similar and I built this so this is that blog post um project we looked at and so I just made a list of all the blog posts and of course these images are now through the next image provider and the query is query all my blog posts and then when you hit one it actually goes to a page and you can see this image is actually cropped this is the original this comes from the rich text and this is like a hero image that I added myself in the code and so we'll show you the code in a sec but that means like you can actually use next image to Lazy load this stuff and make it super fast and then use the rich text and make it HTML amount and so um it's a very simple overview I'm not intending to build you everything here it's just a simple thing you can use to get started and so um the queries I've been doing in Casey is give me all blog articles so let's execute that one and then you have get all articles but buy Slug and you can add a where Clause when the slug is a certain variable a string that you had so let's go into the code and so the only difference is with the code from my last video is that now we are setting this upright we're adding a Casey client with the API key and the host and so then we have a little configuration just for the specific image provider we'll get there in a sec so what's so cool about this setup is that you can actually make a folder called queries and just add your graphql files in here so to be able to get all the blog articles I do that same query as we just saw in the playground and to get them by slug we do the same query as we again just saw in the playground so let me just show you what happens when you use this setup because it does this amazing gold gen thing that is also typed right so when I now go to my page and I go to the index and what I can do and while you do um you know yarn build or whatever you use pnpm all the fun stuff or when you do Dev actually it creates a graphql folder in the dot next folder where it has all the typings and all the the the stuff that the Casey schema gives you it creates for you and it makes you these lovely functions that you can now use graphql block articles graphql all block articles by slug remember blog articles all blog articles pie slug so we now have functions to query these so when I go to my home page now or my index I can actually say give me the data and then it is graphql block articles I make it computed because I don't want to go over all the edges and whatever that stuff inside my Loop you don't have to do this per se but then what you can do is you just get that data because you fired up this function and then you just Loop and I made like a little card function that shows you all that car this card right which is this card card and so that component is very simple it literally just has the article as the prop and then it has a next link to the article by slug because the article has a slug in this blueprint or data model and then you can just like if there's a header teaser headline render it and then here is that next image thing I'm gonna jump to this in a sec but first I want to show you how to show a page by slug using that query and then we'll talk about next image so we also now have an article and then a slugged a few and then when it's in these brackets it means it's a dynamic URL and so what you can do here is actually grab the slug from the URL and then just say graphql all block articles by Slug and then the slug actually is that slug that you just got from the URL and in that function when you look at that it actually now will fill out this slug as this and now it will do the query with that variable and you get back exactly what you need which is click on this this is now my Slug and this is what is returning which makes this so clean because I just had to do this really simple thing of give me the data and then I still went over it a little bit to clean it up because you get all the edges and things this is just graphql stuff so I made a computed variable to clean it up and then you just have article headline article author name all that stuff you can build whatever you want so I promise you to go to that image and after that let's have a look at that rich text also so here for the image so next image for the people that don't know is really amazing because it basically is an image tag that is enriched by next goodness and we won't go into it too much there's a few videos on my Channel about next image and it just helps you to make images responsive so responsive makes them optimized whatever and so I just said for small screens and up make it 100 wide very simple and so you can actually do with and hide and based on that it might do a crop if you want and so it needs to know a provider because next image worked really good for local images but it could also work for cloudinary binder netley file like they have a lot of providers and I just made my own so it knows how to put width height all the other properties and put that on the URL to be able to work so we can look at providers called Casey this is a very simple one right now so I have a width at a height and a Quality Property you join them by the Ampersand and this is the formatter key value and so now it just makes Casey URLs for us for each image that you need and you can you can kind of figure out how to concatenate all these things yourself if you want to if you have a more complex provider and now you have a KC image provider that just works with next image without any complications and now let's have a look at that rich text thing so there's a rich text renderer component that comes from Casey and then in there you can actually say okay which node do I get well from the text I need the Json object and then there could be connections to other components in here that would then be rendered by this component and there's also this block map and this is where it gets pretty interesting so let's have a look at these overrides here you see the document link that's this one and so here what it can do if it finds let's say an image connection right if the component type name that it connects to is an asset and it there's an actually there's an ID that exists well just make it next image now and so you can override so you can also look for if this is a paragraph or if it's a header let me just do my own HTML based on the data that I get so you can kind of tweak it and so this is what I want to show you because it's such a clean way to use Casey um and I haven't even touched their SDK how about that anyways I'm excited for agencies to use this stuff it's simple it does all the things a CMS needs to do but it has this little extra tweaks that agencies need so this is a Tim price and I'm thoroughly impressed I did not expect it because it was yet another CMS but they found their Niche they went into it and they dealt with it alright there you go yet another 10 tries speak soon cheers