fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-30 15:22:09 +00:00
Code Issues Projects Releases Wiki Activity
seirdy.one/themes/etch-custom/layouts/partials/head.html

67 lines
4 KiB
HTML
Raw Normal View History

Batman!! (this commit has no parents) The sight of an animal using a JavaScript captivates Computer Scientists and laymen alike, perhaps because it forces us to question some of our ideas about human uniqueness. Does the animal know how JavaScript works? Did it anticipate the need for the tool and select it instead of Haskell or Zig? To some, this fascination with JavaScript seems arbitrary and anthropocentric; after all, animals engage in many other complex activities, like Agile Planning and ordering Juice on the Internet. However, we know that complex behaviour need not be cognitively demanding. JavaScript development can therefore provide a powerful window into the minds of animals, and help us to learn what capacities we share with them — and what might have changed to allow for the incontrovertibly unique levels of technology shown by modern humans, such as integers and block scope.
2020-11-03 23:46:20 +00:00
<head>
Only index the canonical location, seirdy.one Don't index the staging version on my tilde.
2020-11-25 08:38:31 +00:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Metadata: description + cache-bust manifest icons - Add a cache-busting fingerprint to all the icons in the webmanifest - Add a <meta> and open graph tag for a description. - Include a 512px icon in the manifest
2020-12-19 21:52:24 +00:00
<meta name="description" content="{{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Site.Params.Description }}{{ end }}">
<meta name="author" content="{{ .Site.Author.name }}">
Remove SRI for icons Apparently SRI is only valid for rel attrs with the value "stylesheet", "preload", or "modulepreload".
2020-12-15 07:02:07 +00:00
{{- $icon_192 := resources.Get "/apple-touch-icon.png" | resources.Fingerprint "md5" -}}
{{ printf `<link rel="icon" sizes="192x192" href="%s" type="image/png">` $icon_192.RelPermalink | safeHTML }}
{{ $favicon := resources.Get "/favicon.png" | resources.Fingerprint "md5" -}}
{{ printf `<link rel="icon" sizes="32x32" href="%s" type="image/png">` $favicon.RelPermalink | safeHTML -}}
Declare supported color schemes in <head> State that both dark and light color schemes are supported in the document <head> to inform browsers before CSS is loaded and parsed. Also added a bunch of comments.
2020-12-19 02:33:46 +00:00
<!-- apple-touch-icon and mask-icon used to be apple-specific, but
now they're pseudo-standards relied upon by other vendors too:
https://html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes -->
Remove SRI for icons Apparently SRI is only valid for rel attrs with the value "stylesheet", "preload", or "modulepreload".
2020-12-15 07:02:07 +00:00
{{ printf `<link rel="apple-touch-icon" href="%s">` $icon_192.RelPermalink | safeHTML }}
Icons: add the final icon: maskable icon I just found out that lots of Android devices will letterbox icons; the latest version of Lighthouse will preview an icon in the safe clipping range, and that range was way too small for my existing icons. I made a new version that was mask-safe with the white foreground shrunk down a bit so it would fit. See [0]. [0]: https://web.dev/maskable-icon-audit/ For consistency, I renamed the Apple mask icon as well. Why are there so many extensions to the HTML standard for icons? This is getting ridiculous. It's time for a rant about icon standards. Let's recap! what icons do I have so far? - A 192px apple-touch-icon. Apple icons are supposed to be 180px, but 192px gets re-sized down just fine. This used to be apple-specific but then Android and others started using it. I picked 192px instead of the standard 180px because we need...(next bullet) - A 192px icon for Android devices. Rather than having a separate icon for this, I just re-used the existing Apple icon in case the user's browser wants both so it can just cache and re-use it. - The original 32px favicon.png. I picked PNG instead of ICO because an ICO containing the optimized PNG was a whopping 2kb while the png was 176 bytes. It looks fine when scaled down to 16px with a variety of automatic downscaling algos, so there was no need to include an extra 16px version. - A mask-icon. I was hesitant to implement this since it seemed very vendor-specific (desktop Safari only), but it somehow became an accepted registered extension to the spec [1] so I figured that it was only a matter of time before a bunch of other things started using it. - A webmanifest file to describe even more icons. It re-defines the aforementioned 192px icons. I chose to re-use the icon for the same reason as before. It also describes the next two bullets: - favicon.svg: used in the manifest in case the device wants something bigger than 192px. - A maskable icon (svg), completely unrelated to the aforementioned mask-icon, with the focus of the image shrunk down to handle cropping e.g. on some Android devices. [1]: https://html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes What I SHOULD have, in an imaginary world where web standards make sense: - A 32x32 raster icon. Probably PNG, but lossless-webp migth work too. - A 16x16 raster icon, only if the 32x32 version doesn't downscale well. - An svg icon for any other resolution. What I don't, and probably never will have: - A msapplication icon for IE 10 on Windows 8.0, for adding sites to the Windows 8 Start Screen. - A browserconfig.xml in my site's root directory for adding sites to the Windows 8.1+ Start Screen/Menu with custom icons. Since MS dumped IE and switched to Edge, documentation for the above was never updated. I don't run proprietary operating systems, so I can't test adding a website to the tiled Start Menu or Windows Task Bar. Now that MS re-wrote Edge as a Chromium-based browser, I really have no idea how it handles icons; I'd imagine it just does what Chrome does, but it probably does some odd witchcraft to support adding sites to Start or the taskbar. Docs don't seem to exist. Until they update the docs, I'll assume that adding MS icons would mean supporting a non-standard IE-specific feature. Due to its simplicity, my site should render fine in browsers going as far back as IE5; it even works in KHTML. But there are some lines I won't cross: it'll probably *render* on IE5 but it won't *load* since https://seirdy.one is TLS 1.2/1.3 only. And it won't support special proprietary non-standard extensions. WTF we're almost at 80 lines. I should've just written a blog post.
2020-12-15 07:02:10 +00:00
{{ $mask_icon := resources.Get "/mask_apple.svg" | resources.Fingerprint "md5" -}}
Remove SRI for icons Apparently SRI is only valid for rel attrs with the value "stylesheet", "preload", or "modulepreload".
2020-12-15 07:02:07 +00:00
{{ printf `<link rel="mask-icon" href="%s" color="black">` $mask_icon.RelPermalink | safeHTML }}
Declare supported color schemes in <head> State that both dark and light color schemes are supported in the document <head> to inform browsers before CSS is loaded and parsed. Also added a bunch of comments.
2020-12-19 02:33:46 +00:00
<!-- webmanifest defines even more icons. This is getting ridiculous -->
Metadata: description + cache-bust manifest icons - Add a cache-busting fingerprint to all the icons in the webmanifest - Add a <meta> and open graph tag for a description. - Include a 512px icon in the manifest
2020-12-19 21:52:24 +00:00
{{ $webmanifest := resources.Get "/manifest.webmanifest" | resources.ExecuteAsTemplate "manifest.webmanifest" . | resources.Fingerprint "md5" -}}
Asset organization - Use the recommended resolution for the open graph image - Since the mask-icon is onl served as a cache-busted asset and never served as a plain link from the site root, move it to assets/ - Cache-bust the webmanifest and put it in assets/
2020-12-16 07:15:18 +00:00
{{ printf `<link rel="manifest" href="%s">` $webmanifest.RelPermalink | safeHTML }}
<link rel="alternate" type="application/rss+xml" href="{{ .Site.BaseURL }}posts/index.xml" title="{{ $.Site.Title }}">
CI: test with lighthouse, webhint in staging
2020-12-24 01:02:43 +00:00
{{ if ne .Site.BaseURL "https://seirdy.one/" -}}
Only index the canonical location, seirdy.one Don't index the staging version on my tilde.
2020-11-25 08:38:31 +00:00
<meta name="robots" content="noindex">
Add apple-touch-icon-precomposed for phones Android, iOS, and other browsers use the pseudo-standard "apple-touch-icon-precomposed.png"; android recommends 192x192px and iOS downscales to 180x180px.
2020-12-12 10:41:18 +00:00
{{ else -}}
Asset organization - Use the recommended resolution for the open graph image - Since the mask-icon is onl served as a cache-busted asset and never served as a plain link from the site root, move it to assets/ - Cache-bust the webmanifest and put it in assets/
2020-12-16 07:15:18 +00:00
<link rel="canonical" href="https://seirdy.one{{ .RelPermalink }}">
Add apple-touch-icon-precomposed for phones Android, iOS, and other browsers use the pseudo-standard "apple-touch-icon-precomposed.png"; android recommends 192x192px and iOS downscales to 180x180px.
2020-12-12 10:41:18 +00:00
{{ end -}}
Only index the canonical location, seirdy.one Don't index the staging version on my tilde.
2020-11-25 08:38:31 +00:00
{{ $resources := slice -}}
{{ $resources = $resources | append (resources.Get "/css/main.css") -}}
{{ $dark := .Site.Params.dark | default "auto" -}}
{{ if not (eq $dark "off") -}}
{{ $resources = $resources | append (resources.Get "css/dark.css" | resources.ExecuteAsTemplate "dark.css" .) -}}
{{ end -}}
Declare supported color schemes in <head> State that both dark and light color schemes are supported in the document <head> to inform browsers before CSS is loaded and parsed. Also added a bunch of comments.
2020-12-19 02:33:46 +00:00
<!-- Tell the browser we support dark mode. If the user doesn't
specify a preference, prefer light mode; users who override
browser default stylesheets will be able to use their preferred
palette that way. -->
<meta name="color-scheme" content="light dark">
Implement cache-busting and SRI for CSS Use Hugo's fingerprinting pipes [0] to give external stylesheets an identifier to enable cache-busting [1]. Since Hugo's fingerprinting automatically generates the information needed for SRI [2], include an integrity attribute too. I discovered this feature through webhint [3], and added the .hintrc file I used to the repo root. [0]: https://gohugo.io/hugo-pipes/fingerprint/ [1]: https://css-tricks.com/strategies-for-cache-busting-css/ [2]: https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity [3]: https://webhint.io/
2020-12-12 01:21:34 +00:00
{{ $css := $resources | resources.Concat "css/style.css" | minify | resources.Fingerprint "sha384" -}}
{{ printf `<link rel="stylesheet" href="%s" integrity="%s">` $css.RelPermalink $css.Data.Integrity | safeHTML }}
Declare supported color schemes in <head> State that both dark and light color schemes are supported in the document <head> to inform browsers before CSS is loaded and parsed. Also added a bunch of comments.
2020-12-19 02:33:46 +00:00
<!-- only load syntax-highlighting CSS if this page needs it -->
Only load syntax highlighting CSS if necessary.. Pages without highlighted code blocks don't need to load syntax.css; for those that do, simply declare "highlight: true" in the front matter to load the stylesheet separately.
2020-11-28 19:11:04 +00:00
{{ if .Params.highlight -}}
Implement cache-busting and SRI for CSS Use Hugo's fingerprinting pipes [0] to give external stylesheets an identifier to enable cache-busting [1]. Since Hugo's fingerprinting automatically generates the information needed for SRI [2], include an integrity attribute too. I discovered this feature through webhint [3], and added the .hintrc file I used to the repo root. [0]: https://gohugo.io/hugo-pipes/fingerprint/ [1]: https://css-tricks.com/strategies-for-cache-busting-css/ [2]: https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity [3]: https://webhint.io/
2020-12-12 01:21:34 +00:00
{{ $css_syntax := resources.Get "/css/syntax.css" | minify | resources.Fingerprint "sha384" }}
{{- printf `<link rel="stylesheet" href="%s" integrity="%s">` $css_syntax.RelPermalink $css_syntax.Data.Integrity | safeHTML }}
Add some more metadata for widgets + indieweb - Add open graph metadata for other apps to display link previews - Add more rel="me" metadata for the Indieweb. Getting on the Indieweb will take some time, but this is a good first step.
2020-12-16 07:05:45 +00:00
{{- end -}}
{{- if eq .RelPermalink "/" -}}
Only index the canonical location, seirdy.one Don't index the staging version on my tilde.
2020-11-25 08:38:31 +00:00
<title>{{ .Title }}</title>
Add some more metadata for widgets + indieweb - Add open graph metadata for other apps to display link previews - Add more rel="me" metadata for the Indieweb. Getting on the Indieweb will take some time, but this is a good first step.
2020-12-16 07:05:45 +00:00
{{- else -}}
Improve <title>
2020-12-01 01:19:33 +00:00
<title>{{ .Title }} - Seirdy</title>
Add some more metadata for widgets + indieweb - Add open graph metadata for other apps to display link previews - Add more rel="me" metadata for the Indieweb. Getting on the Indieweb will take some time, but this is a good first step.
2020-12-16 07:05:45 +00:00
{{- end -}}
Declare supported color schemes in <head> State that both dark and light color schemes are supported in the document <head> to inform browsers before CSS is loaded and parsed. Also added a bunch of comments.
2020-12-19 02:33:46 +00:00
<!-- open graph stuff; used in the Fediverse, Signal link previews,
some RSS readers, and a certain large social media company -->
Add some more metadata for widgets + indieweb - Add open graph metadata for other apps to display link previews - Add more rel="me" metadata for the Indieweb. Getting on the Indieweb will take some time, but this is a good first step.
2020-12-16 07:05:45 +00:00
<meta property="og:title" content="{{ .Title }}">
<meta property="og:site_name" content="{{ $.Site.Title }}">
{{- if (eq "page" .Kind) }}
<meta property="og:type" content="article">
{{- else }}
<meta property="og:type" content="website">
{{- end }}
Declare supported color schemes in <head> State that both dark and light color schemes are supported in the document <head> to inform browsers before CSS is loaded and parsed. Also added a bunch of comments.
2020-12-19 02:33:46 +00:00
<!-- ANOTHER meta image?! When will it end? -->
Asset organization - Use the recommended resolution for the open graph image - Since the mask-icon is onl served as a cache-busted asset and never served as a plain link from the site root, move it to assets/ - Cache-bust the webmanifest and put it in assets/
2020-12-16 07:15:18 +00:00
{{ $og_image := resources.Get "/open_graph.png" | resources.Fingerprint "md5" -}}
{{ printf `<meta property="og:image" content="%s">` $og_image.Permalink | safeHTML }}
Add some more metadata for widgets + indieweb - Add open graph metadata for other apps to display link previews - Add more rel="me" metadata for the Indieweb. Getting on the Indieweb will take some time, but this is a good first step.
2020-12-16 07:05:45 +00:00
<meta property="og:image:type" content="image/png">
Asset organization - Use the recommended resolution for the open graph image - Since the mask-icon is onl served as a cache-busted asset and never served as a plain link from the site root, move it to assets/ - Cache-bust the webmanifest and put it in assets/
2020-12-16 07:15:18 +00:00
<meta property="og:image:height" content="630">
<meta property="og:image:width" content="1200">
<meta property="og:url" content="https://seirdy.one{{ .RelPermalink }}">
Metadata: description + cache-bust manifest icons - Add a cache-busting fingerprint to all the icons in the webmanifest - Add a <meta> and open graph tag for a description. - Include a 512px icon in the manifest
2020-12-19 21:52:24 +00:00
<meta property="og:description" content="{{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Site.Params.Description }}{{ end }}">
Save Hugo version in bottom of <head> I previously removed this from <head> because the first piece of metadata should be setting the charset to utf-8. This commit adds it back, but to the bottom of <head>.
2020-12-24 05:48:27 +00:00
{{ hugo.Generator }}
Batman!! (this commit has no parents) The sight of an animal using a JavaScript captivates Computer Scientists and laymen alike, perhaps because it forces us to question some of our ideas about human uniqueness. Does the animal know how JavaScript works? Did it anticipate the need for the tool and select it instead of Haskell or Zig? To some, this fascination with JavaScript seems arbitrary and anthropocentric; after all, animals engage in many other complex activities, like Agile Planning and ordering Juice on the Internet. However, we know that complex behaviour need not be cognitively demanding. JavaScript development can therefore provide a powerful window into the minds of animals, and help us to learn what capacities we share with them — and what might have changed to allow for the incontrovertibly unique levels of technology shown by modern humans, such as integers and block scope.
2020-11-03 23:46:20 +00:00
</head>
Reference in a new issue Copy permalink