fix(site folder erased): Not recognized by Github pages

site/index.html → index.html

@@ -23,9 +23,8 @@ <h1>pNeuma RDI Hub Prototype</h1>
         <li><a href="https://github.com/sdsc-ordes/ordfts-hackathon-pneuma-rdi-hub">Github Repository</a></li>
     </ul>
 
-    <div class="dataset-container">
-        <!-- Datasets will be loaded here by JavaScript -->
-    </div>
+    <div class="sidebar"></div>
+    <div class="content-container"></div>
 
     <script src="script.js"></script>
 

index.json

@@ -0,0 +1,71 @@
+{
+    "index_timestamp": "2024-09-08 16:50:41.941809",
+    "catalog": {
+        "datasets": [
+            {
+                "schema_version": "1.0.0",
+                "schema_type": "dataset",
+                "dataset_id": "0001-pneuma-dataset",
+                "title": "pNEUMA Dataset",
+                "doi": "10.5281/zenodo.7426506",
+                "version": "v1",
+                "description": "pNEUMA is an open large-scale dataset of naturalistic trajectories of half a million vehicles that have been collected by a one-of-a-kind experiment by a swarm of drones in the congested downtown area of Athens, Greece.",
+                "created_at": "2022-12-08T16:26:11Z",
+                "updated_at": "2022-12-08T16:26:11Z",
+                "data_format": "zip",
+                "tags": [
+                    "traffic",
+                    "drone"
+                ],
+                "source": "Zenodo",
+                "authors": [
+                    {
+                        "name": "Kim, Sohyeong"
+                    },
+                    {
+                        "name": "Anagnostopoulos, Georg"
+                    },
+                    {
+                        "name": "Barmpounakis, Emmanouil"
+                    },
+                    {
+                        "name": "Geroliminis, Nikolas"
+                    }
+                ],
+                "license": "CC BY 4.0",
+                "access_url": "https://zenodo.org/record/7426506/",
+                "documentation_url": "https://zenodo.org/record/7426506"
+            },
+            {
+                "schema_version": "1.0.0",
+                "schema_type": "dataset",
+                "dataset_id": "0002-pneuma-vision-dataset",
+                "title": "pNEUMA vision dataset",
+                "doi": "10.5281/zenodo.10491409",
+                "version": "v1",
+                "description": "The pNEUMA dataset is the drone traffic imagery dataset that contains images of frame and vehicle annotations as positions. This dataset is the expansion of the pNEUMA, the urban trajectory dataset collected by swarms of drones in Athens. For more details about pNEUMA and pNEUMA Vision, please check our website at https://open-traffic.epfl.ch and github.",
+                "created_at": "2023-08-30T15:12:56Z",
+                "updated_at": "2023-08-30T15:12:56Z",
+                "data_format": "csv jpg",
+                "tags": [
+                    "traffic",
+                    "GNSS",
+                    "urban mobility",
+                    "traffic safety"
+                ],
+                "source": "Zenodo",
+                "authors": [
+                    {
+                        "name": "Barmpounakis, Emmanouil"
+                    },
+                    {
+                        "name": "Geroliminis, Nikolas"
+                    }
+                ],
+                "license": "CC BY 4.0",
+                "access_url": "https://zenodo.org/record/10491409",
+                "documentation_url": "https://zenodo.org/record/10491409"
+            }
+        ]
+    }
+}

script.js

@@ -0,0 +1,56 @@
+fetch('index.json')
+    .then(response => response.json())
+    .then(data => {
+        const sidebar = document.querySelector('.sidebar');
+        const container = document.querySelector('.content-container');
+
+        // Create tabs for each category in data.catalog
+        Object.keys(data.catalog).forEach(category => {
+            const tab = document.createElement('div');
+            tab.classList.add('tab');
+            tab.innerText = category.charAt(0).toUpperCase() + category.slice(1);
+            tab.dataset.category = category;
+            sidebar.appendChild(tab);
+        });
+
+        // Function to display content for a selected category
+        const displayContent = (category) => {
+            container.innerHTML = ''; // Clear previous content
+            data.catalog[category].forEach(item => {
+                const itemDiv = document.createElement('div');
+                itemDiv.classList.add('item');
+                itemDiv.innerHTML = `
+                    <h2>${item.title}</h2>
+                    <p><strong>DOI:</strong> ${item.doi}</p>
+                    <p>${item.description}</p>
+                    <p><strong>Created At:</strong> ${item.created_at}</p>
+                    <p><strong>Updated At:</strong> ${item.updated_at}</p>
+                    <p><strong>Format:</strong> ${item.data_format}</p>
+                    <p><strong>Size:</strong> ${item.size_in_mb} MB</p>
+                    <p><strong>Tags:</strong> ${item.tags.join(', ')}</p>
+                    <p><strong>Source:</strong> ${item.source}</p>
+                    <p><strong>Authors:</strong> ${item.authors.name} (ORCID: ${item.authors.orcid})</p>
+                    <p><strong>License:</strong> ${item.license}</p>
+                    <a href="${item.access_url}" class="button">Access ${category.charAt(0).toUpperCase() + category.slice(1)}</a>
+                    <a href="${item.documentation_url}" class="button button-secondary">View Documentation</a>
+                `;
+                container.appendChild(itemDiv);
+            });
+        };
+
+        // Add event listeners to tabs
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+                displayContent(tab.dataset.category);
+            });
+        });
+
+        // Display the first category by default
+        const firstCategory = Object.keys(data.catalog)[0];
+        document.querySelector(`.tab[data-category="${firstCategory}"]`).classList.add('active');
+        displayContent(firstCategory);
+    })
+    .catch(error => console.error('Error loading data:', error));
+

site/styles.css → styles.css

@@ -40,6 +40,34 @@ p {
     margin: 5px 0;
 }
 
+.sidebar {
+    width: 200px;
+    float: left;
+    background-color: #f4f4f4;
+    padding: 10px;
+}
+
+.tab {
+    padding: 10px;
+    cursor: pointer;
+}
+
+.tab.active {
+    background-color: #ddd;
+}
+
+.content-container {
+    margin-left: 220px;
+    padding: 10px;
+}
+
+.item {
+    margin-bottom: 20px;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    padding: 15px;
+}
+
 .button {
     display: inline-block;
     padding: 10px 15px;