Handling images in Astro

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone, and welcome to what are we calling this? The Web Dev podcast. We're on the new format here where we're doing two parts, right? The first part is discussion, and then the second part is pair programming. Since you're watching live, you're going to see both of those things, but in the recorded versions they'll be released as two separate things. This is only the second one of these that we've done, where we're kind of working on getting it ready to roll here. Just a heads up if you're watching this live that it might look a little different from the previous "Learn with Jasons." Content will be the same, but the end result will be a little different.
That being said, what are we doing? All right. Hello, everyone, and welcome to a new episode of the Web Dev podcast. Today, on the show we'll be talking to a long time friend of mine, former coworker, somebody who I've been professionally interwoven with for a very long time, Marcy Sutton. We'll be talking about Astro, the process of migrating Astro. Marcy and I both worked at Gatsby back in the day and built a lot with Gatsby and have since been moving toward Astro. We'll talk about why. And then later on the pair programming side of the show, if you jump over to the "Learn with Jason" show, you'll see us pair programming on setting up images in Astro. Please join me in welcoming to the stage Marcy. Marcy, how are you doing?

MARCY: I'm doing great. How are you, Jason?

JASON: I'm doing great. I'm so happy to have you here. I feel like, you know, there was this brief glorious moment in time where you and I used to do all sorts of stuff together and then fate intervened and spread us out across the industry. I'm grateful to get some time with you. How have you been?

MARCY: I've been good. I'm working as a senior frontend software engineer at Con Academy. I love being an IC again because when I worked at Gatsby, I took on a manager path. Didn't love it.
(Laughter)

JASON: Yeah. Leadership is a hard path, and it is definitely not for everybody. It is not I don't think it's for me. Well, I don't know. I guess it kind of depends. I guess I'm technically leadership, but I'm the only one here, so... (Laughter)

MARCY: Yeah. Totally. That's a different animal than being a part of an organization.

JASON: For sure. You've had I mean your path in tech has been kind of winding all over the place, really cool stuff that you've been able to work on. So, maybe just to give us a quick intro for folks who aren't familiar with you and your work, do you want to just give us the highlights?

MARCY: Sure. I started out as a front end developer in agencies in Seattle. And I think in my second role I was working for Target as a client, and I was exposed to web accessibility. That was all the way back in 2010, maybe, 2011 time frame. Right as responsive design became a thing. Literally the first responsive website came out around that time, so accessibility and responsive web design, as a frontend developer, that really shaped what I like to build and how I like to solve user interface problems.
With that knowledge, I learned that I just wanted a bigger impact. So, rather than working on one marketing website at a time that might only live for six months or have a limited impact on actual people, I really wanted to get more into software development, automated testing, frameworks. So, I worked on Angular for a little bit. Angular material is a UI framework. I worked on accessibility tooling, including the ax core testing library and associated tools, but I really wanted to get back to building UIs, user interfaces. I was chasing that idea ever since the beginning when getting to work on big brands like Target. Now I'm doing that at Con Academy. I get to build our design system, which is built with React. Figuring out how that fits into various properties at Con Academy. It's an Ed tech nonprofit. It's hard. The people are great. It's for a good mission. Like my path led me to a spot that I really, really enjoy.

JASON: And I mean I can't really knowing what I know about you, I can't think of a better place for you to land. You know, it's great to see, like finding a company that's aligned with your mission and core values. It feels rare in this industry, so I'm very happy to hear that you've found a spot that lines up with yours.
And so, you know, you and I mentioned before worked at Gatsby together. And in that time, I think both of us ended up rebuilding personal sites in Gatsby because, you know, that was the thing to do, and so it's been years now. Oh, my God, it's been a long it's been like seven years. Too long.
(Laughter)

JASON: Time flies from this industry.

MARCY: COVID was in there. That was a time warp.

JASON: Yeah, that's true. For real. You know, it's been a while now, and I know that you have been sort of recently working on rebuilding your personal site, right?

MARCY: Yes.

JASON: And so, can you talk a little bit about, you know, what, I guess, spawned the desire to make the change and kind of what decisions did you make going forward on how you were going to do that?

MARCY: Yeah. I got a personal website, MarcySutton.com. I first the purchased in 2003, so it's been kicking around in various formats. It was WordPress for a long time. Then it was Gatsby. I moved the content into markdown. I don't need it. I'm an engineer. I can write markdown. I moved it into Gatsby when we worked there, but I did not maintain I didn't upgrade to the newer APIs that Gatsby created. You know, it was kind of a chapter in my life I wanted to be done with.

JASON: Yeah.

MARCY: I was able to keep publishing for a while. I could keep writing blog posts without doing a major upgrade, but at this point I'm on a new computer, and I don't have a computer that's even running Gatsby anymore.

JASON: Okay.

MARCY: Rather than upgrade Gatsby, I had heard good things about Astro. It seemed like a logical migration, so I used cursor, the IDE, to help me do a lot of the heavy lifting of just get it running. That made it pretty easy because I'm busy. I'm a mom. Yeah.

JASON: When you did that, did you give it to the Gatsby site and said convert this to Astro or did you go from scratch?

MARCY: I told it to convert.

JASON: Okay.

MARCY: I've got a toddler at home. I don't have time to tinker at that stage.

JASON: Right.

MARCY: It's like different stages in your life that might be a thing you want to do by hand. For me, I really wanted to get to publishing. I need to get the site back up and running.

JASON: True.

MARCY: So, that's why I went that route, and it was pretty smooth. There were some hard edges, like I had to go and fix components that it didn't build out all the way. I think I've gotten mostly everything, like my contact form is wired back up. Yeah, it is mostly complete except for my blog images. And for some reason, I am just having the hardest time figuring out how, without moving all my blog images, because writing on a blog since 2003, I have quite a bit of content

JASON: Sure.

MARCY: I could script a move of my images, but I'd rather not.

JASON: Sure.

MARCY: I'd rather keep my images collocated with the markdown. It works great locally. Does not work when I deploy it. There's something about the way VEET handles images. I have done a few various things. Like I have a script that moves my blog images into a public folder, but that's pretty clunky. I don't have to have to copy my images. Then they're not being processed. That's kind of my problem statement. I got almost all the way there, but my markdown images, the paths are getting lost when I deploy the site.

JASON: So, before we dive into like the specifics of the images, other on that, how has the experience been? What would you say are your sort of comparison points or highlights or just overall impressions of using Astro?

MARCY: Yeah, you know, this is pretty deep and a really good question for me personally because when I worked on Gatsby, it had a lot of client side hydration. You would have server side rendered content, but then it got rehydrated into a JavaScript client rendered environment. At the time that I worked there, I was really concerned with accessibility and client side routing, so I wrote a pretty big or at least impactful blog post at the time on client side routing and accessibility where I did some user testing, because I was trying to fix this issue of if everything is rendered with JavaScript, we lose some of the default behavior in a screen reader specifically of the page being announced.
I did all this research to figure out how to fix this problem, but the whole time I was going, you know, I kind of just don't want to client render everything.

