Transcription: OpenAgents Episode 057 - Markdown Blog

Source: https://twitter.com/OpenAgentsInc/status/1748909829500842046 Wiki source: https://raw.githubusercontent.com/wiki/OpenAgentsInc/openagents/Video-Series.md Media title: OpenAgents - Episode 057: Markdown Blog We build a basic blog with Tailwind and Ma... Upload date: 20240121 Transcription model: mlx-whisper/mlx-community/whisper-tiny Generated at: 2026-06-01T20:09:40Z

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

[00:00] Christopher David: Let's continue. Welcome to anyone new yesterday's video was like the most popular ever.

[00:07] Christopher David: So if you're new, just, you know, kind of like lower your expectations a bit.

[00:14] Christopher David: Like to zero would be best because I'm just a huge new.

[00:20] Christopher David: Just kind of a persistent new.

[00:22] Christopher David: All right, so we'll get back on Monday to the next step in the agent flow, which is going to be

[00:29] Christopher David: equipping agents using these new wasm plugins.

[00:35] Christopher David: It's actually be simpler than I thought because the input output associated with each plugin

[00:43] Christopher David: maps pretty perfectly to the input output that we've already defined in our steps model.

[00:51] Christopher David: So we can just have that be a type of step.

[00:57] Christopher David: But for now, I just kind of want to make a little blog.

[01:04] Christopher David: So this isn't nice because we've got this nice kind of cleaner site now.

[01:10] Christopher David: I'm just going to be building in tailwinds.

[01:14] Christopher David: And it's a kind of thing where like there's professional blogs that you could set up and

[01:20] Christopher David: medium and all of that. I just want to say stuff.

[01:25] Christopher David: I gave it talk this morning. I want to put a video and some nice stuff up here.

[01:32] Christopher David: So this is going to be like a nice boring basic video.

[01:39] Christopher David: Basic boring blog. All right.

[01:42] Christopher David: Let's see. So I installed tailwind UI tailwind typography for the pros thing.

[01:56] Christopher David: I put my talk notes over there. Tailwind pros is nice.

[02:03] Christopher David: Just kind of some initial basics.

[02:07] Christopher David: All right. So I want should I t-d-d it?

[02:12] Christopher David: Nah. All right. So I have a blog link in my header.

[02:18] Christopher David: Boyd that.

[02:26] Christopher David: Blog. Go to the blog.

[02:37] Christopher David: Oh, I guess we can make a-

[02:46] Christopher David: So make a blog controller or just do-

[02:52] Christopher David: put it in static controller for now.

[03:06] Christopher David: Okay.

[03:21] Christopher David: Okay. I think I have a layout somewhere.

[03:37] Christopher David: And where am I using that?

[03:43] Christopher David: There.

[03:46] Christopher David: Put that there.

[03:59] Christopher David: And I do want the header.

[04:00] Christopher David: Okay. Why does it look like-

[04:06] Christopher David: Shhh. Like that. What a simple deal.

[04:19] Christopher David: Oh, that's the difference between these.

[04:21] Christopher David: Okay. So I've got too much styling bullshit in the header.

[04:30] Christopher David: Re-fact or so on.

[05:21] Christopher David: Dark BG grade 800.

[05:26] Christopher David: You'll contents.

[05:46] Christopher David: Well, for now I don't really want that to be anything.

[05:49] Christopher David: I just do.

[07:49] Christopher David: So there's a blog template here that I like. Kind of.

[08:13] Christopher David: This is just like little blurbs.

[08:20] Christopher David: Yeah.

[08:32] Christopher David: Yeah. The question is like do I want to make different pages for the blog or just like throw everything in one place?

[08:38] Christopher David: Might as well just throw everything in the place for now.

[08:43] Christopher David: Commit.

[08:49] Christopher David: Give me it's next J.S.

[08:57] Christopher David: Let's de-reactify it.

[09:01] Christopher David: I just want the tailwind styling.

[09:08] Christopher David: I'm going to put it in the back.

[09:15] Christopher David: MDX. I would love to be able to write blog posts in Markdown.

