Webmention + Next.js

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 another episode of Learn with Jason. Today, on the show, we have Monica Powell. Monica, thank you so much for taking the time to join us today.

Monica: Thank you for having me.

Jason: I'm so excited to have you on. You're a regular member of the Party Corgi Discord, which is one of my favorite places in the whole world. You have been such a helpful voice there.
Oh, are you okay? (Laughter).

Monica: Yeah, my web cam is strange.

Jason: I actually thought you just fell out of your chair, which was like oh, my god.

Monica: Oh, no. I'm trying to figure out how to make it more firm. Um...

Jason: Okay.

Monica: I don't know if I can just switch my camera. Let me see.

Jason: I think you're good now, right?

Monica: Okay. I hope so (Laughter). I hope so. Okay. Let me switch my camera.

Jason: Okay. And while you do that, I'm going to just gush about you for a little bit. So, yeah, Monica has been just a prolific teacher, like tons of stuff on customizing GitHub profiles, getting involved with Gatsby. You're teaching a workshop on Gatsby at the Jamstack Conf next week. For those of us who are not familiar with your work, do you want to share a little bit about your background and what you're doing?

Monica: Yes. So, I am a web developer. I mostly work within the React ecosystem. During normal times, I run a meet-up for nonbinary React developers in New York, and like Jason mentioned, I have become more active in the Party Corgi community. In 2020 times, it hasn't been so recent, but in March, maybe, March or April, I found out about the Party Corgi community through Jason's website and joined it, and I have been having fun being able to connect with other content creators, especially people who are also in the web development space. And then I recently started working at Newsela as a software engineer, building educational technology. So that's a bit about me.

Jason: Yeah, and that's -- I mean, it's so cool to see how just like -- the meet-ups that are happening and the educational stuff that's happening, it's really cool to see how that's moving online. Like, I wish it was under better circumstances.

Monica: Definitely.

Jason: But kind of seeing how people are adapting and building online communities, when there's not an option to have an in-person community, has been really cool. And I feel like, you know, Party Corgi is such a great example of that, of creating a community that we want to have, not the kind of -- I feel like a lot of online communities are stressful, because you don't know if what you say is going to get taken the right way or if somebody is going to come after you and "well, actually" you for something. One of the things that I love about Party Corgi is we have done a good job of building a community of people who are just supportive and caring, and we hold each other to a standard, but not in a sense that's like I'm going to show you how smart I am. And it makes me so happy.
But, anyways, that's neither here nor there. We'll drop a link, I think, so that people can join if they want. What is it? It's Discord -- there it is. So, there's a link to join us in the Discord, if you want.
So, that's not what we are talking about today though. We wanted to talk about Webmention, and so Webmention is one of those things that I have heard the name, and I have seen it around, but I'm not like super familiar with it. So, could you kind of give an overview of what it is?

Monica: Yes. So, I would say like on a high level, webmentions are kind of like having a conferencing system where you can aggregate comments from across the web. So, if you have a blog, you can use Webmention so that if someone is treating about your blog post or sharing it on GitHub or Reddit, like, you can actually aggregate all of those comments in one place, and so a lot of that or I guess all of it is powered by -- within the IndieWeb, there's specific specifications as to how does a website accept webmentions, how can we send webmentions to a website, so it's a matter of actually following those specifications and being able to get all of the information centralized in one place.

Jason: Cool, very cool. And so the way that we are going to do that today is we are going to -- we are going to built a Next site, and then we are going to set up Webmention on that.
So, what's -- I guess like what has you excited about Next as a platform? What makes you want to choose that as a way to start?

Monica: So, I would say a lot of the work that I have done, I guess within React, actually has been within Gatsby or different like customer server-side rendered React frameworks. So, I'm really excited about Next because a lot of I guess business problems that companies may have, in terms of being able to render websites fast and have more flexibility in terms of how it works, in terms of server-side rendering, Next seems to be a great solution. They have a conference coming up in a few weeks, and something cool that they did is as soon as you registered, you can authenticate with your GitHub, and you get a ticket, and you can share a link to tell your friends to sign up for the conference, and they will see your face in the meta data and ticket number, which I thought was a cool use of how they can do on demand site generation. Those are some of the things that I'm excited about with Next. It seems to have more flexibility on the server side for React development.

Jason: Cool. With that, I'm excited to get right into it. So let's switch over into pairing mode, and I'm going to Zoom out a little bit, so I'm not quite such a giant floating head right now, and let's talk about -- first of all, let's get you to -- like everybody go follow Monica, like right now, waterproofheart on Twitter. And let's do a quick shout-out to our sponsors. The show today is being live captioned by White Coat Captioning. We have got Mike in the call with us, doing this, so, thank you so much, Mike.
This is made possible through the generous contributions of Netlify, Fauna Sanity, and Auth0, who all kick in to make this show more accessible to more people in the development community, which warms my heart, and I'm really grateful to be in a position where someone is willing to sponsor the show. So make sure, if you want to see those captions, you can see them at lwj.dev/live.
With that, we are going to be working with Webmention. So, here's the Webmention site, Webmention.io, but I guess maybe before we get to Webmention, we should just maybe build a site that we can use.

Monica: Sounds good.

Jason: Do you have a particular site, a starter that I should use? Or do you want to just kind of let it rip from scratch?

Monica: Maybe if we could find a Next starter that has a blog component. I am not sure, for like ndnext, I am not sure if they have a blog version, but I would say something with a blog would be most suitable for Webmention.

Jason: Look, Cassidy built one for us. Maybe we can just use this one, because Cassidy has it already set up. It looks like it's got a few posts in it. Perfect. We'll use this one from Cassidy because I have seen this one before and I know it works. Actually, let's just look at the demo and make sure that this is what we want.
Does this look -- and we'll be able to kind of add the webmentions down here?