JASON: Right.

MARCY: Why are we rehydrating content that already existed on the server and now it's like duplicated and all these JSON files? The whole approach just seemed like I was over it. Moving to Astro, having it not do this whole client side hydration thing is great. I just want to get that approach out of there, and so that's compelling to me, to have less of a focus on client rendered JavaScript.

JASON: Yeah, that really is like one of the big things that drew me to Astro as a project. I had that same sense of discomfort. I was like, listen, 95% of my website is not dynamic. Like very little of this is interactive or needs to be client rendered or any of these things. I am just showing some words of a page so this idea that if I put it in Gatsby or Next or remix or any of these things, it's going to end up being downloaded twice, rehydrated, turned into this JavaScript thing that ultimately does nothing. It never sat with me well. I'm making the browser do nothing.

MARCY: And your page transitions were fast. I don't care about that personally.

JASON: That was my thing too. If you've got a fast enough page, then I've never hit a link on a website and then it reloads the page to show me the next page. I've never thought to myself, what a crappy website. It's when it's slow that I think it's crappy, right?

MARCY: Yes.

JASON: A lot of times when it is slow, we load 6 megabytes of JavaScript. Oh, yeah, images as well are a killer. I love when I'm on a train and somebody has a 9-megabyte image that they just resized. It's like, oh, no (Laughter).

MARCY: Yes. The tooling can help us there, which is going back to what I was saying about my blog images. That's why I don't want to dump them in a public static folder to not be processed.

JASON: Right, right.

MARCY: That resizing is really handy when it can optimize for various screen sizes. Like having some capability where the framework is helping you there is really appealing, but we don't need to client render the entire page to do that.

JASON: Yeah, I think that's the exactly. Use the framework for things that you can't get out of the browser, but don't use the I was having a conversation with Dan Abrahmoff about this. At some point I felt like React diverged from we're going to make the DOM reactive to we're going to fully replace the DOM. And the expectation shifted from React is a thing you add to a Wednesday website to get reactivity to it is the full application layer and it is used instead of the browser. You're not using web APIs. It sort of feels like doing it wrong. All the guidance is, oh, why would you do that? You lose all the reactivity if you do that. I know that's not how the React team feels. They're not saying don't use the browser, but the tools are built in a way that felt like they were saying all that stuff you know about how to build a website before React, don't do that. Do it the React way. And that starts to feel very at odds with the way that I think about the web. I want to use the web as often as possible until I hit something that is just straight up not supported. You can't tell the browser generate optimized images. That's not a reasonable thing to expect a client to do. You need a server to do that. You need some kind of processing step, whether that's your build step or whether that's your server side rendering.
I think this is where I feel like Astro has sort of gotten the they've hit my level of taste for how to build. It's very much designed as you don't use it until you need it and then you can use it. Right? You want one component to be client? Opt in to that one component being client rendered. Then and only then they'll boot React and run your React component or your view component or your svelte component. Otherwise, they're going to send static stuff. Then you don't have to worry whether this hydrated. An Astro site will ship JavaScript by default. That's really cool. When can you say that about a framework these days?

MARCY: Totally. I will say there's some web applications where you do need more infrastructure.

JASON: 100%.

MARCY: Times when you've got a lot of data to fetch. Making something really app like. There's certain times when you have to go all in on a web application framework, but then you're kind of committed at that point to get the back button to work right. Like there's just so much you end up having to do all of that to make it as robust and performant as you would expect, but it's kind of a slippery slope. If you don't need it... yeah.

JASON: This is our job as developers is to sort of look at the thing we're building and say, what am I actually trying to accomplish here? What are the requirements of this project? If I'm building a dashboard and everything is behind authentication and it's all we need that async fetching and everything is updating based on other things, you have filtering and settings and all this stuff you're doing, that's a great use case for React and that's what I would reach for, or svelte. I'm building a marketing site. I'm building a blog. In most of those cases, the tradeoffs just don't make sense. And I think this is where I love this conversation because it's important to me that we're not looking at these things as always use X or always use Y. It's not about only use Astro or only use React.
The joke I always make is if you were to hire a contractor to do your walls and he shows up with paint, what do you mean? Sure, you could paint a wall with a hammer, but it's not very efficient.

MARCY: It would take forever.

JASON: You're not going to get as good a job out of it. Because frameworks, we didn't even we don't look at them that way, it doesn't make sense to say, well, I only work in React. It's not tool that you like. It doesn't make sense.

MARCY: In a certain place in your career, if that's what you've built with, then that's great. You have experience in React. I think when you get to these more senior staff levels is when you start looking at systems and tradeoffs and, Jason, the way you talk about it, you seem like a very senior level person to be looking at it kind of objectively, knowing that there's other options and other tools. And you're kind of, you know, thinking upfront. Maybe there's a better way or another way. Whereas I think when you're just starting out, you only know what you know so far and you're going to reach for the thing you know.

JASON: Yes.

MARCY: And if that's how you can get a job done for whatever you're doing, play around with it. Do it. I think what we're talking about is being a little more discerning because we're looking at building different types of things. Yeah, it's kind of a journey to be on.

JASON: That's a very astute observation, I think, because I have the cursive experience. I'm looking at things through the lens of how I've gone through the industry and all the mistakes I've made. I sometimes forget that, you know, people are at different places. If you've only ever built sites in React, it would ridiculous to ask you to suddenly not do that. That would be like asking me to suddenly go write Fortran. Why would you ask me to do that? I'm not really the person you want doing that job. It's a very significant departure from my core skill set. Yeah, I think that's a great caveat there.
So, I guess maybe some takeaways here before we wrap. When you think about this stuff, do you find your approach to building for the web you've been doing this as long as I have. How is your thinking about web projects shifting as you've sort of moved through WordPress to Gatsby to Astro and everything you're doing at your day job with React? Do you have some heuristics you're using when you're looking at projects that maybe people could take with them as they're looking at their own?

MARCY: Yes. You know, it's funny. To be totally vulnerable for a second, a lot of it is informed by having burned out before. I'm looking at what is absolutely necessary, and I'm not going to go add bells and whistles just for fun because I don't have time for that.
(Laughter)

MARCY: Like what do we really need to get this job done? I don't need a CMS connection on my website. I'm an audience where I need that. Whereas the website I'm building for my neighborhood association, I want nontechnical people to be able to edit that content, so I'm making different choices for that site. But honestly part of it is like laziness. How far do I need to go to get this job done? What do we really need? But some use cases do need more complexity, and in my day job I'm in that space. I am looking at really complex components that have to support a wide variety of use cases, error handling, a lot of dynamic data fetching, bigger teams. There's like a team component where, you know, there's a lot of machinery that I have to understand and work with, so that's why in my personal site I'm going to make really stripped-down basic choices to keep it simple to just get the job done, but like be able to go ride my bike afterward or go make food. I don't have time to be tinkering all day and night.

