NEW Astro Component Starter

Nearly any agency or freelancer holds the same set of values. You want a tech stack you enjoy that gives your end users great performance and your clients scoped customization. Well, wouldn't it be great if you could give your clients full customization to build pages, adjust components, and make updates without sacrificing performance or the client experience? Today, I'm excited to partner with Cloud Canon to walk through their brand new Astro component starter that just launched yesterday. You ready? Let's go. Hey, what's up? My name is Chris and welcome to Coding in Public. Okay, what can you do with the component starter? What makes it so special? Well, let's look at both the dev experience and the experience for your clients. First, here's what you can do as a dev. The component starter is built entirely with Astro components in your own Git repository. That means you always own the final code and have complete control as a developer. The design, the components, the editing experience, everything. Next, let's talk about the experience for your clients. Importantly, because it's built with Cloud Canon, your customers also get user-friendly interfaces with an interactive, intuitive editing experience. They can change copy, add or remove components, build pages, and more in a UI that looks like their actual site. You want to code in Astro? Your clients want a great editing experience. The Astro component starter says, why not both? Now, here's the cool part. Because you have total control as a dev, you can build custom components and make granular choices about what your clients can change on the site. Yes, that means they're not installing a bunch of random plugins or bugging you for access to edit a page hero. Enough freedom for editors to move fast, enough structure for you to sleep at night. Now, I should mention that Cloud Cannon, the editing experience, is a paid tool, and it really only makes sense for agencies or devs supporting multiple non-technical clients. I figured I'd mention that from the start, but if you have multiple paying clients, the DX you'll get from Cloud Cannon is totally worth it in my opinion. All right, so how do you use the component starter as a dev? Let's start with installation. I've left the actual GitHub repo down below, but you'll just simply come down here and copy this quick script right here to get started. So, I'm going to paste this. This will install everything I need. And right now, I mean, you can change that to something other than my site name, but we're going to say that that's okay. And it should get everything installed. It'll cd into that and then make sure that we get up and running. Once you install, you'll see some very lean components. And this is intentional. Because it's Astro, you get zero JavaScript by default, which means one thing, speed. Cloud Canon builds static sites that always feel instantaneous to the end user. All right, next let's take a look at the structure. So, how are components actually put together? Well, each component is simply semantic HTML, lean CSS, and sometimes a little bit of client side JavaScript depending on the component. So, it's accessible and fast by default. Components ship with three files. the component file, that's the one built in Astro, the cloud canon inputs to define component inputs, and then the cloud canon structure file to define the default values. Now, of course, websites are made of pages. So, for the page design, pages are designed as markdown files in the src content pages directory. Each page has a page sections array in its front matter that lists which components to render alongside with their props. Now, this is the same structure Cloud Canadian reads and writes to when editors add, remove, or reorder sections visually. You can rearrange components, change their props, or even add or remove components from a page. Next, let's talk about theming. Obviously, the design is very basic out of the box, but that's intentional. The whole component starter adapts to your designs without fighting you. It's easy to customize and hard to break. To start with, you can edit the theme files to change the global theme. All components use the same tokens so everything stays in sync. To update fonts for your site, view the styles directory and find the fonts file here and then make some updates. So here, let's use a custom font which will then show live when I save. Of course, you can also adjust other design tokens like spacing or different radiuses, the animations, and more. Now, the components use these theme and variable files to style their contents. Some components like the card component receive color scheme or background color props, but every component is yours. You can adjust the HTML, the CSS, the JavaScript. They all live in that single Astro file. Obviously, the whole systems thinking means that you'll want to observe global themes and variables when customizing their default components to keep everything consistent. Now, obviously, there's a lot more we can do in code, but let's get this up on Cloud CN to view the editing experience for your clients. Now, one of the really nice things about the Astro component starter is it comes with full documentation to understand how the entire thing works. So, not only do you get a getting started section that gives you a full tour of the project, teaches you a lot of the stuff I've already shown you like how to edit the page or customize your brand or how to interact with page sections, but it also includes step-by-step directions for actually connecting your site to Cloudkinnon here under edit a page. Now, again, Cloud Canon works by ingesting everything in a Git repository. So, we need to push all this up to GitHub and that way Cloud Canon can adjust it. I should mention you can store your code anywhere that Cloud Cannon supports, but GitHub is obviously one of those. So, I'm going to create a new Git repository. We'll just call it Astro Component starter sample. And I guess I'll just keep this private. That's fine. And let's create the repository. Now, I've got this local as well. And I've already committed all that locally. So, let me just grab this script. We'll jump over this way and paste this in. And that should push it all up. So, let me come back over here and refresh. And we're good. All right. So, everything's in GitHub. Now it's time to get this into Cloud Cannon. Next, I need to go to cloudcanon.com and log in. If you don't have account, you can create account here. I'll just log in with GitHub. And you might need to authorize CloudCon. Now, when you first jump into Cloud Canyon, you'll need to create an organization. You can call this whatever you want. I'll just do CIP for coding and public. Now, if you don't have a site, you can play around with the demo site, but we've got one. So, I'm going to jump over here, and I'll use a GitHub repository. And let's authorize this. Once you've authorized it, you can simply search for your repository like this. And I'm just going to use the main branch. That should work for me. And I'll create this site and then start syncing. And just like that, Cloud Canon will start to build the site. And when it's done building the site, we'll have a full interactive experience. And it goes both ways. So we can edit something in Cloud Canon and then pull that down to the local repo or vice versa. All right. So everything looks like this right now. You can go ahead and follow the step if you want to and it like walks you through everything. And you can even start a tour. And it's really nice that they guide you through the whole thing. But once you're ready, you can actually jump straight into your pages. And let's like look at this blog right here. And what you'll notice is that this is a very common editing experience because it looks exactly like what your users are going to see. So I can come over here. We can change this and say like uh hi or something. And it just changes the text. Now all of these sections are editable as well. In fact, you can see them over this way. I can click inside of here and I can change it in the sidebar as well. But this nice visual editor is really nice to see what that looks like. Now, we haven't saved it yet. So, nothing will propagate to the dev uh server and nothing will save and kind of go live. So, you have to actually save it, but once you do, then this will basically save this and push this up as a separate commit. Which means in my dev environment, I can pull this down and see the changes live. Obviously, it needs to build first. So, it will do that locally, telling the user, hey, this is building. So, you may not see it live right away in your actual production site, but as soon as the build is done, then you will. Now, let's actually look at a page that we have been looking at. And I can just navigate this just like we'd expect. Remember I switched these two. I added my right here. So I can come back to building Astro site or something like that. I forget what that actually said. But now I'll hit command and S and I can just save it right away. Once again the same exact process happens. All right. Now through the magic of editing that is all done. If I come over here and I refresh, you'll notice we've got two new commits that have come in. And so I'm now at three commits and both of those were done by Cloud Cannon. You see those right there. Now, of course, that also means I can look at my local repository and pull that down as well. So, let's jump over here. I'm going to do get pull, and you'll see I pulled in all of those changes. So, in case you were curious about those, I'll jump inside here. And you should see simple, let's see, Astro, where was that thing at? There we go. Astro site right there. We also had the blog that we changed as well. And now it says hi somewhere. Yeah, right there. The subtext just says hi. So, you can see how this nice sync goes both ways. Now, obviously, we just changed some basic text on the site. So, let me come back over here and reload it so that we get the latest version. But you can also do additional items. Now, if I come in here and I try to edit this right here, you'll notice that I have a few things available to me. I can change where the link goes. I can change the text. I can also change the icon if I want to have an icon here. I could drop an icon in there. I can change the icon before or after. And then I can change the variant secondary. We can choose tertiary. But notice that I've got a limited set of options. And I'll show you later how to set that up as a developer. But it's nice that your users can't just break the whole design flow. You get them customized options. They get to choose between them. And then of course it'll it should match whatever kind of design system you set up for them. I can also clear this, get rid of that. We can go back to the medium I think it was. And I don't remember what the other option was. Uh let's see. Variant maybe was primary. Okay. So I think that's what we had before. So if I close this down and I save this, I think maybe I changed something else, but we can edit that, save it, and everything should be set to go. Now, in addition to changing individual components, you can also add new sections. So here, these are ones that have been defined by the developer where I can set in like a feature slider, for instance. I'll click select, and inside here, we've got different color options, different base options, but that was added at the very bottom of the page right down here. So this is for the feature slider itself, but then I can add items inside of the slider. There's a bunch of different options I can add. It's a slider. So, I've got different options here for going forwards and backwards depending on which items I want. So, for instance, I can come over here and actually upload assets, changing the alt text, I can change the slide title, all this. And again, as a dev, you control exactly what your users can do. I can't stress the benefit of this looking exactly like your actual users site looks like because they can very easily edit this. You don't have to explain how to do this or send them videos. They can basically click around. anything that they can change, it's very easy to change it by clicking this edit button and then making all the different changes they may want to do. It's nice that we've got all these customuilt components by Cloud Canon to use anywhere in our site. But of course, you'll probably also want to create your own custom components. So, let's look at that now. The dev experience and then how to get that up to production. Now, I really love the DX of this. There's actually a component builder directly in the docs that you download when you download the Astro component starter. So here you can see that we can set up a custom section that we can use in local mode and then also when we push it up to cloud cannon. So let's go ahead and select this. I'm going to name it something like special uh CTA. We're going to keep this real ugly, but I'll just show you exactly what you do. So you can add different sections. And here I'm going to add existing things. So like we could have a heading and then let's also have some buttons and we'll have a button group. And inside the button group we will have a button. Now all this looks like is this my heading and a button. So super ugly. That's totally fine. Over here, we'll say something like click uh link. All right. And then the heading itself as the default value, it'll say special CTA. Now, of course, one of the benefits of Cloud Canon is not only do you get control over the theming and all the customization, but you also decide what your clients can actually edit. That means you say, "Hey, you can touch this part of the component, but you can't touch this part." So, let's look at that customization now. Now, you may have noticed that as I click on each of these individual items, I get this kind of button props section. Notice this one right here is exposed. This means the user can actually adjust this. The client can adjust this. Now notice I haven't allowed them to change the link. I should probably do that as well. And right now the link is fine. Proposed value. That's just fine. Okay. So let's come back over here. Click link. It should take you to this default one which is I guess nothing right now. Now I could also allow them to add in an icon, an icon position. I could hide the text. Give them different variants sizes. But right now, none of these are exposed, which means when it comes to editing it, they won't be able to do that. Now, the heading, same kind of thing. I've just exposed the actual text. It's called text. And you can see that the default value is special CTA. I have not exposed what level heading I want here. Now, I could do that, but that requires my user to understand, the client to actually understand how headings work in HTML. So, maybe I don't want to do that. Probably the same with the font size, the alignment, all this kind of stuff. But you can position each of these things as you want. Now, we previewed it already, but here's the cool part. It gives you all the code. Now, you can, of course, write this yourself. There's kind of a way that these Astro uh Cloud Cannon components work because they're ingested and dynamically as you add new ones. So, there's some oddities to them if you're not used to writing them, but you can see that it's just added everything I need, including the existing components. Of course, you can write your own custom components from scratch. We're creating a custom component comprised of other components, but hopefully the example is clear enough. Now again, there were three files. The Astro file, you have the inputs file. This is everything we just showed. And notice it contains all the items that are exposed to the end user. Then finally, we have a structure value. This actually shows where the component lives, the preview values that we want, the preview values, and even what it will look like in the picker preview. Now, you can copy these one at a time, which I'll probably do, or you can export the component. When you do that, you pick a section that it's in. So, let's say it's going to be in CTAs and uh we'll just leave it at my component and download zip. So, you're going to set it in CTA's my component. Now, we can actually manually create this folder as well. So, that's what I'll do. So, let me jump over here and I'm going to add this here. We're going to say here we'll say my component and then I can just copy each of these individually. So, I'm going to copy this Astro file and I'll just copy these over one at a time. All right. So, now that we've got that code ready, let's get it up so our users can use that. All right. I have copied them all in here. We can come over here to get and we'll just say like add custom uh CTA. All right, let's add all these. Commit this and then sync the changes. Now, here's the cool thing. As your client is looking at the site, they'll notice that there's a build in progress. So, this tells it that you push something up and they can refresh to get the latest version. And assuming that you've finished building, it should be ready to go. Now, if we're keeping track, I should be able to come over here to the page section, click add section, and look at this. We got my component right here. So click select and we'll come down here and there it is just as ugly as we thought it would be. We've got the text right here, a label for the component which I suppose we didn't add. So we could do that if we wanted to. There's a link right here and right now it doesn't click anywhere. So I can actually add the link. I can come in here and select UR URL link to a specific page, link to an existing file, an email address number, any of the things you typically do with a link. I can also change this text like hi uh click me or something. But notice that I cannot change anything else that I didn't allow the user to change. And this is one of the things I love about Cloud Canon is my users have to stay within the design system that we've created. Now, the real beauty here is not only can I do this with custom components, but we can also change existing components to limit which options a user can see. The Astro component starter is for agencies and freelancers supporting multiple non-technical clients. It's built for control and customization. You get all the performance, the DX, and dare I say the joy of building with Astro while owning your whole dev stack. And your clients get the best possible editing experience. So, win-win. Try it out using the link below so they know that I sent you. I can't wait to see what you build. And thanks again for watching. I'll catch you in the next one. Happy coding.