1 line
49 KiB
JSON
1 line
49 KiB
JSON
[{"type": "entry", "author": {"type": "card", "name": "jbschirtzinger", "photo": "", "url": "https://jbschirtzinger.com/"}, "url": "https://jbschirtzinger.com/post/2023new/", "published": "2023-01-02T15:30:00", "wm-received": "2023-02-02T22:15:54Z", "wm-id": 1614159, "wm-source": "https://www.jbschirtzinger.com/post/2023new/", "wm-target": "https://fundor333.com/post/2022/indieweb-webmention-and-h-entry-in-my-blog/", "wm-protocol": "webmention", "name": "Site Features and Prophecies", "content": {"html": "<p><img src=\"https://www.jbschirtzinger.com/alby.png\" alt=\"alby\" /></p>\n<h2>New Technologies</h2>\n<p>Some time ago I implemented <a href=\"https://coil.com/\">Coil</a> on this site. If you have not heard of Coil, and odds are you have not, you will understand why I am not using it on the site now. The idea behind it, however, was good. Monetizing content creators or independent authors is what it is supposed to do, but requires a \u201cbuy-in\u201d of five dollars monthly. Since I have had months where five dollars was the difference between making rent or missing it, and because there was not wide adoption of Coil, I stopped using it. <a href=\"https://en.wikipedia.org/wiki/Lightning_Network\">Lightning</a>, however, is a blockchain that does not require a \u201cbuy-in\u201d and allows a set amount to \u201cflow out to\u201d websites a person wants to support at a given rate using website plugin crypto wallets like <a href=\"https://getalby.com/\">Alby</a>. Since no one hardly used the previous donate link in a traditional sense to help support content that appears on this blog, I got rid of it. I added a webring link instead in a homage to \u201cold school\u201d blogging, where one kept track of others who wrote by belonging to groups where the notices of new posts and comments were \u201ctight\u201d. Both of these measures are in strong support of \u201cThe Independent Web\u201d.</p>\n<h2>IndieAuth Blogs</h2>\n<p>Also, this blog has a lot more capability than I have previously utilized, because I am somewhat \u201cless social\u201d than most technology users are. I got rid of Facebook some time ago and never really enjoyed it or Myspace that much with which to start. Twitter was a non-starter for me at inception, since I prefer longer communications that require a person to focus.</p>\n<p>I strongly feel and believe that authors and users should own their own information. Meta-data harvesting and selling ought to be a criminal enterprise. So, this blog has features that allow it to participate in the \u201cindieweb\u201d which means that it can act as something like a hub for any communication I decide to allow it to. A big part of that participation is called a \u201cwebmention\u201d which is analogous to the \u201cpingbacks\u201d of yesteryear. Mostly, they notify you when someone has linked to your post, and they allow you to display whatever was linked on your page. So, if someone webmentions you in a Twitter post, suddenly you will receive a notification about it on the appropriate post. In academia this is a little like \u201cciting the source\u201d and is desirable when someone is quoting something you have said. That way, you can go on Twitter or wherever it was said, and have a \u201cflame war\u201d where nobody agrees and everybody leaves sad and upset. Yes, I jest, but remember, this IS the internet everybody made!</p>\n<h2>Geek Technical Stuff</h2>\n<p>In order to enable webmentions, I had to do some digging about as my site is statically generated. This great post over at <a href=\"https://fundor333.com/post/2022/indieweb-webmention-and-h-entry-in-my-blog/\">Fundor 333\u2019s</a> helped me out although it left off the important part about including the partial in the webcontent thusly: <code>{{ partial \"webmentions.html\" . }}</code> I am not really sure if that small period is always required, but I know it was for my specific template in a file called single.html located in a _default folder. It is important to remember to copy this file and mirror it outside the theme file within a Hugo directory structure since anything outside of the theme that mimics its form will override the default. Also, the webmentions.min.js file had to go in the public directory for the sake of Gitlab. That took a little while to figure out.</p>\n<p>Alby, on the other hand, was as simple as adding a header tag and enabling it. So that wasn\u2019t too bad.</p>\n<h2>Technology Prophecy Stuff</h2>\n<p>Implementing all of this made me have to question what technology I think others are likely to use and how it might work with this little blog. Everything is always such a frothing sea of change in technology that it feels a little like going to Vegas and playing the slots. The goal, of course, is to be able to receive some kind of money for content that is all ready developed and that others believe is good enough to read. This enables future content to be generated on a \u201cI can develop content and also make enough pocket change to continue to do so\u201d. If that isn\u2019t doable then at least being a part of some kind of community of people who are fighting for that future ought to provide some kind of emotional payoff. After all, altruism usually at least gives you that \u201cwarm, fuzzy, feeling\u201d right?</p>\n<p>In thinking about the technology and how I am never sure it is moving us toward a \u201cbetter world\u201d I was reminded of the Hopi Prophecy but especially of a couple of lines that talk about how an individual will be able to tell the end is near:</p>\n<blockquote>\n<p>\u201cThis is the Fourth Sign: The land will be crossed by snakes of iron. (Railroad Tracks)</p>\n<p>\u201cThis is the Fifth Sign: The land shall be crisscrossed by a giant spider\u2019s web. (Electric power and telephone lines)</p>\n</blockquote>\n<p>source: <a href=\"https://wolfruck.com/the-nine-signs-of-white-feather-hopi-prophecy/\">https://wolfruck.com/the-nine-signs-of-white-feather-hopi-prophecy/</a></p>\n<p>Helpful parenthetical to the contrary, the second clue could easily be referring to the internet as opposed to electric power and telephone lines alone. It is, after all, called a \u201cweb\u201d.</p>\n<p>Any of the above technologies can and all ready have been used to make the life of human beings worse. Bitcoin may seem great because it is not regulated, but if it did in fact become regulated, it could be something used as a Mark of the Beast in a way paper money never could. The same thing is true of the internet. It has been seen as a fun little playground of information for some time, but it also has been in the middle of election frauds and domestic surveillance. A technological savior in a moment is, at another moment, a cruel, tyrannical despot.</p>\n<p>So I guess you could say, I am beyond the \u201cI\u2019m so excited for this technology and hopeful\u201d and more at the \u201cHow are we also going to mess this up\u201d stage of technology. However, I think it wise to prepare for things going better than one anticipates in addition to not being surprised at the worst case scenario. If there has been anything being in tech and humanity and around Prophetic utterances has taught me, it must be that people are mostly a bi-polar, suicidal lot that think that there is ultimately no consequence for their actions until it is far, far too late. By the point everyone is appropriately sorry, there is all ready enough trauma to keep therapists in luxury cars and boats for years. Of course, that assumes that whatever happens leaves some therapists around. The kind of trauma we appear to be moving toward is the kind that leaves a psychic, collective scar in the soul memory for eons. But hey, at least we had \u201cdigital money\u201d and \u201cWebrings\u201d right?</p>", "text": "New Technologies\nSome time ago I implemented Coil on this site. If you have not heard of Coil, and odds are you have not, you will understand why I am not using it on the site now. The idea behind it, however, was good. Monetizing content creators or independent authors is what it is supposed to do, but requires a \u201cbuy-in\u201d of five dollars monthly. Since I have had months where five dollars was the difference between making rent or missing it, and because there was not wide adoption of Coil, I stopped using it. Lightning, however, is a blockchain that does not require a \u201cbuy-in\u201d and allows a set amount to \u201cflow out to\u201d websites a person wants to support at a given rate using website plugin crypto wallets like Alby. Since no one hardly used the previous donate link in a traditional sense to help support content that appears on this blog, I got rid of it. I added a webring link instead in a homage to \u201cold school\u201d blogging, where one kept track of others who wrote by belonging to groups where the notices of new posts and comments were \u201ctight\u201d. Both of these measures are in strong support of \u201cThe Independent Web\u201d.\nIndieAuth Blogs\nAlso, this blog has a lot more capability than I have previously utilized, because I am somewhat \u201cless social\u201d than most technology users are. I got rid of Facebook some time ago and never really enjoyed it or Myspace that much with which to start. Twitter was a non-starter for me at inception, since I prefer longer communications that require a person to focus.\nI strongly feel and believe that authors and users should own their own information. Meta-data harvesting and selling ought to be a criminal enterprise. So, this blog has features that allow it to participate in the \u201cindieweb\u201d which means that it can act as something like a hub for any communication I decide to allow it to. A big part of that participation is called a \u201cwebmention\u201d which is analogous to the \u201cpingbacks\u201d of yesteryear. Mostly, they notify you when someone has linked to your post, and they allow you to display whatever was linked on your page. So, if someone webmentions you in a Twitter post, suddenly you will receive a notification about it on the appropriate post. In academia this is a little like \u201cciting the source\u201d and is desirable when someone is quoting something you have said. That way, you can go on Twitter or wherever it was said, and have a \u201cflame war\u201d where nobody agrees and everybody leaves sad and upset. Yes, I jest, but remember, this IS the internet everybody made!\nGeek Technical Stuff\nIn order to enable webmentions, I had to do some digging about as my site is statically generated. This great post over at Fundor 333\u2019s helped me out although it left off the important part about including the partial in the webcontent thusly: {{ partial \"webmentions.html\" . }} I am not really sure if that small period is always required, but I know it was for my specific template in a file called single.html located in a _default folder. It is important to remember to copy this file and mirror it outside the theme file within a Hugo directory structure since anything outside of the theme that mimics its form will override the default. Also, the webmentions.min.js file had to go in the public directory for the sake of Gitlab. That took a little while to figure out.\nAlby, on the other hand, was as simple as adding a header tag and enabling it. So that wasn\u2019t too bad.\nTechnology Prophecy Stuff\nImplementing all of this made me have to question what technology I think others are likely to use and how it might work with this little blog. Everything is always such a frothing sea of change in technology that it feels a little like going to Vegas and playing the slots. The goal, of course, is to be able to receive some kind of money for content that is all ready developed and that others believe is good enough to read. This enables future content to be generated on a \u201cI can develop content and also make enough pocket change to continue to do so\u201d. If that isn\u2019t doable then at least being a part of some kind of community of people who are fighting for that future ought to provide some kind of emotional payoff. After all, altruism usually at least gives you that \u201cwarm, fuzzy, feeling\u201d right?\nIn thinking about the technology and how I am never sure it is moving us toward a \u201cbetter world\u201d I was reminded of the Hopi Prophecy but especially of a couple of lines that talk about how an individual will be able to tell the end is near:\n\n\u201cThis is the Fourth Sign: The land will be crossed by snakes of iron. (Railroad Tracks)\n\u201cThis is the Fifth Sign: The land shall be crisscrossed by a giant spider\u2019s web. (Electric power and telephone lines)\n\nsource: https://wolfruck.com/the-nine-signs-of-white-feather-hopi-prophecy/\nHelpful parenthetical to the contrary, the second clue could easily be referring to the internet as opposed to electric power and telephone lines alone. It is, after all, called a \u201cweb\u201d.\nAny of the above technologies can and all ready have been used to make the life of human beings worse. Bitcoin may seem great because it is not regulated, but if it did in fact become regulated, it could be something used as a Mark of the Beast in a way paper money never could. The same thing is true of the internet. It has been seen as a fun little playground of information for some time, but it also has been in the middle of election frauds and domestic surveillance. A technological savior in a moment is, at another moment, a cruel, tyrannical despot.\nSo I guess you could say, I am beyond the \u201cI\u2019m so excited for this technology and hopeful\u201d and more at the \u201cHow are we also going to mess this up\u201d stage of technology. However, I think it wise to prepare for things going better than one anticipates in addition to not being surprised at the worst case scenario. If there has been anything being in tech and humanity and around Prophetic utterances has taught me, it must be that people are mostly a bi-polar, suicidal lot that think that there is ultimately no consequence for their actions until it is far, far too late. By the point everyone is appropriately sorry, there is all ready enough trauma to keep therapists in luxury cars and boats for years. Of course, that assumes that whatever happens leaves some therapists around. The kind of trauma we appear to be moving toward is the kind that leaves a psychic, collective scar in the soul memory for eons. But hey, at least we had \u201cdigital money\u201d and \u201cWebrings\u201d right?"}, "mention-of": "https://fundor333.com/post/2022/indieweb-webmention-and-h-entry-in-my-blog/", "wm-property": "mention-of", "wm-private": false}, {"type": "entry", "author": {"type": "card", "name": "Christian Engel", "photo": "https://chringel.dev/img/vqjxFKbWTk-200.webp", "url": "https://chringel.dev/about/"}, "url": "https://chringel.dev/2022/07/indiewebify-me-and-dont-forget-my-webmentions/", "published": "2022-07-22T02:00:00+02:00", "wm-received": "2022-08-01T11:48:39Z", "wm-id": 1447004, "wm-source": "https://chringel.dev/2022/07/indiewebify-me-and-dont-forget-my-webmentions/", "wm-target": "https://fundor333.com/post/2022/indieweb-webmention-and-h-entry-in-my-blog/", "wm-protocol": "webmention", "name": "Indiewebify me! And don't forget my webmentions!", "syndication": ["https://twitter.com/DeEgge/status/1550547785279234050", "https://fosstodon.org/web/@chringel/108692404350645632", "https://indieweb.xyz/en/indieweb", "https://news.indieweb.org/en"], "content": {"html": "<p>I actually can't recall anymore, what got me started with this whole <strong>IndieWeb</strong> thing. According to my browser history, I visited <a href=\"https://indieweb.org\">IndieWeb.org</a> on June 15, 2022, so around a month ago. I read up on <strong>Miriam Suzanne</strong>'s hugely popular post <a href=\"https://www.miriamsuzanne.com/2022/06/04/indiweb/\">Am I on the IndieWeb Yet?</a> and searched Google for \"hugo indieweb\" in the hopes there was some kind of <a href=\"https://jlelse.blog/micro/2021/05/indieweb-recipe\">recipe</a> to get me started on my static page (I'm a developer and after all *<em>let's say it all together</em>* developers are lazy).</p>\n<p>There wasn't THE ONE answer I was hoping for, but instead lot's and lot's of blog posts by people describing their way of getting into the IndieWeb. I was overwhelmed and intrigued at the same time, so I let it rest for a couple of days - four, to be exact. The afternoon of June 20, 2022, I went deep, even deeper than <a href=\"https://www.youtube.com/watch?v=QjcA2xSH25Y\">Jamiroquai</a>, into the rabbit hole that is <strong>The IndieWeb</strong>. Let's retrace my steps through said browser history and commits.</p>\n\n<h2>What's IndieWeb?</h2>\n<a href=\"https://chringel.dev/2022/07/indiewebify-me-and-dont-forget-my-webmentions/#what's-indieweb%3F\">#</a>\n<blockquote>\n<p>The IndieWeb is a people-focused alternative to the 'corporate web'. - <a href=\"https://indieweb.org\">IndieWeb.org</a></p>\n</blockquote>\n<p>That's what it says on the cover. It's about owning your content, sharing your thoughts and ideas in one place and then syndicating it to other (social) platforms. What if Twitter, for example, will be bought by a stupidly rich philanthropist who decides to shut it down? Where will all your tweets go?</p>\n<p>In my opinion, your Twitter or your Facebook profile should not be your digital identity, owned by a tech company. You should be the sole owner of the content you share online. And that's what IndieWeb encourages people to do.</p>\n\n<h2>How does it work?</h2>\n<a href=\"https://chringel.dev/2022/07/indiewebify-me-and-dont-forget-my-webmentions/#how-does-it-work%3F\">#</a>\n<p>Alright, from here on, I'll be outlining which steps I took, to make my website ready for the IndieWeb.</p>\n<p>I already owned a domain and space to host a site, so that's a given, though I wasn't aware of it being an actual requirement to \"become a citizen of the IndieWeb\". I first stumbled upon <strong>Amit Gawande</strong>'s post <a href=\"https://www.amitgawande.com/2018/02/10/204300.html\">IndieWebify Your Hugo Website</a>, because this site is also generated using Hugo. I actually <a href=\"https://chringel.dev/2022/02/chringel-hugo-theme/\">wrote the theme myself</a>, so making changes to it's markup wouldn't be a problem.</p>\n\n<h3>1. Set up Web Sign In</h3>\n<a href=\"https://chringel.dev/2022/07/indiewebify-me-and-dont-forget-my-webmentions/#1.-set-up-web-sign-in\">#</a>\n<p>In order to authenticate yourself as the owner of your website using your domain, you will need to set up means to sign in via <a href=\"https://indieweb.org/IndieAuth\">IndieAuth</a>. That means you use your domain to verify yourself as the owner of your other social profiles.</p>\n<p>Just add a <code>rel=me</code> <a href=\"http://microformats.org/wiki/rel-me\">microformat</a> to all your links leading to your profiles on other platforms. That's actually the first thing I changed and made a <a href=\"https://github.com/chringel21/chringel-hugo-theme/commit/0996a9116fd40ba0c283a3164349828df9e78952#diff-96762550561f76f989ced99c4a0751e94696682490ee94b2d77a66377c9619eb\">commit</a> for.</p>\n<p><strong>Hint: All code excerpts are reduced to a minimal working example.</strong></p>\n<pre><code><span><span><span><</span>div</span><span>></span></span><br /> {{ range .Site.Menus.social }}<br /><span><span><span><</span>a</span> <span>rel</span><span><span>=</span><span>\"</span>me<span>\"</span></span> <span>href</span><span><span>=</span><span>\"</span>{{ .URL }}<span>\"</span></span> <span>title</span><span><span>=</span><span>\"</span>{{ .Name }}<span>\"</span></span><span>></span></span> {{ .Name }} <span><span><span></</span>a</span><span>></span></span><br /> {{ end }}<br /><span><span><span></</span>div</span><span>></span></span></code></pre>\n<p>Next, <a href=\"https://github.com/chringel21/chringel-hugo-theme/commit/c4221beea4a79c874a788d544cb32fadba919ebc\">I added an authorization endpoint</a> to validate my identity. There are different services, but <a href=\"https://indieauth.com/\">IndieAuth.com</a> seems to be the go to solution.</p>\n\n<pre><code>{{ with .Site.Params.indieweb }} <link rel=\"authorization_endpoint\" href=\"{{<br />.authorizationEndpoint | default \"https://indieauth.com/auth\" }}\" /> <link<br />rel=\"token_endpoint\" href=\"{{ .tokenEndpoint | default<br />\"https://tokens.indieauth.com/token\" }}\" /> {{ end }}</code></pre>\n<p>I also read about it on <strong>Ana Ulin</strong>'s post <a href=\"https://anaulin.org/blog/using-your-site-as-your-login-indieauth/\">Using Your Site As Your Login</a>. I went back to her <a href=\"https://anaulin.org/tags/indieweb/\">posts about IndieWeb</a> a couple of times during my journey.</p>\n\n<h3>2. Add author markup</h3>\n<a href=\"https://chringel.dev/2022/07/indiewebify-me-and-dont-forget-my-webmentions/#2.-add-author-markup\">#</a>\n<p>Next step was to actually provide some basic information about myself, on my website. Sure, I already had an <a href=\"https://chringel.dev/about\">About page</a>, but that's not machine readable. The <code>h-card</code> <a href=\"http://microformats.org/wiki/h-card#Properties\">microformat</a> provides properties that can be parsed. <a href=\"https://github.com/chringel21/chringel-hugo-theme/commit/19f0efa61cb8fec6fbd63b689a733a263ee10f72\">Here's the commit</a>.</p>\n\n<pre><code><span><span><span><</span>div</span> <span>class</span><span><span>=</span><span>\"</span>h-card<span>\"</span></span><span>></span></span><br /><span><span><span><</span>p</span><span>></span></span><br /><span><span><span><</span>a</span> <span>class</span><span><span>=</span><span>\"</span>u-url<span>\"</span></span> <span>href</span><span><span>=</span><span>\"</span>{{ .Site.BaseURL }}<span>\"</span></span><span>></span></span>{{ .Site.Title }}<span><span><span></</span>a</span><span>></span></span><br /> {{ with .Site.Params.Hcard.Avatar }}<br /><span><span><span><</span>img</span> <span>class</span><span><span>=</span><span>\"</span>u-photo<span>\"</span></span> <span>alt</span><span><span>=</span><span>\"</span><span>\"</span></span> <span>src</span><span><span>=</span><span>\"</span>{{ . | absURL }}<span>\"</span></span> <span>/></span></span><br /> {{ end }}<br /><span><span><span><</span>span</span> <span>class</span><span><span>=</span><span>\"</span>p-name<span>\"</span></span> <span>rel</span><span><span>=</span><span>\"</span>me<span>\"</span></span><span>></span></span> {{ .Site.Params.Hcard.FullName }} <span><span><span></</span>span</span><span>></span></span><br /><span><span><span></</span>p</span><span>></span></span><br /> {{ with .Site.Params.Hcard.Biography }}<br /><span><span><span><</span>p</span><span>></span></span><br /><span><span><span><</span>span</span> <span>class</span><span><span>=</span><span>\"</span>p-note<span>\"</span></span><span>></span></span>{{ . | markdownify }}<span><span><span></</span>span</span><span>></span></span><br /><span><span><span></</span>p</span><span>></span></span><br /> {{ end }}<br /><span><span><span></</span>div</span><span>></span></span></code></pre>\n<p>Again, this is a minimal example. There are many more properties that can be added. This is where I found <a href=\"https://indiewebify.me/\">IndieWebify.me</a>, a nice guide to check whether your site is ready for the IndieWeb.</p>\n<p></p><img alt=\"Valid `h-card` entry parsed by IndieWebify.me\" title=\"Valid `h-card` entry parsed by IndieWebify.me\" src=\"https://chringel.dev/img/bE5tr6rvTQ-500.png\" width=\"604\" height=\"736\" /><p>Valid <code>h-card</code> entry parsed by IndieWebify.me</p>\n<p></p>\n\n<h3>3. Add content markup</h3>\n<a href=\"https://chringel.dev/2022/07/indiewebify-me-and-dont-forget-my-webmentions/#3.-add-content-markup\">#</a>\n<p>If you want to publish content on the IndieWeb, it has to be machine readable as well. I added more markup, this time to my post templates. That's the <code>h-entry</code> <a href=\"http://microformats.org/wiki/h-entry\">microformat</a>. <a href=\"http://IndieWebify.me\">IndieWebify.me</a> was a huge helper for this step. A <a href=\"https://github.com/chringel21/chringel-hugo-theme/commit/1481e3b0f2a72fdee9a7704c89c8afe87f79b7fd\">couple</a> <a href=\"https://github.com/chringel21/chringel-hugo-theme/commit/a4a87731911c69e6b245444a1ad1935fc6694a81\">of</a> <a href=\"https://github.com/chringel21/chringel-hugo-theme/commit/5e8589a95525ec7663c939c98dbcc8e14006795f\">commits</a> and <a href=\"https://github.com/chringel21/chringel-hugo-theme/commit/522417c2db77275b51874a6f8f52eb6614c08a29\">iterations</a> later, my content was recognized correctly.</p>\n<p>In this example, I add the following <code>h-entry</code> properties:</p>\n<ul><li><code>p-name</code> - the post's title</li>\n<li><code>e-content</code> - the post's content</li>\n<li><code>p-author</code> - who wrote the post</li>\n<li><code>dt-published</code> - when the post was published</li>\n<li><code>u-url</code> - the permalink to the post</li>\n<li><code>p-category</code> - categories or tags for the post</li>\n</ul><pre><code>{{ define \"main\" }}<br /><span><span><span><</span>article</span> <span>class</span><span><span>=</span><span>\"</span>h-entry<span>\"</span></span><span>></span></span><br /><span><span><span><</span>h1</span> <span>class</span><span><span>=</span><span>\"</span>p-name<span>\"</span></span><span>></span></span>{{ .Title }}<span><span><span></</span>h1</span><span>></span></span><br /><span><span><span><</span>p</span> <span>class</span><span><span>=</span><span>\"</span>e-content<span>\"</span></span><span>></span></span>{{ .Content }}<span><span><span></</span>p</span><span>></span></span><br /><span><span><span><</span>div</span><span>></span></span><br /><span><span><span><</span>span</span><span>></span></span>Posted By:<span><span><span></</span>span</span><span>></span></span><br /><span><span><span><</span>a</span> <span>rel</span><span><span>=</span><span>\"</span>author<span>\"</span></span> <span>class</span><span><span>=</span><span>\"</span>p-author h-card<span>\"</span></span> <span>href</span><span><span>=</span><span>\"</span>{{ <span>\"</span></span><span>about\"</span> <span>|</span> <span>relURL</span> <span>}}\"</span><span>></span></span><br /> {{ .Params.author }}<br /><span><span><span></</span>a</span><span>></span></span><br /><span><span><span></</span>div</span><span>></span></span><br /><span><span><span><</span>div</span> <span>class</span><span><span>=</span><span>\"</span>pb-2<span>\"</span></span><span>></span></span><br /><span><span><span><</span>span</span><span>></span></span>Posted:<span><span><span></</span>span</span><span>></span></span><br /><span><span><span><</span>time</span> <span>class</span><span><span>=</span><span>\"</span>dt-published<span>\"</span></span> <span>datetime</span><span><span>=</span><span>\"</span>{{ .PublishDate.Format <span>\"</span></span><span>January</span> <span>2,</span> <span>2006\"</span> <span>}}\"</span><span>></span></span><br /><span><span><span><</span>a</span> <span>class</span><span><span>=</span><span>\"</span>u-url<span>\"</span></span> <span>href</span><span><span>=</span><span>\"</span>{{ .Permalink }}<span>\"</span></span><span>></span></span>{{ $publishDate }}<span><span><span></</span>a</span><span>></span></span><br /><span><span><span></</span>time</span><span>></span></span><br /><span><span><span></</span>div</span><span>></span></span><br /><span><span><span><</span>div</span> <span>class</span><span><span>=</span><span>\"</span>pb-2<span>\"</span></span><span>></span></span><br /><span><span><span><</span>span</span><span>></span></span>Categories:<span><span><span></</span>span</span><span>></span></span><br /> {{ range $idx, $category := . }}<br /> {{- if ne $idx 0 }}{{ end }}<br /> <a class=\"p-category\" href=\"{{ \"categories/\" | relURL }}{{ $category | urlize }}\"><br /> {{ $category }}<br /><span><span><span></</span>a</span><span>></span></span><br /> {{- end }}<br /><span><span><span></</span>div</span><span>></span></span><br /><span><span><span></</span>article</span><span>></span></span><br />{{ end }}</code></pre>\n<p></p><img alt=\"Valid `h-card` parsed by IndieWebify.me\" title=\"Valid `h-card` parsed by IndieWebify.me\" src=\"https://chringel.dev/img/Vf8Gj0ggpQ-500.png\" width=\"600\" height=\"1140\" /><p>Valid <code>h-card</code> parsed by IndieWebify.me</p>\n<p></p>\n<p>At this point, my content is correctly marked up to be consumed by the IndieWeb. This was all relatively easy. The next step was a little bit more challenging, because it meant working on the backend.</p>\n\n<h3>4. Add Webmentions</h3>\n<a href=\"https://chringel.dev/2022/07/indiewebify-me-and-dont-forget-my-webmentions/#4.-add-webmentions\">#</a>\n<p>After I read <strong>Fundor 333</strong>'s post <a href=\"https://fundor333.com/post/2022/indieweb-webmention-and-h-entry-in-my-blog/\">How I implement Indieweb, Webmention and H Entry in My Blog</a> I was wondering: <em>What are Webmentions?</em></p>\n<p><a href=\"https://indieweb.org/Webmention\">Webmentions</a> are a W3C recommendation for conversations and interactions across websites. It's a simple way to notify an URL when it is mentioned i.e. by me or on my site. It is basically a way of interacting with other people's content from your website.</p>\n<p><strong>For example</strong>: I read a super interesting post on another blog and I want to reply to it, or show my appreciation by reacting to it. I can do that, by writing a post on my site, referencing that other post and add markup indicating this is a response or a like. I can then send a Webmention to that other blog, telling it I reacted to it from my website.</p>\n<p>Sounds complicated? Well, it's just like Twitter, where you react to a tweet by commenting or liking it.</p>\n<p>I found out there's an easy way to set up Webmentions: <a href=\"https://webmention.io/\">Webmention.io</a>, written and maintained by <a href=\"https://aaronparecki.com/\">Aaron Parecki</a>. It's a service that handles Webmentions, simply by using Web Sign-In and adding some endpoints as links to your website.</p>\n<p>This would work perfectly as kind of a plug-and-play solution for my theme for others to use. But I'm more the guy who likes to self-host stuff. The <a href=\"https://indieweb.org/Webmention#Publisher_Services\">list of publisher services on indieweb.org</a> has some alternatives for sending and receiving Webmentions. I settled with <a href=\"https://github.com/wgroeneveld/go-jamming\">Go-Jamming</a> by <strong>Wouter Groeneveld</strong>. It's a really well written replacement for <a href=\"http://Webmention.io\">Webmention.io</a>. Also his post <a href=\"https://brainbaking.com/post/2021/05/beyond-webmention-io/\">Host your own webmention receiver</a> was most helpful.</p>\n<p>After Go-Jamming was running on my server, I <a href=\"https://github.com/chringel21/chringel-hugo-theme/commit/2221490cb96e86640ad2c83da9489ca391e07094\">added the Webmention endpoints</a>.</p>\n<pre><code><span><span><span><</span>link</span> <span>rel</span><span><span>=</span><span>\"</span>webmention<span>\"</span></span> <span>href</span><span><span>=</span><span>\"</span>https://jam.chringel.dev/webmention<span>\"</span></span> <span>/></span></span><br /><span><span><span><</span>link</span> <span>rel</span><span><span>=</span><span>\"</span>pingback<span>\"</span></span> <span>href</span><span><span>=</span><span>\"</span>https://jam.chringel.dev/pingback<span>\"</span></span> <span>/></span></span></code></pre>\n<p>Now all that was missing was a way to display them. I read through several blog posts how to render Webmentions in a static site: <strong>Jessica Smith</strong>'s post <a href=\"https://www.jayeless.net/2021/02/integrating-webmentions-into-hugo.html\">How I Integrated Webmentions Into My Hugo Static Site</a>, <strong>Keith Grant's</strong> post <a href=\"https://keithjgrant.com/posts/2019/02/adding-webmention-support-to-a-static-site/\">Adding Webmention Support to a Static Site</a> and of course <strong>Wouter Groeneveld</strong>'s post that I already mentioned.</p>\n<p><a href=\"https://github.com/chringel21/chringel-hugo-theme/commit/b358ef3687ea9752f382ddfb94ab65c66cf7b00c\">Two</a> <a href=\"https://github.com/chringel21/chringel-hugo-theme/commit/45e4a4076ae2e90458ae5c314c8e76ae91b22d34\">commits</a> later I had markup for displaying <strong>responses</strong> (as in comments) and <strong>reactions</strong> (as in favorites, reposts...).</p>\n<p>My current (semi-automatic) workflow for parsing Webmentions goes like this:</p>\n<ol><li>(Watch the feed for incoming Webmentions at <code>https://jam.chringel.dev/feed/</code>)</li>\n<li>When my site is built with Github Actions, fire up a simple <code>node.js</code> script to fetch Webmentions as JSON from the API</li>\n<li>Hugo processes the JSON file while building my site</li>\n</ol>\n<h3>5. Syndication and Backfeed</h3>\n<a href=\"https://chringel.dev/2022/07/indiewebify-me-and-dont-forget-my-webmentions/#5.-syndication-and-backfeed\">#</a>\n<p>One last peace to the puzzle were two terms I came across while reading all those posts that seemed to belong together: <a href=\"https://indieweb.org/POSSE\">POSSE</a> and <a href=\"https://indieweb.org/backfeed\">backfeed</a>.</p>\n<p>The first means publishing your content on your own site first, and then post links on other (social) platforms (<strong>P</strong>ublish on your <strong>O</strong>wn <strong>S</strong>ite, <strong>S</strong>yndicate <strong>E</strong>lsewhere), for example tweeting about your post with a link to your site.</p>\n<p>The latter describes the process of pulling in interactions of your POSSE copies to the original post. So, if someone comments on a tweet with the link to your post, it actually gets reverse syndicated to your site as a Webmention.</p>\n<p><a href=\"https://github.com/chringel21/chringel-hugo-theme/commit/9c029939db09281f6d99637a3de8d4b3411d30ba\">Adding syndication markup</a> is easy, it's just another <a href=\"http://microformats.org/wiki/h-entry#u-syndication\">microformat</a>.</p>\n\n<pre><code>{{ with .Params.syndication }} {{ range $silo, $url := . }}<br /><span><span><span><</span>a</span> <span>href</span><span><span>=</span><span>\"</span>{{ $url }}<span>\"</span></span> <span>class</span><span><span>=</span><span>\"</span>u-syndication<span>\"</span></span> <span>rel</span><span><span>=</span><span>\"</span>syndication<span>\"</span></span><br /><span>></span></span>{{ title $silo }}<span><span><span></</span>a</span><br /><span>></span></span><br />{{ end }} {{ end }}</code></pre>\n<p>And add the links where you syndicated your post in the front matter.</p>\n\n<pre><code><span><span>---</span><br /><span><span>...</span><br /><span>syndication</span><span>:</span><br /><span>mastodon</span><span>:</span> https<span>:</span>//fosstodon.org/web/@chringel/<span>...</span><br /><span>twitter</span><span>:</span> https<span>:</span>//twitter.com/DeEgge/status/<span>...</span><br /><span>...</span></span><br /><span>---</span></span></code></pre>\n<p>To achieve backfeed, I use a service called <a href=\"https://brid.gy/\">brid.gy</a>. Once you are authenticated \"Bridgy polls your silo posts, discovers original post links, and sends comments to those links as webmentions\" (<a href=\"https://indieweb.org/Bridgy#How_to_use\">How to use</a>). It automatically scrapes your site and checks links in your tweets or toots if they have a Webmention endpoint to notify them, when they are mentioned. It works quite well for what I want to achieve, which is displaying reactions to my posts from other platforms on my website.</p>\n\n<h2>Next steps</h2>\n<a href=\"https://chringel.dev/2022/07/indiewebify-me-and-dont-forget-my-webmentions/#next-steps\">#</a>\n<p>What I'm currently missing is a way of having IndieWeb conversations (IndieWeb level 3, according to <a href=\"http://IndieWebify.me\">IndieWebify.me</a>). For that, I would like to implement a content type <strong>notes</strong>, short posts as a way to react to other people's posts. There are also <a href=\"http://microformats.org/wiki/h-entry#Properties\">microformats</a> for that: <code>in-reply-to</code>, <code>u-like-of</code> and <code>u-repost-of</code>.</p>\n\n<h2>Final thoughts</h2>\n<a href=\"https://chringel.dev/2022/07/indiewebify-me-and-dont-forget-my-webmentions/#final-thoughts\">#</a>\n<p>At this point, I'm a <strong>Level 2 IndieWeb citizen</strong>. I can use <strong>Web Sign-In</strong> with my site, I marked up content using <strong>microformats</strong> and I can <strong>send and receive Webmentions</strong> to and from other IndieWeb sites.</p>\n<p>As I said before, there is <strong>no out-of-the-box solution</strong> for making your website ready for the IndieWeb. It involves a lot of customization, fiddling with services and setting up endpoints.</p>\n<p>Also, I think my <strong>Webmention workflow</strong> is lacking. I need to implement a way to automatically rebuilt my site when new Webmentions are coming in.</p>\n<p><strong>Syndication</strong> is another troubling topic. The process is a bit convoluted, and I'm not sure I'm doing this right. You see, I have to first publish my post, let my site be built, then syndicate the link (tweet it on Twitter, toot it on Mastodon), then add those tweet- and toot-links to my post and republish my site. If there's a better way, I still haven't found it.</p>\n<p>But in the end I'm quite happy with what I've accomplished. Ever since I started this journey IndieWeb-things kept popping in my head at the weirdest of times, and I'm content with the way things are right now. I resurfaced from the rabbit hole. Glad to be back!</p>", "text": "I actually can't recall anymore, what got me started with this whole IndieWeb thing. According to my browser history, I visited IndieWeb.org on June 15, 2022, so around a month ago. I read up on Miriam Suzanne's hugely popular post Am I on the IndieWeb Yet? and searched Google for \"hugo indieweb\" in the hopes there was some kind of recipe to get me started on my static page (I'm a developer and after all *let's say it all together* developers are lazy).\nThere wasn't THE ONE answer I was hoping for, but instead lot's and lot's of blog posts by people describing their way of getting into the IndieWeb. I was overwhelmed and intrigued at the same time, so I let it rest for a couple of days - four, to be exact. The afternoon of June 20, 2022, I went deep, even deeper than Jamiroquai, into the rabbit hole that is The IndieWeb. Let's retrace my steps through said browser history and commits.\n\nWhat's IndieWeb?\n#\n\nThe IndieWeb is a people-focused alternative to the 'corporate web'. - IndieWeb.org\n\nThat's what it says on the cover. It's about owning your content, sharing your thoughts and ideas in one place and then syndicating it to other (social) platforms. What if Twitter, for example, will be bought by a stupidly rich philanthropist who decides to shut it down? Where will all your tweets go?\nIn my opinion, your Twitter or your Facebook profile should not be your digital identity, owned by a tech company. You should be the sole owner of the content you share online. And that's what IndieWeb encourages people to do.\n\nHow does it work?\n#\nAlright, from here on, I'll be outlining which steps I took, to make my website ready for the IndieWeb.\nI already owned a domain and space to host a site, so that's a given, though I wasn't aware of it being an actual requirement to \"become a citizen of the IndieWeb\". I first stumbled upon Amit Gawande's post IndieWebify Your Hugo Website, because this site is also generated using Hugo. I actually wrote the theme myself, so making changes to it's markup wouldn't be a problem.\n\n1. Set up Web Sign In\n#\nIn order to authenticate yourself as the owner of your website using your domain, you will need to set up means to sign in via IndieAuth. That means you use your domain to verify yourself as the owner of your other social profiles.\nJust add a rel=me microformat to all your links leading to your profiles on other platforms. That's actually the first thing I changed and made a commit for.\nHint: All code excerpts are reduced to a minimal working example.\n<div>\n {{ range .Site.Menus.social }}\n<a rel=\"me\" href=\"{{ .URL }}\" title=\"{{ .Name }}\"> {{ .Name }} </a>\n {{ end }}\n</div>\nNext, I added an authorization endpoint to validate my identity. There are different services, but IndieAuth.com seems to be the go to solution.\n\n{{ with .Site.Params.indieweb }} <link rel=\"authorization_endpoint\" href=\"{{\n.authorizationEndpoint | default \"https://indieauth.com/auth\" }}\" /> <link\nrel=\"token_endpoint\" href=\"{{ .tokenEndpoint | default\n\"https://tokens.indieauth.com/token\" }}\" /> {{ end }}\nI also read about it on Ana Ulin's post Using Your Site As Your Login. I went back to her posts about IndieWeb a couple of times during my journey.\n\n2. Add author markup\n#\nNext step was to actually provide some basic information about myself, on my website. Sure, I already had an About page, but that's not machine readable. The h-card microformat provides properties that can be parsed. Here's the commit.\n\n<div class=\"h-card\">\n<p>\n<a class=\"u-url\" href=\"{{ .Site.BaseURL }}\">{{ .Site.Title }}</a>\n {{ with .Site.Params.Hcard.Avatar }}\n<img class=\"u-photo\" alt=\"\" src=\"{{ . | absURL }}\" />\n {{ end }}\n<span class=\"p-name\" rel=\"me\"> {{ .Site.Params.Hcard.FullName }} </span>\n</p>\n {{ with .Site.Params.Hcard.Biography }}\n<p>\n<span class=\"p-note\">{{ . | markdownify }}</span>\n</p>\n {{ end }}\n</div>\nAgain, this is a minimal example. There are many more properties that can be added. This is where I found IndieWebify.me, a nice guide to check whether your site is ready for the IndieWeb.\nValid h-card entry parsed by IndieWebify.me\n\n\n3. Add content markup\n#\nIf you want to publish content on the IndieWeb, it has to be machine readable as well. I added more markup, this time to my post templates. That's the h-entry microformat. IndieWebify.me was a huge helper for this step. A couple of commits and iterations later, my content was recognized correctly.\nIn this example, I add the following h-entry properties:\np-name - the post's title\ne-content - the post's content\np-author - who wrote the post\ndt-published - when the post was published\nu-url - the permalink to the post\np-category - categories or tags for the post\n{{ define \"main\" }}\n<article class=\"h-entry\">\n<h1 class=\"p-name\">{{ .Title }}</h1>\n<p class=\"e-content\">{{ .Content }}</p>\n<div>\n<span>Posted By:</span>\n<a rel=\"author\" class=\"p-author h-card\" href=\"{{ \"about\" | relURL }}\">\n {{ .Params.author }}\n</a>\n</div>\n<div class=\"pb-2\">\n<span>Posted:</span>\n<time class=\"dt-published\" datetime=\"{{ .PublishDate.Format \"January 2, 2006\" }}\">\n<a class=\"u-url\" href=\"{{ .Permalink }}\">{{ $publishDate }}</a>\n</time>\n</div>\n<div class=\"pb-2\">\n<span>Categories:</span>\n {{ range $idx, $category := . }}\n {{- if ne $idx 0 }}{{ end }}\n <a class=\"p-category\" href=\"{{ \"categories/\" | relURL }}{{ $category | urlize }}\">\n {{ $category }}\n</a>\n {{- end }}\n</div>\n</article>\n{{ end }}\nValid h-card parsed by IndieWebify.me\n\nAt this point, my content is correctly marked up to be consumed by the IndieWeb. This was all relatively easy. The next step was a little bit more challenging, because it meant working on the backend.\n\n4. Add Webmentions\n#\nAfter I read Fundor 333's post How I implement Indieweb, Webmention and H Entry in My Blog I was wondering: What are Webmentions?\nWebmentions are a W3C recommendation for conversations and interactions across websites. It's a simple way to notify an URL when it is mentioned i.e. by me or on my site. It is basically a way of interacting with other people's content from your website.\nFor example: I read a super interesting post on another blog and I want to reply to it, or show my appreciation by reacting to it. I can do that, by writing a post on my site, referencing that other post and add markup indicating this is a response or a like. I can then send a Webmention to that other blog, telling it I reacted to it from my website.\nSounds complicated? Well, it's just like Twitter, where you react to a tweet by commenting or liking it.\nI found out there's an easy way to set up Webmentions: Webmention.io, written and maintained by Aaron Parecki. It's a service that handles Webmentions, simply by using Web Sign-In and adding some endpoints as links to your website.\nThis would work perfectly as kind of a plug-and-play solution for my theme for others to use. But I'm more the guy who likes to self-host stuff. The list of publisher services on indieweb.org has some alternatives for sending and receiving Webmentions. I settled with Go-Jamming by Wouter Groeneveld. It's a really well written replacement for Webmention.io. Also his post Host your own webmention receiver was most helpful.\nAfter Go-Jamming was running on my server, I added the Webmention endpoints.\n<link rel=\"webmention\" href=\"https://jam.chringel.dev/webmention\" />\n<link rel=\"pingback\" href=\"https://jam.chringel.dev/pingback\" />\nNow all that was missing was a way to display them. I read through several blog posts how to render Webmentions in a static site: Jessica Smith's post How I Integrated Webmentions Into My Hugo Static Site, Keith Grant's post Adding Webmention Support to a Static Site and of course Wouter Groeneveld's post that I already mentioned.\nTwo commits later I had markup for displaying responses (as in comments) and reactions (as in favorites, reposts...).\nMy current (semi-automatic) workflow for parsing Webmentions goes like this:\n(Watch the feed for incoming Webmentions at https://jam.chringel.dev/feed/)\nWhen my site is built with Github Actions, fire up a simple node.js script to fetch Webmentions as JSON from the API\nHugo processes the JSON file while building my site\n5. Syndication and Backfeed\n#\nOne last peace to the puzzle were two terms I came across while reading all those posts that seemed to belong together: POSSE and backfeed.\nThe first means publishing your content on your own site first, and then post links on other (social) platforms (Publish on your Own Site, Syndicate Elsewhere), for example tweeting about your post with a link to your site.\nThe latter describes the process of pulling in interactions of your POSSE copies to the original post. So, if someone comments on a tweet with the link to your post, it actually gets reverse syndicated to your site as a Webmention.\nAdding syndication markup is easy, it's just another microformat.\n\n{{ with .Params.syndication }} {{ range $silo, $url := . }}\n<a href=\"{{ $url }}\" class=\"u-syndication\" rel=\"syndication\"\n>{{ title $silo }}</a\n>\n{{ end }} {{ end }}\nAnd add the links where you syndicated your post in the front matter.\n\n---\n...\nsyndication:\nmastodon: https://fosstodon.org/web/@chringel/...\ntwitter: https://twitter.com/DeEgge/status/...\n...\n---\nTo achieve backfeed, I use a service called brid.gy. Once you are authenticated \"Bridgy polls your silo posts, discovers original post links, and sends comments to those links as webmentions\" (How to use). It automatically scrapes your site and checks links in your tweets or toots if they have a Webmention endpoint to notify them, when they are mentioned. It works quite well for what I want to achieve, which is displaying reactions to my posts from other platforms on my website.\n\nNext steps\n#\nWhat I'm currently missing is a way of having IndieWeb conversations (IndieWeb level 3, according to IndieWebify.me). For that, I would like to implement a content type notes, short posts as a way to react to other people's posts. There are also microformats for that: in-reply-to, u-like-of and u-repost-of.\n\nFinal thoughts\n#\nAt this point, I'm a Level 2 IndieWeb citizen. I can use Web Sign-In with my site, I marked up content using microformats and I can send and receive Webmentions to and from other IndieWeb sites.\nAs I said before, there is no out-of-the-box solution for making your website ready for the IndieWeb. It involves a lot of customization, fiddling with services and setting up endpoints.\nAlso, I think my Webmention workflow is lacking. I need to implement a way to automatically rebuilt my site when new Webmentions are coming in.\nSyndication is another troubling topic. The process is a bit convoluted, and I'm not sure I'm doing this right. You see, I have to first publish my post, let my site be built, then syndicate the link (tweet it on Twitter, toot it on Mastodon), then add those tweet- and toot-links to my post and republish my site. If there's a better way, I still haven't found it.\nBut in the end I'm quite happy with what I've accomplished. Ever since I started this journey IndieWeb-things kept popping in my head at the weirdest of times, and I'm content with the way things are right now. I resurfaced from the rabbit hole. Glad to be back!"}, "mention-of": "https://fundor333.com/post/2022/indieweb-webmention-and-h-entry-in-my-blog/", "wm-property": "mention-of", "wm-private": false, "rels": {"canonical": "https://chringel.dev/2022/07/indiewebify-me-and-dont-forget-my-webmentions/"}}] |