JASON: I think that's a really smart way to look at it. Well, not to assign intelligence to it, but maybe to assign mental health to it. (Laughter). I think there's so much value in recognizing what job am I trying to do right now. When I was younger, I would build sites because that was my hobby. I would do the hard thing, and I would tackle the weird rabbit holes. And I would chase every weird thing that I could find to just see where it led. I wanted to figure out how this stuff worked. That's not me today when I'm working on a personal site. I have a personal site because I need a place to put stuff that doesn't fit elsewhere. Right? And I want to have some kind of record of things.
If I make it complicated, I'm going to intend spend all my time keeping it running instead of building my log of activities into the world that don't fit into my professional site, and you can see that now if you look at my personal site. I don't update it very often because that's because I made it too damn complicated.

MARCY: Same. I've been camping on this blog post I've been at my job for over a year now, so I've been camping on this blog post for a while.

JASON: Well, I think

MARCY: I'm doing it now.

JASON: Great insights here. And I think to everybody listening remember that tools are here to solve problems. They're not here to become an identity or to become a one size fits all solution. They're available to us to fit the needs of what we're doing.
Marcy, where should people go? You already mentioned MarcySutton.com. Is there anywhere else you want people to go to keep up with what you're doing and what you're up to?

MARCY: Sure. Yeah, well, I guess I wanted to conclude one last thought on that.

JASON: Sure. Absolutely.

MARCY: The space that someone might be in, in your life, you might be in that tinkering phase. Your constraints might be different than a busy parent or somebody who is just thinking all day long in a complex work environment. You might have the space and time to tinker, and that will serve you at certain parts of your life, so I just wanted to point that out. You and I might be a more geriatric millennials.

JASON: 100%.

MARCY: As far as minding me these days, Blue Sky. Hopefully that lasts. I used to be on Twitter and that is no more. GitHub. You can probably spy on my open source contributions on GitHub.com/MarcySutton. I'm Marcy Sutton on most of the things.

JASON: I'm throwing up some links for the folks so they can find you on these places. I just appreciate you taking the time to share your insights on this stuff because it is getting harder and harder to talk about tools in a way that doesn't feel dogmatic. I think the algorithm seems to polarize, and it only wants to go to extremes, so having these nuanced conversations where yeah, it depends. It's getting less and less common. I appreciate you getting the time to talk about.
Everybody, make sure you go and check out Marcy's stuff wherever you can find it. If you're interested, we also have a pair programming companion to this called "Learn with Jason." You can find it on YouTube on the CodeTV channel.
Marcy, thank you so much.

MARCY: Thank you.

JASON: Bear with me everybody, while we get this done. Let's go. We're going to turn this on. There it is.
All right. Hello, everyone, and welcome to another episode of "Learn with Jason." Today on the show Marcy Sutton and I are going to be digging into images in Astro. And this one is going to run a little different. Usually, I'm the one on the keyboard, but today Marcy is going to be working on her own personal site that she's been migrating to Astro. We're going to dig into how to get command over your images in an Astro site. And I'm hoping against hope we can actually solve this problem. (Laughter).
Marcy, do you want to, before we get started, give us a quick overview of who you are and what we're working on today?

MARCY: Sure, Jason. I'm Marcy Sutton Todd. I work on design systems, accessibility, automate testing, really just baking accessibility into a nonprofit Ed tech platform. Mission is to help learners everywhere. That's what I'm doing for my day job.
And I've got this personal website that various versions of it have been kicking around since 2003. And I wanted to replatform it in Astro from Gatsby. We talked about it a little bit in our interview section, but kind of high level purpose is to get it onto a platform that's a little better maintained, a little simpler, not as much client rendered JavaScript because primarily it is an information website. It has my "about" page and my blog articles. And that's about it. Not a lot of interactivity, and so it really made sense to do something with Astro.

JASON: Nice. Yeah, and for anybody who wants to listen, we have a longer conversation that's a little more abstract about building websites, choosing the right tools for the job, and a whole bunch more over on the Web Dev podcast, so go check that out on the CodeTV website.
So, let's dive right in here and let's maybe just get familiar with your site and what's going on with it. And then we'll see what we can get done.

MARCY: Sure. All right. Ta da. Here's my site, MarcySutton.com. I have a kind of loose dream or desire to redesign it, but I had an existing site. I'm just going to keep the design for now because primarily I wanted to change the infrastructure. Going from Gatsby to Astro, I thought not have scope creep here. Let's just get the replatforming done. And if I want to change the way it looks, I'll do that later.

JASON: Yeah.

MARCY: But the main goal here is to get something that supports my content. I've got featured content. This is my testing accessibility online course that I created. I would probably replace this feature with whatever my next newest piece of content is. I have writing where each post has its own page. It has images in the post. Kind of blog index file Palins pages where all the articles are listed. There's sidebars about my public speaking that I do very rarely now these days, but there's an archive of most of the things that I've done. On my home page, I've got a newsletter that I haven't been sending out for feel free to sign up for it. I haven't really been using it. Past conference talks. I have media widgets that load YouTube embeds. The live site doesn't have some of this content that I have locally, but I'm very proud that I recorded an episode of LEET HEAT with Jason back in January. That was a blast.

JASON: That was a lot of fun.

MARCY: Yeah, that was awesome. Some images here. These are hard coded for now, but I had an idea of having a pool of images that I could just auto-populate, kind of copied down from my Instagram. Yeah, that's kind of the basic architecture. Talks, links have their own page.

JASON: Cool, cool.

MARCY: There's my bio and a short version. If I do a podcast or a conference talk, I can just copy/paste the short version.

JASON: Okay.

MARCY: Yeah, that's about it. My primary goal for today is to deal with these images. On my blog posts I have images that are collocated with the markdowns. Let me show you where that lives. Can I make I can't make my finder bigger from this view, but my Astro site, all the content is in the content folder. Under posts, I have a ton of posts. Some have images. Some don't.

JASON: Uh huh.

MARCY: For the ones that do, such as the one we're looking at on the screen for developing anti SLAPP policies for a11y Slack with Harvard Cyberlaw clinic, there's a markdown file for the post itself and then there's two images collocated in the folder. When I moved over to Astro, that worked fine locally but not when I deployed it.
If we look at my IDE, the markdown post has some front matter at the time. It's got a cover image and various little bits. That part is working fine. For some reason, cover images, because there's imported, I guess, they are working. It is these relative links within the content that I'm having trouble with.

JASON: Uh huh.

MARCY: And for the life of me I cannot figure how to do this. If we go to the deployed site, here's an example of where an image is broken. And let's just keep it kind of related to what we were looking at locally. Oh, no. It's working now? Let's see. Let's look at the path of this image. This might be one that copied. This is probably one that I copied into the public folder. That's my guess. I'm going to laugh if it wasn't working and then now it is. Our job would be done. It's like the ultimate rubber duck if it worked right.

JASON: Right, right.

MARCY: The way I can check this locally, because this is deployed be Netlify I haven't made the switch over to my real domain yet because I wanted to make sure everything worked. But if we look at my scripts, we can kind of mimic the live environment with Astro Build and Astro Preview. Oh, I am doing that right now. I'm in the preview locally.

