Merge branch 'develop'

Author: overheadhunter

.nojekyll

@@ -11,5 +11,29 @@
 ## Building
 1. `npm install`
 1. run hugo
-  * for production simply run `hugo`
-  * for local development run `HUGO_ENV=development hugo server`
+  * for production builds simply run `npm run build`
+  * for local development run `npm run dev`
+  * for local production tests `npm run serve`
+
+## Optional Dependencies for Size Optimizations
+
+### Font Subsets
+To create subsets of font files, e.g. when we know only very few characters are required to render the title of the page "CRYPTOMATOR HUB":
+
+1. First install `pip install fonttools brotli`
+2. `pyftsubset quicksand-bold.woff2 --text="CRYPTOMATOR HUB" --verbose --flavor=woff2 --output-file=quicksand-bold.reduced.woff2`
+
+### Image Conversions
+Using WebP (for smaller images) or AVIF (for >80 kiB due to larger overhead) may yield in better compression. [Here](https://www.reddit.com/r/AV1/comments/aabqdc/lossless_compression_test_png_vs_webp_vs_avif/) is a (rather old) comparison benchmark. However, we need to test the best format ourselves.
+
+* `brew install libavif` (see [GitHub Project Page](https://github.com/AOMediaCodec/libavif?tab=readme-ov-file#installation) for other installation methods)
+  * Example (lossless): `avifenc -l input.png output.avif`
+  * Example (lossy): `avifenc --qcolor 70 --qalpha 100 --depth 8 input.png output.avif`
+* `brew install libwebm`
+  * Example (lossless): `cwebp -preset drawing -lossless -z 6 input.png -o output.webp`
+  * Example (lossy): `cwebp -preset drawing -q 90 -alpha_q 100 input.png -o output.webp`
+* `brew install optipng`
+  * Example: `optipng -o3 image.png`
+
+> [!TIP]
+> If you see color banding in lossy conversions, try avif with 10 bit color depth.

CNAME

@@ -1,6 +1,6 @@
 /* custom classes: */
 .header-bg {
-  background-image: url(/img/home/header-background.png), linear-gradient(to bottom, #0b0f17 0%, #143454 38%, #3f8bd9 72%, #9ac7f5 90%);
+  background-image: url(/img/home/header-background.avif), linear-gradient(to bottom, rgb(4.31% 5.88% 9.02%) 0%, rgb(7.84% 20.39% 32.94%) 38%, rgb(24.71% 54.51% 85.1%) 72%, rgb(60.39% 78.04% 96.08%) 90%);
   background-size: auto 100%;
 }
 

README.md

@@ -69,7 +69,7 @@ <h2>Wie schützt Cryptomator deine Daten?</h2>
   <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <h2>Optimaler Schutz dank neuesten Technologie-Standards</h2>
     <figure class="mx-auto md:w-5/6 lg:w-2/3">
-      <img data-src="/de/img/home/split-screenshots.png" class="lazyload aspect-[1664/975] w-full" alt="Gegenüberstellung von verschlüsselten und entschlüsselten Daten in einem Cryptomator-Tresor"/>
+      <img data-src="/de/img/home/split-screenshots.avif" class="lazyload aspect-[1664/975] w-full" alt="Gegenüberstellung von verschlüsselten und entschlüsselten Daten in einem Cryptomator-Tresor"/>
       <figcaption>Schaut jemand in den Ordner in deiner Cloud, kann er keinerlei Rückschlüsse auf deine Daten ziehen.</figcaption>
     </figure>
   </article>

assets/css/custom.css

@@ -69,7 +69,7 @@ <h2>How does Cryptomator protect your data?</h2>
   <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <h2>Optimal protection thanks to the latest technology standards</h2>
     <figure class="mx-auto md:w-5/6 lg:w-2/3">
-      <img data-src="/img/home/split-screenshots.png" class="lazyload aspect-[1664/975] w-full" alt="Comparison of encrypted and decrypted data in a Cryptomator vault"/>
+      <img data-src="/img/home/split-screenshots.avif" class="lazyload aspect-[1664/975] w-full" alt="Comparison of encrypted and decrypted data in a Cryptomator vault"/>
       <figcaption>If someone looks into the folder in your cloud, they cannot draw any conclusions about your data.</figcaption>
     </figure>
   </article>

content/_index.de.html

@@ -12,7 +12,7 @@ <h1>Sorry, the page you were looking for was not found.</h1>
   </div>
 {{ end }}
 {{ define "script" }}
-  {{ if hugo.IsServer }}
+  {{ if hugo.IsDevelopment }}
     {{ $404Js := resources.Get "js/404.js" }}
     <script type="text/javascript" src="{{ $404Js.RelPermalink }}" defer></script>
   {{ else }}

content/_index.en.html

@@ -4,6 +4,13 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ .Title }}</title>
+    {{ block "preloads" . }}
+      <!-- optional additional page-specific preloads -->
+    {{ end }}
+    <link rel="preload" fetchpriority="low" as="image" href="favicon.ico" type="image/x-icon">
+    <link rel="preload" fetchpriority="low" as="image" href="img/logo.svg" type="image/svg+xml">
+    <link rel="preload" fetchpriority="low" href="/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" fetchpriority="low" href="/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     {{ if and (eq .Section "blog") .IsPage }}
       <meta name="description" content="{{ .Summary }}">
       <meta property="og:title" content="{{ .Title }}">
@@ -51,7 +58,7 @@
       <meta property="og:locale:alternate" content="{{ .Language.Params.LanguageCode }}" />
     {{ end }}
     <meta name="apple-itunes-app" content="app-id=1560822163">
-    {{ if hugo.IsServer }}
+    {{ if hugo.IsDevelopment }}
       {{ $css := resources.Get "css/main.css" | postCSS }}
       <link rel="stylesheet" href="{{ $css.RelPermalink }}" media="screen" />
     {{ else }}
@@ -62,9 +69,6 @@
     {{ range .Translations }}
       <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .RelPermalink }}" />
     {{ end }}