[09:21] Christopher David: I'd have it translated to prose. I wonder if that's something that we can figure out.

[09:38] Christopher David: Wow. Yeah let's try this. How can I have Larabel load marked down from MDX

[09:58] Christopher David: and render it to tailwind?

[10:02] Christopher David: You are both.

[10:04] Christopher David: Do my work for me okay?

[10:30] Christopher David: Really?

[10:34] Christopher David: Here's what I do. Give me this.

[10:51] Christopher David: What happened in resource is blog?

[10:57] Christopher David: Sparkle icon is MDX explicitly react.

[11:04] Christopher David: J.S. X.

[11:11] Christopher David: Yeah.

[11:12] Christopher David: Um that's nice. I just want.

[11:17] Christopher David: Um.

[11:21] Christopher David: I'm finally normal Markdown.

[11:23] Christopher David: Okay what is this common mark converter?

[11:53] Christopher David: Okay. I think I already have something from Graham Campbell.

[12:10] Christopher David: I get it. Okay cool.

[12:24] Christopher David: This is nice. Okay so let's do this.

[12:33] Christopher David: No let's use this package.

[13:54] Christopher David: Okay.

[13:55] Christopher David: Okay.

[13:57] Christopher David: Okay.

[14:19] Christopher David: You can optionally alias the facade.

[14:22] Christopher David: Oh.

[14:31] Christopher David: Ah. Graham Campbell right next to Graham Campbell.

[14:34] Christopher David: Sweet. Thank you Graham Campbell.

[14:46] Christopher David: Did that. Did that.

[15:22] Christopher David: Oh.

[15:43] Christopher David: Um

[15:52] Christopher David: Um

[16:22] Christopher David: First I'm just curious if that works

[16:30] Christopher David: resources, resources, resources,

[16:32] Christopher David: resources,

[16:36] Christopher David: resources, slash blog.

[16:44] Christopher David: Hey.

[16:49] Christopher David: Cool.

[16:50] Christopher David: And let's see what the HTML looks like.

[16:56] Christopher David: Nice.

[17:00] Christopher David: Throw in the pros.

[17:17] Christopher David: Okay.

[17:19] Christopher David: Uh.

[17:20] Christopher David: Date. Is that a JSX thing?

[17:24] Christopher David: I'm guessing so. So let's get rid of that.

[17:27] Christopher David: I don't know what this crap is.

[17:39] Christopher David: Okay images. Is it trying to load these images?

[17:48] Christopher David: Or because it doesn't actually exist there.

[17:54] Christopher David: Which one please kitten that?

[18:00] Christopher David: Does it work if I give it a valid path?

[18:04] Christopher David: Oh yeah.

[18:18] Christopher David: Um.

[18:30] Christopher David: Um.

[18:48] Christopher David: Okay. Markdown works.

[18:50] Christopher David: Images works.

[18:53] Christopher David: What is KBD?

[18:58] Christopher David: I don't know what that is.

[19:04] Christopher David: Okay. So now I can

[19:19] Christopher David: No.

[19:24] Christopher David: How far out does this go? Why does it stop there?

[19:29] Christopher David: It's not centered.

[19:36] Christopher David: Oh because pros.

[19:42] Christopher David: Kind of limits it.

[19:44] Christopher David: It looks good. I just want it to be centered.

[19:51] Christopher David: I'm guessing the pros needs to have MX auto on it.

[19:58] Christopher David: Yeah.

[19:59] Christopher David: Well that was easy.

[20:14] Christopher David: Load, mark down from file.

[20:18] Christopher David: I have fancy to let me get with this.

[20:27] Christopher David: Anything else I want to take from here?

[20:29] Christopher David: I like these rounded corners and the images.

[20:32] Christopher David: I kind of want my image to look like that.

[20:38] Christopher David: And I think I want probably a border.

[20:51] Christopher David: And then bend the slides, which were not slides at all, but they were.

[21:20] Christopher David: I could just use the code for this, but I want to snapshot exactly what I presented.

[21:27] Christopher David: So let's try this.

[21:28] Christopher David: Let's grab one of these.

[21:39] Christopher David: Let's try putting an image in.