JASON: Okay.

MARCY: And that is apparently working.

JASON: So that's working. Can we look at your Astro config just to see how the images are set up right now?

MARCY: Yes. And I have only been working with this Astro site for a short period of time, so I'm still kind of figuring my way around as well obviously. So, here's my Astro config that has an output folder of static, but nothing like explicitly for images that I can tell, aside from MBX that's about it for images in this config.
I did create a script. This might be why my images are working. It moved I can run it, and it will copy my images into looks like source content. And so that may have made it work, but looking at the URLs as the images, they were in an Astro directory. I don't know if Astro is changing those URLs. That's like a magic folder that I didn't create. So, I don't know if you know anything about those automatic paths.

JASON: The way that Astro should be handling this is that when you've got your markdown files, by default in the local images in source and remote images get processed in optimized, what that should mean is that this should just work. What I would love to try is let's check that the public folder doesn't have your images.

MARCY: Yes. And you know what else I want to do to compare? Because it might be working in the preview but not in the local dev server. That's one thing we could compare.

JASON: Oh, yeah.

MARCY: When I hover over this image, it doesn't my operating system can't find this image. There's something with the way VEET deploys that's different from your operating system with your images. I think at this point it might be that it's broken in the local dev but working remotely, which maybe I have to live with.

JASON: The path is wrong on this one.

MARCY: Yeah.

JASON: You're in the features folder, and then it is trying to go into a nested features folder.

MARCY: Yes. Features, images. Within features, this image

JASON: Doesn't exist.

MARCY: Oh, it got moved. Fun.
(Laughter)

MARCY: Okay. So, here's public, features, images. There's that one that's missing.

JASON: Okay, okay, okay. This could be part of the problem. Is the anti SLAPP one in there, in that public folder?

MARCY: Let me change this view here. Where's my columns? I'm going to go back here. That would be in posts. Let's see. Developing Harvard Cyberlaw is not in there for some reason. And this doesn't appear to be what is making those images work on the site.

JASON: So, the good news is because it's being served from there's a slash underscore Astro there. That is the folder that gets used when an image is processed.

MARCY: Okay.

JASON: Theoretically speaking, this should all be fine, but let's try to build locally. Go out to your root folder and let's delete the build and let's just build it fresh. If you list, there should be like a build.

MARCY: Dot Astro. I just did a keyboard command, shift command period. Little trick.

JASON: I think it's dist.

MARCY: Not a hidden folder. If you're ever like things should be here, shift command period.

JASON: That's so helpful. If you're comfortable with it, let's delete this dist folder and build again because everything in here should be generated.

MARCY: Yes.

JASON: Okay. So, then let's run that build one more time. Don't run the move images command.

MARCY: Okay. We'll do npm run build.

JASON: There's nothing to preview, so this should fail.

MARCY: I did both. Here let me do preview.

JASON: Oh, you ran them together?

MARCY: Yeah.

JASON: That's totally fine. Let's just make sure the images showed up.

MARCY: Yeah, we're looking at local. Yeah, they're showing up now.

JASON: Check the path again on that and see if it's coming out of that Astro folder.

MARCY: It is.

JASON: Okay. So, let's go back to that one that was in the features where it was broken, and let's see if we can get that one working the way that we want it to.

MARCY: And I also think I could compare the page that that's on. I can get to that from this feature, and then go to the frontend masters one. This image is loading with this path, the features, images.

JASON: This one is hard coded to your public folder, which means it's not being processed.

MARCY: Okay.

JASON: So, we can fix that by moving the image back into this folder.

MARCY: Uh huh.

JASON: And then let's see if we can get that to do what we want.

MARCY: Marcy 4. Teaching at frontend masters. Yeah, don't ever do two workshops at once. (Laughter).

JASON: I did that once. That was a long week.

MARCY: That was a long three months of my life. Okay. Where am I going? It came from public.

JASON: Content features. You've got to get into your features.

MARCY: Oh, features. Oh, it's in there.

JASON: It is in there. Okay. So, this is good news because that means we should be able to delete it from public, making sure that those aren't those are all the same images?

MARCY: Yeah, they're all feature images.

JASON: Okay. We should be able to delete that features folder.

MARCY: I didn't want this content to live in there. I was just like where does this live?

JASON: I think I did the same thing. I ended up eventually moving everything to Cloudinary to reduce the bandwidth I was sending out, but I went through a similar journey where I started in public. I was like this feels wrong. Then I moved it back in and hacked through getting it to work through Astro. Then I moved to unpick and then I moved to Cloudinary and unpick. That was the end state that I'm in now.
So, now that you've got that features gone from the public folder let's try a build again and let's see if it's still there, because now it's in the content and the path is correct. Theoretically speaking

MARCY: Relative path from this content features directory, there's an images directory and this image is in that

JASON: Is that image in there when we look at it, just to make sure?

MARCY: Yes, it's right here. Source content features images.

JASON: And is that showing up in your IDE as well? It wasn't there before, and I just want to make sure that it's still there.

MARCY: Maybe if I refresh it.

JASON: Yeah. I think you have to

MARCY: Reload the window?

JASON: Yeah. Okay.

MARCY: Are we in the right okay. Source content features. Yeah, that's not showing up in there.

JASON: And we're in the same folder? There's not another copy of the Astro site somewhere?

MARCY: I don't think so. Oh, weird.

JASON: Oh, okay. We have content above the source folder and we have content in the source folder.

MARCY: Oh, okay. How did that happen?

JASON: Okay.

MARCY: Maybe that was from part of the moving.

JASON: It might be.

MARCY: Content and source oh, that might be this is a very embarrassing way to pair program.

JASON: It's all good. It's all good.

MARCY: Fail in public.

JASON: Let's check your config TS real quick just to make sure the thing I want to make sure is if we remove that top level content, I want to make sure we are still getting everything and not

MARCY: Oh, yes. I have seen this file before. Because I was trying to learning about the APIs in Astro, defining collections, what do I need in here, the schema, if you want it to have an image, you have to pass an image through, makes sense. But reading through the docs, there were some cases when where maybe you want a collection. Maybe you don't.

JASON: Yeah. I think ultimately it's kind of once you've used them, you'll start to realize when it's more work and when it's not. I think it's just sort of a case by case. You feel like you're doing a lot of work to get Astro to show this thing when I could just drop files into this folder and it will just show the thing.

MARCY: Yeah, exactly. That's been my life with this so far. Especially because I'm translating it from Gatsby to Astro. What do I want to move? What do I need to move? Those are the decisions.

JASON: Right. And my general guidance for when a content collection makes sense in Astro is if it's something where you want validation on what's in it, you want your front matter to always match and throw errors if you've got things that aren't recognized a good example is tag creep on posts where if you have an arbitrary tag field you just over time add a million tags and they're all one offs. Why even have this? Because you can't filter on that tag. It's just one post. In Astro's content collections you can do a union and set an enumerated list of these are the allowed tags. If you try to add a new tag that doesn't have any matching content, you have to make the conscious decision to go in and edit your content collection to add that new tag. Otherwise, it's going to be like, hey, that's not allowed. Oh, because I didn't call it this thing. It's called this other thing that's in the allowed list.

