feat: header, params, edit-page-link

Enhance header navigation button with sublabel.
Add sublabel to navigation button.
Hide edit page link on smaller screens.

Author: neural-loop

config/_default/params.toml

@@ -40,7 +40,8 @@ preloader = "" # use jpg, png, svg or gif format.
 # Navigation button
 [navigation_button]
 enable = true
-label = "Join Discord (2100+ joined)"
+label = "Join Discord"
+label_sub = "(2100+ joined)"
 link = "https://discord.gg/hUygPUdD8E"
 
 # search

layouts/partials/components/edit-page-link.html

@@ -1,11 +1,11 @@
 {{ if and .IsPage .File }}
-  {{ with .File.Path }}
-    {{ $dev_url := printf "https://github.dev/open-neuromorphic/open-neuromorphic.github.io/blob/main/content/%s" . }}
-    <a href="{{ $dev_url }}" target="_blank" rel="noopener"
-       class="btn normal-case inline-flex flex-shrink-0 items-center gap-x-1.5 rounded-md bg-white dark:bg-darkmode-theme-dark !px-2.5 !py-1 text-xs font-semibold text-gray-900 dark:text-gray-200 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-black/20 transition-colors">
-      {{ partial "icon.html" (dict "style" "brands" "name" "github" "class" "h-3.5 w-3.5") }}
-      <span>Edit Page</span>
-      {{ partial "icon.html" (dict "style" "solid" "name" "arrow-up-right-from-square" "class" "h-3 w-3") }}
-    </a>
-  {{ end }}
-{{ end }}
+{{ with .File.Path }}
+{{ $dev_url := printf "https://github.dev/open-neuromorphic/open-neuromorphic.github.io/blob/main/content/%s" . }}
+<a href="{{ $dev_url }}" target="_blank" rel="noopener"
+   class="btn normal-case hidden md:inline-flex flex-shrink-0 items-center gap-x-1.5 rounded-md bg-white dark:bg-darkmode-theme-dark !px-2.5 !py-1 text-xs font-semibold text-gray-900 dark:text-gray-200 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-black/20 transition-colors">
+  {{ partial "icon.html" (dict "style" "brands" "name" "github" "class" "h-3.5 w-3.5") }}
+  <span>Edit Page</span>
+  {{ partial "icon.html" (dict "style" "solid" "name" "arrow-up-right-from-square" "class" "h-3 w-3") }}
+</a>
+{{ end }}
+{{ end }}

layouts/partials/essentials/header.html

@@ -68,11 +68,16 @@
       {{ with site.Params.navigation_button }}
         {{ if .enable }}
           {{ $is_external := findRE `^http` .link }}
-          <a href="{{ .link | relLangURL }}" class="btn-new-primary btn-sm hidden lg:inline-block" {{ if $is_external }}target="_blank" rel="noopener"{{ end }}>
-            {{- .label -}}
-            {{- if $is_external -}}
-              {{- partial "icon.html" (dict "style" "solid" "name" "arrow-up-right-from-square" "class" "ml-1.5") -}}
-            {{- end -}}
+          <a href="{{ .link | relLangURL }}" class="btn btn-new-primary btn-sm !py-1 !px-3 hidden lg:inline-flex items-center" {{ if $is_external }}target="_blank" rel="noopener"{{ end }}>
+            <div class="text-center">
+              <span class="block text-sm font-semibold leading-tight">{{ .label }}</span>
+              {{ with .label_sub }}
+              <span class="block text-[10px] font-normal leading-tight opacity-80 -mt-px">{{ . }}</span>
+              {{ end }}
+            </div>
+             {{- if $is_external -}}
+              {{- partial "icon.html" (dict "style" "brands" "name" "discord" "class" "ml-2") -}}
+             {{- end -}}
           </a>
         {{ end }}
       {{ end }}
@@ -124,7 +129,12 @@
     {{ if site.Params.navigation_button.enable }}
       <div class="p-4 mt-4 border-t border-border dark:border-darkmode-border">
         <a href="{{ site.Params.navigation_button.link | relLangURL }}" class="btn btn-new-primary w-full text-center">
-          {{ site.Params.navigation_button.label }}
+          <div class="text-center">
+            <span class="block text-sm font-semibold leading-tight">{{ site.Params.navigation_button.label }}</span>
+            {{ with site.Params.navigation_button.label_sub }}
+            <span class="block text-[10px] font-normal leading-tight opacity-80 -mt-px">{{ . }}</span>
+            {{ end }}
+          </div>
         </a>
       </div>
     {{ end }}