Setup initial meter logic

src/components/Home/Banner.astro

@@ -9,6 +9,10 @@ interface Data {
   angle: number;
 }
 
+const DataHubStats = {
+  TotalARCCount: 125
+}
+
 const data: Data[] = [
   { id: 1, cx: 1975, cy: 200, r: 50, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'Open-source your research', angle: 320 },
   { 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: 200 },

src/components/MeterUp.astro

@@ -0,0 +1,51 @@
+---
+
+const { number, id, width } = Astro.props;
+
+
+function createEaseOutArray(max: number, count = 20) {
+    const numbers = [];
+
+    for (let i = 0; i < count; i++) {
+        // Ease-out effect: start with larger numbers and gradually reduce the increment.
+        // Use an exponential scale to get that effect.
+        let t = i / (count - 1); // Normalize `i` between 0 and 1.
+        
+        // Apply an ease-out function (exponential curve)
+        let easeOutFactor = Math.pow(t, 4); // Stronger ease-out by using exponent 4
+        
+        // Generate the number based on the ease-out factor
+        let number = Math.round(easeOutFactor * max);
+        
+        numbers.push(number);
+    }
+
+    return numbers;
+}
+
+const numberArray = createEaseOutArray(number, 15);
+---
+
+<script define:vars={{numberArray, id}}>
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// Function to update the innerHTML with the next number from easeOutArray
+async function incrementNumber(ele, numbers) {
+  await sleep(200)
+  for (let i = 0; i < numbers.length; i++) {
+    ele.innerHTML = numbers[i];  // Set the next number
+    await sleep(50);  // Wait for 50 ms before moving to the next number
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function () { 
+  const ele = document.getElementById(id + "-number");
+  incrementNumber(ele, numberArray);
+});
+
+</script>
+
+<span id={id} style={{width: (width || "auto")}} class="inline-block text-right">
+  <strong id={id + "-number"}>0</strong>
+</span>

src/layouts/MarkdownLayout.astro

@@ -42,8 +42,6 @@ const { frontmatter, headings } = Astro.props;
 function createTagLink(tag: string) {
   return `/arc-website/details/tags/${tag}`;
 }
-// console.log("Hello World")
-// console.log(buildNestedHeadings(headings))
 
 // Generate the nested headings structure
 const nestedHeadings = buildNestedHeadings(headings);

src/pages/details/documentation-principle.md

@@ -29,7 +29,10 @@ When computational analysis is performed on a sample or on the data resulting fr
 A workflow, on the other hand, is the computational protocol detailing how the data is processed, simulated, or analyzed on a computer without actually executing the computation. Since workflows offer significant value for reuse in other datasets, they are documented separately from runs. 
 ![Documentation Principle](/arc-website/documentation-principle-workflow.png)
 
-> Notice: The ARC is designed to document the entire journey (process) from the object of study, through measurements and analysis (as processes) to the final results. This journey represents a process of processes, capturing each stage as part of the broader transformation from observable phenomena to conclusive outcomes. The ARC annotation principle is to add tags on these process for documentation.  
+:::note
+The ARC is designed to document the entire journey (process) from the object of study, through measurements and analysis (as processes) to the final results. This journey represents a process of processes, capturing each stage as part of the broader transformation from observable phenomena to conclusive outcomes. The ARC annotation principle is to add tags on these process for documentation.  
+:::
+
 
 (The term "experiment" is avoided here to prevent confusion, as it can intuitively overlap with "investigation," "study," or "assay" depending on context.)