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/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/assets/quassel-icon.svg → apps/website/public/quassel-icon.svg b/apps/website/public/assets/quassel-icon.svg → apps/website/public/quassel-icon.svg
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/src/assets/logos/quassel-icon.svg b/apps/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/src/assets/video/quassel.mp4 b/apps/website/src/assets/video/quassel.mp4
diff --git a/apps/website/public/assets/play-button.svg → ...assets/video/video-assets/play-button.svg b/apps/website/public/assets/play-button.svg → ...assets/video/video-assets/play-button.svg
diff --git a/apps/website/src/assets/video/video-assets/poster.png b/apps/website/src/assets/video/video-assets/poster.png
diff --git a/apps/website/src/components/Head.astro b/apps/website/src/components/Head.astro
@@ -0,0 +1,19 @@
+---
+const { title } = Astro.props;
+---
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" type="image/svg+xml" href="/quassel-icon.svg" />
+  <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:type" content="website" />
+  <meta property="og:url" content="https://www.quassel.ch/" />
+  <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. "
+  />
+</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 class="logo" 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 { Image } from "astro:assets";
+import UzhLogo from "../assets/logos/uzh-logo.svg";
 import videoUrl from "../assets/video/quassel.mp4";
+import Poster from "../assets/video/video-assets/poster.png";
+import PlayButton from "../assets/video/video-assets/play-button.svg";
 ---
 
 <style>
@@ -103,15 +107,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>