header.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!DOCTYPE html>
  2. <html lang="{{ .Site.LanguageCode }}">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- Title -->
  8. <title>
  9. {{- if not .IsHome }}
  10. {{- if eq .Kind "page" }}{{ .Title }}
  11. {{- else if eq .Data.Singular "tag" }}{{ .Data.Term }}
  12. {{- else }}Posts
  13. {{- end }} - {{ end }}
  14. {{- .Site.Title -}}
  15. </title>
  16. <!-- Meta -->
  17. {{- if eq .Kind "page" }}
  18. <meta name="description" content="{{ .Summary }}">
  19. <meta name="author" content="{{ .Params.author | default .Site.Params.author }}">
  20. {{ else }}
  21. <meta name="description" content="{{ .Site.Params.description }}">
  22. <meta name="author" content="{{ .Site.Params.author }}">
  23. {{ end -}}
  24. <!-- Styles -->
  25. <link href="{{ "an-old-hope.min.css" | absURL }}" rel="stylesheet">
  26. <link href="{{ "style.css" | absURL }}" rel="stylesheet">
  27. <!-- Favicons -->
  28. <link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | absURL }}">
  29. <link rel="icon" href="{{ "favicon.ico" | absURL }}">
  30. <!-- Generator -->
  31. {{ hugo.Generator }}
  32. <!-- RSS -->
  33. <link rel="alternate" type="application/atom+xml" href="{{ "index.xml" | absURL }}" title="{{ .Site.Title }}">
  34. <!-- Misc -->
  35. {{ if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production") }}
  36. {{ template "_internal/google_analytics_async.html" . }}
  37. {{ template "_internal/opengraph.html" . }}
  38. {{ end }}
  39. <!-- Script -->
  40. <script>
  41. function setTheme() {
  42. const time = new Date();
  43. const prev = localStorage.getItem('date');
  44. const date = String(time.getMonth() + 1) + '.' + String(time.getDate());
  45. const now = time.getTime();
  46. let sunrise;
  47. let sunset;
  48. function setBodyClass() {
  49. if (now > sunrise && now < sunset) return;
  50. document.body.classList.add('dark');
  51. }
  52. if (date !== prev) {
  53. fetch('https://api.ipgeolocation.io/astronomy?apiKey=5ed37d85103e4defa5df4c5298ed5215')
  54. .then(res => res.json())
  55. .then(data => {
  56. sunrise = data.sunrise.split(':').map(Number);
  57. sunset = data.sunset.split(':').map(Number);
  58. })
  59. .catch(() => {
  60. sunrise = [7, 0];
  61. sunset = [19, 0];
  62. })
  63. .finally(() => {
  64. sunrise = time.setHours(sunrise[0], sunrise[1], 0);
  65. sunset = time.setHours(sunset[0], sunset[1], 0);
  66. setBodyClass();
  67. localStorage.setItem('sunrise', sunrise);
  68. localStorage.setItem('sunset', sunset);
  69. });
  70. localStorage.setItem('date', date);
  71. } else {
  72. sunrise = Number(localStorage.getItem('sunrise'));
  73. sunset = Number(localStorage.getItem('sunset'));
  74. setBodyClass();
  75. }
  76. }
  77. </script>
  78. </head>
  79. <body class="{{if eq .Kind `page` }}single{{else}}list{{ if .IsHome }} home{{ end }}{{end}}">
  80. <script>
  81. setTheme();
  82. </script>
  83. <header class="header">
  84. <nav class="nav">
  85. {{ if .IsHome }}
  86. <h1 class="logo"><a href="{{ "" | absURL }}">{{ .Site.Title }}</a></h1>
  87. {{ else }}
  88. <p class="logo"><a href="{{ "" | absURL }}">{{ .Site.Title }}</a></p>
  89. {{ end }}
  90. {{ if .Site.Menus.main }}
  91. <ul class="menu">
  92. {{ range .Site.Menus.main }}
  93. <li>
  94. <a href="{{ .URL }}">{{ .Name }}</a>
  95. </li>
  96. {{ end }}
  97. </ul>
  98. {{ end }}
  99. </nav>
  100. </header>
  101. <main class="main">