diff --git a/gemlog/adding-external-link-markers-in-hugo-and-bear.gmi b/gemlog/adding-external-link-markers-in-hugo-and-bear.gmi new file mode 100644 index 0000000..f104fb8 --- /dev/null +++ b/gemlog/adding-external-link-markers-in-hugo-and-bear.gmi @@ -0,0 +1,34 @@ +I tend to drop a lot of links in my posts. Some point to other posts/pages within the same site, but many point to external sites. As a *reader*, I like to know where a link is going to take me, but as a *writer*, I'm not always great about indicating that context within the text. + +I mentioned in my inaugural "This Week" post[1] that I recently discovered how to use Hugo's link render-hook templates[2] to automatically apply a little `↗` marker to external links posted on runtimeterror[3]. All that took was creating `layouts/_default/_markup/render-link.html` with the following content to overwrite the default rendering: + +=> /this-week-2024-06-29/ 1: inaugural "This Week" post +=> https://gohugo.io/render-hooks/links/ 2: Hugo's link render-hook templates +=> https://runtimeterror.dev 3: runtimeterror + +``` +{{- $u := urls.Parse .Destination -}} + + {{- with .Text | safeHTML }}{{ . }}{{ end -}} + {{- if $u.IsAbs }}↗{{ end -}} + +{{- /* chomp trailing newline */ -}} +``` + +That works well with Hugo since the marker gets inserted into the HTML source code at build time. But what about here on Bear? + +So I went looking for a CSS-based solution that would work here. It only took about 30 seconds of searching to find a post from Jake Bauer[1] with the relevant CSS bits. + +=> https://www.paritybit.ca/blog/styling-external-links/ 1: a post from Jake Bauer + +All I needed was to add this block to my Bear theme CSS: + +``` +a[href^="http"]:where(:not([href*="blog.jbowdre.lol/"]))::after { + content: "↗" +} +``` + +That was surprisingly easy, and today I learned you can use complex/compound selectors to perform pattern matching with CSS. Neat! + +=> https://blog.jbowdre.lol/adding-external-link-markers-in-hugo-and-bear/ 📡 Originally posted on jbowdre's weblog diff --git a/gemlog/adding-external-link-markers-in-hugo-and-bear.yaml b/gemlog/adding-external-link-markers-in-hugo-and-bear.yaml new file mode 100644 index 0000000..eeaaba2 --- /dev/null +++ b/gemlog/adding-external-link-markers-in-hugo-and-bear.yaml @@ -0,0 +1,4 @@ +id: "urn:uuid:37aba3f9-8fe8-4356-a514-5ccb7b67a4c5" +title: "Adding External Link Markers in Hugo and Bear" +published: "2024-06-30T13:35:31.396110Z" +updated: "2024-06-30T13:35:31.396110Z" diff --git a/markdown/incoming/adding-external-link-markers-in-hugo-and-bear.md b/markdown/adding-external-link-markers-in-hugo-and-bear.md similarity index 53% rename from markdown/incoming/adding-external-link-markers-in-hugo-and-bear.md rename to markdown/adding-external-link-markers-in-hugo-and-bear.md index 9a6c60a..e65a6cb 100644 --- a/markdown/incoming/adding-external-link-markers-in-hugo-and-bear.md +++ b/markdown/adding-external-link-markers-in-hugo-and-bear.md @@ -1,37 +1,34 @@ ---- -title: "Adding External Link Markers in Hugo and Bear" -published: "2024-06-30T13:35:31.396110Z" -updated: "2024-06-30T13:35:31.396110Z" ---- - +--- +title: "Adding External Link Markers in Hugo and Bear" +published: "2024-06-30T13:35:31.396110Z" +updated: "2024-06-30T13:35:31.396110Z" +--- + I tend to drop a lot of links in my posts. Some point to other posts/pages within the same site, but many point to external sites. As a *reader*, I like to know where a link is going to take me, but as a *writer*, I'm not always great about indicating that context within the text. I mentioned in my [inaugural "This Week" post](/this-week-2024-06-29/) that I recently discovered how to use [Hugo's link render-hook templates](https://gohugo.io/render-hooks/links/) to automatically apply a little `↗` marker to external links posted on [runtimeterror](https://runtimeterror.dev). All that took was creating `layouts/_default/_markup/render-link.html` with the following content to overwrite the default rendering: -
``` -{{- $u := urls.Parse .Destination -}} - +``` +{{- $u := urls.Parse .Destination -}} + {{- with .Text | safeHTML }}{{ . }}{{ end -}} {{- if $u.IsAbs }}↗{{ end -}} - + {{- /* chomp trailing newline */ -}} ``` -
That works well with Hugo since the marker gets inserted into the HTML source code at build time. But what about here on Bear? +That works well with Hugo since the marker gets inserted into the HTML source code at build time. But what about here on Bear? So I went looking for a CSS-based solution that would work here. It only took about 30 seconds of searching to find [a post from Jake Bauer](https://www.paritybit.ca/blog/styling-external-links/) with the relevant CSS bits. All I needed was to add this block to my Bear theme CSS: -
``` -a[href^="http"]:where(:not([href*="blog.jbowdre.lol/"]))::after { - content: "↗" -} +``` +a[href^="http"]:where(:not([href*="blog.jbowdre.lol/"]))::after { + content: "↗" +} ``` -
That was surprisingly easy, and today I learned you can use complex/compound selectors to perform pattern matching with CSS. Neat! - +That was surprisingly easy, and today I learned you can use complex/compound selectors to perform pattern matching with CSS. Neat! + => https://blog.jbowdre.lol/adding-external-link-markers-in-hugo-and-bear/ 📡 Originally posted on jbowdre's weblog \ No newline at end of file