MARCY: Oh, yeah, I tagged it with accessibility and that A11Y.

JASON: My blog used to be a graveyard of one off tags. Then I implemented this and ultimately did away with tags entirely. I'm not using these in any consistent way. Why am I wasting mental space on this?

MARCY: Yes, totally. That's the type of thing you can do upfront server side. That doesn't need to be client rendered.

JASON: Exactly. Exactly, exactly. Okay. Let's see if we can solve this source folder problem. Maybe commit just in case we break everything so you've got a rollback point. Then let's actually just delete that top level content folder and only keep the one in source.

MARCY: That sounds good, and I have another copy of everything if I get to that point.

JASON: Okay.

MARCY: Okay. I've got some edits here. This is a new computer. I don't have my ZSH terminal all colorful and whatnot. If you're like, what's up with that, it's a brand new computer. Okay. And I was going to delete the top level oh, wait. Maybe I'll do a commit.

JASON: Yeah, that's what I was thinking. If you have everything in here, then when you delete it, it won't we have a bailout if you're missing something.

MARCY: Yes. And then if I go over to the Astro site, delete.

JASON: Gone. All right. Let's try another build and let's just see if it works.

MARCY: Okay. Build and preview. Let's go. And then I do want to compare it to local dev.

JASON: Okay. This worked.

MARCY: In case there's discrepancies. It didn't complain. The build system, it will yell at you if you do something that it can't complete.

JASON: And then this is good. Where is it trying to go?

MARCY: It is just oh, yes. This is the thing. The blog posts go they end up getting flattened. They're in a post directory and then the URL becomes it's not in posts. Maybe that

JASON: Do you want that to be

MARCY: I would like to not have to do a bunch of redirects.

JASON: Yeah.

MARCY: This is how Gatsby, I believe I didn't set them up to be in a post directory. I think it just did it that way. To not have to do a bunch of redirects for every single page on my website, it would be nice to keep it the same.

JASON: Well, actually, let's look at your preview. Did the anti SLAPP one break? Because this is the feature.

MARCY: Oh, yeah. Okay.

JASON: Anti SLAPP one is fine. Let's go to the features and figure out what your site is doing for those.

MARCY: Yes. This one was the frontend masters one.

JASON: Right.

MARCY: Go back to that post. Yeah, so none of the features are working.

JASON: Okay. Let's go to your live site and let's see how it structures these, because it's flattening them right now.

MARCY: I think those are flattened as well. So, the testing accessibility one, it's just a straight URL. It's not in a features directory.

JASON: Okay.

MARCY: So, I should probably check the paths of these images though. Compare one that works to one that doesn't.

JASON: Well, what we should see, if I'm correct in this, is we'll see that the ones that the pathing worked on are going to show you underscore Astro path because they'll be processed. The others, because they weren't matched, will show you the original URL, which will be broken because Astro didn't do anything with it and the path doesn't line up anymore. What we need to figure out is when images are in a markdown file that is changing its slug from the structure, then it could be

MARCY: Posts are still in the public folder from the move. I moved things. I'm going to delete those and then see what happens. I bet that one that was working isn't going to work now.

JASON: Yeah, let's try it.

MARCY: Maybe not. Maybe not.

JASON: Did you do a rebuild?

MARCY: I did not. (Laughter). Made a mess. You're helping me with my mess here. Well, it seemed to work.

JASON: This is good. It is still an underscore Astro URL on that image?

MARCY: Let's see.

JASON: That's kind of our tell that we're doing it right.

MARCY: Yes.

JASON: Okay. That one is being processed, which is great news. The next thing we want to figure out is did anything in the features change. My guess is no.

MARCY: No, I don't think so. So, if I look at this maybe it needs to be see, what I don't get if Astro is processing these images and they're in it's going to look in this images folder, which is within the features, but then it is flattening the URL. That's fine, but how is it originally going to find this image? Do I have to structure my blog content so that is collocated but not in an images folder? That's what why not really follow, for example.

JASON: Let's try that as an experiment. Let's go into just this testing accessibility one and let's drop that one image right next to it.

MARCY: Okay. Let's see. Which image did I have? I'll just copy all of these and put them here. Rather than being an images directory, I'm just going to delete that out of there.

JASON: Okay. Let's give this a shot and see what happens here. Oh, and then we need all those to get updated across your whole posts probably.

MARCY: Yes. Command D to select the same text in multiple instances, in case you didn't we're just going to say what my little shortcuts are. I think that's the only one in here. Front matter images are being handled separately, so I'm just looking at the part of the markdown content itself.

JASON: And I just realized that yeah, okay. I'm hoping this works here because I think what happened was any luck?

MARCY: Negative. Negative. Let's see. The frontend masters one, this image is right here.

JASON: Uh huh.

MARCY: It is in a content features directory. The posts ones worked. I wonder if I need to look at the config at all to see if there's differences.

JASON: Why don't you try just on this one for that Marcy 4, add the slash features because I have my hunch is what's going wrong here is that Astro is expecting the path to line up with where the images are. Because you're manually changing the path, I think it's it's still not doing it?

MARCY: Huh uh.

JASON: I feel like the path is kind of is a little odd.

MARCY: Yeah. I'm wondering

JASON: Let's try this. Instead of path, change path to slug and drop the in the front matter.

MARCY: Oh.

JASON: And drop the leading slash. And let's try that because I think that doesn't mess with what Astro uses for where things are, but let's try just this one before we change anything else to make sure I'm right.

MARCY: The weird thing is that the post version works. Oh, this got mad. I think I need to data sync.

JASON: Oh, this is because your content config is specifying a path. For now, let's cheat and let's set the path to optional and add a slug as optional as well online

MARCY: Real quickly, I'm looking at post features. Posts was working. Feature was not.

JASON: Right. Let's fix features. Line 24 instead.

MARCY: Line 24 right here.

JASON: The reason I think that posts is working is because the posts are we're not dropping a path. And on features we are. We're dropping the features folder out, and so the path matches on posts but not on features is my hunch.

MARCY: Even though if we look at the information architecture, features and posts are both directories. I guess one thing oh, I see what you're saying. The file is if I put testing accessibility in a directory with an index file, then it would have the same shape as the post version. If that makes sense.

JASON: This doesn't feel right. It feels like we're doing something wrong here.

MARCY: I know. Look at this one. It's the post version. They're set up in directories, but then this piece of content is an index file in a folder. That shouldn't make a difference maybe it does make a difference.

JASON: Let's try it. Why not?

MARCY: Let's try it. If I do this and I move it because, you know, we've got Git to back us up, right?

JASON: Right.

MARCY: I'm going to move the images in the same directory. I'm going to get out of here.

