{
"componentChunkName": "component---src-components-blog-post-jsx",
"path": "/blog/getting-started-with-webmention-next-js/",
"result": {"data":{"site":{"siteMetadata":{"author":"Monica Powell","siteUrl":"https://www.aboutmonica.com"}},"mdx":{"id":"1009dcc4-63ab-56e4-9a36-f01098c8dc9c","timeToRead":3,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"Getting Started With Webmention and NextJS\",\n \"date\": \"2020-10-03T16:51:30.675Z\",\n \"template\": \"post\",\n \"draft\": true,\n \"slug\": \"getting-started-with-webmention-next-js\",\n \"category\": [\"tutorial\"],\n \"tags\": [\"JavaScript\", \"Webmention\", \"Video\", \"NextJS\"],\n \"description\": \"An overview of setting up Webmention on a NextJS site to collect comments from across the decentralized social web (i.e., Twitter, GitHub, Pinterest, Reddit) in a centralized place.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\n\nvar TableOfContents = makeShortcode(\"TableOfContents\");\nvar YouTube = makeShortcode(\"YouTube\");\nvar Callout = makeShortcode(\"Callout\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, \"This past week I had the pleasure of being on the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.learnwithjason.dev/webmention-next-js\"\n }, \"Learn with Jason Show\"), \" to show how to add \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://indieweb.org/Webmention\"\n }, \"Webmention\"), \" functionality to a NextJS website. Webmentions let you pull tweets, other blogs, and other activity from around the web into your site? It was fun live pair programming the implementation of webmentions. \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.learnwithjason.dev/webmention-next-js\"\n }, \"Check out the video\"), \" or read some of the highlights below!\"), mdx(TableOfContents, {\n headings: props.tableOfContents,\n mdxType: \"TableOfContents\"\n }), mdx(\"h2\", {\n \"id\": \"watch-the-learn-with-jason-episode\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#watch-the-learn-with-jason-episode\",\n \"aria-label\": \"watch the learn with jason episode permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Watch the Learn with Jason Episode\"), mdx(\"p\", null, \"Watch the Learn with Jason episode below for more information about Webmentions and view the transcript at \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.learnwithjason.dev/webmention-next-js\"\n }, \"https://www.learnwithjason.dev/webmention-next-js\"), \":\"), mdx(YouTube, {\n youTubeId: \"Ty6tmviF0H0\",\n mdxType: \"YouTube\"\n }), mdx(\"br\", null), mdx(\"h2\", {\n \"id\": \"what-are-webmentions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#what-are-webmentions\",\n \"aria-label\": \"what are webmentions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"What are Webmentions?\"), mdx(\"p\", null, \"Webmention are an IndieWeb specification to allow websites to collect comments from across the decentralized social web (i.e., Twitter, GitHub, Pinterest, Reddit) in a centralized place. A site can be set up to send an outgoing Webmention any time they link to an external website. Websites that receive Webmentions can then decide what content to display and bring the conversation to one place. I've mostly used Webmention to bring conversation from Twitter to my personal site.\"), mdx(\"p\", null, \"Below is an image of how Webmentions appear on one my articles on this site:\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/media/webmention.gif\",\n \"alt\": \"scrolling through Webmentions which show the number of RTs, likes and replies. Toggled on and off the view that shows the content of individual replies\"\n })), mdx(\"h2\", {\n \"id\": \"setting-up-webmention-functionality\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#setting-up-webmention-functionality\",\n \"aria-label\": \"setting up webmention functionality permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Setting up Webmention Functionality\"), mdx(\"p\", null, \"The easiest way to set up your site to start receiving Webmentions is to create an account with \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://webmention.io/\"\n }, \"webmention.io\"), \" to accept Webmentions on your behalf. If you'd like to bring in conversation from social media sites like Twitter, I'd recommend creating an account with \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://brid.gy/\"\n }, \"bridgy\"), \" which will automatically poll social media at set intervals and send any relevant content as a Webmention to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://webmention.io/\"\n }, \"webmention.io\"), \". Let's walkthrough how to set up the necessary accounts:\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Begin receiving Webmentions with webmention.io\"), \" Go to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://webmention.io/\"\n }, \"https://webmention.io/\"), \" and enter your website URL. It will prompt you to set up IndieAuth which requires you link to a social media site like Twitter on the homepage of your website with the HTML \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"rel\"), \" attribute value set to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\\"me\\\"\"), \".\"), mdx(\"pre\", {\n parentName: \"li\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \" Twitter\\n\")), mdx(\"p\", {\n parentName: \"li\"\n }, \" This set up is required so that webmention.io can verify that the social media website you use to log in is actually associated with the website you want them to collect Webmentions for.\"), mdx(\"p\", {\n parentName: \"li\"\n }, \" Once you've successfully set up your account you should see the following markup on webmention.io (with \", mdx(\"em\", {\n parentName: \"p\"\n }, \"your\"), \" username) under \", mdx(\"em\", {\n parentName: \"p\"\n }, \"settings\"), \": \"), mdx(\"pre\", {\n parentName: \"li\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\\n\")), mdx(\"p\", {\n parentName: \"li\"\n }, \" This markup should be added to the head of your website and deployed so that Webmentions will officially begin being collected by \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://www.webmention.io\"\n }, \"www.webmention.io\"), \".\"), mdx(\"p\", {\n parentName: \"li\"\n }, \" The above set up allows sites to start sending Webmentions to your site and allows you to be able to start sending Webmentions manually.\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Set up Brid.gy to automatically receive mentions from Twitter and other social media websites\"), \" Social media websites like Twitter generally don't automatically send Webmention notifications to site despite a lot of link sharing occurring on the site. Therefore, in order to automatically send mentions of your website on Twitter to your site as a Webmention you need to setup \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://brid.gy/\"\n }, \"Brid.gy\"), \". Brid.gy requires that you authenticate with a social media acocunt and also have a link back to the same domain in your social media profile's bio section.\"))), mdx(Callout, {\n variant: \"danger\",\n mdxType: \"Callout\"\n }, \" We learned during the Learn with Jason stream that Brid.gy currently doesn't appear to support .app TLD domains and gives a vague error where it doesn't recognize these domains when trying to authenticate.\"), mdx(\"h2\", {\n \"id\": \"fetching-and-rendering-webmentions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#fetching-and-rendering-webmentions\",\n \"aria-label\": \"fetching and rendering webmentions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Fetching and Rendering Webmentions\"), mdx(\"h3\", {\n \"id\": \"1-fetch-webmentions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#1-fetch-webmentions\",\n \"aria-label\": \"1 fetch webmentions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"1. Fetch Webmentions\"), mdx(\"p\", null, \"We used \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"useEffect\"), \" to make a fetch request from webmention.io to retrieve the Webmentions associated with our site and stored its result in state as \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"mentions\"), \". The endpoint that the request is made to is \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://webmention.io/api/mentions.jf2?%5Bwebmentioniousername%5D&token=%5Bwebmentioniotoken%5D\"\n }, \"https://webmention.io/api/mentions.jf2?[webmentioniousername]&token=[webmentioniotoken]\"), \". This URL should be updated with your webmentionio username and webmentionio token. Note the token only provides read-only access you can choose to keep the token a secret but re-generate as needed.\"), mdx(\"p\", null, \"Since \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"useEffect\"), \" only triggers after the initial hydration of a React site, this request only occurs on the client-side and requires JavaScript to be enabled in order to fetch Webmention data. This means that you don't have to worry about rebuilding your site in order to retrieve the latest Webmention data.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \" const [mentions, setMentions] = useState([]);\\n useEffect(() => {\\n \\n fetch(\\n 'https://webmention.io/api/mentions.jf2?[webmentioniousername]&token=[webmentioniotoken]'\\n )\\n .then((response) => response.json())\\n .then((result) => {\\n setMentions(result.children);\\n });\\n }, []);\\n\")), mdx(\"p\", null, \"If you are curious what the shape of the initial object returned by the endpoint looks like some recent Webmentions I received were shaped like:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \" {\\n \\\"type\\\": \\\"feed\\\",\\n \\\"name\\\": \\\"Webmentions\\\",\\n \\\"children\\\": [\\n {\\n \\\"type\\\": \\\"entry\\\",\\n \\\"author\\\": {\\n \\\"type\\\": \\\"card\\\",\\n \\\"name\\\": \\\"Debra-Kaye Elliott\\\",\\n \\\"photo\\\": \\\"https://webmention.io/avatar/pbs.twimg.com/ca78346285aa621eedce7fa271025576c97a19577b4820c9951853d09a829ad8.png\\\",\\n \\\"url\\\": \\\"https://twitter.com/debrakayelliott\\\"\\n },\\n \\\"url\\\": \\\"https://twitter.com/waterproofheart/status/1312230169491447815#favorited-by-261719963\\\",\\n \\\"published\\\": null,\\n \\\"wm-received\\\": \\\"2020-10-03T17:29:46Z\\\",\\n \\\"wm-id\\\": 864384,\\n \\\"wm-source\\\": \\\"https://brid-gy.appspot.com/like/twitter/waterproofheart/1312230169491447815/261719963\\\",\\n \\\"wm-target\\\": \\\"https://www.aboutmonica.com/blog/set-yourself-up-for-success-open-source-contributions/\\\",\\n \\\"like-of\\\": \\\"https://www.aboutmonica.com/blog/set-yourself-up-for-success-open-source-contributions/\\\",\\n \\\"wm-property\\\": \\\"like-of\\\",\\n \\\"wm-private\\\": false\\n },\\n {\\n \\\"type\\\": \\\"entry\\\",\\n \\\"author\\\": {\\n \\\"type\\\": \\\"card\\\",\\n \\\"name\\\": \\\"Anders Schneiderman\\\",\\n \\\"photo\\\": \\\"https://webmention.io/avatar/pbs.twimg.com/37890c358e8ff1f667c57d89959e583af37ef66d39b6d3c372d9b7988f5a377f.jpg\\\",\\n \\\"url\\\": \\\"https://twitter.com/raschneiderman\\\"\\n },\\n \\\"url\\\": \\\"https://twitter.com/waterproofheart/status/1312230169491447815#favorited-by-270006742\\\",\\n \\\"published\\\": null,\\n \\\"wm-received\\\": \\\"2020-10-03T15:08:41Z\\\",\\n \\\"wm-id\\\": 864330,\\n \\\"wm-source\\\": \\\"https://brid-gy.appspot.com/like/twitter/waterproofheart/1312230169491447815/270006742\\\",\\n \\\"wm-target\\\": \\\"https://www.aboutmonica.com/blog/set-yourself-up-for-success-open-source-contributions/\\\",\\n \\\"like-of\\\": \\\"https://www.aboutmonica.com/blog/set-yourself-up-for-success-open-source-contributions/\\\",\\n \\\"wm-property\\\": \\\"like-of\\\",\\n \\\"wm-private\\\": false\\n },\\n ]}\\n\")), mdx(\"p\", null, \"You can also view the shape of the data by going directly to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://webmention.io/api/mentions.jf2?%5Bwebmentioniousername%5D&token=%5Bwebmentioniotoken%5D\"\n }, \"https://webmention.io/api/mentions.jf2?[webmentioniousername]&token=[webmentioniotoken]\"), \".\"), mdx(\"h3\", {\n \"id\": \"2-render-webmentions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#2-render-webmentions\",\n \"aria-label\": \"2 render webmentions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"2. Render Webmentions\"), mdx(\"p\", null, \"Once we have the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"mentions\"), \" stored in state from the request to webmention.io we can map through the mentions and render the a link to the Webmention author's original post, their photo, name and the content of their Webmention.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"{mentions.map((mention) => (\\n