Transcription: OpenAgents Episode 131 - v3 Landing Page

Source: https://x.com/OpenAgentsInc/status/1846759852845990003 Wiki source: https://raw.githubusercontent.com/wiki/OpenAgentsInc/openagents/Video-Series.md Media title: OpenAgents - Episode 131: v3 Landing Page We build a simple 'coming soon' landing... Upload date: 20241017 Transcription model: gpt-4o-mini-transcribe Generated at: 2026-06-01T16:15:20Z

Machine-generated transcript. Review speaker labels and wording before using this as quote-grade source material.

[00:00] Speaker: Okay, we have a fresh Laravel application in the main branch of the OpenAgents repo. Check it out. Very nice. You heard it here first. We've coined this new stack term called VanillaVell, Laravel with vanilla HTML, CSS, and JavaScript, HTML via Blade still, of course. Okay, let's try it. So I want a landing page. Here's our gorgeous landing page right now at openagents.test. We're going to model it off of this old OpenAgents landing page, which is on our React site v2. And I want a landing page with just HTML, CSS, and JavaScript, something we can put up at openagents.com, which right now just has a glorified placeholder, but we want it to be using our new OpenPress style components. Okay, so I'm going to be building this in the OpenAgents code base, and I'm going to be kind of building with an eye toward what are the things that I would have wanted OpenPress to give me. So one of the things I want OpenPress to give me, because the idea is here, we want to build OpenAgents in a way that other people will be building their OpenPress sites. Now, they're not going to be in the code like I am, but necessarily, they might be in the code. But it's like, what do we want to come with? Well, one thing we want are blocks, or what Elementor calls widgets. So Elementor's long list of widgets, for example, Elementor widgets. Let's see, where are their widgets? Tell me about your widgets. Where's their widgets? They got a widget list somewhere. Yeah, so, you know, intersection, heading, image, text editor, video. Like, you can build a website out of these widgets. We're going to call them blocks. But I basically want components that work. Lots of different component libraries floating around. Shad UI is a great one. I've enjoyed kind of using this as well as also pulling some of this over into Laravel, also open source. There's some really good Laravel component libraries that are not open source. We're not going to use their code. We might look at it for inspiration, but we want an open source thing that people can, like, use and adapt and remix. And so, let's begin. Let's do a new branch called landing. And first, let's just, like, take a look at what we have here. So, I'm just so thrilled that we have no package.json here. Interestingly, it gave us a tailwind.config file. How do we use a tailwind.config file if we don't have a package.json or a build process? And PostCSS, how is that supposed to work? I don't have autoprefixer installed. There's no node modules. That just seems like an oversight. Easily remedied. Boom! Is there anything else that we don't need here? I don't even know what Git attributes does. The rest of this looks fine. I don't think we need this Laravel readme anymore. Goodbye. Ooh, so let's do this. Delete junk. I want to start from, like, a complete scratch. This stuff, I do want to use SQLite in-memory database. Okay. So we don't overwrite our main database. PHP units SQLite in-memory. And then, what else? Let's just take a look here. We got app HTTP controllers. Auth. That's okay. We'll keep the Blade stuff. We did the Blade API only stuff. Providers. App service provider. App. Front-end URL. That's interesting. Let's take a little peek around. Bootstrap. Providers. Config. Okay. Empty views folder. Nice. Should we do a test? That would be kind of obnoxious to do a test at this point, right? Let's just do it, just to demonstrate that we can. So we're going to, um... Maybe we'll copy this. No, we don't need to copy. We just need to delete that. We're going to rename this to homepage test. Homepage loads homepage view. Okay? Assert that view is homepage. Okay. Hey, it fails. How does it... Why does it fail? The response is not a view. Routes web. Return view homepage. I'm just going to be a little extreme here and like, Oh, let me run my test again. View homepage is not found. How do I fix that? Resources views. Homepage.blade.php. Hello. Okay. Homepage loads homepage view. Do all of my tests pass? All of my tests pass. Okay, let's check out our homepage. Hello. Fuck yes. Let's just build this out. We're going to use HTML, CSS, and JavaScript. It's gonna go... Have you heard of Grug mode? The Grug brand? We're just gonna be grug. We're gonna be grug. Complexity very bad. This is from the HTML crazed Montana man. Very good. Pretend to be dumb. What do we do? Uh, what do I need? And what does it have to do? It has to say open agents. Okay. Well, it has to be a black background because it's melting my eyeballs. Uh, what should I call this? Well, I know that I need body. And I know that I need head. And I know that I need HTML. Okay. And then for setting the styles, let's do a Pull in index.css. Link route stylesheet href equals asset CSS slash index.css. Now, I don't know what asset does, but that seems cool. Does that mean I put my CSS in here? I don't know. Let's try it. Background color black. Text white. Nope. Color white. That did nothing. Why did that do nothing? Does this have to go inside of public? Yeah, apparently. All right, let's consult our reference. So up top left, I think that's a SVG. Font is JetBrains mono. We're gonna stick with JetBrains mono. And what I'm gonna do for that is I think I'm gonna pull over from... Where did I have it? Okay, the OpenAgents.com repo has this. So what I'm gonna do is pull this into here. Cool. I don't know what happened there. So I want the stylesheet for that. Thank you. And then hopefully I can... Font family, JetBrains mono. Yeah. Okay, we got font. Let's call this JetBrains mono. Should I make a nav bar? Hero component? Button? Okay, so one thing that pisses me off, I see a bunch of sites where like you can do this scroll thing. I hate that. I'm so used to tailwind now. Container is fixed. Doesn't scroll. Is that it? Seems a little excessive, but good. It doesn't scroll. I like that. I like that. And I also don't want you to click on that. Call this H1. Class equals body. No, class equals hero. And for H1... Cool. It just feels more solid. Like you can't just like scroll it or move it around. Okay. So now I think I want to do a button. I was trying to think if there'd be something reusable about this header, but maybe not. It's just text with font. But something that will definitely be reusable is button. So let's think about where we want a button to go. This is something that I'm going to want something like a ShadUI button. You know how you can just kind of pull a ShadUI button into any project with some default styles. I have in the past created kind of Laravel blade, sometimes tailwind versions of these. What I think I may do is start involving OpenAgents here, but let me, like for the auto coding. Let's think where we want to put this. I think we're going to want this to be a component in our components folder. So let's do this. PHP artisan make, is it called make component button? Cool. So this makes a button class and then optionally a view. You can also kind of hard code in the blade here, which I see a few other libraries like Mary UI does that, I guess. So if you're pulling stuff in from somewhere else, you just have it in one folder. So I think we'll do that. Maybe. Okay, so let's go craft a prompt to OpenAgents. I want OpenAgents to grab the relevant code from the ShadUI button here. I like these CSS variables, although interestingly, because it's all tailwindified. Let's just see if we can handle figuring out how to convert this into non-tailwind. Okay, so what I'm going to do is I'm going to grab the relative path of this, and then let's craft a note to OpenAgents. We'll say, look at ShadCNUI UI repo, main branch path boom. We want to convert that to a Laravel component, a Laravel blade component. Tailwind would be nice because it would put everything on the component, but we're not in pain really yet. So we're going to stick to our rule of sticking with vanilla CSS until we're like in pain. We want to convert this to a Laravel blade component with tailwind classes converted to vanilla CSS while still preserving the CSS variables, which we'll define separately. Start.