Monica: Yes. I guess the only thing -- yeah, actually, no, yeah, that should be fine. Yeah, that should be good.

Jason: Okay. Cool. Cool, cool. All right. So let's do that then.
I'm just going to use this handy-dandy deploy to Netlify button. So I'm going to connect to my GitHub. I'm probably going to need to do this off-screen. All right.
And -- okay. I thought I was logged in on this browser, but alas... let's see.
Oh, come on. All right. Let me get out my phone (Laughter), and GitHub is where?
Cool. So, this should kind of auto deploy for us. It's going to create a new repo that we can grab, and that repo is here. So, that is the clone of the repo, and the reason that there's nothing in it just yet is that it's going to build first, and then it will kind of push everything, which is kind of a, you know, it is what it is. It confused me the first time that it happened, but it makes sense, kind of you don't want to push junk and then have a failed build, so it just runs through the whole process first.

Monica: I wasn't sure what the order of operations was when you press the Netlify button.

Jason: I'm still not a hundred percent sure of the exact order of operations, but as far as I can tell, it grabs the code from the repo, starts a build, creates an empty repo, and once the build finishes, it puts the code there. Here's our site, so we can go look at this. Here it is. All good. And if we refresh the page here, here's all of our code, which means that out here, I can git clone this repo, and then we'll get into it, and now we should have all of our code. So we can add the Webmention stuff to this.

Monica: Nice.

Jason: And let me just MPM install so that we'll have that all ready when it is time.
Okay. So we have a basic blog. What would you like to do next?

Monica: So, one of the first steps, if you're adding webmentions, for like Webmention.io, you have to claim your website in a sense and set it up so that it can actually accept -- so that they can actually accept webmentions on your behalf.

Jason: Okay.

Monica: So, we should update the markup for the website so that Webmention recognizes it. So, one of the ways that it does that is you can add a REL tag or attribute to your HTML, for like a Twitter link, so you'll want to have some type of link on the website that's linking to whatever Twitter account you want to use to pull in the webmentions.

Jason: Okay.

Monica: So let me find, I guess, an example. I think this is from their documents. This is a random person.

Jason: So, on the Webmention.io, it looks like they have got a couple of link tags that we can use.

Monica: Yeah. So, those links that are right there, you actually will use after you officially create your Webmention account.

Jason: Oh, okay.

Monica: But I mean you could probably guess the username. Like, on there, they are saying it's most likely your domain, but they don't actually create the username until after you update your website with the markup, and then log in, and then once you log in, you would technically have a username assigned to you, but it should be the domain name.

Jason: Okay. All right. So --

Monica: And yeah, somewhere on the website, maybe like on the home page -- or on the home page, you want to have some type of A link to your website or to your Twitter with that REL attribute, which has what I had said earlier, which is needed for it to recognize you as the owner.

Jason: Okay. And it doesn't need any metadata? It could just be any link to the --

Monica: So I think that the link should be to -- yeah, the link should be to your Twitter account that is going to have a link back to your website.

Jason: Okay.

Monica: So it kind of has to be like a two-way opt in.

Jason: Got it. Oh, okay. So it looks like here the way he's doing it is he's got a link to his Twitter with a REL of "me." Is the REL me part of it?

Monica: Yes, and the more providers that you have,the more that are going to be able to interact with webmentions. I just started with Twitter, because that's I think the easiest to get engagement on, but there are other options as well.

Jason: Got it. Okay. So I guess what I can do in here is I'll have a -- we'll just put a link to Twitter, and we'll put a REL of me, and we'll say Twitter, and then if I run this... then hopefully it's just going to work first try, no changes required (Laughter).

Monica: Hopefully (Laughter). I don't know if we want to add in that -- well, do we -- I guess we don't know the domain name yet.

Jason: We do know the -- oh, you mean the Webmention one?

Monica: Yeah, or like what's the -- when we push it or like publish this code, like what domain is it going to live on?

Jason: It's going to live on Next Netlify -- sorry, that's not it. Next-Netlify-Webmention.Netlify.app.

Monica: I don't know if we want to do that preemptively or just wait.

Jason: Let's do it one step at a time and see how the dots connect here because I'm still trying to get my head around how exactly all of this works. I currently say -- I own my Twitter, and I do that by -- let me dock this again. Here we go. So, I'm going to click here, and we can see that I have added the REL me to specify that I own it. So then when I publish this, when I tell Webmention to look at my site, it's going to know that like I have said my Twitter account is who I am. Like, I'm basically providing identity by publishing code.

Monica: Uh-huh, yes.

Jason: Okay. Okay. So let's get that published.

Monica: Uh-huh.

Jason: We'll say feature: add Twitter link. And then we can push that up, and I'm going to use the Netlify CLI to open the dashboard.
Let me link it. Use the git remote origin, so it just goes on the site there, so now I can open it.
Oh, no. Okay, whatever. We already had it open.
So, if I look at my deploys, the site is building. And I should probably add this is an episode about optimizing Next build times, but we do have a cache plug in for Next that will make that faster, but it's still pretty quick, because it's a nice small site, so we have got a Twitter link now.

Monica: Okay, yes, nice. So now I would try to log into Webmention, so it's going to prompt you to authenticate with your Twitter account. Well, first you put in a domain name.

Jason: Ah cool. Okay. And this -- okay. So this is Twitter. It'll probably remember me on this browser. Oh, cool. Okay. So, I need to link to this in my Twitter profile.

Monica: Yes. So that's what I was talking about earlier, about there being like this double opt-in. So, on your website, you recognize that that Twitter profile is associated with you, but then the Twitter profile also has to associate itself with the website.

Jason: Got it, okay. So if I edit my profile and I change my website, and then I go back here, and we are going to put this one back in, go to Twitter, come back -- hey, hey! Look at that! Okay.
So, I'm logged in.

Monica: Uh-huh.

Jason: Oh, do I need to go back to Webmention then?

Monica: Yeah, go to Webmention.io. It redirects there for some reason. Interesting. Okay. It's in beta. Okay. Now we have the username. So, adding this to the head of the website should allow us to start accepting webmentions and pingbacks. I actually haven't really used pingbacks, but the markup for both of them is there.

Jason: Okay. All right. So let's go in and we'll add this. Where does -- okay. So here's the head.

Monica: Okay, yeah. I was wondering if there was like an SEO component, but that works.

Jason: So we'll just drop these right in, and then -- whoops. Oh, no. Here. All right. So, we have got our components, so I'm going to git add everything, and then we'll commit and say feature: add Webmention meta tags.

Monica: Uh-huh.

Jason: And we'll get that pushed up. Okay. So, that's going to rebuild.

Monica: Uh-huh.

Jason: Nice. And so -- so what we are doing here, if I can repeat this back, and you can tell me if I'm wrong, is what -- so, what we have just done is we have asserted ownership over our website by linking to a Twitter profile that we own.

Monica: Yes.

Jason: And we have asserted ownership over Twitter by linking to it from the domain. So, it's basically, without having to do authentication, we can prove that we own both things by editing both of them to point at each other.

Monica: Yes.

Jason: That is really clever.

Monica: Uh-huh, yeah. When I was first starting with webmentions, I didn't like read the instructions (Laughter), so it took me a while to like figure that out. But, yeah, once I like understood, it was like, oh, okay.

Jason: Yeah. Yeah, yeah. Okay. So this is really interesting.
So, so then what that means is that, theoretically speaking now, if someone links to one of these posts on Twitter, Webmention will pick that up? Or do we have to do something else?

Monica: So, there is another step.

Jason: Okay.

Monica: So there is -- so, this is on the IndieWeb, so things are I would say a little spread out.

Jason: Okay.

Monica: There's another website called Bridgy that will let you actually collect the webmentions from different social media websites. So, with Webmention.io, you're getting a URL that you can send like webmentions to.

Jason: Okay.

Monica: But in order -- like Twitter isn't going to send webmentions to your website automatically, so Bridgy will allow you to automatically like send on a schedule webmentions from another website over to your Webmention URL. If someone had like a website where they were sending webmentions, they could send it directly to your URL without having to go through Bridgy, but in order to like coalesce these different social media things into Webmention, you have to use Bridgy.

Jason: So Bridgy is basically hooking into these APIs to just relay stuff over?

Monica: Yeah, my understanding from Bridgy is that they will do like a fetch, like after, I don't know, 15 minutes or however long of Twitter and search for your domain.

Jason: Gotcha.

Monica: And then if they found anything, they will send it over to your Webmention URL.

Jason: Okay. That's very cool. Okay. So then it looks like here, I just click Twitter, and I guess we'll see what happens when I do that. I can see tweets from my timeline, see Twitter profile information, see accounts. Okay. That all seems to make sense.
My website is this one. I didn't get the -- okay, cool.
What do you mean it doesn't look like my website?

Monica: No... okay. I wonder why -- does it have any more information?

Jason: Maybe I needed to do a thing first?

Monica: Should we check to make sure -- well, I don't think that the markup we just added should make a difference. I don't know if we should check to make sure that that markup is added to the head of the website, but it should have deployed.

Jason: I guess we can figure it out pretty quick, right? So we can go here, look at the head. So, here is our link.

Monica: Uh-huh.

Jason: To we have to connect Webmention to Bridgy?

Monica: I believe it should just be through your Twitter. Hm...

Jason: That link is set up.

Monica: Let me see. We have that help page. Hm.

Jason: Let's see. Let's see here. I can't find --

Monica: Because it was saying it didn't think that was your website?

Jason: Yeah... where do you say -- listening for responses, but listening for responses from where?

Monica: So, [ off mic ] from Twitter. So I guess whenever you get a mention, it would show up here, and then also if someone mentions -- if someone actually uses the website on Twitter, then that would also show up here. Something that I have done in the past is you can manually like -- they had an option where you can manually resend a tweet, if you want to like test that it's actually showing up on webmentions.

Jason: I'm still so confused by why this doesn't see this post. Like it's definitely there.

Monica: Uh-huh.

Jason: Our header still has -- yeah, it still has the link. So, what do you want?

Monica: How did you get to the other page where -- the other page, where it seemed like you were able to log in successfully?

Jason: Yeah, right? So it shows me that I'm set up here. So, let's go to the dashboard.

Monica: So, this is where if you started getting webmentions from Bridgy, they should show up here.

Jason: Hm...
So, I guess we could like -- we could just try to send one of these and see what happens.

Monica: Yes.

Jason: Okay. Let's just try it. Let's open Postman and see if we can send a Webmention.

Monica: Okay. Yeah. So, getting webmentions from Bridgy is one way to get them, if you want to flow it from social media. But anyone can send a Webmention, if they know the URL.

Jason: Cool. Cool, cool. Okay. Sorry. I just realized that I had some stuff in there that I wasn't sure should be seen. So I just needed to clear that out real quick. And then let's go put this here, and we'll drop in a post like this. This is going to be JSON data, and then we need to post it to this one?

Monica: Let me -- I am not sure which --

Jason: Oh, using the API. So, we get -- we don't want to get. We want to post a Webmention.

Monica: Uh-huh, yes.

