openscript-ch · openscript · Mar 27, 2025 · Mar 22, 2025 · Mar 24, 2025 · Mar 24, 2025
diff --git a/.changeset/weak-apes-bow.md b/.changeset/weak-apes-bow.md
@@ -0,0 +1,5 @@
+---
+"@quassel/website": patch
+---
+
+Improve website
diff --git a/apps/website/.docker/nginx.conf b/apps/website/.docker/nginx.conf
@@ -14,4 +14,9 @@ server {
 
     try_files $uri $uri/ /index.html =404;
   }
+
+  location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|otf|webp)$ {
+    expires 1y;
+    add_header Cache-Control "public";
+  }
 }
diff --git a/apps/website/public/android-chrome-192x192.png b/apps/website/public/android-chrome-192x192.png
diff --git a/apps/website/public/assets/arrow.svg b/apps/website/public/assets/arrow.svg
diff --git a/apps/website/public/assets/poster.png b/apps/website/public/assets/poster.png
diff --git a/apps/website/public/favicon-16x16.png b/apps/website/public/favicon-16x16.png
diff --git a/apps/website/public/favicon-32x32.png b/apps/website/public/favicon-32x32.png
diff --git a/apps/website/public/favicon-48x48.png b/apps/website/public/favicon-48x48.png
diff --git a/apps/website/public/favicon-60x60.png b/apps/website/public/favicon-60x60.png
diff --git a/apps/website/public/favicon-64x64.png b/apps/website/public/favicon-64x64.png
diff --git a/apps/website/public/favicon-96x96.png b/apps/website/public/favicon-96x96.png
diff --git a/apps/website/public/favicon.ico b/apps/website/public/favicon.ico
diff --git a/apps/website/public/opengraph.png b/apps/website/public/opengraph.png
diff --git a/...website/public/assets/openscript-logo.svg → ...site/src/assets/logos/openscript-logo.svg b/...website/public/assets/openscript-logo.svg → ...site/src/assets/logos/openscript-logo.svg
diff --git a/apps/website/public/assets/quassel-icon.svg → ...website/src/assets/logos/quassel-icon.svg b/apps/website/public/assets/quassel-icon.svg → ...website/src/assets/logos/quassel-icon.svg
diff --git a/apps/website/public/assets/uzh-logo.svg → apps/website/src/assets/logos/uzh-logo.svg b/apps/website/public/assets/uzh-logo.svg → apps/website/src/assets/logos/uzh-logo.svg
diff --git a/apps/website/public/assets/play-button.svg → ...website/src/assets/videos/play-button.svg b/apps/website/public/assets/play-button.svg → ...website/src/assets/videos/play-button.svg
diff --git a/apps/website/src/assets/videos/poster.png b/apps/website/src/assets/videos/poster.png
diff --git a/apps/website/src/assets/video/quassel.mp4 → apps/website/src/assets/videos/quassel.mp4 b/apps/website/src/assets/video/quassel.mp4 → apps/website/src/assets/videos/quassel.mp4
diff --git a/apps/website/src/components/Head.astro b/apps/website/src/components/Head.astro
@@ -0,0 +1,34 @@
+---
+const { title } = Astro.props;
+const ogImageUrl = "/opengraph.png";
+---
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any" />
+  <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
+  <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
+  <link rel="icon" href="/favicon-48x48.png" type="image/png" sizes="48x48" />
+  <link rel="icon" href="/favicon-64x64.png" type="image/png" sizes="64x64" />
+  <link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96" />
+  <link rel="icon" href="/android-chrome-192x192.png" type="image/png" sizes="192x192" />
+  <title>{title}</title>
+  <meta
+    name="description"
+    content="Quassel is a web-based application designed to aid researchers in collecting and analyzing data on children's language exposure."
+  />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://www.quassel.ch/" />
+  <meta property="og:title" content={title} />
+  <meta
+    property="og:description"
+    content="Quassel (previously Language Exposure Questionnaire) is a web-based application designed to aid researchers in collecting and analyzing data on children's language exposure. "
+  />
+  <meta property="og:image" content={ogImageUrl} />
+  <meta property="og:image:alt" content="Quassel Application Display" />
+  <meta
+    name="keywords"
+    content="Quassel, children, calendar-like interface, language, langauge exposure, web application, periods of life, data entry personnel, UZH, openscript, open source"
+  />
+</head>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import Head from "../components/Head.astro";
 import Site from "../layouts/Site.astro";
 import Header from "../sections/Header.astro";
 import Footer from "../sections/Footer.astro";
@@ -8,11 +9,7 @@ import Administration from "../sections/Administration.astro";
 import About from "../sections/About.astro";
 ---
 
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" type="image/svg+xml" href="/assets/quassel-icon.svg" />
-  <title>Quassel</title>
-</head>
+<Head title="Quassel" />
 <Site>
   <Header />
   <main>