[22:09] Christopher David: 800 is probably wide enough.

[22:17] Christopher David: And then where should I put the images?

[22:30] Christopher David: Can I even put it in the resources folder?

[22:36] Christopher David: Let me try something.

[22:50] Christopher David: So what happens if I do this?

[23:05] Christopher David: What's that, though?

[23:13] Christopher David: Read it right, because I don't know what you're trying to do.

[23:16] Christopher David: Trying to get it from the root URL.

[23:56] Christopher David: Okay, except that looks like she had on.

[24:12] Christopher David: Okay, so let me just first try.

[24:23] Christopher David: First of all, I'm curious what this border radius is there.

[24:48] Christopher David: Is it like dynamically set or something?

[25:09] Christopher David: Is there a component for how it turns into an image?

[25:16] Christopher David: Okay.

[25:31] Christopher David: Okay.

[25:41] Christopher David: Do I want to use this?

[25:49] Christopher David: I'm guessing there's got to be like a laryb of equivalent of like specifying what component you want.

[25:57] Christopher David: Oh yeah, I mean that's the question.

[26:11] Christopher David: How do I actually apply styles to that?

[26:21] Christopher David: Okay.

[26:47] Christopher David: MD.Blade.PHP.

[27:00] Christopher David: Okay, tell how I would specify custom tail and classes.

[27:07] Christopher David: I want to put on all images.

[27:12] Christopher David: I could do it at the abscess layer.

[27:19] Christopher David: Actually, you know what?

[27:28] Christopher David: Is it like layer?

[27:56] Christopher David: Okay.

[28:06] Christopher David: Okay.

[28:31] Christopher David: This is pretty cool.

[28:49] Christopher David: So if I want to apply classes like.

[29:01] Christopher David: Okay.

[29:17] Christopher David: All right.

[29:47] Christopher David: It's kind of weird.

[30:04] Christopher David: You can probably do something like.

[30:14] Christopher David: Bg.

[30:18] Christopher David: I don't know what that is.

[30:22] Christopher David: Bg.

[30:32] Christopher David: Okay.

[31:02] Christopher David: Okay.

[31:12] Christopher David: I like pork.

[31:36] Christopher David: Okay.

[31:46] Christopher David: Okay.

[31:58] Christopher David: Okay.

[32:26] Christopher David: Okay.

[32:36] Christopher David: Okay.

[32:46] Christopher David: Okay.

[33:14] Christopher David: Okay.

[33:44] Christopher David: Okay.

[34:12] Christopher David: Okay.

[34:38] Christopher David: Okay.

[35:06] Christopher David: Okay.

[35:16] Christopher David: Okay.

[35:45] Christopher David: Okay.

[35:55] Christopher David: Okay.

[36:05] Christopher David: Okay.

[36:33] Christopher David: Okay.

[36:46] Christopher David: Okay.

[37:00] Christopher David: Okay.

[37:26] Christopher David: Okay.

[37:49] Christopher David: Okay.

[38:15] Christopher David: Okay.

[38:25] Christopher David: Okay.

[38:43] Christopher David: Okay.

[38:53] Christopher David: Okay.

[39:11] Christopher David: Okay.

[39:39] Christopher David: Okay.

[39:49] Christopher David: Okay.

[39:54] Christopher David: Okay.

[39:55] Christopher David: Okay.

[39:59] Christopher David: Uh-oh, for their renderer parts, since the package does not provide a straightforward way to add custom renders.

[40:08] Christopher David: Huh?

[40:09] Christopher David: What will that extension do without a renderer?

[40:31] Christopher David: Go over the page and just kind of see what it looks like.

[40:52] Christopher David: Inline parser interface, not found.

[41:22] Christopher David: So the parser identifies instance of the custom date syntax, like that.

[41:30] Christopher David: It then creates a custom date element or similar node in the markdown abstract syntax string.

[41:37] Christopher David: I think the renderer's renderer takes the date element nodes and goes to the page.

[41:53] Christopher David: Err in date parser.

[42:08] Christopher David: Gram, GitHub, Inline, what I got?

