layouts/partials/head.html

<head>
	<title>DDP Bedienungsanleitung</title>
	
	<meta name="description" content='{{ T "desc"}}'>
	<meta name="msapplication-TileColor" content="#da532c">
	<meta name="msapplication-config" content="/favicon/browserconfig.xml">
	<meta name="theme-color" content="#ffffff">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf8">
	
	<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
	<link rel="manifest" href="/favicon/site.webmanifest">
	<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#000000">
	<link rel="shortcut icon" href="/favicon/favicon.ico">
	
	{{- range resources.Match "svg/*" -}}
		{{ (. | minify).Publish }}
	{{ end }}
	<link rel="preload" href="/svg/line.min.svg" as="image" type="image/svg+xml">
	<link rel="preload" href="/svg/theme-light-dark.min.svg" as="image" type="image/svg+xml" fetchpriority="high" media="screen">
	<link rel="preload" href="/svg/title.min.svg" as="image" type="image/svg+xml" crossorigin fetchpriority="high">

	{{- $mdStyle := resources.Get "/css/md-style.css" | minify | fingerprint }}
	<link rel="preload" as="style" href="{{ $mdStyle.RelPermalink }}" integrity="{{ $mdStyle.Data.Integrity }}">

	<!-- Directly inject css to prevent blocking network request, prinf because vscode is stupid -->
	{{- $style := resources.Get "/css/style.css" | minify }}
	{{ (printf "<%s>%s</style>" "style" ($style.Content | safeCSS)) | safeHTML }}

	<script defer>
		class TODOElement extends HTMLElement {
			constructor() {
				// Always call super first in constructor
				super();

				this.attachShadow({mode: 'open'});

				const div = document.createElement('div');
				const text = document.createElement('p');
				text.innerHTML = "An diesem Artikel muss noch gearbeitet werden!";
				div.appendChild(text);

				this.shadowRoot.append(div);
			}
		}

		customElements.define('to-do', TODOElement);
	</script>
</head>