style external nav menu links
Alan Pearce alan@alanpearce.eu
Wed, 19 Jun 2024 13:51:24 +0200
6 files changed, 33 insertions(+), 3 deletions(-)
M config.toml → config.toml
@@ -18,6 +18,9 @@ [content-security-policy] default-src = [ "'none'", ] + img-src = [ + "'self'", + ] form-action = [ "'none'", ]
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 {
A 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>
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; +}