Fix the single template to use the authors avatar correctly (#107)

* Fix the single template to use the authors avatar correctly

* Replace absURL with relURL and .Site.X with site.X

Co-authored-by: Emruz Hossain <emruz@appscode.com>

README.md

@@ -98,9 +98,9 @@ params:
   # transparent navbar and the main logo will be used in the non-transparent navbar.
   # It will be default to the theme logos if not provided.
   logo:
-    main: assets/images/main-logo.png
-    inverted: assets/images/inverted-logo.png
-    favicon: assets/images/favicon.png
+    main: /assets/images/main-logo.png
+    inverted: /assets/images/inverted-logo.png
+    favicon: /assets/images/favicon.png
 
   # GitHub repo URL of your site
   gitRepo: https://github.com/hossainemruz/toha-example-site

exampleSite/config.yaml

@@ -15,7 +15,7 @@ languages:
   bn:
     languageName: বাংলা
     weight: 3
-  de: 
+  de:
     languageName: Deutsch
     weight: 4
   id: 
@@ -54,9 +54,9 @@ params:
   # transparent navbar and the main logo will be used in the non-transparent navbar.
   # It will be default to the theme logos if not provided.
   logo:
-    main: assets/images/main-logo.png
-    inverted: assets/images/inverted-logo.png
-    favicon: assets/images/favicon.png
+    main: /assets/images/main-logo.png
+    inverted: /assets/images/inverted-logo.png
+    favicon: /assets/images/favicon.png
 
   # GitHub repo URL of your site
   gitRepo: https://github.com/hossainemruz/toha-example-site

layouts/404.html

@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
+    {{ partial "navigators/navbar-2.html" (dict "baseURL" site.BaseURL "title" site.Title "hasToggleButton" false) }}
 {{ end }}
 
 {{ define "content" }}

layouts/_default/baseof.html

@@ -9,7 +9,7 @@
     {{ block "header" . }} {{ end }}
 
     <!-- ADD GOOGLE ANALYTICS IF ENABLED -->
-    {{ if .Site.GoogleAnalytics }}
+    {{ if site.GoogleAnalytics }}
       {{ template "_internal/google_analytics_async.html" . }}
     {{ end }}
   </head>

layouts/_default/list.html

@@ -21,7 +21,7 @@
           <ul class="tree" id="tree">
             <li id="list-heading"><a href="{{ site.BaseURL | absLangURL }}posts" data-filter="all">Posts</a></li>
             <div class="subtree">
-                {{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
+                {{ partial "navigators/sidebar.html" (dict "menus" site.Menus.sidebar "ctx" .) }}
             </div>
           </ul>
         </div>

layouts/_default/single.html

@@ -21,7 +21,7 @@
           <ul class="tree" id="tree">
             <li id="list-heading"><a href="{{ site.BaseURL | absLangURL }}posts" data-filter="all">Posts</a></li>
             <div class="subtree">
-                {{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
+                {{ partial "navigators/sidebar.html" (dict "menus" site.Menus.sidebar "ctx" .) }}
             </div>
           </ul>
         </div>
@@ -35,13 +35,13 @@
   <div class="content">
     <div class="container p-0 read-area">
       <!--Hero Area-->
-      <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" .Site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
+      <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" site.BaseURL }}{{ partial "helpers/get-hero.html" . | relURL }});'>
       </div>
 
       <!--Content Start-->
       <div class="page-content">
         <div class="author-profile ml-auto align-self-lg-center">
-          <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}'/>
+          <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . | relURL }}'/>
           <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
           <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
         </div>
@@ -55,9 +55,9 @@
         </div>
 
         <!--- Improve this page button --->
-        {{ if .Site.Params.GitRepo }}
+        {{ if site.Params.GitRepo }}
           <div class="btn-improve-page">
-              <a href="{{ .Site.Params.GitRepo }}/edit/master/content/{{ .File.Path }}">
+              <a href="{{ site.Params.GitRepo }}/edit/master/content/{{ .File.Path }}">
                 <i class="fas fa-code-branch"></i>
                 Improve This Page
               </a>
@@ -69,7 +69,7 @@
         {{ partial "navigators/next-prev-navigator.html" . }}
       <hr />
       <!-- Add Disqus forum  -->
-      {{ if .Site.DisqusShortname }}
+      {{ if site.DisqusShortname }}
           {{ partial "disqus.html" . }}
       {{ end }}
       </div>

layouts/index.html

@@ -10,6 +10,7 @@
       {{ end }}
     {{ end }}
     <meta name="description" content="{{ $siteDescription }}" />
+    
     <!-- import common headers -->
     {{- partial "header.html" . -}}
 
@@ -23,7 +24,7 @@
     <link rel="stylesheet" href="{{ "/assets/css/sections/achievements.css" | relURL }}"/>
 
     <!-- Add Google Analytics if enabled in configuration -->
-    {{ if .Site.GoogleAnalytics }}
+    {{ if site.GoogleAnalytics }}
         {{ template "_internal/google_analytics_async.html" . }}
     {{ end }}
   </head>
@@ -36,9 +37,9 @@
     {{- partial "sections/home.html" . -}}
 
     <!--- ADD OPTIONAL SECTIONS ----------->
-    {{ $sections:= .Site.Data.sections }}
-    {{ if (index .Site.Data .Site.Language.Lang).sections }}
-      {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+    {{ $sections:= site.Data.sections }}
+    {{ if (index site.Data site.Language.Lang).sections }}
+      {{ $sections = (index site.Data site.Language.Lang).sections }}
     {{ end }}
 
     {{ if $sections }}

layouts/partials/cards/project.html

@@ -8,7 +8,7 @@
         <div>
           <div class="d-flex">
             {{ if .logo }}
-            <img class="card-img-xs" src="{{ .logo | absURL }}" alt="{{ .name }}" />
+            <img class="card-img-xs" src="{{ .logo | relURL }}" alt="{{ .name }}" />
             {{ end }}
             <h5 class="card-title mb-0">{{ .name }}</h5>
           </div>

layouts/partials/cards/skill.html

@@ -3,7 +3,7 @@
     <div class="card">
       <div class="card-head d-flex">
         {{ if .icon }}
-        <img class="card-img-xs" src="{{ .icon | absURL }}" alt="{{ .name }}" />
+        <img class="card-img-xs" src="{{ .icon | relURL }}" alt="{{ .name }}" />
         {{ end }}
         <h5 class="card-title">{{ .name }}</h5>
       </div>

layouts/partials/disqus.html

@@ -8,7 +8,7 @@
     var dsq = document.createElement("script");
     dsq.type = "text/javascript";
     dsq.async = true;
-    var disqus_shortname = "{{ .Site.DisqusShortname }}";
+    var disqus_shortname = "{{ site.DisqusShortname }}";
     dsq.src = "//" + disqus_shortname + ".disqus.com/embed.js";
     (
       document.getElementsByTagName("head")[0] ||

layouts/partials/footer.html

@@ -1,16 +1,16 @@
-{{ $author:= .Site.Data.author }}
-{{ if (index .Site.Data .Site.Language.Lang).author }}
-  {{ $author = (index .Site.Data .Site.Language.Lang).author }}
+{{ $author:= site.Data.author }}
+{{ if (index site.Data site.Language.Lang).author }}
+  {{ $author = (index site.Data site.Language.Lang).author }}
 {{ end }}
 
-{{ $sections:= .Site.Data.sections }}
-{{ if (index .Site.Data .Site.Language.Lang).sections }}
-  {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+{{ $sections:= site.Data.sections }}
+{{ if (index site.Data site.Language.Lang).sections }}
+  {{ $sections = (index site.Data site.Language.Lang).sections }}
 {{ end }}
 
 {{ $copyrightNotice := "© 2020 Copyright."}}
-{{ if (index .Site.Data .Site.Language.Lang).site }}
-  {{ $siteConfig := (index .Site.Data .Site.Language.Lang).site }}
+{{ if (index site.Data site.Language.Lang).site }}
+  {{ $siteConfig := (index site.Data site.Language.Lang).site }}
   {{ if $siteConfig.copyright }}
     {{ $copyrightNotice = $siteConfig.copyright }}
   {{ end }}
@@ -48,7 +48,7 @@
         </ul>
       </div>
       {{ end }}
-      {{ if .Site.Params.newsletter.enable }}
+      {{ if site.Params.newsletter.enable }}
       <div class="col-md-4 col-sm-12">
         <!-- <h5>Newsletter</h5> -->
         <p>{{ i18n "newsletter_text" }}</p>

layouts/partials/header.html

@@ -13,7 +13,7 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
 
 <!--================= fab-icon =========================-->
-<link rel="icon" type="image/png" href="{{ .Site.Params.logo.favicon | default "/assets/images/favicon.png" | absURL }}" />
+<link rel="icon" type="image/png" href="{{ site.Params.logo.favicon | default "/assets/images/favicon.png" | relURL }}" />
 
 <!--================= custom style overrides =========================-->
 <link rel="stylesheet" href="{{ "/assets/css/style.css" | relURL }}"/>

layouts/partials/helpers/get-author-image.html

@@ -1,7 +1,12 @@
-{{ $authorImage:= "/assets/images/default-avatar.png"}}
-{{ if .Site.Data.site.author}}
-    {{ $authorImage = .Site.Data.site.author.image | relURL }}
-{{ end}}
+{{ $author:= site.Data.author }}
+{{ if (index site.Data site.Language.Lang).author }}
+  {{ $author = (index site.Data site.Language.Lang).author }}
+{{ end }}
+{{ $authorImage:= "/assets/images/default-avatar.png" }}
+{{ if $author.image }}
+  {{ $authorImage = $author.image }}
+{{ end }}
+
 {{ if eq (printf "%T" .Params.author ) "maps.Params" }}
     {{ with .Params.author }}
         {{ if .image }}

layouts/partials/helpers/get-author-name.html

@@ -1,6 +1,6 @@
-{{ $authorName:= .Site.Params.author.name }}
-{{ if .Site.Data.site.author}}
-    {{ $authorName = .Site.Data.site.author.name }}
+{{ $authorName:= site.Params.author.name }}
+{{ if site.Data.site.author}}
+    {{ $authorName = site.Data.site.author.name }}
 {{ end}}
 {{ if eq (printf "%T" .Params.author ) "maps.Params" }}
     {{ with .Params.author }}

layouts/partials/navigators/floating-lang-selector.html

@@ -1,12 +1,12 @@
 {{ $pageURL:= .RelPermalink }}
-{{ if .Site.IsMultiLingual }}
+{{ if site.IsMultiLingual }}
     {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
 {{ end }}
 
 <div class="dropdown languageSelector">
     <a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
-        {{ .Site.Language.LanguageName }}
+        {{ site.Language.LanguageName }}
     </a>
     <div class="dropdown-menu" aria-labelledby="languageSelector">
         {{ range .Translations }}

layouts/partials/navigators/lang-selector-2.html

@@ -1,12 +1,12 @@
 {{ $pageURL:= .RelPermalink }}
-{{ if .Site.IsMultiLingual }}
+{{ if site.IsMultiLingual }}
   {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
 {{ end }}
 
 <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
-      {{ .Site.Language.LanguageName }}
+      {{ site.Language.LanguageName }}
     </a>
     <div class="dropdown-menu" aria-labelledby="languageSelector">
       {{ range .Translations }}

layouts/partials/navigators/lang-selector.html

@@ -1,10 +1,10 @@
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
-    {{ .Site.Language.LanguageName }}
+    {{ site.Language.LanguageName }}
 </a>
 <div class="dropdown-menu" aria-labelledby="languageSelector">
-    {{ range $.Site.Home.AllTranslations }}
+    {{ range site.Home.AllTranslations }}
     <a class="dropdown-item nav-link languages-item" href="{{ .Permalink }}">
         <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
         {{ .Language.LanguageName }}

layouts/partials/navigators/navbar-2.html

@@ -1,5 +1,5 @@
-{{ $mainLogo:="assets/images/main-logo.png" }}
-{{ $invertedLogo:="assets/images/inverted-logo.png" }}
+{{ $mainLogo:="/assets/images/main-logo.png" }}
+{{ $invertedLogo:="/assets/images/inverted-logo.png" }}
 {{ if site.Params.logo.main }}
   {{ $mainLogo = site.Params.logo.main }}
 {{ end }}
@@ -13,7 +13,7 @@
       <span class="navbar-toggler-icon"></span>
     </button>
     <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
-      <img src="{{ $mainLogo | absURL }}">
+      <img src="{{ $mainLogo | relURL }}">
       {{- site.Title -}}
     </a>
     <button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
@@ -29,6 +29,6 @@
     </div>
   </div>
   <!-- Store the logo information in a hidden img for the JS -->
-  <img src="{{ $mainLogo | absURL }}" class="d-none" id="main-logo">
-  <img src="{{ $invertedLogo | absURL }}" class="d-none" id="inverted-logo">
+  <img src="{{ $mainLogo | relURL }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo | relURL }}" class="d-none" id="inverted-logo">
 </nav>

layouts/partials/navigators/navbar.html

@@ -1,22 +1,22 @@
-{{ $mainLogo:="assets/images/main-logo.png" }}
-{{ $invertedLogo:="assets/images/inverted-logo.png" }}
-{{ if .Site.Params.logo.main }}
-  {{ $mainLogo = .Site.Params.logo.main }}
+{{ $mainLogo:="/assets/images/main-logo.png" }}
+{{ $invertedLogo:="/assets/images/inverted-logo.png" }}
+{{ if site.Params.logo.main }}
+  {{ $mainLogo = site.Params.logo.main }}
 {{ end }}
-{{ if .Site.Params.logo.inverted }}
-  {{ $invertedLogo = .Site.Params.logo.inverted }}
+{{ if site.Params.logo.inverted }}
+  {{ $invertedLogo = site.Params.logo.inverted }}
 {{ end }}
 
-{{ $sections:= .Site.Data.sections }}
-{{ if (index .Site.Data .Site.Language.Lang).sections }}
-  {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+{{ $sections:= site.Data.sections }}
+{{ if (index site.Data site.Language.Lang).sections }}
+  {{ $sections = (index site.Data site.Language.Lang).sections }}
 {{ end }}
 
 <nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
   <div class="container">
-    <a class="navbar-brand" href="{{ .Site.BaseURL | relLangURL }}">
-      <img src="{{ $invertedLogo | absURL }}" id="logo">
-      {{- .Site.Title -}}
+    <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
+      <img src="{{ $invertedLogo | relURL }}" id="logo">
+      {{- site.Title -}}
     </a>
     <button
       class="navbar-toggler navbar-dark"
@@ -77,7 +77,7 @@
             <a class="nav-link" id="blog-link" href="{{ "/posts" | relLangURL }}">{{ i18n "posts" }}</a>
           </li>
         {{ end }}
-        {{ range  (index .Site.Data .Site.Language.Lang).site.customMenus }}
+        {{ range  (index site.Data site.Language.Lang).site.customMenus }}
           <li class="nav-item">
             <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
           </li>
@@ -89,6 +89,6 @@
     </div>
   </div>
   <!-- Store the logo information in a hidden img for the JS -->
-  <img src="{{ $mainLogo | absURL }}" class="d-none" id="main-logo">
-  <img src="{{ $invertedLogo | absURL }}" class="d-none" id="inverted-logo">
+  <img src="{{ $mainLogo | relURL }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo | relURL }}" class="d-none" id="inverted-logo">
 </nav>

layouts/partials/sections/about.html

@@ -38,7 +38,7 @@
         </ul>
       </div>
       {{ if .resume }}
-      <a href="{{ .resume | absURL }}" target="#"
+      <a href="{{ .resume | relURL }}" target="#"
         ><button class="btn btn-dark">{{ i18n "resume"}}</button></a
       >
       {{ end }}

layouts/partials/sections/achievements/entry.html

@@ -1,6 +1,6 @@
 <div
   class="achievement-entry text-center"
-  style="background-image: url({{ .image | absURL }});"
+  style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ .image | relURL }}');"
 >
   <i class="fas fa-search-plus" id="enlarge-icon"></i>
   <h4 class="title" id="achievement-title">{{ .title }}</h4>

layouts/partials/sections/home.html

@@ -1,6 +1,6 @@
-{{ $author:= .Site.Data.author }}
-{{ if (index .Site.Data .Site.Language.Lang).author }}
-  {{ $author = (index .Site.Data .Site.Language.Lang).author }}
+{{ $author:= site.Data.author }}
+{{ if (index site.Data site.Language.Lang).author }}
+  {{ $author = (index site.Data site.Language.Lang).author }}
 {{ end }}
 
 {{ $name:="Jane Doe" }}
@@ -10,17 +10,17 @@
   {{ $name = $author.name }}
 {{ end }}
 
-{{ $sections:= .Site.Data.sections }}
-{{ if (index .Site.Data .Site.Language.Lang).sections }}
-  {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+{{ $sections:= site.Data.sections }}
+{{ if (index site.Data site.Language.Lang).sections }}
+  {{ $sections = (index site.Data site.Language.Lang).sections }}
 {{ end }}
 
-{{ $backgroundImage:= "assets/images/default-background.jpg" }}
-{{ if .Site.Params.background }}
-  {{ $backgroundImage = .Site.Params.background }}
+{{ $backgroundImage:= "/assets/images/default-background.jpg" }}
+{{ if site.Params.background }}
+  {{ $backgroundImage = site.Params.background }}
 {{ end }}
 
-{{ $authorImage:= "assets/images/default-avatar.png" }}
+{{ $authorImage:= "/assets/images/default-avatar.png" }}
 {{ if $author.image }}
   {{ $authorImage = $author.image }}
 {{ end }}
@@ -28,10 +28,10 @@
 <div class="container-fluid home" id="home">
   <div
     class="background container-fluid"
-    style="background-image: url('{{ $backgroundImage | absURL }}');"
+    style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $backgroundImage | relURL }}');"
   ></div>
   <div class="container content text-center">
-    <img src="{{ $authorImage | absURL }}"
+    <img src="{{ $authorImage | relURL }}"
       class="rounded-circle mx-auto d-block img-fluid"
     />
     <h1 class="greeting"> {{ $author.greeting }} {{ $name }}</h1>