-    {{ block "head" . }}
-      <!-- optional additional page-specific stuff that goes into head -->
-    {{ end }}
   </head>
   <body x-data="{ isNavOpen: false, globalData: { githubStargazers: null } }" x-init="determineGitHubStargazersCount('{{ .Site.Language.Lang }}', globalData)" :class="isNavOpen && 'overflow-hidden'" class="bg-dark font-body text-gray-900">
     {{ partial "nav.html" . }}
@@ -76,7 +80,7 @@
     {{ end }}
     </div>
     {{ partial "footer.html" . }}
-    {{ if hugo.IsServer }}
+    {{ if hugo.IsDevelopment }}
       <script data-domain="cryptomator.local" src="https://plausible.skymatic.de/js/script.file-downloads.hash.outbound-links.tagged-events.local.js" integrity="sha384-eSdyNyMq4w2Hzeb7A3pkbi2+zvI/skXuKlWsX5uzccigZEHDhHyBYoTASuSW+ZUQ" crossorigin="anonymous" defer></script>
       {{ $baseJs := resources.Get "js/base.js" }}
       <script type="text/javascript" src="{{ $baseJs.RelPermalink }}" defer></script>

layouts/404.html

@@ -47,7 +47,7 @@ <h3 id="keyrecovery" class="font-headline text-xl md:text-2xl leading-relaxed mb
   </section>
 {{ end }}
 {{ define "script" }}
-  {{ if hugo.IsServer }}
+  {{ if hugo.IsDevelopment }}
     {{ $storeJs := resources.Get "js/store.js" }}
     <script type="text/javascript" src="{{ $storeJs.RelPermalink }}" defer></script>
     {{ $keyRecoveryJs := resources.Get "js/keyrecovery.js" }}

layouts/_default/baseof.html

@@ -57,7 +57,7 @@ <h1><a href="{{ .Parent.RelPermalink }}">{{ .Parent.Title }}</a> / {{ .Title }}<
     {{ end }}
   {{ end }}
   {{ if gt (len $discourseEmbedUrl) 0 }}
-    {{ if hugo.IsServer }}
+    {{ if hugo.IsDevelopment }}
       {{ $discourseJs := resources.Get "js/discourse.js" }}
       <script type="text/javascript" src="{{ $discourseJs.RelPermalink }}" x-url="{{ $discourseEmbedUrl }}" defer></script>
     {{ else }}