all repos — homestead @ 0459a022a8a7d952d81196555e052b8a809db88b

Code for my website

style external nav menu links

Alan Pearce
commit

0459a022a8a7d952d81196555e052b8a809db88b

parent

773b1b69f8b57aede7aa47151863087b3072213d

4 files changed, 19 insertions(+), 3 deletions(-)

jump to
M internal/builder/homepage.templ → internal/builder/homepage.templ
@@ -33,7 +33,7 @@ </a>
 				</li>
 				for _, link := range config.Menus["me"] {
 					<li>
-						<a class="u-url" rel="me" href={ templ.SafeURL(link.URL) }>{ link.Name }</a>
+						<a class="u-url" rel="me" href={ templ.SafeURL(link.URL.String()) }>{ link.Name }</a>
 					</li>
 				}
 			</ul>
M internal/builder/page.templ → internal/builder/page.templ
@@ -20,6 +20,15 @@ return cs
 	}
 }
 
+templ menuItem(item config.MenuItem) {
+	<a
+		href={ templ.SafeURL(item.URL.String()) }
+		if item.URL.IsAbs() {
+			target="_blank"
+		}
+	>{ item.Name }</a>
+}
+
 templ page(site config.Config, page PageSettings) {
 	<!DOCTYPE html>
 	<html lang={ site.DefaultLanguage }>

@@ -38,7 +47,7 @@ <a href="/" class={ extendClasses("title p-name", page.TitleAttrs) } { page.TitleAttrs... }>{ site.Title }</a>
 				</h2>
 				<nav>
 					for _, item := range site.Menus["main"] {
-						<a href={ templ.SafeURL(item.URL) }>{ item.Name }</a>
+						@menuItem(item)
 					}
 				</nav>
 			</header>
M internal/config/config.go → internal/config/config.go
@@ -16,7 +16,7 @@ }
 
 type MenuItem struct {
 	Name string
-	URL  string `toml:"url"`
+	URL  URL `toml:"url"`
 }
 
 type URL struct {
M templates/style.css → templates/style.css
@@ -11,6 +11,7 @@ --visited-color: #8b6fcb;
   --code-background-color: #f2f2f2;
   --code-color: #222;
   --blockquote-color: #222;
+  --icon-external-link: url("/external-link.svg");
 }
 
 @media (prefers-color-scheme: dark) {

@@ -205,3 +206,9 @@ svg.rss-icon {
   height: 1.5ex;
   width: 1.5ex;
 }
+
+a[target="_blank"]::after {
+  content: "";
+  background: no-repeat var(--icon-external-link);
+  padding-right: 1em;
+}