Merge branch 'develop' into feature/add-umami

Author: tobihagemann

.github/workflows/gh-pages.yml

@@ -2,47 +2,52 @@ name: GitHub Pages
 
 on:
   push:
-    branches:
-    - develop
 
 jobs:
+  # BUILD
   build:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
       uses: actions/checkout@v4
-      # with:
-      #   submodules: true
-
+    - name: Setup Pages
+      uses: actions/configure-pages@v5
     - name: Setup Hugo
       uses: peaceiris/actions-hugo@v3
       with:
         hugo-version: '0.133.0'
-        # extended: true
-
     - uses: actions/setup-node@v4
       with:
         node-version: 22
         cache: 'npm'
         cache-dependency-path: package-lock.json
-
-
-    - name: Install Tools
-      run: npm install -g postcss-cli autoprefixer
-
+        registry-url: 'https://npm.pkg.github.com/'
     - name: NPM install
       run: |
         npm config set "@skymatic:registry" https://npm.pkg.github.com/
-        npm config set '//npm.pkg.github.com/:_authToken' "${{ secrets.FONTAWESOME_AUTH_TOKEN }}"
-        npm install
-
+        npm ci --ignore-scripts
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.FONTAWESOME_AUTH_TOKEN }}
     - name: Build
       run: hugo
-
-    - name: Deploy
-      uses: peaceiris/actions-gh-pages@v4
+    - name: Upload artifact
+      uses: actions/upload-pages-artifact@v3
       with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./public
-        publish_branch: main
-        cname: cryptomator.org
+        path: 'public'
+
+  # DEPLOY
+  deploy:
+    if: github.ref == 'refs/heads/main'
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+    needs: [build]
+    permissions: # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+      pages: write      # to deploy to Pages
+      id-token: write   # to verify the deployment originates from an appropriate source
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4 # or specific "vX.X.X" version tag for this action
+    environment: # Deploy to the github-pages environment
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}

.nojekyll

@@ -3,13 +3,34 @@
 # Usage
 ## Requirements
 * Hugo
-* NPM
-  * postcss-cli (`npm install -g postcss-cli`)
-  * autoprefixer (`npm install -g autoprefixer`)
 * Fontawesome Pro `npm config set "@skymatic:registry" https://npm.pkg.github.com/ && npm config set "//npm.pkg.github.com/:_authToken" TOKEN`
 
 ## 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%;
 }
 
@@ -12,12 +12,12 @@
 }
 
 .btn {
-  @apply inline-block border rounded no-underline text-center px-4 py-2;
+  @apply inline-block border rounded-sm no-underline text-center px-4 py-2;
 }
 
 .btn:hover,
 .btn:focus {
-  @apply no-underline outline-none;
+  @apply no-underline outline-hidden;
 }
 
 .btn:disabled,
@@ -81,8 +81,74 @@
   @apply cursor-not-allowed no-underline text-gray-300;
 }
 
+.text-link {
+  @apply text-primary no-underline hover:underline;
+}
+
+.font-h1 {
+  @apply font-headline font-medium text-3xl md:text-4xl leading-tight;
+}
+
+.font-h2 {
+  @apply font-headline font-medium text-xl md:text-2xl leading-snug;
+}
+
+.font-h3 {
+  @apply font-headline text-lg md:text-xl leading-relaxed;
+}
+
+.font-p {
+  @apply text-sm md:text-base leading-relaxed;
+}
+
+.font-code {
+  @apply font-semibold;
+}
+
+.lead {
+  @apply text-lg md:text-xl leading-relaxed text-gray-700;
+}
+
+.label-uppercase {
+  @apply block font-bold text-xs uppercase tracking-wide text-gray-600;
+}
+
+ul.list-primary,
+ul.list-primary ul {
+  @apply list-disc text-base leading-relaxed pl-6.5;
+}
+
+ul.list-primary-sm,
+ul.list-primary-sm ul {
+  @apply text-sm pl-5.5;
+}
+
+ul.list-primary li {
+  @apply pl-1.5 my-2;
+}
+
+ul.list-primary-sm li {
+  @apply pl-1.5 my-1;
+}
+
+ul.list-primary li::marker {
+  @apply text-gray-400;
+}
+
+.white-box {
+  @apply rounded-sm shadow-sm bg-white;
+}
+
+.input-box {
+  @apply rounded-sm border-gray-300 focus:ring-0 focus:border-secondary;
+}
+
+.pre-box {
+  @apply rounded-sm overflow-x-auto text-white bg-gray-800 p-4;
+}
+
 .StripeElement {
-  @apply rounded border border-gray-300 px-3 py-2;
+  @apply rounded-sm border border-gray-300 px-3 py-2;
 }
 
 .StripeElement--focus {
@@ -127,14 +193,6 @@ textarea:read-only {
   min-height: 80vh;
 }
 
-nav a {
-  color: inherit;
-}
-
-nav a:hover {
-  color: inherit;
-}
-
 .bg-trans-white {
   background-color: rgba(255, 255, 255, 0.05);
 }
@@ -168,8 +226,3 @@ nav a:hover {
   margin-top: -96px;
   visibility: hidden;
 }
-
-/* see https://alpinejs.dev/directives/cloak */
-[x-cloak] {
-  display: none !important;
-}