[42:14] Christopher David: Inline parser interface.

[42:37] Christopher David: League common mark.

[43:07] Christopher David: See if this gives you any extra info, the common mark read me currently.

[44:07] Christopher David: As the kind of stuff I want agents to be able to do, like you hunt down a documentation, crawl the web a little bit, keep my GitHub repo in context.

[45:37] Christopher David: Okay, so here's a question.

[45:54] Christopher David: This says it doesn't support.

[46:06] Christopher David: And the array of options for rendering HTML.

[46:30] Christopher David: Ah.

[46:37] Christopher David: That table extension class is defined as such.

[46:46] Christopher David: Can you write a date version of this based on that?

[46:58] Christopher David: There you go.

[47:11] Christopher David: So we're going to call this date extension.

[47:25] Christopher David: And then in our config.

[47:32] Christopher David: Let me say that didn't work.

[47:39] Christopher David: But we try date extension.

[47:46] Christopher David: Now what happens?

[47:54] Christopher David: Let's just see, take a quick peek inside that vendor file, a vendor folder and see if we can figure out if there's a version of that that's just a different.

[48:18] Christopher David: Inline, I'll see anything inline.

[48:25] Christopher David: There's parser, a here you go.

[48:30] Christopher David: It's common mark parser inline.

[48:37] Christopher David: parser inline, inline parser interface.

[48:57] Christopher David: I found the parser interface at a different path.

[49:03] Christopher David: Here's this.

[49:12] Christopher David: And now here's my parser.

[49:20] Christopher David: But I get this error.

[49:29] Christopher David: And then I parse your magic that thing.

[49:44] Christopher David: It is.

[49:50] Christopher David: What the fuck?

[50:11] Christopher David: I see lead common mark inline parser context is not available.

[50:29] Christopher David: Because it needs to be from parser.

[50:35] Christopher David: I don't know where GPD is getting these.

[50:40] Christopher David: I'm going to add a map to the map.

[50:50] Christopher David: I'm going to add a map to the map.

[50:57] Christopher David: I'm going to add a map to the map.

[51:06] Christopher David: Let me search in here.

[51:16] Christopher David: Let me go to common mark.

[51:24] Christopher David: Let's call inline render interface.

[51:55] Christopher David: Do I need to even care about that at all?

[52:02] Christopher David: Can I just ask that?

[52:23] Christopher David: Oh, no render interface.

[52:33] Christopher David: That might be what we need.

[52:49] Christopher David: This is hilarious.

[53:19] Christopher David: I'm going to add a map to the map.

[53:29] Christopher David: I'm going to add a map to the map.

[53:39] Christopher David: I'm going to add a map to the map.

[53:49] Christopher David: I'm going to add a map to the map.

[54:14] Christopher David: Hmm.

[54:44] Christopher David: Let's see if I change anything here.

[55:14] Christopher David: Next jump back slash maybe.

[55:44] Christopher David: I'm going to add a map to the map.

[55:54] Christopher David: I'm going to add a map to the map.

[56:09] Christopher David: Maybe that brace is already being used or filtered by Lairville in some way.

[56:29] Christopher David: Same error.

[56:30] Christopher David: Let's switch it to something else.

[57:00] Christopher David: I'm going to add a map to the map.

[57:10] Christopher David: I'm going to add a map to the map.

[57:38] Christopher David: I'm going to add a map to the map.

[58:08] Christopher David: I'm going to add a map to the map.

[58:30] Christopher David: I'm going to add a map to the map.

[59:00] Christopher David: I'm going to add a map to the map.

[59:14] Christopher David: I'm going to add a map to the map.

[59:24] Christopher David: I'm going to add a map to the map.

[59:34] Christopher David: I'm going to add a map to the map.

[59:59] Christopher David: Oh goodness January 21, 2024, holy shit, except that's not today's day.

[01:00:17] Christopher David: I mean that's today's day.

[01:00:19] Christopher David: That's not what I put in.

[01:00:21] Christopher David: Oh my gosh.

[01:00:23] Christopher David: If you bully Chaggy Beauty enough, it'll give you what you want.

