hugo-PaperMod/layouts/partials/header.html

103 lines
3.6 KiB
HTML

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>
{{- if not .IsHome }}
{{- if eq .Kind "page" }}{{ .Title }}
{{- else if eq .Data.Singular "tag" }}{{ .Data.Term }}
{{- else }}Posts
{{- end }} - {{ end }}
{{- .Site.Title -}}
</title>
<!-- Meta -->
{{- if eq .Kind "page" }}
<meta name="description" content="{{ .Summary }}">
<meta name="author" content="{{ .Params.author | default .Site.Params.author }}">
{{ else }}
<meta name="description" content="{{ .Site.Params.description }}">
<meta name="author" content="{{ .Site.Params.author }}">
{{ end -}}
<!-- Styles -->
<link href="{{ "an-old-hope.min.css" | absURL }}" rel="stylesheet">
<link href="{{ "style.css" | absURL }}" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | absURL }}">
<link rel="icon" href="{{ "favicon.ico" | absURL }}">
<!-- Generator -->
{{ hugo.Generator }}
<!-- RSS -->
<link rel="alternate" type="application/atom+xml" href="{{ "index.xml" | absURL }}" title="{{ .Site.Title }}">
<!-- Misc -->
{{ if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production") }}
{{ template "_internal/google_analytics_async.html" . }}
{{ template "_internal/opengraph.html" . }}
{{ end }}
<!-- Script -->
<script>
function setTheme() {
const now = Date.now();
const prev = Number(localStorage.getItem('time'));
function setBodyClass(sunrise, sunset) {
if (now > sunrise && now < sunset) return;
const body = document.querySelector('body');
body.classList.add('dark');
}
if (now - prev > 24 * 60 * 60 * 10000) {
let light;
let dark;
fetch('https://api.ipgeolocation.io/astronomy?apiKey=5ed37d85103e4defa5df4c5298ed5215')
.then(res => res.json())
.then(data => {
light = data.sunrise.split(':');
dark = data.sunset.split(':');
})
.catch(() => {
light = [7, 0];
dark = [19, 0];
})
.finally(() => {
const sunrise = new Date().setHours(light[0], light[1], 0);
const sunset = new Date().setHours(dark[0], dark[1], 0);
setBodyClass(sunrise, sunset);
localStorage.setItem('sunrise', sunrise);
localStorage.setItem('sunset', sunset);
});
localStorage.setItem('time', now);
} else {
const sunrise = Number(localStorage.getItem('sunrise'));
const sunset = Number(localStorage.getItem('sunset'));
setBodyClass(sunrise, sunset);
}
}
</script>
</head>
<body class="{{if eq .Kind `page` }}single{{else}}list{{ if .IsHome }} home{{ end }}{{end}}">
<script>
setTheme();
</script>
<header class="header">
<nav class="nav">
{{ if .IsHome }}
<h1 class="logo"><a href="{{ "" | absURL }}">{{ .Site.Title }}</a></h1>
{{ else }}
<p class="logo"><a href="{{ "" | absURL }}">{{ .Site.Title }}</a></p>
{{ end }}
{{ if .Site.Menus.main }}
<ul class="menu">
{{ range .Site.Menus.main }}
<li>
<a href="{{ .URL }}">{{ .Name }}</a>
</li>
{{ end }}
</ul>
{{ end }}
</nav>
</header>
<main class="main">