From bc55235e75975ed93669b0272e600d8cf93a677b Mon Sep 17 00:00:00 2001
From: Kevin F <Freymaurer@gmx.de>
Date: Wed, 18 Sep 2024 15:14:32 +0200
Subject: [PATCH] update banner

---
 src/components/Home/Banner.astro | 31 +++++++++++++++++++------------
 src/components/MeterUp.astro     |  6 +++---
 src/pages/index.astro            |  2 --
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/Home/Banner.astro b/src/components/Home/Banner.astro
index 32c53fc..f3d81a1 100644
--- a/src/components/Home/Banner.astro
+++ b/src/components/Home/Banner.astro
@@ -17,27 +17,31 @@ interface Data {
 const StatsData = [
   {
     id: "Testing",
+    prefix: "with ",
+    postfix: " ARCs",
     dataUrl: URLS.S3_DATAHUB_STATS,
     dataAccess: [["total", "internal"], ["total", "private"], ["total", "public"]],
   },
-  {
-    id: "Testing2",
-    dataUrl: URLS.S3_DATAHUB_STATS,
-    dataAccess: [["total", "commits"]],
-  },
   {
     id: "Testing3",
     dataUrl: URLS.S3_DATAHUB_STATS,
     dataAccess: [["total", "size"]],
     width: "120px",
+    postfix: " GB",
     isBytes: true
-  }
+  },
+  {
+    id: "Testing2",
+    dataUrl: URLS.S3_DATAHUB_STATS,
+    postfix: " contributions",
+    dataAccess: [["total", "commits"]],
+  },
 ]
 
 const data: Data[] = [
-  { id: 1, cx: 1975, cy: 200, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'Total ARCs', angle: 270, data: StatsData[0] },
-  { id: 2, cx: 1175.5, cy: 1168, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'ARC Contributions', angle: 185, data: StatsData[1] },
-  { id: 3, cx: 2967.5, cy: 532, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'Total Size', angle: 120, data: StatsData[2] },
+  { id: 1, cx: 1975, cy: 200, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'open source your research', angle: 270, data: StatsData[0] },
+  { id: 2, cx: 1175.5, cy: 1168, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'connect your \n research data \n to the world', angle: 185, data: StatsData[1] },
+  { id: 3, cx: 2967.5, cy: 532, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'bring your research \n data to life', angle: 120, data: StatsData[2] },
 ];
 
 // Function to calculate positions for text and arcs
@@ -563,9 +567,12 @@ const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: num
               class="fill-base-content"
               font-size="100"
             >
-              <tspan x={textX}>
-                {circle.text}
-              </tspan>
+              {/* split text by \n and create one tspan per */}
+              {circle.text.split('\n').map((text, index) => (
+                <tspan x={textX} dy={index === 0 ? 0 : '1.2em'}>
+                  {text}
+                </tspan>
+              ))}
               <MeterUp {...circle.data} x={textX} />
             </text>
           </g>)
diff --git a/src/components/MeterUp.astro b/src/components/MeterUp.astro
index 0448237..e0d82f5 100644
--- a/src/components/MeterUp.astro
+++ b/src/components/MeterUp.astro
@@ -1,6 +1,6 @@
 ---
 
-const { number, id, width, dataUrl, dataAccess, isBytes, x } = Astro.props;
+const { number, id, width, dataUrl, dataAccess, isBytes, x, prefix, postfix } = Astro.props;
 
 ---
 
@@ -83,6 +83,6 @@ document.addEventListener("DOMContentLoaded", function () {
 
 </script>
 
-<tspan id={id} style={{width: (width || "auto")}} dy="1.2em" x={x-20}>
-  <tspan id={id + "-number"}>0</tspan> {isBytes && "GB"}
+<tspan id={id} style={{width: (width || "auto")}} dy="1.2em" x={x-20} class="font-light italic">
+  {prefix} <tspan id={id + "-number"}>0</tspan> {postfix}
 </tspan>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 10be4fb..44d355e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,8 +6,6 @@ import HeroText from '../components/Home/HeroText.astro';
 import ResearchGraphNavigation from '../components/Home/ResearchGraphNavigation.astro';
 import DeveloperCards from '../components/Home/DeveloperCards.astro';
 import RDMGraphNavigation from '../components/Home/RDMGraphNavigation.astro';
-import MeterUp from '../components/MeterUp.astro';
-
 
 ---