From 8002766378b1153e749297ed1d01ba221ee72b41 Mon Sep 17 00:00:00 2001
From: Alan Pearce
Date: Wed, 19 Jun 2024 13:51:24 +0200
Subject: style external nav menu links

---
 config.toml                     |  3 +++
 internal/builder/homepage.templ |  2 +-
 internal/builder/page.templ     | 11 ++++++++++-
 internal/config/config.go       |  2 +-
 static/external-link.svg        | 11 +++++++++++
 templates/style.css             |  7 +++++++
 6 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 static/external-link.svg
diff --git a/config.toml b/config.toml
index fa26b27..769ebd8 100644
--- a/config.toml
+++ b/config.toml
@@ -18,6 +18,9 @@ oidc_host = "https://id.alanpearce.eu/"
   default-src = [
     "'none'",
   ]
+  img-src = [
+    "'self'",
+  ]
   form-action = [
     "'none'",
   ]
diff --git a/internal/builder/homepage.templ b/internal/builder/homepage.templ
index df5bc32..848b9ed 100644
--- a/internal/builder/homepage.templ
+++ b/internal/builder/homepage.templ
@@ -33,7 +33,7 @@ templ homepage(config config.Config, posts []content.Post, content string) {
 				</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>
diff --git a/internal/builder/page.templ b/internal/builder/page.templ
index 7b3380f..9a2be2f 100644
--- a/internal/builder/page.templ
+++ b/internal/builder/page.templ
@@ -20,6 +20,15 @@ func extendClasses(cs string, attrs templ.Attributes) string {
 	}
 }
 
+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 @@ templ page(site config.Config, page PageSettings) {
 				</h2>
 				<nav>
 					for _, item := range site.Menus["main"] {
-						<a href={ templ.SafeURL(item.URL) }>{ item.Name }</a>
+						@menuItem(item)
 					}
 				</nav>
 			</header>
diff --git a/internal/config/config.go b/internal/config/config.go
index df69bce..4477ad4 100644
--- a/internal/config/config.go
+++ b/internal/config/config.go
@@ -16,7 +16,7 @@ type Taxonomy struct {
 
 type MenuItem struct {
 	Name string
-	URL  string `toml:"url"`
+	URL  URL `toml:"url"`
 }
 
 type URL struct {
diff --git a/static/external-link.svg b/static/external-link.svg
new file mode 100644
index 0000000..35b5805
--- /dev/null
+++ b/static/external-link.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20">
+  <g style="stroke:rgb(35,82,124);stroke-width:1">
+    <line x1="5" y1="5" x2="5" y2="14" />
+    <line x1="14" y1="9" x2="14" y2="14" />
+    <line x1="5" y1="14" x2="14" y2="14" />
+    <line x1="5" y1="5" x2="9" y2="5"  />
+    <line x1="10" y1="2" x2="17" y2="2"  />
+    <line x1="17" y1="2" x2="17" y2="9" />
+    <line x1="10" y1="9" x2="17" y2="2" style="stroke-width:1.5" />
+  </g>
+</svg>
diff --git a/templates/style.css b/templates/style.css
index 84ce1ce..89fd58f 100644
--- a/templates/style.css
+++ b/templates/style.css
@@ -11,6 +11,7 @@
   --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;
+}
-- 
cgit 1.4.1