JASON: You're going to have to fix that path again. Oh, you already did that.

MARCY: I think so. Yeah. Let me go over here. It's in the same directory.

JASON: Uh huh.

MARCY: No.

JASON: Did any of the other ones below work?

MARCY: Good question. I think there's only one image on here. Writing didn't change, so that's the same. What is the difference? It's probably something really simple.

JASON: One of the the major catch is you're using the old content config. They've updated the way that it works since.

MARCY: Okay.

JASON: If you want to, we can migrate that and that can that's going to be a little bit of a pain in the ass. What version of Astro are you on?

MARCY: Good question. 5.13.7.

JASON: I think that's pretty close to latest. Yeah, I think if we wanted to do the content collections, the quote, unquote I guess not quote, unquote, just the modern way, the content config moves out of the content folder and into source/dot config dot TS, but they changed the format a little bit to use loaders instead. It doesn't change a ton. There's a migrating thing, if I can find it. Where's it at?

MARCY: Astro okay. That's what I was confused. For some reason my replatform version, I ended up with both types of config files.

JASON: The LLMs don't have a ton of Astro stuff to work with, so they might get confused about what's latest versus not.

MARCY: Uh huh.

JASON: Okay. Let's do this. Let's create content dot config dot TS in the root of your source folder.

MARCY: Content dot config dot TS.

JASON: Yeah. But in source.

MARCY: In source?

JASON: Yeah.

MARCY: Okay. Content dot config dot TS.

JASON: This, you'll be able to copy/paste almost the entire dot TS from there. What's going to change is now we have this concept of Astro loaders. You're going to instead of a type content yeah, you'll find it under content collections under adding content to your site. I'll drop a link to the chat as well for everybody.

MARCY: Adding content to your site.

JASON: And the specific section is the built in loaders, is what we're looking for.

MARCY: Okay. Built in loaders, there it is.

JASON: And what we're doing here is we're going to swap out right now it's using type content. We're going to change that to a loader, and the loader is going to be this glob pattern there that's being shown that grabs your markdown files.

MARCY: Oh, I see. Okay. I copied that from the docs. Define collection is still there. We're probably not going to need the Z anymore.

JASON: You will still need the Z because it is still used for the schema.

MARCY: Got it. Okay.

JASON: Instead of type content, it's going to be a loader prompt.

MARCY: I see. Okay. So, I'm going to delete this stuff from the docs.

JASON: Uh huh.

MARCY: But I've got the loader in my clipboard.

JASON: Yes. And then the base just needs to get updated to where your content lives.

MARCY: Source content posts.

JASON: Okay. And so, that should

MARCY: Declarative.

JASON: Yeah, you can also do custom stuff now. If you want to load from an API or whatever, you can create a custom loader to do that, which is why they it's full circle back to the Gatsby loaders (Laughter)

MARCY: Some things worked. Some things did not.

JASON: Exactly, right? And the nice thing about this is you don't have to use this. I think where Gatsby got things wrong is they forced everything into the loaders. With Astro, you don't even need to know these exist. You use them when it's time. And so, this should start to modify the way that this works. Let's just see what happens off the gate here.

MARCY: Well, it didn't yell at me. In my local dev. Oh.

JASON: Interesting.

MARCY: I think my templates are probably not they're probably using the old content dot entry dot render. That page, that is this page’s slug. Here's a template. These dynamic pages use this template, and then there's some logic. I think this is the one I was looking for.

JASON: Right, right, right.

MARCY: Yeah, the content is being loaded differently now.

JASON: And the entry is no, that should be right. Entry and type. Entry comes in and then its content is a wait render entry. Oh, it's entry dot a wait render and then you pass entry to it now is the difference.

MARCY: Hmm.

JASON: And render gets imported from Astro colon content at the top.

MARCY: Cool.

JASON: That should solve that problem for these ones, so let's make sure that's working in dev. Or at least get us a different error. That's working. The images are still not working. My hunch is that it is related to the path remains.

MARCY: Uh huh.

JASON: Getting us here gets us closer.

MARCY: Yeah, that worked. My sidebar's gone, but I probably just need to go fiddle with the rendering some more.

JASON: Yeah.

MARCY: I can figure that out. The image part

JASON: Right. Let's do how are we doing on time? We are doing just fine. Let's go into the features content declaration. Well, actually let's delete the config dot TS out of the content folder because we've dropped that now.

MARCY: Yep, good call.

JASON: And let's make sure that didn't break anything. What's the error that it's giving you on Astro content?

MARCY: I don't know. That's been coming up here and there. I've not been able to figure out what that is about because that should be coming from Astro.

JASON: You've got the Astro plugin for VS Code or the extension?

MARCY: Oh, yeah. I think so.

JASON: Okay. Sometimes once you're running the dev server, just like reloading the IDE will cause that stuff to clear up. It's generated stuff, so it can get kind of weird in that sense. Let's see. Oh, yeah. That looks like it fixed it.

MARCY: Nope. Came back again.

JASON: You little punk. It's not breaking, so let's ignore it.

MARCY: (Laughter). I thought it was obscuring like there's some other error. Having worked with types and modules sometimes that's a red herring and it is pointing out something else.

JASON: Let's try my hunch here. Down on line 25, mark the path string as optional and then add a new property below it that is a slug that's optional. And let's just swap out on that testing accessibility page the path for a slug, like we had talked about before and just drop that leading slash.

MARCY: Slug. And we're on dev now, so I shouldn't need to oh.

JASON: I think because it's front matter we might want to stop and restart just because the schema stuff can be a little funky.

MARCY: Oh, something in my template is not happy.

JASON: Line 18 it said.

MARCY: Oh, because I was changing paths in here.

JASON: Oh, okay.

MARCY: That was handled. (Laughter).

JASON: Interesting. Okay.

MARCY: There's a lot of parts that go into a website like this.
(Laughter)

MARCY: We're talking about keeping it simple and then we get into this can of worms.

JASON: That was in your slug, right?

MARCY: Yes. That was in the template. Yes, here.

JASON: Okay.

MARCY: I think. Was that where this was? Yeah, here we go. Data path. Oh, yeah, I see. There's no slug now.

JASON: Let's just

MARCY: I'm going to turn on wrapping so we can see the whole thing.

JASON: Can we maybe just drop I think we can just oh, I see what's going on.

MARCY: Let me change it to path.

JASON: Basically, what we need to do is we need to give it use the slug if you've got it or use the data path.

MARCY: Uh huh.

JASON: And then if I'm correct about this, then what we'll end up doing is we'll be able to get rid of this entirely because slug is going to be used.

MARCY: Yeah. Yep. So, yeah, how do we just validate it?

JASON: Do post data dot slug and then do the double question mark. Yeah. In this case, feature data dot slug.

MARCY: Yeah. We're in a this is kind of hard to see with wrapping, but we're in a map function. Just trying to bust this out so you can kind of see where we are. We're iterating over the list of featured content and then pulling out some of the front matter.