Jason: Sorting page, finding... back -- I don't want a pingback. Ruby 2.0 woes (Laughter).
Okay. So, not a hundred percent clear. It kind of seems like -- so, that's read only, so that won't help. They can be queried. "You can add the following tags to any website to accept webmentions.)

Monica: So we just want to be able to manually send a webmention.

Jason: Right, and to do that, maybe we can -- this is a rabbit hole, right, looking in their code? Maybe we can -- oh, that's not going to be it.
How do you just send stuff?
Webmention, that seems like it might be worth looking at.

Monica: Uh-huh.

Jason: Oh, there's a spec too that we metabolite use.
So, publish webmention. Hm. Let's look at the spec. We are going to figure this out.

Monica: Uh-huh.

Jason: It feels -- it's always when you try to do something live that you hit this.

Monica: It's like, what is happening --

Jason: Publishing software. Manual, that's what we want.

Monica: Uh-huh.

Jason: Whatever, that's probably easier. Oh, jeez. That one is a little bit rough. Oh, sending with cURL. So that's what we wanted. So, finding the target's webmention point. This may be in the HTML with REL webmention. I think that's right. So we are looking for REL webmention.

Monica: Yes.

Jason: All right. Now, we are going to send the source and the target to the end point.

Monica: Uh-huh.

Jason: All right. We can do that. So we are going to send it here, and we are sending it as... post? Data, yeah, we are sending it as post, and target and source.

Monica: So, those are URLs?

Jason: Yeah, so this is -- it's like source URL, target URL, and then the end point is the webmention URL, and so I think what that's going to mean in this case is source and target, so we might be able to actually get away from a lot of this and just use swarm data, and then we'll be able to do source and target. Okay. So then we can say that the target is this post, and the source will be, I don't know, we'll just make it my website and we'll see what happens.

Monica: Okay.

Jason: Do we need to send anything else? Or can we just like -- let's see if it lets us.

Monica: I'm curious to see what happens. I actually haven't done the manually sending requests out. Someone asked if it's possible it has to be http://instead of https://.

Jason: Oh, that would be wild. I would be very concerned if that was the case, but it's certainly possible. Let's see, on my dashboard, did I get anything?

Monica: Okay. So webmention was queued for processing.

Jason: Yeah, right? It makes it seem like it worked. The location, I probably don't need to actually follow that. I can probably link to it here.

Monica: Uh-huh.

Jason: Invalid content. Okay. That's fine, but at least it got here, right? So, that seems reasonable. Did not return a recognized content type. Okay, that's fair. But so I wonder, is this like a caching issue?
Like, maybe it just needed some time? Let's try it with just http://and see what happens.

Monica: Okay.

Jason: I wish it would tell me what it meant, like, why doesn't it look like my website? What do I need to add?

Monica: Well, I think that's just -- Bridgy is saying it doesn't seem like your website. Webmention agrees that it's your website.

Jason: Uh-huh, and there's no like -- Go to the front page to sign off. Okay. How does it work -- check social networks.

Jason: Thank you for the sub, Jordan. Good to see you.
So, microformats, open source -- yeah, but how? (Laughter).

Monica: Interesting. Someone else mentioned maybe checking to see if there's more information in the console.

Jason: Oh, that's a good idea. Let's find out. So I'm going to go to Bridgy. I'm going to try to connect this thing. I'm authorizing Twitter. And I'm going to paste this in, and let's open up the network tab, and let's see what happens.
Oh, it's filtered down. What the... did anything happen?

Monica: Hm...

Jason: Oh, I need to preserve log. Let's try that again.

Monica: Okay.

Jason: And we got to --

Monica: How is this 200?

Jason: I'm just trying to figure out -- that is a document redirect. I think this might be a server side thing. I don't know that it's going to give us anything on the client side.

Monica: Okay. Hm. Should we try it without any http -- well, in the [ off mic ] it had http, so I guess it doesn't matter. In the protocol, it should be fine.

Jason: Do my posts really need to link to my website? "If your social network profile has a link to your website..." "Include u-URL and u-syndication."

Monica: URL markup --

Jason: I must have done part of a webmention setup at one point. Maybe I'll try logging in with the like LWJ account or something. Let me just log out, if I can figure out how to do that.
All right. And then I'm going to log in with a different user.

Monica: Okay.

Jason: Okay. And let's try editing this one. Okay. And then we'll go to Webmention, and we need to change our --

Monica: Right now, the website is still linking to the other Twitter account.

Jason: Uh-huh. Okay, so we can --

Monica: Although I don't know if that's going to mess up your username there.

Jason: It shouldn't mess up the username, I hope, but I guess let's --

Monica: Yeah, we'll see once it's open, and then we can check the Webmention.io.

Jason: Oh, and Linda says on Twitter, it's showing the site without the http or the ending slash.

Monica: So, do we want to try again before publishing any changes?

Jason: Yeah, let's try one more time. So we'll put the site in, and I'm just going to straight-up leave that off. We'll see what happens. Please enter URL...
This does not look like your website.

Monica: Oh, man, Bridgy!

Jason: Is it cached? Is something -- I wish it would show me what it was looking for.
But, yeah, let's log out here, if I can, and then let's log back in.

Monica: Okay. And it will log back in, and we are still not going to see it, because the markup hasn't been -- well, I don't know. It might work on the Bridgy side, but then the Webmention side we have to do some updates. No!

Jason: (Laughter).

Monica: We still have the code pointing to the old Twitter account for -- in the code.

Jason: Yeah.

Monica: Because I don't think we pushed out the change.

Jason: Yeah, that's right. We didn't push the change. So, let's fix -- switch Twitter accounts, and then we can push that, and that should build hopefully real quickly.

Monica: Uh-huh.
Adding an atom feed? Oh, boy. I hope I don't have to add an atom feed. That will be a bummer.

