Commit 17c3ed97 authored by Jamie Tanna's avatar Jamie Tanna

Auto-link URLs in /mf2/ posts

Although /mf2/ posts can contain URLs, it wasn't up until this point
that we rendered them as HTML links.

This would hamper user experience for both human and computer readers
as it would remove some of the semanticness of the relevance of there
being a link there, as well as make it harder to follow the links
through.

To get this rendering, I've adapted [0] and [1] to produce a regex which
converts the plain URL to an HTML link

Additionally, convert any existing links that would break as part of
this change, as they're rendered next to punctuation that is valid in a
URL.

[0]: https://stackoverflow.com/a/29747837/2257038
[1]: https://stackoverflow.com/a/7109208/2257038
parent 481f85f9
Pipeline #85534976 passed with stages
in 8 minutes and 8 seconds
......@@ -8,7 +8,7 @@
],
"content": [
{
"value": "When I was promoting the last Homebrew Website Club on Twitter (https://twitter.com/JamieTanna/status/1138339357121744897), a friend of Craig's tweeted to mention to him about it. We then spent a couple of days talking about it - and boom, Craig is now running his own Homebrew Website Club on 18th July (https://getdoingthings.com/homebrew-website-club-barnsley-1/).\n\nLast night Craig posted this great post about joining the community and with some great explanations for newbies. Welcome, Craig!",
"value": "When I was promoting the last Homebrew Website Club on Twitter ( https://twitter.com/JamieTanna/status/1138339357121744897 ), a friend of Craig's tweeted to mention to him about it. We then spent a couple of days talking about it - and boom, Craig is now running his own Homebrew Website Club on 18th July ( https://getdoingthings.com/homebrew-website-club-barnsley-1/ ).\n\nLast night Craig posted this great post about joining the community and with some great explanations for newbies. Welcome, Craig!",
"html": ""
}
],
......
......@@ -2,7 +2,7 @@
"properties": {
"content": [
{
"value": "Last week I replaced my OnePlus 3 with a Pixel 3A.\n\nBoth Anna (https://annadodson.co.uk) and I have been thinking about getting a new phone for a while, but as both our phones were doing fairly ok, and we didn't want any unnecessary expenses, we decided to keep an eye out but not yet get anything.\n\nI'd originally heard about the Pixel 3A on the TechMeme Ride Home podcast (https://anchor.fm/techmeme-ride-home/episodes/Tue--0507---All-The-Headlines-From-Google-IO-e3v85p) which sounded really nice.\n\nBut then when I saw both Ed George (https://twitter.com/Sp4ghettiCode) and Graham Smith (https://twitter.com/whoisgraham) tweeting about the fact that they had just got one, I was very interested. As respected Android devs, I see them both as having done the research and know what they're doing - so it meant that I didn't have to do as much research, right??\n\nI could've waited, in all fairness, but Google did a deal where you got a Nest Home Hub, too, so it meant the phone was effectively £280 instead of £400, and we all know I love a good deal. Unfortunately that it still in the box, as is the Google Home Mini I've got, but maybe one day they'll make their way out - we're an Alexa household currently, but are looking at being multi-platform.\n\nSo what are my opening thoughts, one week in?\n\n- The migration tool was pretty cool, especially being able to just connect up another phone and have it sync, but for some reason my Google Play Store decided not to download anything so that didn't quite work as expected\n- I had rooted my OnePlus 3 so I could get better privacy control over my device, but hadn't used much on the rooting side for a while, largely because Google are making it such a pain to do. I decided I wouldn't root this device quite yet, which means I'm able to use Google Pay - which so far I've done a couple of times and it's been pretty useful, but has just saved me getting my wallet out\n- Battery is much better than my two year old OnePlus 3, and the second day I had it I was tethering + playing music almost all day without it even running out of charge the following morning. Pretty decent!\n- I am however missing some of the convenience gestures I could use from the lock screen - turning the torch on quickly, and controlling my music\n- I'm a fan of the always-on display, especially as it prompts me with the upcoming calendar event\n- The fast charge seems to be on par with the OnePlus Dash Charge - again a big decided in whether I got it or not, as being able to quickly boost battery was very important\n- It has a headphone jack, so I'm happy\n- Booting is super speedy - not that I need to that often, but it's good to have!\n- I'm liking Android Pie, although I'm sad I no longer have the multitasking button so can't toggle apps as quickly\n- I bought an official case, which although a bit pricey was quite nice, and has a good feel to it\n- The camera seems to be pretty decent, from the few shots I've taken of our black cat, Morph\n\nOverall it seems to be going well - hopefully it'll last as long as my OnePlus 3!\n\nEDIT: And something I forgot to mention was that the fingerprint sensor isn't in my location. I'm very used to it being where the home button is on my OnePlus 3, and combined with the placement of the headphone jack on top, it means I'll regularly unlock my phone as I'm taking it out of my pocket, which is quite annoying.\n\nEDIT: I also found the way to easily swap between apps is by swiping on the soft touch buttons, left to right. And by holding it for longer I can skip between multiple apps - nice stuff!",
"value": "Last week I replaced my OnePlus 3 with a Pixel 3A.\n\nBoth Anna (https://annadodson.co.uk) and I have been thinking about getting a new phone for a while, but as both our phones were doing fairly ok, and we didn't want any unnecessary expenses, we decided to keep an eye out but not yet get anything.\n\nI'd originally heard about the Pixel 3A on the TechMeme Ride Home podcast (https://anchor.fm/techmeme-ride-home/episodes/Tue--0507---All-The-Headlines-From-Google-IO-e3v85p) which sounded really nice.\n\nBut then when I saw both Ed George ( https://twitter.com/Sp4ghettiCode ) and Graham Smith ( https://twitter.com/whoisgraham ) tweeting about the fact that they had just got one, I was very interested. As respected Android devs, I see them both as having done the research and know what they're doing - so it meant that I didn't have to do as much research, right??\n\nI could've waited, in all fairness, but Google did a deal where you got a Nest Home Hub, too, so it meant the phone was effectively £280 instead of £400, and we all know I love a good deal. Unfortunately that it still in the box, as is the Google Home Mini I've got, but maybe one day they'll make their way out - we're an Alexa household currently, but are looking at being multi-platform.\n\nSo what are my opening thoughts, one week in?\n\n- The migration tool was pretty cool, especially being able to just connect up another phone and have it sync, but for some reason my Google Play Store decided not to download anything so that didn't quite work as expected\n- I had rooted my OnePlus 3 so I could get better privacy control over my device, but hadn't used much on the rooting side for a while, largely because Google are making it such a pain to do. I decided I wouldn't root this device quite yet, which means I'm able to use Google Pay - which so far I've done a couple of times and it's been pretty useful, but has just saved me getting my wallet out\n- Battery is much better than my two year old OnePlus 3, and the second day I had it I was tethering + playing music almost all day without it even running out of charge the following morning. Pretty decent!\n- I am however missing some of the convenience gestures I could use from the lock screen - turning the torch on quickly, and controlling my music\n- I'm a fan of the always-on display, especially as it prompts me with the upcoming calendar event\n- The fast charge seems to be on par with the OnePlus Dash Charge - again a big decided in whether I got it or not, as being able to quickly boost battery was very important\n- It has a headphone jack, so I'm happy\n- Booting is super speedy - not that I need to that often, but it's good to have!\n- I'm liking Android Pie, although I'm sad I no longer have the multitasking button so can't toggle apps as quickly\n- I bought an official case, which although a bit pricey was quite nice, and has a good feel to it\n- The camera seems to be pretty decent, from the few shots I've taken of our black cat, Morph\n\nOverall it seems to be going well - hopefully it'll last as long as my OnePlus 3!\n\nEDIT: And something I forgot to mention was that the fingerprint sensor isn't in my location. I'm very used to it being where the home button is on my OnePlus 3, and combined with the placement of the headphone jack on top, it means I'll regularly unlock my phone as I'm taking it out of my pocket, which is quite annoying.\n\nEDIT: I also found the way to easily swap between apps is by swiping on the soft touch buttons, left to right. And by holding it for longer I can skip between multiple apps - nice stuff!",
"html": ""
}
],
......
......@@ -2,7 +2,7 @@
"properties": {
"content": [
{
"value": "Welcome to my first https://indieweb.org/note! Notes are short-form content that will be purely plain text (for now!) and are similar to tweets on Twitter or toots on Mastodon, but won't be size limited.\n\nI've been wanting to creating other post types since starting to use https://indieweb.org/Microsub and having a social feed. I've found that I want to interact with other posts, such as like or repost others' content, much as I would do with Twitter.\n\nDiscoverability of notes currently aren't super amazing, but I'm tackling it as part of https://gitlab.com/jamietanna/jvt.me/issues/457 because adding these post types was a large enough piece of work.\n\nWith this note, I'll now be able to https://indieweb.org/bookmark, https://indieweb.org/like, https://indieweb.org/reply, https://indieweb.org/repost, and https://indieweb.org/rsvp.\n\nRSVPs are an interesting one, because the end goal I want is for my RSVPs to be syndicated from this site to i.e. Meetup.com.\n\nI'm hoping to work on bringing https://indieweb.org/Micropub support to this site, too, but as it's a static site with https://gohugo.io and hosted on https://gitlab.com with a full build/test/deploy pipeline, it'll be a little less straightforward, and slower, than other solutions.\n\nI've designed the content schema to be Micropub-first, as I want to be writing these posts using a Micropub client, rather than my usual workflow. I've made the source files JSON files (which Hugo natively supports) which makes them easily machine writeable - hopefully it'll teach me to prioritise my Micropub support so I don't have to manually write JSON!\n\nIn terms of licensing, I'm going to start by them in line with my posts, as http://creativecommons.org/licenses/by-nc-sa/4.0/legalcode, but down the line I may look at other licenses.",
"value": "Welcome to my first https://indieweb.org/note ! Notes are short-form content that will be purely plain text (for now!) and are similar to tweets on Twitter or toots on Mastodon, but won't be size limited.\n\nI've been wanting to creating other post types since starting to use https://indieweb.org/Microsub and having a social feed. I've found that I want to interact with other posts, such as like or repost others' content, much as I would do with Twitter.\n\nDiscoverability of notes currently aren't super amazing, but I'm tackling it as part of https://gitlab.com/jamietanna/jvt.me/issues/457 because adding these post types was a large enough piece of work.\n\nWith this note, I'll now be able to https://indieweb.org/bookmark , https://indieweb.org/like , https://indieweb.org/reply , https://indieweb.org/repost , and https://indieweb.org/rsvp .\n\nRSVPs are an interesting one, because the end goal I want is for my RSVPs to be syndicated from this site to i.e. Meetup.com.\n\nI'm hoping to work on bringing https://indieweb.org/Micropub support to this site, too, but as it's a static site with https://gohugo.io and hosted on https://gitlab.com with a full build/test/deploy pipeline, it'll be a little less straightforward, and slower, than other solutions.\n\nI've designed the content schema to be Micropub-first, as I want to be writing these posts using a Micropub client, rather than my usual workflow. I've made the source files JSON files (which Hugo natively supports) which makes them easily machine writeable - hopefully it'll teach me to prioritise my Micropub support so I don't have to manually write JSON!\n\nIn terms of licensing, I'm going to start by them in line with my posts, as http://creativecommons.org/licenses/by-nc-sa/4.0/legalcode , but down the line I may look at other licenses.",
"html": ""
}
],
......
......@@ -10,7 +10,7 @@
"category" : [ "blogging" ],
"content" : [ {
"html" : "",
"value" : "#10MoreBlogPosts sounds like a great initiative - hope that it'll help get more folks into blogging.\n\nI've found it's really helped me personally since starting to work on blogumentation (blogging as a form of self-documentation https://www.jvt.me/posts/2017/06/25/blogumentation/)"
"value" : "#10MoreBlogPosts sounds like a great initiative - hope that it'll help get more folks into blogging.\n\nI've found it's really helped me personally since starting to work on blogumentation (blogging as a form of self-documentation https://www.jvt.me/posts/2017/06/25/blogumentation/ )"
} ]
},
"tags" : [ "blogging" ]
......
......@@ -8,7 +8,7 @@
],
"content": [
{
"value": "This should be a really interesting listen about getting started with the IndieWeb with David, I'd recommend it.\n\nBut in an even cooler turn of events, it was very cool to see that my article Why I Have a Website and You Should Too (https://www.jvt.me/posts/2019/07/22/why-website/) discussed at roughly 39:00.",
"value": "This should be a really interesting listen about getting started with the IndieWeb with David, I'd recommend it.\n\nBut in an even cooler turn of events, it was very cool to see that my article Why I Have a Website and You Should Too ( https://www.jvt.me/posts/2019/07/22/why-website/ ) discussed at roughly 39:00.",
"html": ""
}
],
......
---
title: "Auto-linking URLs with Hugo"
description: "How to get URLs automagically converted to links in Hugo, using Regular Expressions."
tags:
- hugo
- www.jvt.me
- blogumentation
license_code: Apache-2.0
license_prose: CC-BY-NC-SA-4.0
date: 2019-09-30T18:07:42+0200
slug: "hugo-autolink-urls"
---
[In May](/mf2/6b919e78-c46a-48e3-8866-9d9e9d41bb3d/), I decided that I would start to publish more content types on my site, such as short notes (similar to tweets) as well as bookmarks and replies.
This was fairly straightforward, but one issue I had with this was that my content was purely plaintext, which meant that if I were to include a URL in a post's body, it would not be converted to a clickable HTML link.
This was fine for a little bit, as I've been not doing too much with it, but over the last month or so I've been starting to publish a lot more on my site using my [Micropub server]({{< ref "2019-08-26-setting-up-micropub" >}}).
To make it possible to convert these to links for better user experience, both for automated parsing of the posts and humans viewing the posts, I needed to delve into some dark magic and use a regular expression (slight sarcasm!).
I managed to adapt [a JavaScript version of the regex](https://stackoverflow.com/a/29747837/2257038) to work with [Hugo's Regular Expressions functionality](https://gohugo.io/functions/replacere/), which led me to the following:
```go-html-template
{{ replaceRE "(https?://[a-zA-Z0-9\\-._~:/?#\\[\\]@!\\$&'()*\\+,;%=]+)" "<a href=\"$1\">$1</a>" .Content | safeHTML }}
```
Notice that we need to make sure that Hugo allows the HTML we've just injected, so add on a pipe to [`safeHTML`], otherwise it'll render the tags as text not HTML.
And that's it, you now have auto-linking URLs! You can see it in action in [my message to Aaron Parecki](/mf2/4d07b8b6-4f9c-4003-b3e3-00390c42ea86/).
---
posts:
- https://www.jvt.me/posts/2019/09/30/hugo-autolink-urls/
- https://www.jvt.me/posts/2019/09/28/microformats-licensing/
- https://www.jvt.me/posts/2019/09/22/git-push-matching/
- https://www.jvt.me/posts/2019/09/22/testing-slf4j-logs/
......
Subproject commit f30395f37a44d0985840d89c8e66802595106f76
Subproject commit e51933c81ab4e086f5a957e7ac771d06bcbfcee7
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment