Add external links in navbar

README.md

@@ -8,10 +8,12 @@ It contains a theme coded specifically for the blog, with examples taken from Hu
 
 Hugo is really powerful yet pretty light and really fast. I do like the way templating is used to achieve very elegant tricks. In the past we would have used databases and dynamic languages like PHP for the same result.
 
-I think that using Wordpress for a little static blog is no longer relevant and I am really enthousiastic about projects like Hugo. Additionnally, the community seems very friendly. Other static CMS such as Ghost have an economic model that I don't like (eg you have to pay for plugins) and Grav is great but not so artisanal. The learning curve is pretty high and you're encouraged to use an existing theme with the PHP admin interface.
+I think that using Wordpress for a little static blog is no longer relevant and I am really enthousiastic about projects like Hugo. Additionnally, the community seems very friendly. Other static/flatfile CMS such as Ghost have an economic model that I don't like (eg you have to pay for plugins) and Grav is great but not so artisanal : the learning curve is pretty high and you stll need PHP.
 
 With Hugo, I really have the sensation of minimizing the ressources I use while totally understanding what I am doing (even if I am doing it badly).
 
+TBH I haven't heard of Zola when starting this blog. Maybe today I would choose Zola, because it seems less complex and making more sense (eg with its templating language), but I'm still happy with my theme.
+
 ## Building
 
 Just run `hugo` and serve the `public` directory.

config.yaml

@@ -32,3 +32,10 @@ privacy:
 
 theme:
   - chosto
+
+params:
+  github: https://github.com/Chostakovitch
+  mastodon: https://framapiaf.org/@chosto
+  gitea: https://git.chosto.me
+  mail: mailto:quentinduchemin@tuta.io
+  funkwhale: https://music.chosto.me/@Chosto/

themes/chosto/layouts/partials/head.html

@@ -5,6 +5,11 @@
   {{ $styleCustom := resources.Get "css/custom.css" }}
   <link rel="stylesheet" href="{{ $styleBulma.Permalink }}">
   <link rel="stylesheet" href="{{ $styleCustom.Permalink }}">
+  <!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
+  <style>
+    {{ $bg := resources.Get "img/hero_home.png" }}
+    .has-bg-img { background: url('{{ $bg.Permalink }}')center center; background-size:cover; }
+  </style>
   <title>
       {{ .Site.Title }}
   </title>

themes/chosto/layouts/partials/header.html

@@ -1,5 +1,5 @@
 <header>
-  <section class="hero is-primary is-medium">
+  <section class="hero is-primary is-medium has-bg-img">
     <div class="hero-body has-text-centered">
       <p class="title is-1 is-uppercase">{{ .Title }}</p>
       {{ with .Params.subtitle }}

themes/chosto/layouts/partials/navbar.html

@@ -44,30 +44,44 @@
     <!-- start/end menu shares the exact same code, just not the same position, factorize with a loop -->
     {{ $currentPage := . }}
     {{ range (slice "start" "end")}}
-    {{ $menu_name := . }}
+    {{ $menuName := . }}
     <div class="navbar-{{ . }} mr-2">
       <!-- now get the menu if it exists -->
-      {{ with index $.Site.Menus $menu_name }}
+      {{ with index $.Site.Menus $menuName }}
       <!-- and range over its pages -->
       {{ range . }}
       {{ if .HasChildren }}
-      <div class="navbar-item has-dropdown is-hoverable {{ if $currentPage.HasMenuCurrent $menu_name . }}is-active is-tab{{ end }}">
+      <div class="navbar-item has-dropdown is-hoverable {{ if $currentPage.HasMenuCurrent $menuName . }}is-active is-tab{{ end }}">
         <a class="navbar-link">
           {{ .Pre }}
           <span>{{ .Name }}</span>
         </a>
         <div class="navbar-dropdown">
           {{ range .Children }}
-          <a class="navbar-item {{ if $currentPage.IsMenuCurrent $menu_name . }}is-active is-tab{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
+          <a class="navbar-item {{ if $currentPage.IsMenuCurrent $menuName . }}is-active is-tab{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
           {{ end }}
         </div>
       </div>
       {{ else }}
-      <a class="navbar-item {{ if $currentPage.IsMenuCurrent $menu_name . }}is-active is-tab{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
+      <a class="navbar-item {{ if $currentPage.IsMenuCurrent $menuName . }}is-active is-tab{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
       {{ end }}
       {{ end }}
     {{ end }}
   </div>
     {{ end }}
+  <div class="navbar-end ml-0 mr-4">
+    <!-- Each item should have a corresponding assets/img/x.png and link in config.yaml -->
+    {{ range (slice "github" "mastodon" "gitea" "mail" "funkwhale" )}}
+      {{ $imageName := . }}
+      <!-- Get image and resize to logo size -->
+      {{ $imagePath := printf "img/%s.png" $imageName }}
+      {{ $image := resources.Get $imagePath }}
+      {{ $image32 := $image.Resize "32x" }}
+      <!-- Get logo link in site params (index allows to use a dynamic parameter name) -->
+      <a class="navbar-item" href="{{ index $.Site.Params $imageName }}">
+        <img src="{{ $image32.Permalink }}">
+      </a>
+    {{ end }}
+  </div>
   </div>
 </nav>