[19:59] Speaker: By editing these files. For now, I'm just gonna give it this, this, this, with the relevant button code. Also, add variables to index based on the Tailwind zinc color scheme, dark mode. Well, let's just see what it does with this. Now, this is something that would take me, I don't know, 15 plus minutes to do by myself, probably, but I think OpenAgents will be able to do it way faster. So, OpenAgents, Inc., OpenAgents, we're on the Lander branch, landing. Make sure I've pushed all the changes up, and let's just see what happens. And then I may want to give it an example component to look at from MaryUI, just so I can show it the proper syntax of... These are Livewire components. I may need to say, look at Boom. Okay, let's see what that did. Whoa. Let's do this. Edit Boom to use a demo button, a few demo buttons. Also, make it use proper HTML5 syntax for setting up the whole page. Let's see what it did. Well, it messed up my whole background. You overwrote my existing index.css code. Put this back. Well, we've got different buttons. That's cool. Now, I think I have somewhere over here. Yeah, these are the actual variables that I want to use. So, I don't need this root dark stuff. All right, let's wait for this to finish first. Hey-oh. That doesn't look good. Okay, so we've got some tweaking to do, but it looks overall... We've got something there. All right, so I'm going to change this dark to this. And we'll keep the light mode there. I see it took some creative liberties there. That's not what the chat looks like. Okay, so I'm now feeling pain. What did we say? We said that... Where were we? So, we would use Tailwind when vanilla CSS hurts. This is hurting me looking at this. I just, like... I've got to have all this for all... Ugh. I want this to be inline. Okay, Tailwind, Wothan, you win. Okay, we're pulling in Tailwind. Now, we're going to do it our way. We're just going to pull in the CSS file. Okay, so we'll call this whatever, some tweaks. Yuck. Okay, so let's go to the Tailwind CDN. And here's what we're going to do. I want the CDN. I want to pull in this stuff. Hey, whoa. As of Tailwind CSS, the Tailwind line clamp is in the main thing, so remove that. And here's what else I'm going to do. I'm going to pull this in, rebase. Okay. Oh, it wants me to use Init and Prefixer. No, I don't want to. I don't want to. No build process. Okay, we already did all that. So it should have deleted components. Good, it did. And then take a look in here. What do we got? It's all right. Vite. Who the fuck is putting Vite? Who the fuck is putting Vite? Don't touch that file. Okay. I don't know why I'm needing to delete that by myself. And now, where did our styles go? We are not using Vite. We are using the CDN. Look at boom. My variables seem not to be being applied. Scrape this. Figure it out. Did not pull the latest version of my homepage. It was going to overwrite based on the previous version. Let's see what it does. Cool. Thanks. Now move stuff out of that file into other files. Use this and move those other definitions to other subfiles so we don't clutter that layout. Then I should be able to throw on a font JetBrainsMono. Okay. Looking pretty clean. Thanks. Now extract all the head body setup stuff into a separate layout file and make the homepage just wrapped in X layout tags. Then we will apply our font. Now.

