Refactor code structure for improved readability and maintainability

hugo.toml

@@ -11,7 +11,8 @@ disableAliases = true
   gitforgeUrl = "https://gitforge.africa"
   repositoryUrl = "https://github.com/theafriforge"
   twitterHandle = "@theafriforge"
-  ogImage = "/images/og-theafriforge.png"
+  ogImage = "/images/og-theafriforge.jpg"
+  logoImage = "/images/logo-header.png"
   # Membership form configuration (fallback values).
   # Priority used in templates:
   # 1) HUGO_MEMBERSHIP_FORM_ACTION / HUGO_MEMBERSHIP_FORM_SUCCESS_PATH

i18n/en.toml

@@ -1,6 +1,9 @@
 [siteDescription]
 other = "African foundation for open-source software and digital sovereignty."
 
+[seoImageAlt]
+other = "TheAfriForge logo representing African digital sovereignty"
+
 [gitforgeCta]
 other = "Access GitForge"
 

i18n/fr.toml

@@ -1,6 +1,9 @@
 [siteDescription]
 other = "Fondation africaine du logiciel libre et de la souveraineté numerique."
 
+[seoImageAlt]
+other = "Logo TheAfriForge representant la souverainete numerique africaine"
+
 [gitforgeCta]
 other = "Acceder a GitForge"
 

layouts/_default/baseof.html

@@ -4,6 +4,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
+    <link rel="icon" href='{{ "favicon.ico" | relURL }}?v=3' sizes="any">
+    <link rel="icon" type="image/png" href='{{ "images/favicon-192.png" | relURL }}?v=3' sizes="192x192">
+    <link rel="apple-touch-icon" href='{{ "images/favicon-512.png" | relURL }}?v=3'>
     {{ partial "seo.html" . }}
     <script>
       tailwind = {

layouts/partials/seo.html

@@ -4,6 +4,9 @@
 {{ $url         := .Permalink }}
 {{ $lang        := .Site.Language.Lang }}
 {{ $locale      := replace .Site.LanguageCode "-" "_" }}
+{{ $ogImage     := .Site.Params.ogImage }}
+{{ $logoImage   := or .Site.Params.logoImage .Site.Params.ogImage }}
+{{ $imageAlt    := i18n "seoImageAlt" }}
 
 {{/* ---- Canonical ---- */}}
 <link rel="canonical" href="{{ $url }}">
@@ -41,8 +44,11 @@
 {{ else }}
   <meta property="og:type" content="article">
 {{ end }}
-{{ with .Site.Params.ogImage }}
+{{ with $ogImage }}
   <meta property="og:image" content="{{ . | absURL }}">
+  <meta property="og:image:secure_url" content="{{ . | absURL }}">
+  <meta property="og:image:alt" content="{{ $imageAlt }}">
+  <link rel="image_src" href="{{ . | absURL }}">
 {{ end }}
 
 {{/* ---- Twitter Card ---- */}}
@@ -52,8 +58,9 @@
 {{ with .Site.Params.twitterHandle }}
   <meta name="twitter:site" content="{{ . }}">
 {{ end }}
-{{ with .Site.Params.ogImage }}
+{{ with $ogImage }}
   <meta name="twitter:image" content="{{ . | absURL }}">
+  <meta name="twitter:image:alt" content="{{ $imageAlt }}">
 {{ end }}
 
 {{/* ---- JSON-LD Organization (home only) ---- */}}
@@ -65,6 +72,7 @@
   "name": "{{ .Site.Title }}",
   "url": "{{ .Site.BaseURL }}",
   "description": "{{ i18n "siteDescription" | plainify }}",
+  "logo": "{{ $logoImage | absURL }}",
   "sameAs": [
     {{ with .Site.Params.repositoryUrl }}"{{ . }}"{{ end }}
   ]

layouts/partials/site-header.html

@@ -5,7 +5,7 @@
     <div class="flex items-center justify-between">
       <!-- Logo -->
       <a href="{{ "/" | relLangURL }}" class="flex items-center gap-2 font-bold text-lg text-slate-900">
-        <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-green-800 text-white text-sm font-black">AF</span>
+        <img src='{{ "images/logo-header.png" | relURL }}' alt="TheAfriForge logo" class="h-9 w-auto object-contain" loading="eager" decoding="async">
         <span>TheAfriForge</span>
       </a>