Skip to content

Commit c5382b9

Browse files
committed
feat: external link icon
Adds icon to external links in header/footer/content. Removes CSS override in footer and style partials.
1 parent 8974df5 commit c5382b9

File tree

6 files changed

+44
-78
lines changed

6 files changed

+44
-78
lines changed

assets/scss/buttons.scss

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,6 @@
1010
@apply rounded-sm px-4 py-1.5 text-sm;
1111
}
1212

13-
// Suppress the global ::after icon for buttons where we use an inline SVG icon instead.
14-
a.btn.has-inline-icon[target='_blank']::after {
15-
content: none !important;
16-
}
17-
1813
// ----- Project-specific & Updated Theme Button Styles -----
1914

2015
// Project's main primary button (gradient) - e.g., for "Join Discord"

assets/scss/components/_footer.scss

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,6 @@
66
// Ensure logo text is white/light
77
@apply text-white;
88
}
9-
10-
// Override external link icon to be visible on dark background.
11-
// This is needed because the footer is dark even in light mode.
12-
a[target='_blank']::after {
13-
// This is the light-on-dark version of the icon, same as in dark mode
14-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABtQTFRFAAAAaGlp////1tbWTE1N8vLykZKS8fHxdnZ2RkLL8wAAAAl0Uk5TAE//9SD/kP9kb5xATAAAAFlJREFUeJxNzTsKgDAQhOGpJLVH+IWQa1jYSxp7T+ARQsB7u4/Gafbb2UAkz8oWUwfohkeLATg1HXYp1B6YjN1RaLYRRSALQxaGbsXleEe8RNn/kJF/aqn6ABiVDmAZHw+0AAAAAElFTkSuQmCC');
15-
}
169
}
1710