Monica: I didn't have to -- I didn't do all of that when I -- I don't know. But I do think Webmention is kind of finicky. I guess you have to do things in a very specific way, but, yeah, I also don't know like if it doesn't like the.app. They should be able to handle that.

Jason: It would be kind of wild if it couldn't handle a .app. As Nikki said, regular expressions are hard, so there is definitely a chance that, you know, there's just something going on here that it isn't going to work. But let's try this one more time.
Ooh... okay.
What if -- what if we -- let's see. I mean, I guess maybe we could try a different site, like -- because this one is a.com. It's got a blog. I might even have -- let's look. I may have already done some of this. So, let's see. Did I add Webmention stuff in here? I don't see any.

Monica: Can we search [ off mic ] thing or Webmention, in case there's something in there?

Jason: I don't see anything in there. It doesn't mean that it doesn't necessarily get added on the fly. So, can I search in here if I edit as HTML? Like...
Okay. So we don't have any Webmention stuff for the source of this site. This site takes way too long to build.
Sheesh. Okay. So, maybe -- well, so we have got webmentions. We have got webmentions working, in the sense that we are able to at least send them. We don't have the right format for them. We have got to add some extra stuff. But --

Monica: Yes.

Jason: In the sense that we are able to at least like hit this, and it gets accepted, and Webmention recognizes that it was a post, that part work. So, the part that we are missing is the part that syndicates Twitter over, and I'm wondering if maybe there's a service other than Bridgy that might work.

Monica: I mean, we can look. Bridgy is something that I have come across, but there potentially could be something, an alternative.

Jason: Yeah. Let's see if we can find -- I feel like I saw a list that had Bridgy in it.
If a u-URL is present at the source -- yeah, but that part is not really necessary. So, they are sending stuff. These are all examples, right? Okay. So we don't need a bunch of examples.
Publishing software. What about some of these?

Monica: Okay.

Jason: Any of you work with Twitter? Bridgy publish, none of the other ones show up for Twitter.

Monica: Oh, no.

Jason: Bridgy! In the spec docs, yeah, I mean, so this is the part that's hard, right? Are we going to reverse engineer Bridgy to figure out what it's looking for? Because I feel like what we are really missing here, like, this is such a good case for why you need to write good error messages, because if Bridgy told us what it needed, we could go solve this problem. Because it just fails with a "we don't believe you," it's like, all right, but, why?

Monica: I know before, we had a more helpful error from Webmention, like, we expected this domain but received this domain.

Jason: Right. That was a perfect error message, because it told us exactly what to do. I feel like that's exactly it. Error is erroneous (Laughter).

Monica: (Laughter) Yeah. I mean, I am not sure if it's like a caching issue, if something is missing. I had done like a basic tech run yesterday, and I didn't have to do -- I didn't have to do all that much. So I am not sure why Bridgy is complaining.

Jason: Okay. Can you show me though like what you think you see? Because that's the part that's bugging me, is it doesn't show what the --

Monica: Yeah.

Jason: Hm. Because we definitely did that, right? Like -- and it's probably getting, you know, Twitter -- yeah. So it gets Twitter shortened, and then they put this in there.

Monica: How interesting.

Jason: All right. Let's try this. I'm going to buy a domain name, and let's see if a dot com works, because it really could be that it's missing -- like, it can't handle the dot app. So, let's add a domain. We'll go to site settings, domain management. Let's get a common domain, and we'll call this next Netlify webmention.com. It is available. Okay. So it's going to do domain stuff for us, and this will take a minute, because, you know, everything just has to get set up. This is like are things timing out? Or are things -- yeah, waiting on DNS propagation, verify. Okay. So, now, theoretically speaking, we should be able to hit this domain.

Monica: Okay. So do we know right now what Twitter account it's pointing at? Oh, is it still provisioning?

Jason: Yeah, we are still waiting on the certificate to finish. (Cheesy hold music playing.)
Come on... don't you lie to me! So, this is one of those things that like where you start to realize how many layers of things have to work for the internet to be functional, because it's like, okay, so you're buying a domain name, but the domain name needs a certificate. The certificate comes from let's encrypt. The domain name comes from Netlify's domain partner. Netlify is trying to read all of that. On top of that, you have got the local name servers, you have got the internet like DNS registry, and then you have got all of the various caching layers in between, and it's like, hm, something is going to break. Oh, no, Webmention app had a -- uh-oh, we might have Netlify specific problems. Let's find out.

Monica: So when I was looking at this document, I think that it's just like saying if you want Netlify to rebuild your website whenever you get a new webmention, which is something that I had previously on my website, but then I started to get too many webmentions, so I was burning through my build minutes. But, yeah, you can have it like set up a web host from Netlify so that it always knows like whenever you have new webmentions.

Jason: Got it, okay.

Monica: I think they are saying Webmention app is different than webmention.io, but webmention.io does have something similar in being able to accept web hooks and triggering them when new information comes in.

Jason: Okay. So I have updated it to the insecure site, because who cares, and what I'm going to try to do here is come back. We are authorizing the site.

Monica: Okay.

Jason: And it's working.

Monica: Okay. Okay. So it does not like dot app.

Jason: That's fine. That's totally fine. It would be really, really helpful if they told us what the error was, but that does make sense. So what that means then is if we tweet about this, so, if we take one of these, and we say -- let's go to -- which one am I logged in on? We'll go here, and we'll say, hey, what a great post...
And if anybody else wants to post about this site -- no! Oh, shit. All right. So we are going to delete that. I used the dot app.
Okay. So let's go to the dot com. Where is the dot com? Here's our dot com. I'm going to go to the blog, and I'm going to click on one of these. There it is. We have got a post, oh, and our certificate works now. So it just needed a minute.