[39:59] Speaker: In Tailwind config, why is my Finder thing not looking in public? It's kind of weird. Edit boom to set font mono as extending default font mono, but prioritizing JetBrains mono. Uh-oh. It realized its mistake. Wow. I realized now that we're using the Tailwind CSS Play CDN, which doesn't support importing modules. Watching the agent like recover from its mistakes is like pretty cool. I do want to apply it globally. Thank you very much. Yes. Now we got some buttons. One thing I noticed from the Shad UI components, for some reason they don't properly apply border color sometimes, which we can fix ourselves. Border input. No, it should be border border. Right? Where is my... That's weird. My config is missing border. Okay, so that pulled... Oh, there it is. Nice. Now make the homepage reflect all the CSS in here using Tailwind classes and delete index.css. I love deleting files. There we go. Okay, we got buttons. Cool. All right, now let's move our little button showcase to a different page. Thanks, now move all those buttons, except for to a new component library page. So this passes. Keep one large outline button there and make it say sign up. Okay, I kind of want to put this inside of a card. Let's do this. Let's do this. Look at button layout homepage, button layout homepage, and then card. Write a app view components card PHP modeled on button using any with all the functionality, styles, classes from the Shad version. Then edit homepage to put all that content inside a card. Let's see what it does. Out of curiosity, what is this? Yeah, that's a card. Well, we got to update our readme. We're no longer pure CSS. Laravel, Tailwind. We can't really call it Vanilla Vell anymore. Maybe someone will make Vanilla Vell a thing. Laravel, Tailwind. No build. JS. Okay, that's clear. All right, let's see how my...

[59:59] Speaker: my card went. Okay, again, they forgot the border border here. Okay, I'm gonna cheat a little bit and figure out why. Okay, I'll right click that. Where do I have that? The Apple search is just, like, not very good. Just code. Alright, I want to see what this actually uses. In homepage, make sure our, make the styles look like this. You should be able to just edit homepage or edit card too if needed. Uh-oh. Well, perfect. Except, again, the border. Nice. Look at boom. We need that to be a showcase of the variations of buttons and cards. Add headings and demo cards there. Drop BG black. Can't scroll. On the layout, so add a new component called logo with this in it and put it in top left fixed screen in layout. And then next I'll have it fix the scrolling. In layout, I have it fixed, but I want things to be scrolling if they overflow. I just want the parent container fixed to screen. Help. So, I don't know if I want to use this screenshot or not. This is our previous version. Love, love, love this HUD style thing, but we're gonna go, I think, to a more conventional UI. Well, let's see if that fixed the scrolling there. Yeah. Hover over this card to see an interactive effect. I don't see any interactive effect. Okay, we pulled over button and we pulled over card. What else do I want this to do? Well, I kind of soon want to put blog posts here. Hmm. We may reuse some of this stuff. Let me try something. Right now I have BG black here. Maybe I don't want that. Nah, I do. Should I put something cool in the background? Edit the homepage to put a cool background behind everything. Maybe like a white grid with opacity kind of faded out. Something cool. Animation or something reminiscent of AI agents. Use Tailwind classes if you can or custom CSS if needed. I don't know. Just like, do something cool. I could put a 3.js canvas behind there. I could put a 3.js canvas behind there. Let's see what this did. Thanks, no, I don't like the pulse. Do something else. Should we dust off? This is a fun little experiment. Dust off that grid. Better, but make it black and white. Make the grid stand out more. And why does it seem like it's so just probably grid? And I might wanna make the logo stuff larger. This is specific to OpenAgents. Heyo! That's pretty cool. And let's make our logo bigger. What the hell does size 4 do? Okay, I gotta say that I'm happy with that. I may actually even remove that logo for now. Well, should we ship it? Not bad for one episode. Okay, so to recap, we have a beautiful little landing page here. We have slightly

[01:19:59] Speaker: revised our stack. We are ditching the vision of VanillaVell. We added Tailwind because looking at all that vanilla CSS was just hurting my head. We're pulling over stuff from Shad. It just makes sense to keep Tailwind stuff there. So we got Laravel, we got Tailwind, we got no build JS. We're gonna resist tooth and nail adding package.json. See how much we can do with just a little inline stuff. You know, put the CSS, put the CSS, put the JS, put the JS. And then we've got two components that we pulled over from ShadUI in our components folder. We got button and we got card. And then we got that there with a cool little background. Good start. I'm gonna ship this live to openagents.com, merge the PR, and then what should we do next? See you soon.