john/capsule
1
0
Fork 0
mirror of https://github.com/jbowdre/capsule.git synced 2024-11-22 05:12:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

convert Markdown post to Gempost

Browse source
This commit is contained in:
jbowdre 2024-06-30 13:40:09 +00:00 committed by github-actions[bot]
parent 5f9a52c36a
commit 4bc1ddbe4a
3 changed files with 55 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
gemlog/adding-external-link-markers-in-hugo-and-bear.gmi Normal file
View file

@ -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

4
gemlog/adding-external-link-markers-in-hugo-and-bear.yaml Normal file
View file

@ -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"

37
markdown/incoming/adding-external-link-markers-in-hugo-and-bear.md → markdown/adding-external-link-markers-in-hugo-and-bear.md
View file

@ -1,37 +1,34 @@
--- ---
title: "Adding External Link Markers in Hugo and Bear" title: "Adding External Link Markers in Hugo and Bear"
published: "2024-06-30T13:35:31.396110Z" published: "2024-06-30T13:35:31.396110Z"
updated: "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 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: 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:
<div class="highlight">``` ```
<span></span>{{- $u := urls.Parse .Destination -}} {{- $u := urls.Parse .Destination -}}
<a href="{{ .Destination | safeURL }}"
{{- with .Title }} title="{{ . }}"{{ end -}}
{{- if $u.IsAbs }} rel="external"{{ end -}}
>
{{- with .Text | safeHTML }}{{ . }}{{ end -}} {{- with .Text | safeHTML }}{{ . }}{{ end -}}
{{- if $u.IsAbs }}↗{{ end -}} {{- if $u.IsAbs }}↗{{ end -}}
</a>
{{- /* chomp trailing newline */ -}} {{- /* chomp trailing newline */ -}}
``` ```
</div>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. 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: All I needed was to add this block to my Bear theme CSS:
<div class="highlight">``` ```
<span></span><span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">^=</span><span class="s2">"http"</span><span class="o">]</span><span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="p">:</span><span class="nd">not</span><span class="o">([</span><span class="nt">href</span><span class="o">*=</span><span class="s2">"blog.jbowdre.lol/"</span><span class="o">]))</span><span class="p">::</span><span class="nd">after</span><span class="w"> </span><span class="p">{</span> a[href^="http"]:where(:not([href*="blog.jbowdre.lol/"]))::after {
<span class="w"> </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="s2">"↗"</span> content: "↗"
<span class="p">}</span> }
``` ```
</div>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 => https://blog.jbowdre.lol/adding-external-link-markers-in-hugo-and-bear/ 📡 Originally posted on jbowdre's weblog