Monica: Okay, okay.

Jason: So, now I can go to Twitter.
All right. And I'm going to tweet. And so what should happen then is Bridgy should find that post.

Monica: Yeah. So, Bridgy like I guess checks every now and then, but you can either poll or crawl it now, if you want to have them faster. So -- although, I'm not really -- I don't really remember what the difference is between the polling and the crawling. I guess I don't know if we also want to crawl it.
Oh, it's crawling it now. Okay. And you can also -- yeah, manually -- oh, that's good, website. You'll want to send the actual tweet.

Jason: Oh, I got it. So send this.

Monica: That will make it so it pulls in webmentions for old tweets. One of the first things that I did when I set mine up is pulling whatever I could find in the articles to kind of back fill the webmentions, and in the right-hand corner, it's saying that it sent the webmention to -- oh, interesting. It sent them to Learn with Jason. That's not what I would have expected.

Jason: This is what I was trying to do something a while back, it hooked up with learnwithJason.dev. This is the new one. It looks like it's currently not being sent. It looks like it found this but it hasn't sent it yet. And if we come back over here -- oh, look at this.

Monica: Okay. So we have a webmention. So that -- interesting. But that's from a -- oh, I think this is probably from the API. Like, when we did the cURL thing, is that the request that you sent?

Jason: I bet that this is a pingback.

Monica: Oh, oh, interesting.

Jason: Look at that. Very cool.

Monica: It was able to pull it in from, it looks like maybe, their Twitter? It's going from the website? It pulled it from the website because it's sending webmentions?

Jason: I'll bet what happened is because Sebastian has webmention set up, I'll bet it linked with a pingback. This is the pingback thing that we set up with XML REC -- I'll bet because he published that, it hit this URL, and now we have got this kind of like -- that's really cool. I love that that just worked, right?

Monica: Unlike other things.

Jason: Cool, yeah. Okay. So, cool. Look, and then there's more mentions here -- no, this is the webmention. Okay.

Monica: Isn't it interesting how it has a dot com and a dot app?

Jason: So it worked the whole time.

Monica: For webmention, not Bridgy.

Jason: That makes sense. Hopefully if anybody else tweets, this shows up. It looks like this is sending -- wait, I wouldn't want it to publish.

Monica: Should I tweet something? Did people tweet?

Jason: I am not sure if anybody tweeted. I mean, we can start with this, right? So if I wanted to bring this into my site, then it looked like there was a feed, right? So I can just grab something like this?

Monica: Yeah. So, there's a feed. If you scroll down, there's also like a URL that had a JF2 in it. Is it on there? Wait. I think it's when you're not logged in, it has this documentation, which is annoying. I don't know how you get to it if you're logged in.
But, yeah, so there's a feed, but there's also a way to get that JSON.

Jason: I wonder if I just tell it like -- what is it, accept application JSON. It would be cool if they just let you specify.

Monica: I can send you mine. It's basically your domain name and then the token, which the token on the web page, if you look, it's not a secret. You can make it a secret if you want, but it's basically like someone -- if they have it, they will be able to read your webmentions, but they won't be able to like delete them or anything.
So the structure is --

Jason: So, I just grab out like this part?

Monica: Yeah.

Jason: Just the regular domain name? So, let's drop this in.

Monica: And then the token would be specific to you.

Jason: Okay. So I'll grab that out of the Webmention page, which is here, and this is a read-only token.

Monica: Yes, and then on that page, it also has a disclaimer about how it's not really a secret. So, that will get you back to JSON, representation of your webmention.

Jason: Cool, uh-huh.

Monica: And this is in order to actually render the information, we'll want to make a request to this URL and figure out what type of content we want to display. So there's like different types of webmentions. I guess if it comes from a website or if someone likes a tweet versus retweets a tweet, those are like different things or different types.

Jason: Okay. And so for now, we could do something like -- and the only thing that's been linked so far is the home page, I believe. Or I guess we can try -- does it split by pathname or anything?

Monica: I would assume it would be by the target, but I guess we kind of need maybe more examples. I know when I have used it in the past, I have been able to search by like the path, but I am not sure of the exact breakdown.

Jason: That looks right, because this is what got mentioned, so this was the target. So I assume if someone mentions the blog... and so, yeah, Nikki, in this case, the -- it's going to be a static site. We are just exporting, but like we could make this -- we could use -- Next has all sorts of stuff, the static -- we could use the server function. Since it's a read-only key, we could just use an asynch call to load these on the fly, whatever we want to do?

Monica: If we only do it on the server side when we build the application, then Nikki is right, you would have to rebuild the website in order to fetch the latest webmentions, but something that some people do is fetch them on the client side or refresh them on the client side, so that way we'll hydrate any new webmentions.
I actually still need to add client-side webmentions to my website. I have server side, and mine are kind of stale, because I got to the point where I was like I can't rebuild my website every time I get a webmention.

Jason: Yeah.

Monica: Yeah, but definitely that decision affects how fresh the content is.

Jason: Yeah, Tentman, we absolutely could -- so a thing that we could do, if we wanted, is we could like use effect -- I guess I need to import that from React, and then we'll be able to in here, we can like fetch this, and then what we get back, we can say then response, response.JSON, and then down here, we should get our result, and for now, we can just like console log it.
So, this, if we run this, what we should see in the console is that same output that I just got from Postman, where we got this type feed children. So, let's take a look at it.
And here we go. So, now on the client side, we get our webmentions, right?

Monica: Yeah, so they are all in the children array, although I only see one -- oh, no, I guess we have one.

Jason: Yeah, so we --

Monica: Because one of them was app, and one was dot com.

Jason: Exactly. So I am not sure if Bridgy is being slow or if it's just kind of skipping this one because it's from my own account, but maybe if I tweet about it from like my personal account. Let me try that. Let's see if it works. So I'm going to tweet about this from J Lengstorf, which I'll pull from over here. Let's go.

Monica: Okay.

Jason: All right. So, that's -- that's a thing (Laughter), and maybe Bridgy will catch it?

Monica: Okay. I hope so. I mean, that's how Bridgy is supposed to work, but Bridgy seems to be in a mood today.

Jason: Whoa, what just happened? Oh --

Monica: Did you like send out a tweet? Oh, wait, it sent some. Look. Delayed, 19 seconds ago, but, yeah, okay, so we should expect now in Webmention that we can see activity.

Jason: Okay.

Monica: You'll also notice here, you can delete specific webmentions, so if you don't want that data to be returned from webmention.io, that will completely remove it, and it also has the ability for you to block certain domains, and my understanding is Bridgy would like -- because it's operating in the context of you as a user, if you block somebody, it should not pick up their tweet, if they mention your website. So those are some of the features that they have in order for you to like edit what things are being displayed.

Jason: Uh-huh. Oh, boy. It just found like all of this stuff for the older -- for the other domain, which is fine, because that's what we wanted, but let's -- yeah, here we go. So, yeah, some Bridgy stuff coming through, and so now if we go back to our dev site, which was where? Uh-oh... this one? Here.
Then we'll get an array. We get five different things back now.

Monica: Oh fun. Yes.

Jason: Look, here's a tweet from you, a tweet from Linda, a tweet from Bounews. I hope I didn't just destroy your name. I apologize. But, yeah, this is really cool. So now we have like the content of it as well. So we can -- we can like pull these in.

Monica: Yes.

Jason: That's cool.

Monica: And you'll see it has this WM property, so that was like a mention of. I think there's one for likes, retweets. I don't know what they call them, but you can also like filter by type of webmention.

Jason: And it comes with an avatar too. How cool is that? So now we can do something like get their name, a link to their Twitter account, their avatar, all pulled in.

Monica: Uh-huh.

Jason: That's really slick. Like, this is really nice. So it's a mention, and so -- okay. So this is a mention, and then the other ones show up as -- I guess we don't really have any.

Monica: Yeah. I'm trying to -- I liked one of them. I am not sure if that would show up as a different type than me replying.

Jason: Oh, boy. We have got all sorts of stuff coming in.
Okay. How about we just get rid of that. There we go. Cool.
No side project targets... it's fine. So, basically, if we were paying -- like if we had more information, we would also see likes and retweets and stuff like that.

Monica: Yes.

Jason: Okay.

Monica: There's different types though. For WM property, I'm looking at some of my code where I have in dash reply to, if someone replies to a tweet.
The mention one, we have already seen. There's also one for likes. There's like dash of. There should be similar things that you can find, a specification of all of the different types that could potentially be returned, or at least like from Twitter. And Tentman asked if there was a standard layout for displaying this information. I think there's not necessarily. A lot of times, I think people do try to display like the person's name, the actual body of the content or at least some excerpt of the content. I think it's helpful to share like a link back to the original so that like it adds some authority as to this person actually said this thing. Yeah, and it's like pulling in people's photos, so that way it seems more personal than just a wall of text.

Jason: So we can basically do this now, where we like -- let's do mentions and set mentions, and we can make that into a use state, and we'll just start with an empty array, so we'll also pull in use state here, and then instead of console logging the result, we'll set mentions, and there was a children prop, right? So I'm just going to grab that children prop so we get the array straight up. And then underneath the page here, let's just add like a div, and then we can say mentions map, and that will give us a mention each, and we can do like -- let's do a div. And so you were saying that you like to show their avatar, so let's throw in -- I need to pull this side by side, so we can actually see what's in the data.

Monica: Yeah, that would be helpful.

Jason: So let's pull this up. So we are going to get an author and content, and those are going to be the pieces that are most interesting to us. So let's grab --

Monica: So we wanted to show the author photo.

Jason: Author URL for the link.

Monica: Uh-huh.

Jason: And then we'll set an image of the source, will be mentioned author photo, set an alt of mention author name, and then we can do -- okay. This is probably not a great idea, but why don't we just show the tweet --

Monica: I have seen people sanitize whatever that information that is coming in. It could be returning either the HTML or the text, so there's options as to how you actually render that.

Jason: Look at that.

Monica: Nice! Yay, we have got webmentions.

Jason: We have got webmentions, and this is so slick, because with just a little bit of effort, we can do a style, and we'll say display grid, and then we can do like grid template columns. We'll say 100 pixels, one FR, and then down -- actually, that might be enough. Oh, now we need to make the image -- we'll just make it with the 100. And that is not pretty by any -- we can add a gap, I guess, so that it's not like horrible.
But, you know, this is a comment section in five minutes. So that is -- once we figured out that we needed a dot com and not a dot app, this went so fast.

Monica: Yes, yes.

Jason: And how cool is that, that this just works, and that we are now getting a live pull from Twitter on our site, and, you know, this is client side, so it's not getting server rendered. If somebody is running without JavaScript, they won't see these. But I don't know, how do you feel about that?

Monica: In my case, my site that I first started using webmentions with is a Gatsby site, so I wonder if I did it all on the server side. I think it is nice to have something on the initial hydration, even if someone doesn't have JavaScript enabled, but I could see it going either way. I think it could be a combination where you like compile webmentions or rehydrate it on a client side, and if someone didn't have JavaScript enabled, they might not see the latest webmention, but if they do, I think they would be able to see the most recent activity as an optimal solution.

