Merge branch 'main' into db-datamodel

README.md

@@ -3,3 +3,4 @@
 The official ARC (annotated research context) website!
 
 [nfdi4plants.github.io/arc-website/](https://nfdi4plants.github.io/arc-website/)
+

astro.config.mjs

@@ -8,12 +8,14 @@ import {remarkReplaceTooltips} from './src/plugins/remark-dictionary-tooltips.ts
 import {remarkAsides} from './src/plugins/remark-asides.ts';
 import remarkDirective from 'remark-directive';
 import mdx from '@astrojs/mdx';
+import icon from 'astro-icon';
+import pagefind from "astro-pagefind";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), mdx()],
+  integrations: [tailwind(), mdx(), icon(), pagefind()],
   site: 'https://nfdi4plants.github.io',
-  base: 'arc-website',
+  base: '/arc-website/', // will kill pagefind integration without trailing slash
   markdown: {
     remarkPlugins: [remarkDirective, remarkReplaceLinks(), remarkReplaceTooltips(), remarkAsides()],
     rehypePlugins: [

package.json

@@ -13,8 +13,12 @@
     "@astrojs/check": "^0.9.3",
     "@astrojs/mdx": "^3.1.5",
     "@astrojs/tailwind": "^5.1.0",
+    "@iconify-json/mdi": "^1.2.0",
     "@tailwindcss/typography": "^0.5.15",
     "astro": "^4.15.4",
+    "astro-icon": "^1.1.1",
+    "astro-pagefind": "^1.6.0",
+    "bibtex-js-parser": "^1.1.6",
     "mdast-util-directive": "^3.0.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",

src/components/Footer.astro

@@ -1,12 +1,16 @@
+---
+import { URLS } from "../statics";
+---
+
 <footer class="footer bg-neutral text-neutral-content p-10 dark:bg-black dark:border-t-primary dark:border-t-2">
   <nav>
-    <h6 class="footer-title">Services</h6>
-    <a class="link link-hover">Knowledgebase</a>
-    <a class="link link-hover">Tools</a>
-    <a class="link link-hover">Partners</a>
+    <h6 class="footer-title">Resources</h6>
+    <a class="link link-hover" href={URLS.GITHUB_REPO}>GitHub</a>
+    <a class="link link-hover" href={URLS.DATAPLANT_WEBSITE}>DataPLANT</a>
+    <!-- <a class="link link-hover">Partners</a> -->
     <!-- <a class="link link-hover">Advertisement</a> -->
   </nav>
-  <nav>
+  <!-- <nav>
     <h6 class="footer-title">Company</h6>
     <a class="link link-hover">About us</a>
     <a class="link link-hover">Contact</a>
@@ -18,5 +22,5 @@
     <a class="link link-hover">Terms of use</a>
     <a class="link link-hover">Privacy policy</a>
     <a class="link link-hover">Cookie policy</a>
-  </nav>
+  </nav> -->
 </footer>

src/components/Home/Banner.astro

@@ -1,4 +1,7 @@
 ---
+import { URLS } from '../../statics';
+import MeterUp from '../MeterUp.astro';
+
 interface Data {
   id: number | string;
   cx: number;
@@ -7,16 +10,38 @@ interface Data {
   href: string;
   text: string;
   angle: number;
+  data: any;
 }
 
-const DataHubStats = {
-  TotalARCCount: 125
-}
+
+const StatsData = [
+  {
+    id: "Testing",
+    prefix: "with ",
+    postfix: " ARCs",
+    dataUrl: URLS.S3_DATAHUB_STATS,
+    dataAccess: [["total", "internal"], ["total", "private"], ["total", "public"]],
+  },
+  {
+    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: '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 },
-  { 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 },
+  { 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
@@ -517,10 +542,9 @@ const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: num
           const { startX, startY, endX, endY, textX, textY } = calculatePositions(circle.cx, circle.cy, circle.r, circle.angle);
           const textAnchor = textX < circle.cx ? 'end' : 'start';
           const textAlignmentBaseLine = textY < circle.cy ? 'baseline' : 'hanging';
-          return (<a 
-            href={circle.href}
+          return (<g 
             style={`transform-origin: ${circle.cx}px ${circle.cy}px;`}
-            class="transition-transform duration-300 ease-in-out transform hover:scale-110 colored-drop-shadow cursor-pointer">
+            class="transition-transform duration-300 ease-in-out transform hover:scale-110 colored-drop-shadow">
             <circle 
               cx={circle.cx} 
               cy={circle.cy} 
@@ -540,14 +564,18 @@ const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: num
               y={textY} 
               text-anchor={textAnchor}
               alignment-baseline={textAlignmentBaseLine} 
-              class="fill-base-content cursor-pointer"
+              class="fill-base-content"
               font-size="100"
             >
-              {circle.text.split('\n').map((line) => {
-                return <tspan x={textX} dy="1.2em">{line}</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>
-          </a>)
+          </g>)
         })}<g
         transform="matrix(0.000360892 0 0 0.000360892 1894 754)"
         ><g

src/components/Home/DeveloperCards.astro

@@ -4,7 +4,7 @@ import Card from '../Card.astro'
 ---
 
 <section class="w-full flex justify-center">
-  <div class="md:px-20 md:py-10 w-full max-sm:p-3">
+  <div class="p-3 md:px-20 md:py-10 w-full max-sm:p-3">
 
     <div class="divider h-[unset] whitespace-normal">
       <h2 class="text-3xl font-bold tracking-wider p-5 uppercase">

src/components/Home/HeroText.astro

@@ -16,7 +16,7 @@ const mainHeroText = "The ARC is a framework for organizing and documenting rese
           <span class="text-accent">C</span>ontext 
         </div>
       </h1>
-      <p class="py-6 prose-lg" style="text-align:justify">
+      <p class="py-6 prose-lg xl:prose-xl" style="text-align:justify">
         {mainHeroText}
       </p>
     </div>

src/components/Home/RDMGraphNavigation.astro

@@ -7,7 +7,7 @@ const circles = [
   { id: 1, cx: 8, cy: 25, r: 5, href: URLS.INTERNAL_DEV_FDO, text: 'FAIR Digital Object', angle: 20 },
   { id: 2, cx: 30, cy: 40, r: 5, href: URLS.INTERNAL_DEV_VALIDATION, text: 'Validation', angle: 180 },
   { id: 3, cx: 60, cy: 8, r: 5, href: URLS.INTERNAL_DEV_ARC_DATA_HUB, text: 'ARC Data Hub', angle: 80 },
-  { id: 4, cx: 90, cy: 40, r: 5, href: '#', text: 'Versioning', angle: 250 },
+  { id: 4, cx: 90, cy: 40, r: 5, href: URLS.INTERNAL_DEV_VERSIONING, text: 'Versioning', angle: 250 },
   { id: 5, cx: 140, cy: 10, r: 5, href: URLS.INTERNAL_DEV_TOOLSTACK, text: 'Developer Toolstack', angle: 180 },
 ];
 ---

src/components/MeterUp.astro

@@ -1,9 +1,28 @@
 ---
 
-const { number, id, width } = Astro.props;
+const { number, id, width, dataUrl, dataAccess, isBytes, x, prefix, postfix } = Astro.props;
 
+---
+
+<script define:vars={{number, id, dataUrl, dataAccess, isBytes}}>
+
+function getNestedProperty(obj, path) {
+  return path.reduce((current, key) => {
+    if (current && typeof current === 'object' && key in current) {
+      return current[key];
+    }
+    return undefined; // Return undefined if the path is not valid
+  }, obj);
+}
 
-function createEaseOutArray(max: number, count = 20) {
+function createEaseOutArray(max0, count = 20) {
+    let max;
+    if (!isBytes) {
+        max = max0;
+    } else {
+        const divisor = 1e+9;
+        max = max0 / divisor; 
+    }
     const numbers = [];
 
     for (let i = 0; i < count; i++) {
@@ -23,12 +42,25 @@ function createEaseOutArray(max: number, count = 20) {
     return numbers;
 }
 
-const numberArray = createEaseOutArray(number, 15);
----
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
-<script define:vars={{numberArray, id}}>
+async function incrementNumberFromData(ele, url) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Response status: ${response.status}`);
+    }
 
-const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+    const json = await response.json();
+
+    const number = dataAccess.map((access) => getNestedProperty(json, access)).reduce((a, b) => a + b, 0);
+    const numberArray = createEaseOutArray(number, 15)
+
+    incrementNumber(ele, numberArray);
+  } catch (error) {
+    console.error(error.message);
+  }
+}
 
 // Function to update the innerHTML with the next number from easeOutArray
 async function incrementNumber(ele, numbers) {
@@ -41,11 +73,16 @@ async function incrementNumber(ele, numbers) {
 
 document.addEventListener("DOMContentLoaded", function () { 
   const ele = document.getElementById(id + "-number");
-  incrementNumber(ele, numberArray);
+  if (dataUrl && dataAccess) {
+    incrementNumberFromData(ele, dataUrl);
+  } else if (number) {
+    const numberArray = createEaseOutArray(number, 15);
+    incrementNumber(ele, numberArray);
+  }
 });
 
 </script>
 
-<span id={id} style={{width: (width || "auto")}} class="inline-block text-right">
-  <strong id={id + "-number"}>0</strong>
-</span>
+<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>