JASON: And then are you using this in oh, yeah. This is your get static pass call. Basically, you're creating all of the params and prompts so we can generate stuff.

MARCY: Uh huh.

JASON: So

MARCY: Does that look right?

JASON: That should do what we want because it'll start with a slug if it's got it. Then it falls back to path, which only the one post doesn't have the path, so it should work the same for everybody else.

MARCY: Yes. Nullish coalescing.

JASON: That's the one.

MARCY: Oh.

JASON: It's not exploding anymore. That's good.

MARCY: It is not loading content now.

JASON: It's not loading that particular page, which isn't great. Is it loading any of the writing?

MARCY: Oh, none of them are there anymore. The writing is there, but we haven't changed that yet, so that one is still using path.

JASON: Right.

MARCY: Frontend masters one is the only one that's oh, wait. Testing accessibility. Nope, that was cached. Yeah, the featured content is not working now.

JASON: Okay.

MARCY: I guess my home module is gone also. There was the feature pages and then there was also content being I think the way it created the collection of content

It was pulling that stuff in?

MARCY: I'm not as concerned about that. We can figure that out later, but we're missing all of the features now.

JASON: Let's figure out what's going on here by perhaps oh, oh, oh. I know why. It's because the slug is special in Astro and it gets changed to the ID. Do feature dot ID. And you don't need the slug.

MARCY: Okay.

JASON: And the reason for this is by default is Astro will use the file name as the slug. You can specifically override if you want to, which in this case you do because you don't want the slash features, which will be included in the generated slug.

MARCY: So, there is a warning here from the router that says a get static paths route pattern was matched, but no matching static path was found for requested path testing accessibility. What does that mean?

JASON: That means that we're doing something wrong. Let's try this. Delete the slug entirely. Let's see what it generates.

MARCY: Okay. From the content?

JASON: From the frontend masters one or whichever one we were editing, testing accessibility.

MARCY: I think I might have mixed up which ones I was working on.

JASON: Was it the frontend masters one?

MARCY: I think I was doing both. Oh, here.

JASON: Let's just get rid of that entirely.

MARCY: Okay.

JASON: And let's

MARCY: Possible dynamic routes being matched. It is not working.

JASON: Let's try logging what's coming out of the features to see if it's giving us something weird.

MARCY: Okay.

JASON: And that was in your slug page where that was happening.

MARCY: Oh, yeah. See, I get so confused in here.

JASON: Yeah. This is like building your your ink your instincts about a framework, it's just such a pain. You'll have to map that a little bit to be able to log it.

MARCY: Oh, wait. How am I going to I'm mapping. I'm returning

JASON: I think you just have to change that from parentheses to curly braces and then return.

MARCY: Yes.

JASON: And then you just go along before.

MARCY: I didn't get my closing.

JASON: Yeah, one extra. There you go.

MARCY: It's not reformatting everything all perfect, which you really get used to that.

JASON: You really, really do.

MARCY: Adjust your spaces. Oh, man. My day job I have prettier. I need to get it running on this setup too.

JASON: Let's just see what comes out here.

MARCY: Okay. It is running. It's got the content, so here's the collection. Testing accessibility. What are we looking for?

JASON: Well, the fact that it came out and it came out as the ID, right, was testing accessibility?

MARCY: Yes. ID.

JASON: Okay.

MARCY: What do the other ones look like? IDs, smashing book 6.

JASON: Do you see in the data we've got the path, which is

MARCY: Yeah, I didn't delete that one out of the content. That's still in the front matter of another page.

JASON: Yeah.

MARCY: For the one that we have been looking at, there is no path or slug in here anymore.

JASON: Okay. Let's look at what it's generating. Instead of logging what comes in, let's log what goes out to throw it into a variable.

MARCY: Okay. I've got the result. Say console log result. And then I'm going to return that result.

JASON: Yeah.

MARCY: Go down here. We've got params path ID.

JASON: Is testing accessibility oh, wait, wait, wait. Hold on. Why is it params path? Go to the next one up.

MARCY: They all get that, I guess, because that's part of here. We're creating params path. That's this.

JASON: Oh, okay. That needs to be slug.

MARCY: Okay.

JASON: Because the param is what the file name looks for, the dot dot dot slug.

MARCY: Oh, well, there you go.

JASON: All right. Great, great, great.

MARCY: See if my home page my home page module is still gone. I don't even know how that was wired up anymore, but the images are still not

JASON: Let's look at what the path is on it.

MARCY: It's not doing the conversion to the Astro directory like the it's just so weird that it was working on the posts but not on these features. What's with that?

JASON: Let's just double check that the paths are there again.

MARCY: Yes. So, we are in source content features testing accessibility, which has its images right next to it, so it should be.

JASON: Testing accessibility banner at 2X.

MARCY: Yes.

JASON: Okay.

MARCY: And there's different pixel density images.

JASON: Just to double check, that path is exactly the same? It should be.

MARCY: Yes. I will copy the path and double check. If we are in this file, it's relative to the folder that the post itself is in. And I can see it right here next to it. We've moved these images into the same directory. Why are they not being converted? It's strange.

JASON: Is this frontend masters one doing anything, just to double check?

MARCY: Good question. The page is still loading. I think it still has a slug or a path in it on the front matter.

JASON: Which is fine.

MARCY: But we're not really using that. The nullish coalescing is pointing it to there, but the content part is being it's pulling out the slug now. This image is still this is the one that's the Marcy 4 image.

JASON: Yeah.

MARCY: This is kind of showing the same problem, whether it is a post in a directory whether it is in a frontend masters directory with an index file. It's doing the same thing.

JASON: Right.

MARCY: That experiment didn't seem to change anything.

JASON: So, let's go back to this one here and let's just update that to the absolute path. Go from slash source and build the path straight in with no leading dot.

MARCY: Oh, root.

JASON: Yeah, yeah, yeah. We're at features slash testing accessibility.

MARCY: Yeah.

JASON: Okay. If you hover over that, that image works. Let's see if Astro picked it up.

MARCY: I might restart. What page oh, I was in testing accessibility.

JASON: That's working. Is it coming out of the Astro folder though?

MARCY: Nope. And I wonder if when this got deployed if we'd be back to where I started where the path might not be right because Astro is not processing it.

JASON: Yeah, that's exactly what I'm worried about is that is what's happening. The thing I want to figure out is why let's check on your posts one more time. That one's working.

MARCY: Yeah. Why is that one working? It's so weird. I'm curious if posts are handled we're setting up the config with very specific names of things, like posts, features. I would be surprised if it was something automatic.

JASON: It shouldn't be. The content collection shouldn't do that at all, so let's double check let's look at the config one more time just to make sure. In the content config, we are using the same glob pattern for pulling in source content posts. We're pulling in source content features. Cover image is image that's all being pulled in. Yeah, that's all doing exactly what we would expect.

MARCY: How does content come in? Like this is getting I guess the loader is what's grabbing the markdown.

