eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Move the head and header partials from the theme to the site layouts/

Browse source
This commit is contained in:
Eryn Wells 2021-10-02 11:19:42 -07:00
parent 09aca8705a
commit 030776d52b
2 changed files with 129 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

78
layouts/partials/head.html Normal file
View file

@ -0,0 +1,78 @@
<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 }}{{ .Title }} - {{ end }}{{ site.Title }}</title>
<!-- Meta -->
{{ if eq .Kind "page" }}
<meta name="description" content="{{ .Summary }}" />
<meta name="author" content="{{ .Params.Author | default site.Author.name }}" />
{{ else }}
<meta name="description" content="{{ site.Params.description }}" />
<meta name="author" content="{{ site.Author.name }}" />
{{ end }}
<!-- Styles & Scripts -->
{{ $app_css := resources.Get "app.css" }}
<!---->
{{ $custom_css := resources.Get "custom.css" }}
<!---->
{{ $css := slice $app_css $custom_css | resources.Concat "app.css" | minify }}
<link rel="preload stylesheet" as="style" href="{{ $css.Permalink }}" />
{{ if .IsHome }}
{{ $home_css := resources.Get "home.css" }}
<link rel="preload stylesheet" as="style" href="{{ $home_css.Permalink }}" />
{{ end }}
{{ if and .IsPage (not site.Params.disableHLJS) }}
<link rel="preload stylesheet" as="style" href="{{ `an-old-hope.min.css` | absURL }}" />
<script
defer
src="{{ `highlight.min.js` | absURL }}"
onload="hljs.initHighlightingOnLoad();"
></script>
{{ end }}
<!-- Preload -->
<link rel="preload" as="image" href="{{ `theme.png` | absURL }}" />
{{ range $.Scratch.Get "social-list" }}
<link rel="preload" as="image" href="{{ printf `%s.svg` . | absURL }}" />
{{ end }}
<!-- Favicon -->
<link rel="icon" href="{{ `favicon.ico` | absURL }}" />
<link rel="apple-touch-icon" href="{{ `apple-touch-icon.png` | absURL }}" />
<!-- Generator -->
{{ hugo.Generator }}
<!-- RSS -->
{{ range .AlternativeOutputFormats }}
<link
rel="{{ .Rel }}"
type="{{ .MediaType.Type }}"
href="{{ .Permalink }}"
title="{{ site.Title }}"
/>
{{ end }}
<!-- Misc -->
{{ if or hugo.IsProduction (eq site.Params.env "production") }}
<!---->
{{ template "_internal/google_analytics_async.html" . }}
<!---->
{{ template "_internal/google_news.html" . }}
<!---->
{{ template "_internal/opengraph.html" . }}
<!---->
{{ template "_internal/schema.html" . }}
<!---->
{{ template "_internal/twitter_cards.html" . }}
<!---->
{{ end }}
</head>

51
layouts/partials/header.html Normal file
View file

@ -0,0 +1,51 @@
<header class="header">
{{ if .IsHome }}
<h1 class="logo">
<a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-dark"></a>
</h1>
{{ else }}
<p class="logo">
<a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-dark"></a>
</p>
{{ end }}
<script>
let bodyClx = document.body.classList;
let btnDark = document.querySelector('.btn-dark');
let sysDark = window.matchMedia('(prefers-color-scheme: dark)');
let darkVal = localStorage.getItem('dark');
let setDark = (isDark) => {
bodyClx[isDark ? 'add' : 'remove']('dark');
localStorage.setItem('dark', isDark ? 'yes' : 'no');
};
setDark(darkVal ? darkVal === 'yes' : sysDark.matches);
requestAnimationFrame(() => bodyClx.remove('not-ready'));
btnDark.addEventListener('click', () => setDark(!bodyClx.contains('dark')));
sysDark.addEventListener('change', (event) => setDark(event.matches));
</script>
{{ $url := .RelPermalink }}<!---->
{{ with site.Menus.main }}
<nav class="menu">
{{ range . }}
<a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
</nav>
{{ end }}<!---->
{{ with $.Scratch.Get "social-list" }}
<nav class="social">
{{ range . }}
<a
class="{{ . }}"
style="--url: url(./{{ . }}.svg)"
href="https://{{ . }}.com/{{ site.Params.Get . }}"
target="_blank"
></a>
{{ end }}
</nav>
{{ end }}
</header>