1811
.footer-heading {
Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1+
{{- /* layouts/_default/_markup/render-link.html */ -}}
12
<a href="{{ .Destination | safeURL }}"
2-
3-
{{ with .Title}}
4-
title="{{ . }}"
5-
{{ end }}
6-
7-
{{ if strings.HasPrefix .Destination "http" }}
8-
target="_blank"
9-
{{ end }}
10-
11-
{{ if in .Destination "?class=" }}
12-
{{ $getClass:= string (index (findRE "class=([^&#]*)" .Destination) 0) }}
13-
{{ $allClass:= replace $getClass `class=` `` }}
14-
{{ $class:= replace $allClass `+` ` ` }}
15-
class="{{$class}}"
16-
{{ end }}
17-
>{{.Text | safeHTML}}</a>
18-
{{- /* This comment removes trailing newlines. */ -}}
3+
{{- with .Title}} title="{{ . }}"{{ end -}}
4+
{{- $isExternal := strings.HasPrefix .Destination "http" -}}
5+
{{- if $isExternal }} target="_blank" rel="noopener"{{ end -}}
6+
{{- $class := "" -}}
7+
{{- if in .Destination "?class=" -}}
8+
{{- $class = index (findRE `class=([^&#]*)` .Destination) 0 | replace `class=` `` | replace `+` ` ` -}}
9+
class="{{ $class }}"
10+
{{- end -}}
11+
>
12+
{{- .Text | safeHTML -}}
13+
{{- if and $isExternal (not (in (string $class) "btn")) (not (in (string $class) "breadcrumb-link-parent")) (not (in (string $class) "social-link-container")) -}}
14+
{{- partial "icon.html" (dict "style" "solid" "name" "arrow-up-right-from-square" "class" "inline-block align-baseline ml-1 h-[0.8em] w-[0.8em]") -}}
15+
{{- end -}}
16+
</a>

layouts/partials/essentials/footer.html

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,13 @@ <h4 class="footer-heading">Explore</h4>
2828
<nav aria-label="Explore our resources">
2929
<ul class="footer-link-list">
3030
{{ range site.Menus.footer_explore_new.ByWeight }}
31-
<li><a href="{{ .URL | relLangURL }}" class="footer-link">{{ .Name }}</a></li>
31+
<li>
32+
{{ $is_external := findRE `^http` .URL }}
33+
<a href="{{ .URL | relLangURL }}" class="footer-link" {{ if $is_external }}target="_blank" rel="noopener"{{ end }}>
34+
{{- .Name -}}
35+
{{- if $is_external -}}{{- partial "icon.html" (dict "style" "solid" "name" "arrow-up-right-from-square" "class" "inline-block align-baseline ml-1 h-[0.8em] w-[0.8em]") -}}{{- end -}}
36+
</a>
37+
</li>
3238
{{ end }}
3339
</ul>
3440
</nav>
@@ -41,8 +47,10 @@ <h4 class="footer-heading">Community</h4>
4147
<ul class="footer-link-list">
4248
{{ range site.Menus.footer_community.ByWeight }}
4349
<li>
44-
<a href="{{ .URL | relLangURL }}" class="footer-link" {{ if findRE `^http` .URL }}target="_blank" rel="noopener"{{ end }}>
45-
{{ .Name }}
50+
{{ $is_external := findRE `^http` .URL }}
51+
<a href="{{ .URL | relLangURL }}" class="footer-link" {{ if $is_external }}target="_blank" rel="noopener"{{ end }}>
52+
{{- .Name -}}
53+
{{- if $is_external -}}{{- partial "icon.html" (dict "style" "solid" "name" "arrow-up-right-from-square" "class" "inline-block align-baseline ml-1 h-[0.8em] w-[0.8em]") -}}{{- end -}}
4654
</a>
4755
</li>
4856
{{ end }}
@@ -56,7 +64,13 @@ <h4 class="footer-heading">About & Legal</h4>
5664
<nav aria-label="About and legal information">
5765
<ul class="footer-link-list">
5866
{{ range site.Menus.footer_legal_new.ByWeight }}
59-
<li><a href="{{ .URL | relLangURL }}" class="footer-link">{{ .Name }}</a></li>
67+
<li>
68+
{{ $is_external := findRE `^http` .URL }}
69+
<a href="{{ .URL | relLangURL }}" class="footer-link" {{ if $is_external }}target="_blank" rel="noopener"{{ end }}>
70+
{{- .Name -}}
71+
{{- if $is_external -}}{{- partial "icon.html" (dict "style" "solid" "name" "arrow-up-right-from-square" "class" "inline-block align-baseline ml-1 h-[0.8em] w-[0.8em]") -}}{{- end -}}
72+
</a>
73+
</li>
6074
{{ end }}
6175
</ul>
6276
</nav>

layouts/partials/essentials/header.html

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,16 @@
6565
{{ partial "components/theme-switcher" (dict "Class" "mr-5") }}
6666

6767
<!-- navigation btn -->
68-
{{ if site.Params.navigation_button.enable }}
69-
<a href="{{ site.Params.navigation_button.link | relLangURL }}" class="btn-new-primary btn-sm hidden lg:inline-block">
70-
{{ site.Params.navigation_button.label }}
71-
</a>
68+
{{ with site.Params.navigation_button }}
69+
{{ if .enable }}
70+
{{ $is_external := findRE `^http` .link }}
71+
<a href="{{ .link | relLangURL }}" class="btn-new-primary btn-sm hidden lg:inline-block" {{ if $is_external }}target="_blank" rel="noopener"{{ end }}>
72+
{{- .label -}}
73+
{{- if $is_external -}}
74+
{{- partial "icon.html" (dict "style" "solid" "name" "arrow-up-right-from-square" "class" "ml-1.5") -}}
75+
{{- end -}}
76+
</a>
77+
{{ end }}
7278
{{ end }}
7379
</div>
7480
</nav>

layouts/partials/essentials/style.html

Lines changed: 1 addition & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
1+
{{- /* layouts/partials/essentials/style.html */ -}}
22
<!-- plugins + stylesheet -->
33
{{ $styles := slice }}
44
{{ range site.Params.plugins.css }}
@@ -21,46 +21,6 @@
2121
{{ else }}
2222
{{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . }}
2323
{{ end }}
24-
<style>
25-
a[target='_blank']::after {
26-
content: "";
27-
display: inline-block;
28-
width: 0.8em;
29-
height: 0.8em;
30-
margin-inline-start: 0.3em; /* Spacing between text and icon */
31-
vertical-align: -0.1em; /* Fine-tunes vertical alignment with text */
32-
background-size: contain;
33-
background-repeat: no-repeat;
34-
background-position: center;
35-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABtQTFRFAAAAl5aWAAAAKSkps7KyDQ0Nbm1tDg4OiYmJOV4XEQAAAAl0Uk5TAE//9SD/kP9kb5xATAAAAFlJREFUeJxNzTsKgDAQhOGpJLVH+IWQa1jYSxp7T+ARQsB7u4/Gafbb2UAkz8oWUwfohkeLATg1HXYp1B6YjN1RaLYRRSALQxaGbsXleEe8RNn/kJF/aqn6ABiVDmAZHw+0AAAAAElFTkSuQmCC');
36-
}
37-
38-
.dark a[target='_blank']::after {
39-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABtQTFRFAAAAaGlp////1tbWTE1N8vLykZKS8fHxdnZ2RkLL8wAAAAl0Uk5TAE//9SD/kP9kb5xATAAAAFlJREFUeJxNzTsKgDAQhOGpJLVH+IWQa1jYSxp7T+ARQsB7u4/Gafbb2UAkz8oWUwfohkeLATg1HXYp1B6YjN1RaLYRRSALQxaGbsXleEe8RNn/kJF/aqn6ABiVDmAZHw+0AAAAAElFTkSuQmCC');
40-
}
41-
/* --- EXCEPTION LIST --- */
42-
/* The global rule above adds an icon to all external links. */
43-
/* Add component-specific selectors here to suppress the icon where it's not wanted. */
44-
.social-icons a[target="_blank"]::after,
45-
.share-icons a[target="_blank"]::after,
46-
.contributor-socials a[target="_blank"]::after,
47-
.og-preview-container a[target="_blank"]::after {
48-
content: none;
49-
}
50-
a.btn[target='_blank']::after {
51-
content: "";
52-
display: inline-block;
53-
width: 16px;
54-
height: 16px;
55-
margin: 0px 3px 0px 5px;
56-
background-size: contain;
57-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABtQTFRFAAAAaGlp////1tbWTE1N8vLykZKS8fHxdnZ2RkLL8wAAAAl0Uk5TAE//9SD/kP9kb5xATAAAAFlJREFUeJxNzTsKgDAQhOGpJLVH+IWQa1jYSxp7T+ARQsB7u4/Gafbb2UAkz8oWUwfohkeLATg1HXYp1B6YjN1RaLYRRSALQxaGbsXleEe8RNn/kJF/aqn6ABiVDmAZHw+0AAAAAElFTkSuQmCC');
58-
}
59-
60-
.dark a.btn[target='_blank']::after {
61-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABtQTFRFAAAAl5aWAAAAKSkps7KyDQ0Nbm1tDg4OiYmJOV4XEQAAAAl0Uk5TAE//9SD/kP9kb5xATAAAAFlJREFUeJxNzTsKgDAQhOGpJLVH+IWQa1jYSxp7T+ARQsB7u4/Gafbb2UAkz8oWUwfohkeLATg1HXYp1B6YjN1RaLYRRSALQxaGbsXleEe8RNn/kJF/aqn6ABiVDmAZHw+0AAAAAElFTkSuQmCC');
62-
}
63-
</style>
6424
<link
6525
href="{{ $styles.RelPermalink }}"
6626
integrity="{{ $styles.Data.Integrity }}"

0 commit comments

Comments
 (0)