JASON: Right. And since they're all being pulled in in the same way, it feels safe to assume they would be processed in the same way, so let's look at how they're being exported just to make sure nothing weird's going on, just at the bottom of the file here.

MARCY: They all have the same name. Then my next step would be to go to look at the slug and see.

JASON: Yeah.

MARCY: We have posts, features, talks. The names are all right. Posts is the part that's working. For this one, we've got params slug format this a little bit so we can compare. Why are you commenting that out? (Laughter). I hit return. It's commenting stuff out. That's bizarre. I guess that does that function. Here we've got params slug. Yeah, weird my VS Code is auto highlighting stuff for some reason. We've got params slug, props. Oh, props is am I dreaming or is this inside of is params and props not inside the same object? What am I looking at here?

JASON: Oh, yep.

MARCY: Is it the same? They look the same.

JASON: They should be the same, and it should yell at you if they're not.

MARCY: Yes.

JASON: I think that's absolutely what would have caused that problem.

MARCY: Type feature, type post.

JASON: Type feature, type post. Head down. Is there anything in the type that's changing what's being rendered if we scroll down a little bit?

MARCY: Post, feature, talk, that's the type. Posts, features, talks.

JASON: And we're not processing the content or anything, are we? Keep scrolling down.

MARCY: I don't believe so. It adds dynamic class names depending on what type of content you're on because they have slightly different sidebar contents.

JASON: Uh huh.

MARCY: I don't think there's anything going on. Oh, here's agates here's a Gatsby artifact. That's the feature we talked about in our interview portion. Because we don't have client side routing anymore, I invented this client side routing approach in Gatsby. That's going to go away. This is an artifact of the old site. Kind of fun walk down memory lane here.

JASON: Okay. But the content is being rendering universally.

MARCY: Pretty simply. Uh huh.

JASON: Okay. So, there is no reason path name. Your base layout is not doing anything what's going on with your

MARCY: That would be ID. Like that? I don't know if that would make a difference.

JASON: That really shouldn't. I don't know what it would be doing.

MARCY: Hmm. Kind of a stumper. I might need to speaking of tinkering, I might need to go tinker with this some more. I'm looking very carefully at this path replace.

JASON: Right. And I mean all this replace is doing is taking off the leading slash, which is kind of in a perfect world we wouldn't have those, but that's okay.

MARCY: Uh huh, yeah.

JASON: And the nice thing is in the future, if you kind of migrate everything over to use the slug instead of the path, it will turn into that ID for you and it will yell if you don't have one so you don't have to do those replacements.

MARCY: Uh huh, yeah. And I would do that cleanup work. Because everybody bit because every bit of code like this that you're maintaining, you have to chase stuff down.
I think my next steps will be go through all the content, make sure they all have the same slug, get rid of some of this fancy path manipulation and just go with the slug and ID. See if the posts still work. Then just try to see what the differences are at that point.

JASON: Yeah. And maybe just try for the sake of chaos agent testing throw the features into the posts and see if they're still wrong.

MARCY: Oh, yeah.

JASON: And then pull them back out, right?

MARCY: Uh huh.

JASON: The thing that seems weird to me it is the PNG. Yeah. All of this is doing what I would expect it to do. The pieces where I would go from here knowing we're at time is I would be looking at

MARCY: Oh.

JASON: Wait, no. That's the absolute URL.

MARCY: That's right.

JASON: The things that I'm wondering about here is the processing should be getting picked up and working with files relative to the markdown. And if that's not happening, it points to something strange going on.

MARCY: Uh huh.

JASON: Right. And that probably doesn't fix it because that's where we were before.

MARCY: Yeah. That's the hard part. You work on it. You build this context, and then you put it down and come back to it a week later. Wait, where am I at? That's where we started on this session, but I learned a lot more about Astro (Laughter).

JASON: My immediate hunch here is there's something goofy going on with the thing that we can do is Astro will pull from any folder, so you don't need them nested in content anymore. You can actually pull them up. You'll just need to adjust your paths.

MARCY: Yep.

JASON: You can yeah, fuzzy is saying move them. One of the main goals we're going for here is to not have to move all the files. We want to be able to use them where they are.

MARCY: Yeah.

JASON: And Astro should and claims to do that. So, the problem isn't yeah. And using the Astro image would be porting all this to MBX. The ideal is Astro will process markdown images in place. That's in the docs. That's in how it claims to work. Unless we've found a bug, this should work. Right? The fact it is working in posts and not in features leads to probably some weird config thing that's going wrong or potentially a strange bug.

MARCY: Yeah.

JASON: The things that I would start testing would be drag them into post. Make sure it's not, oh, we absolutely missed this whole file was broken to begin with. The other things I would test would be are there did we do something with maybe the features is doing something weird to rename the folder. I would start chaos engineering that way.

MARCY: I think it's just that post that's working. Now that I compare. This first one is working for some reason. That tells me that maybe that image lives somewhere else than the rest of the content.

JASON: Did you find anywhere else in your file tree? If you look for that image name.

MARCY: Yeah, what is this one called? Yeah, what is that one called? I might just poke around and look at the other content. I think I figured out there's something else going on here. Hero lawsuit. I guess I need to look here. There's one in source content posts. That's the only one. But yeah, that's what I'll do. Go compare. What's working, what's not, why is that one working. I think there's something there, and it gives me hope. I have one that works.

JASON: Yeah. Something's definitely goofy here. And then you've got an offer. Fuzzy was on the Astro team and is willing to take a look if you want.

MARCY: Cool.

JASON: Yeah. I can also I feel like there's something I feel like it's going to be something simple. When we find it, we're all going to go oh, my God.

MARCY: I know, I know.

JASON: Since we're out of time, I think we're going to wrap it here. This is public. Do you want to drop a link in the private chat and I can relay it?

MARCY: Sure. I'll probably stop sharing for now.

JASON: I'll move us back to the two up here.

MARCY: Yeah, I have to get back to work.

JASON: I know, I know. We've got to do the thing. I'm going to drop this link for anybody who wants to take a look, and we will figure this out. Just keep an eye. If you want to see how this resolves, keep an eye on the commit history in Marcy's site for when we get this thing sorted. Marcy, thank you so much for honestly being super vulnerable with your code here. I appreciate you taking the time to join us today.

MARCY: Yeah, absolutely. Thank you. I will push up my commits because I think I have stuff locally that isn't in the live site, but yeah, thanks to everyone for chiming in. I was not watching the chat, so I'm sure there was some great insights because you have such a great audience that follows along.
I so appreciate getting to spend time with you, Jason. It's kind of fun to do a personal project and not my day job kind of thing.

JASON: I really appreciate you being here. Thank you so much. Everybody go you can follow Marcy on what will eventually be a Gatsby site at MarcySutton.com.

MARCY: An Astro site.

JASON: That's what I meant. It's currently a Gatsby site. It will be an Astro site. Like the video. Subscribe to the channel. Share it with your friends. It really helps us in ways that it shouldn't, but it does. Leave a comment. Thank you so much for watching. We will see you next time.

MARCY: See ya.