[01:00:26] Christopher David: Okay, so let's just test out one thing.

[01:00:31] Christopher David: So one is if we go to, so for a matter of day, we can just be like, you know, dark mode, text bluebell.

[01:00:44] Christopher David: Oh yeah.

[01:00:47] Christopher David: And there will want to be, first of all, this is the margin coming from.

[01:00:52] Christopher David: Probably the H1, well yeah, what I could do is I could just do this.

[01:00:55] Christopher David: M T 6.

[01:00:58] Christopher David: Ha ha ha.

[01:01:00] Christopher David: Is it doing anything?

[01:01:02] Christopher David: Oh, then refresh.

[01:01:09] Christopher David: Why is that not going up?

[01:01:12] Christopher David: Oh, because it's a span inside of a P and the P has.

[01:01:21] Christopher David: I don't think about that.

[01:01:28] Christopher David: Bro's is kind of rigorous about the spacing.

[01:01:36] Christopher David: I'll feel that later.

[01:01:38] Christopher David: Okay, so let's make it show the right date.

[01:01:40] Christopher David: I don't know why it's not.

[01:01:52] Christopher David: Works except it is showing the current date, not what I've put in.

[01:01:57] Christopher David: Why?

[01:02:21] Christopher David: No, get date.

[01:02:33] Christopher David: What is this?

[01:02:40] Christopher David: What is this get date thingy?

[01:02:45] Christopher David: Oh, it's like I don't know what the fuck you're talking about.

[01:02:50] Christopher David: This is calling node get date, which returns an empty string.

[01:03:00] Christopher David: So I guess it's defaulting to the current date.

[01:03:05] Christopher David: Make sure it uses what I put in, which is.

[01:03:20] Christopher David: Okay.

[01:03:30] Christopher David: Okay.

[01:03:35] Christopher David: Okay.

[01:03:38] Christopher David: Okay.

[01:03:43] Christopher David: Okay.

[01:03:46] Christopher David: Really?

[01:03:49] Christopher David: Okay.

[01:04:19] Christopher David: Okay.

[01:04:49] Christopher David: It depends while matches.

[01:05:19] Christopher David: Okay.

[01:05:49] Christopher David: Did I just say you can't do advanced while matches?

[01:06:07] Christopher David: You fuck?

[01:06:16] Christopher David: Okay.

[01:06:30] Christopher David: But I really like making stuff up.

[01:06:41] Christopher David: I assume the date string is enclosed in single quotes.

[01:06:48] Christopher David: Okay.

[01:07:05] Christopher David: It's showing us the string.

[01:07:36] Christopher David: I'm better not give me that fucking method again.

[01:07:55] Christopher David: We're getting closer.

[01:08:04] Christopher David: Okay.

[01:08:34] Christopher David: What the fuck?

[01:08:50] Christopher David: What the fuck?

[01:09:03] Christopher David: Okay.

[01:09:18] Christopher David: Let's see if copilot can do any better.

[01:09:29] Christopher David: Curseor.getline is.

[01:09:42] Christopher David: The blow code does not fucking work.

[01:09:46] Christopher David: Here is how to make it work.

[01:09:50] Christopher David: Come on, copilot.

[01:09:56] Christopher David: You can do it.

[01:10:26] Christopher David: Okay.

[01:10:52] Christopher David: Okay.

[01:11:22] Christopher David: Okay.

[01:11:43] Christopher David: Okay.

[01:11:53] Christopher David: You're code did not work.

[01:12:02] Christopher David: Copilot's code worked.

[01:12:05] Christopher David: Except it shows the right date, but does still displays the raw date.

[01:12:18] Christopher David: Okay.

[01:12:58] Christopher David: Okay.

[01:13:28] Christopher David: Okay.

[01:13:51] Christopher David: Okay.

[01:14:01] Christopher David: Okay.

[01:14:28] Christopher David: Okay.

[01:14:38] Christopher David: Okay.

[01:14:48] Christopher David: Okay.

[01:15:13] Christopher David: Okay.

[01:15:23] Christopher David: Okay.

[01:15:31] Christopher David: Okay.