diff --git a/apps/website/src/sections/Footer.astro b/apps/website/src/sections/Footer.astro
@@ -1,3 +1,9 @@
+---
+import { Image } from "astro:assets";
+import UzhLogo from "../assets/logos/uzh-logo.svg";
+import OpenscriptLogo from "../assets/logos/openscript-logo.svg";
+---
+
 <style>
   footer {
     display: grid;
@@ -43,14 +49,14 @@
 <footer>
   <h2>Interested in Using Quassel?</h2>
   <div class="contact">
-    <img src="../assets/uzh-logo.svg" alt="University of Zurich logo" />
+    <Image src={UzhLogo} alt="University of Zurich logo" />
     <h3>Research collaboration</h3>
     <a href="https://www.psychology.uzh.ch/en/areas/dev/devpsy/Weltentdecker/Research-area-Multilingualism-and-Communication.html">
       Reach out to <strong>Stephanie</strong> from University of Zurich
     </a>
   </div>
   <div class="contact">
-    <img src="../assets/openscript-logo.svg" alt="openscript Ltd. logo" />
+    <Image src={OpenscriptLogo} alt="openscript Ltd. logo" />
     <h3>Tech collaboration</h3>
     <a href="https://openscript.ch/en/">Contact <strong>Robin</strong> from openscript Ltd.</a>
   </div>

diff --git a/apps/website/src/sections/Header.astro b/apps/website/src/sections/Header.astro
@@ -1,4 +1,6 @@
 ---
+import { Image } from "astro:assets";
+import QuasselLogo from "../assets/logos/quassel-icon.svg";
 import IconChevronRight from "~icons/tabler/chevron-right";
 ---
 
@@ -12,7 +14,7 @@ import IconChevronRight from "~icons/tabler/chevron-right";
 
   .brand {
     display: flex;
-    gap: var(--spacing-md);
+    gap: var(--spacing-sm);
     color: var(--color-highlight);
     align-items: baseline;
   }
@@ -41,15 +43,15 @@ import IconChevronRight from "~icons/tabler/chevron-right";
     stroke-width: 3;
   }
 
-  img {
+  .brand img {
     height: 4rem;
   }
 </style>
 
 <header>
   <div class="brand">
     <h1>Quassel</h1>
-    <img src="../assets/quassel-icon.svg" alt="Quassel logo" />
+    <Image src={QuasselLogo} alt="Quassel logo" />
   </div>
   <nav>
     <ul>

diff --git a/apps/website/src/sections/Spotlight.astro b/apps/website/src/sections/Spotlight.astro
@@ -1,5 +1,9 @@
 ---
-import videoUrl from "../assets/video/quassel.mp4";
+import { Image } from "astro:assets";
+import UzhLogo from "../assets/logos/uzh-logo.svg";
+import videoUrl from "../assets/videos/quassel.mp4";
+import Poster from "../assets/videos/poster.png";
+import PlayButton from "../assets/videos/play-button.svg";
 ---
 
 <style>
@@ -19,9 +23,10 @@ import videoUrl from "../assets/video/quassel.mp4";
   }
 
   .intro {
-    width: 36rem;
     text-align: center;
     margin-bottom: var(--spacing-lg);
+    padding: var(--spacing-xl);
+    max-width: 37rem;
   }
 
   .quassel-video {
@@ -52,18 +57,25 @@ import videoUrl from "../assets/video/quassel.mp4";
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    cursor: pointer;
   }
 
   .playButton :hover {
     transform: scale(1.1);
   }
 
+  .playButton img {
+    width: clamp(3rem, 10vw, 6rem);
+  }
+
   .used-by {
     margin-top: var(--spacing-xl);
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    gap: var(--spacing-sm);
+    display: flex;
+    gap: var(--spacing-lg);
+
+    @media (max-width: 640px) {
+      flex-direction: column;
+      gap: 0;
+    }
   }
 
   .used-by h2 {
@@ -73,7 +85,7 @@ import videoUrl from "../assets/video/quassel.mp4";
   }
 
   .used-by img {
-    height: calc(2 * var(--spacing-lg));
+    max-height: 4rem;
   }
 
   .used-by a :hover {
@@ -103,15 +115,15 @@ import videoUrl from "../assets/video/quassel.mp4";
     <p>Efficient documenting <strong>children's</strong> language exposure by carer giver and time.</p>
   </div>
   <div class="quassel-video">
-    <video controls poster="./assets/poster.png" muted playsinline>
+    <video controls poster={Poster.src} muted playsinline>
       <source src={videoUrl} type="video/mp4" />
     </video>
     <button class="playButton">
-      <img src="../assets/play-button.svg" alt="Play button" />
+      <Image src={PlayButton} alt="Play button" />
     </button>
   </div>
   <div class="used-by">
     <h2>Used by</h2>
-    <a href="https://www.uzh.ch/en.html"><img src="../assets/uzh-logo.svg" alt="University of Zurich" /></a>
+    <a href="https://www.uzh.ch/en.html"><Image src={UzhLogo} alt="University of Zurich" /></a>
   </div>
 </section>