Replaced the abbr. of old name to new one

readme.md

@@ -27,7 +27,7 @@ Running this site locally requires [`git`](https://git-scm.com) and [`pnpm`](htt
 1. Clone the repo and change into its directory.
 
    ```sh
-   git clone https://github.com/sbsev/site sbs-site && cd sbs-site
+   git clone https://github.com/sbsev/site st-site && cd st-site
    ```
 
 2. (optional) Setup [`pre-commit` hooks](https://pre-commit.com).

src/lib/BasePage.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <svelte:head>
-  <title>{title ? `${title} - SbS` : `SbS`}</title>
+  <title>{title ? `${title} - ST` : `ST`}</title>
   <meta name="date" content={date} />
 </svelte:head>
 

src/lib/Footer.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <footer>
-  <img src="/favicon.svg" alt="SbS Logo" height="60" />
+  <img src="/favicon.svg" alt="ST Logo" height="60" />
   <span>© {new Date().getFullYear()} {$microcopy?.footer?.name}</span>
   <div>
     {#each links as { title, url }}

src/lib/Nav.svelte

@@ -69,7 +69,7 @@
 {/if}
 
 <a on:click={close} class="logo" href="/" aria-current={isCurrent(`/`)}>
-  <img src="/favicon.svg" alt="SbS Logo" height="50" width="50" />
+  <img src="/favicon.svg" alt="ST Logo" height="50" width="50" />
 </a>
 
 <nav class:isOpen class={mobile ? `mobile` : `desktop`} bind:this={node}>

src/routes/+page.svelte

@@ -2,21 +2,48 @@
   import { ChapterMap } from '$lib'
   import { microcopy } from '$lib/stores'
   import Icon from '@iconify/svelte'
+    import { onMount } from 'svelte'
 
   export let data
 
   const style = `margin-right: 5pt;`
+
+  onMount(() => {
+    let numChapters = data.chapters.filter((ch) => ch.acceptsSignups).length
+    let numStudents = $microcopy?.indexPage?.boxes?.studentsNumber
+    let numPupils = $microcopy?.indexPage?.boxes?.pupilsNumber
+    let numScholarships = $microcopy?.indexPage?.boxes?.scholarshipNumber
+    let numOrganizationMembers = $microcopy?.indexPage?.boxes?.organizationMemberNumber
+
+    let boxes = [
+      { id: 'chapterNumber', number: numChapters },
+      { id: 'studentNumber', number: numStudents },
+      { id: 'pupilNumber', number: numPupils },
+      { id: 'scholarshipNumber', number: numScholarships },
+      { id: 'organizationMemberNumber', number: numOrganizationMembers },
+    ]
+
+    function updateBox(id) {
+      let increment = boxes.find((box) => box.id === id)?.number / 100
+      let currentNum = parseInt(document.getElementById(id).innerText)
+      if (currentNum < boxes.find((box) => box.id === id)?.number) {
+        document.getElementById(id).innerText = Math.ceil(currentNum + increment)
+        setTimeout(() => updateBox(id), 10)
+      } else {
+        document.getElementById(id).innerText = boxes.find((box) => box.id === id)?.number
+      }
+    }
+
+    boxes.forEach((b) => {
+      updateBox(b.id)
+    })
+  })
 </script>
 
 <!-- Shows image of name of german association if page is german. Otherwise shows name of association. -->
 {#if $microcopy?.country == `de` || $microcopy?.country == `at`}
   <h1>
-    <img
-      src="/logo-name-de.svg"
-      alt="StudyTutors"
-      width="1612px"
-      height="163px"
-    />
+    <img src="/logo-name-de.svg" alt="StudyTutors" width="1612px" height="163px" />
   </h1>
 {:else}
   <h1>
@@ -34,35 +61,35 @@
 
 <section style="white-space: nowrap;">
   <div style="background: var(--light-blue);">
-    <span>{data.chapters.filter((ch) => ch.acceptsSignups).length}</span>
+    <span id="chapterNumber"> 0 </span>
     <strong>
       <Icon inline icon="ic:place" {style} />
       {$microcopy?.indexPage?.boxes?.locationsName}</strong
     >
   </div>
   <div style="background: var(--green);">
-    <span>{$microcopy?.indexPage?.boxes?.studentsNumber}</span>
+    <span id="studentNumber"> 0 </span>
     <strong>
       <Icon inline icon="fa-solid:user-graduate" {style} />
       {$microcopy?.indexPage?.boxes?.studentsName}</strong
     >
   </div>
   <div style="background: var(--orange);">
-    <span>{$microcopy?.indexPage?.boxes.pupilsNumber}</span>
+    <span id="pupilNumber"> 0 </span>
     <strong>
       <Icon inline icon="fa-solid:child" {style} />
       {$microcopy?.indexPage?.boxes?.pupilsName}</strong
     >
   </div>
   <div style="background: var(--green);">
-    <span>{$microcopy?.indexPage?.boxes?.scholarshipNumber}</span>
+    <span id="scholarshipNumber"> 0 </span>
     <strong>
       <Icon inline icon="fa-solid:user-graduate" {style} />
       {@html $microcopy?.indexPage?.boxes?.scholarshipName}
     </strong>
   </div>
   <div style="background: var(--light-blue);">
-    <span>{$microcopy?.indexPage?.boxes?.organizationMemberNumber}</span>
+    <span id="organizationMemberNumber">0</span>
     <strong>
       <Icon inline icon="fa6-solid:user-group" {style} />
       {@html $microcopy?.indexPage?.boxes?.organizationMemberName}

static/manifest.json

@@ -1,7 +1,7 @@
 {
   "background_color": "#ffffff",
   "theme_color": "#003056",
-  "name": "StudyTutors e.V.",
+  "name": "Studenten Bilden Schüler e.V.",
   "short_name": "SbS",
   "display": "minimal-ui",
   "start_url": "/",