Add header

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-08-06 00:39:06 +02:00
parent 94733181ba
commit 1ccb9f9bed
9 changed files with 242 additions and 0 deletions
--- a/assets/sass/header.scss
+++ b/assets/sass/header.scss
@@ -0,0 +1,56 @@
+.header {
+  padding: 2rem 2rem;
+}
+
+.header-container {
+  max-width: $maxwidth;
+  width: 100%;
+  margin: 0 auto;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+
+  .site-title {
+    font-size: 1.5rem;
+
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+  .nav {
+    ul {
+      display: flex;
+
+      gap: 2.5rem;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      li a {
+        font-size: 0.85rem;
+        text-decoration: none;
+        color: inherit;
+        display: block;
+      }
+    }
+  }
+
+  @media (max-width: $mobilewidth) {
+    .site-title {
+      margin-bottom: 1rem;
+    }
+
+    .nav {
+      width: 100%;
+
+      ul {
+        flex-wrap: wrap;
+        gap: 1rem;
+      }
+    }
+  }
+}
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -0,0 +1,11 @@
+@import "variables";
+
+html {
+  font-size: 100%;
+  font-family:
+    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  line-height: 1.5;
+}
+
+@import "header";
--- a/assets/sass/variables.scss
+++ b/assets/sass/variables.scss
@@ -0,0 +1,3 @@
+$mobilewidth: 32rem;
+$contentwidth: 48rem;
+$maxwidth: 60rem;
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="{{- .Site.LanguageCode -}}">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    <title>
+      {{- if .IsHome -}}
+        {{ .Site.Title }}
+      {{- else -}}
+        {{ .Site.Title }} &middot;
+        {{ .Title }}
+      {{- end -}}
+    </title>
+
+    {{ with .Site.Params.description }}
+      <meta name="description" content="{{- . -}}" />
+    {{ end }}
+
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="all,follow" />
+    <meta name="googlebot" content="index,follow,snippet,archive" />
+
+    {{ with resources.Get "sass/main.scss" }}
+      {{ with . | toCSS (dict "targetPath" "css/main.css") | fingerprint }}
+        <link
+          rel="stylesheet"
+          href="{{- .RelPermalink -}}"
+          integrity="{{- .Data.Integrity -}}"
+        />
+      {{ end }}
+    {{ end }}
+
+    {{ with .OutputFormats.Get "RSS" }}
+      {{ printf `
+        <link href="%s" rel="%s" type="%s" title="%s" />` .Permalink .Rel .MediaType.Type $.Site.Title | safeHTML
+      }}
+    {{ end }}
+
+    {{ partial "opengraph.html" . }}
+    {{ partial "twitter.html" . }}
+  </head>
+
+  <body>
+    {{ partial "header.html" . }}
+
+    {{ block "main" . }}
+    {{ end }}
+
+    {{ partial "footer.html" . }}
+  </body>
+</html>
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -0,0 +1,2 @@
+{{ define "main" }}
+{{ end }}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -0,0 +1,14 @@
+<header class="header">
+  <div class="header-container">
+    <div class="site-title">
+      <a href="{{- "/" | relURL -}}">{{ .Site.Title }}</a>
+    </div>
+    <nav class="nav">
+      <ul>
+        {{ range .Site.Params.navigation }}
+          <li><a href="{{- .url -}}">{{ .name }}</a></li>
+        {{ end }}
+      </ul>
+    </nav>
+  </div>
+</header>
--- a/layouts/partials/opengraph.html
+++ b/layouts/partials/opengraph.html
@@ -0,0 +1,80 @@
+<meta property="og:title" content="{{ .Title }}" />
+<meta
+  property="og:description"
+  content="{{- with .Description -}}
+    {{- . -}}
+  {{- else -}}
+    {{- if .IsPage -}}
+      {{- with .Site.Params.description -}}{{- . -}}{{- end -}}
+    {{- end -}}
+  {{- end -}}"
+/>
+<meta
+  property="og:type"
+  content="{{- if .IsPage -}}
+    article
+  {{- else -}}
+    website
+  {{- end -}}"
+/>
+<meta property="og:url" content="{{- .Permalink -}}" />
+
+{{ with .Params.image }}
+  {{ $image := $.Resources.GetMatch . }}
+  {{ with $image }}
+    {{ $thumb := .Resize "400x" }}
+    <meta property="og:image" content="{{- $thumb.Permalink -}}" />
+  {{ end }}
+{{ end }}
+
+{{ $iso8601 := "2000-01-01T00:00:00-01:00" }}
+{{ if .IsPage }}
+  {{ if not .PublishDate.IsZero }}
+    <meta
+      property="article:published_time"
+      {{ .PublishDate.Format $iso8601 | printf "content=%q" | safeHTMLAttr }}
+    />
+  {{ else if not .Date.IsZero }}
+    <meta
+      property="article:published_time"
+      {{ .Date.Format $iso8601 | printf "content=%q" | safeHTMLAttr }}
+    />
+  {{ end }}
+{{ end }}
+{{/* .IsPage */}}
+
+{{ with .Params.audio }}
+  <meta property="og:audio" content="{{- . -}}" />
+{{ end }}
+{{ with .Params.locale }}
+  <meta property="og:locale" content="{{- . -}}" />
+{{ end }}
+{{ with .Site.Params.title }}
+  <meta property="og:site_name" content="{{- . -}}" />
+{{ end }}
+{{ with .Params.videos }}
+  {{ range . }}
+    <meta property="og:video" content="{{- . | absURL -}}" />
+  {{ end }}
+{{ end }}
+
+{{ $permalink := .Permalink }}
+{{ $siteSeries := .Site.Taxonomies.series }}{{ with .Params.series }}
+  {{ range $name := . }}
+    {{ $series := index $siteSeries $name }}
+    {{ range $page := first 6 $series.Pages }}
+      {{ if ne $page.Permalink $permalink }}
+        <meta property="og:see_also" content="{{- $page.Permalink -}}" />
+      {{ end }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+{{ if .IsPage }}
+  <meta property="article:section" content="{{- .Section -}}" />
+  {{ with .Params.tags }}
+    {{ range . }}
+      <meta property="article:tag" content="{{- . -}}" />
+    {{ end }}
+  {{ end }}
+{{ end }}
--- a/layouts/partials/twitter.html
+++ b/layouts/partials/twitter.html
@@ -0,0 +1,23 @@
+{{ with .Params.image }}
+  {{ $image := $.Resources.GetMatch . }}
+  {{ with $image }}
+    {{ $thumb := .Resize "400x" }}
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="{{- $thumb.Permalink -}}" />
+  {{ end }}
+{{ end }}
+
+
+<meta name="twitter:title" content="{{- .Title -}}" />
+<meta
+  name="twitter:description"
+  content="{{- with .Description -}}
+    {{- . -}}
+  {{- else -}}
+    {{- if .IsPage -}}
+      {{- .Summary -}}
+    {{- else -}}
+      {{- with .Site.Params.description -}}{{- . -}}{{- end -}}
+    {{- end -}}
+  {{- end -}}"
+/>