Jason: I think from my standpoint, this is a lot of stuff. This falls under the category of enhancement. It's nice to show this stuff, but it is not critical. Unless the thing that you're building is we need the tweets as part of the experience, the whole core of it, you're running a TV show where the comments are a part of the thing -- it's not life or death, right? If my comments on my blog or a day or a week out of date, that's fine. People are looking at this stuff on Twitter, and so I feel pretty okay with this being something that only works client side, mainly because the vast majority of people who are on Twitter probably are browsing with JavaScript enabled, and this stuff isn't going to get caught by ad blockers or anything, so they will probably have a pretty good experience of using the site, and if they disable JavaScript, no worries. They will still get to use the site. They just won't see the discussion, and, you know, that's okay.

Monica: Uh-huh, yes.

Jason: Well, I mean, this is great. I had -- there was a moment where it was kind of like the dark night of the soul, thinking, oh, man, is Bridgy going to betray us like this? But we came back, got it done, and we are actually ahead of schedule here. Is there anything else that you want to teach or anything else that you want to cover on this, on Webmention?

Monica: So, there's not anything specifically that I want to I guess teach, but I think that like if you are interested in Webmention, something cool that we didn't have time to go over today is actually sending those outgoing messages, so we saw that someone sent one from their website to our website, which is cool. So I think that's probably like a great like next step, once someone has Webmention set up, if they want to be like more integrated into the ecosystem of actually like sending out these things, not necessarily through Twitter but like if you're blogging about something being able to communicate with other websites, I think it's like a fun next step.

Jason: Yeah, okay. So, Webmention development -- what would be a good link for that, do you think, if we wanted to send this to someone? Maybe developer?
How to implement, this is perfect. We'll use this page as our reference. Make sure you check that out. Tentman mentioned in the comments you could set up a daily build situation. You totally could. GitHub actions has a pretty friendly chron interface. There are other scheduled job kind of things that you can do through different services around the web. So, you could rebuild once a day, once a week, once every 12 hours, like whatever through one of those services. Like Zapier I think will even let you do that. So that could be a way to do it.
From my standpoint, I think client side is probably where I would hang out, just because I don't really care, but I think that it's going to be kind of how important is this to you and how critical is it to the building of your website. But, yeah.
All right. So, Monica, where should people go if they want to go further with this? Like, we looked at Webmention.

Monica: Yeah.

Jason: So I'll link to that again.

Monica: Yeah. So, I have -- there was a link that I wanted to share. So, this developer, MXC.dev, they have written about how they implemented webmentions in 11ty. I found this helpful to provide more context. WIX also has written about webmentions. I would Google Webmention and whatever technology you're using, but the general I guess setup process is very similar across different technologies. Like, I use Gatsby, and there's actually a Gatsby plug-in for some of the Webmention setup. So, for me, that plug-in was super helpful, but it's not really helpful if you're not using Gatsby.
So those are I guess some of the things that I would recommend.

Jason: Nice. Okay. Very cool. So, I am -- yeah, very nice.
Cool. So then I found another one by Sia Karamalegos, which she does a lot of stuff like this, and it looks like she also did a whole step by step on how to get webmentions into 11ty as well. That's all really helpful information. This one was fun. I always do love a good adventure. This one was great. Because it felt like, you know, when you watch a trilogy, and by the end of the second movie, you feel tired and you want to go home, like you have been dragged through hell. That was the second act of our show today. But it worked.
So, cool, Monica, other than your Twitter, which everyone is going to go follow right now, where should people go if they want to keep up with you online?

Monica: So, if you go on my website, Monica.dev, I generally blog there. You can check out what my webmentions look like.
My code isn't open source, but if you have any questions about my implementation, I'm more than happy to share, as well as some of my articles. I don't think I have anything specific to Webmention, but they cover some of the things that I have done on my website. I wrote an article this morning about like please don't spam, but this one I just wrote this morning, but you can't see the webmentions. If you go to any other article, yeah that's a good one. If you go to the bottom, you can see my webmentions on it. You'll see certain people's faces. I ended up cutting the array so it's not showing 1800 photos. And if you click show mentions, it will actually show you the copy. I ended up collapsing that, like as I started to get more mentions. I thought it was a better experience.

Jason: Yeah, this is amazing. I love that this post did the rounds.

Monica: Yeah, that's where to find me.

Jason: Cool, yeah.

Monica: Also Party Corgi, someone shared that. That's another area that I hang out on the web.

Jason: Yeah, come hang out with us on Party Corgi. It is super fun. Monica, thank you again for hanging out with us today. One more quick shout-out to the sponsors. We have got White Coat Captioning who has been making this show more accessible by captioning as we go at lwj.dev/live. This is all made possible by our sponsors who made this more accessible for more people. Thank you all for hanging out today. I think this is a good stopping point, unless there is anything else that you want to cover, Monica.

Monica: That's all. Thank you so much for having me and thank you to everyone who tuned in and helped us debug through this problem.

Jason: Yes, thank you, chat, for sticking with us and all of the great ideas. Really, really happy that we got this thing working. I'm really excited about the possibilities that this unlocks. With that, we are going to call this one done. So make sure that you go check out the schedule and see what's coming up. We have got the Jamstack Conf coming up Tuesday of this week. I won't be doing the stream, but come hang out with us there. That's going to be a good time. I think it's jamstackconf.com. Yeah. Those tickets will be free. You can hang out with us the whole day, and then on Thursday, we'll discuss React in type script. As someone who has regularly pushed back against type script, I'm excited for this one, getting convinced why type script is worth the investment. Definitely check out the schedule. Chat, stay tuned. We are going to raid. Monica, thank you so much for coming and hanging out, and we'll see you next time.
(End of CART captions.)